Thanks Remi for parsing out the related code and explaining it all. It actually
makes perfect sense, and I understand most of it, but I don't see why my site
appears to be replacing the <UL> not just the ... wait a minute... I think it
just clicked!
My 'page' is:
<div id="players" title="Players" class="panel">
<h2>Confirmed Players</h2>
<ul>
<li>...</li>
...
</ul>
...
<ul><li><a target="_replace" href="getPendingFrag.php">Show Pending
Players</a></li></ul>
<ul><li><a target="_replace" href="getCancelledFrag.php">Show Cancelled
Players</a></li></ul>
</div>
Therefore the function steps back to the <div> as 'page' and the <ul> as the
'parent'. It deletes the entire <ul> and then adds the frag... Which explains
why I had to add <ul> tags to my frags.
So if I understand it correctly now, it "replaces" an immediate child element
of the page element regardless if that element is the immediate parent of the
link. What I was expecting was that it would always "replace" the immediate
parent of the link... which would make more sense to me... but maybe there is
rational I don't know about as to why it is the way it is.
Thanks again for providing the insight.
Jeff
On Monday, February 25, 2013 4:15:00 AM UTC-7, Remi Grumeau wrote:
> Hi Jeff,
> Yes, it is misleading…
>
>
> Let's dig inside the all process!
>
>
> First, the on click event, which detects if the target="_replace" exists
> (line 612)
>
>
> if (link.target == "_replace")
> {
> followAjax(link, link);
> }
>
>
> Then it goes to (line 685)
>
>
> function followAjax(link, replaceLink)
> {
> link.setAttribute("selected", "progress");
> iui.showPageByHref(link.href, null, "GET", replaceLink, function() {
> link.removeAttribute("selected"); });
> }
>
>
> So as you can see, when it goes to followAjax, link & replaceLink are the
> exact same.
> (if no target set, it loads followAjax(link, null); so there is a difference
> between a replace call or not)
>
>
> inside iui.showPageByHref (line 261)
>
>
> if (replace)
> {
> replaceElementWithFrag(replace, frag);
> iui.busy = false;
> }
> else
> {
> iui.insertPages(frag);
> }
>
>
> This is where the difference is done (but in both case an ajax call is done
> on the HREF value).
> in followAjax, we send replaceLink which is known as replace in here.
> frag is what the Ajax call returns.
>
>
> Then in replaceElementWithFrag (line 1020)
>
>
> function replaceElementWithFrag(replace, frag)
> {
> var page = replace.parentNode;
> var parent = replace;
> while (page.parentNode != document.body)
> {
> page = page.parentNode;
> parent = parent.parentNode;
> }
> page.removeChild(parent);
>
>
> var docNode;
> while (frag.firstChild) {
> docNode = page.appendChild(frag.firstChild);
> sendEvent("iui.afterinsert", document.body,
> {insertedNode:docNode});
> }
> sendEvent("iui.afterinsertend", document.body, {fragment:frag})
> }
>
>
>
>
> var page = replace.parentNode;
> var parent = replace;
>
>
> First line, a "page" variable is set using the parent node of the "replace"
> target. "replace" is the <a> element so its parent is the <li>.
> Second line, "parent" equals the <a> element.
> That's what is misleading, but we have no choice. Otherwise the fragment
> would replace the <a> element inside the <li>, which wouldn't serve any
> purpose. That's why it goes to the parentNode, which should be the <li>
> element if properly used inside a ul / li list.
>
>
> while (page.parentNode != document.body)
> {
> page = page.parentNode;
> parent = parent.parentNode;
> }
>
>
> The while loop goes back in parent nodes down to the body child node (aka the
> page).
>
>
> So if your page is
> <body>
> …
> <ul id="my page" title="My Page">
> <li><a href="#page1">Link 1</a></li>
> <li><a href="#page2">Link 2</a></li>
> <li><a href="myfrag.html" target="_replace">Load more</a></li>
> </ul>
> …
> </body>
>
>
> Since there is only one node step between the <li> ("page variable") and the
> UL that creates your page, this while loop will only execute once.
> So the variable "page" is now the UL DOM element, "parent" is the <li>
> element.
>
>
> page.removeChild(parent);
>
>
> The LI element containing the clicked <a> is removed from the UL
>
>
> var docNode;
> while (frag.firstChild) {
> docNode = page.appendChild(frag.firstChild);
> sendEvent("iui.afterinsert", document.body, {insertedNode:docNode});
> }
>
>
> This parses the fragment returned by the Ajax call and adds each first level
> Node into the "page" node.
> So here, it adds each first level Node inside the UL (and send a callback
> event "afterinsert" with the inserted fragment each time)
> Which means your fragment HTML should contains LI elements.
>
>
> <li><a href="#page3">Added link to page 3</a></li>
> <li><a href="#page4">Added link to page 4</a></li>
> <li><a href="myfrag2.html" target="_replace">Load more again</a></li>
>
>
>
>
> Note that it does not replace the LI but remove the LI, then adds the Ajax
> content to the list. Since the clicked link is the last element of the UL, it
> feels like it has been replaced. But it's not. And this is misleading, i'm
> agree.
>
>
> Note also that since the LI element containing the "load more" link is
> removed, you have to add it too inside the fragment if you need to add some
> more again.
>
>
>
>
>
>
> Hope this helps!
>
>
> Remi
>
>
>
>
>
> Le 25 févr. 2013 à 10:51, "Jeff (iUI Noob)" <[email protected]> a écrit :
> I'm a little bit confused on how this works. I understand that iUI will do an
> AJAX call, but...
> The Documentation says that iUI will "replace the panel that the link is in"
> but somewhere in here Remi states that it will "replace the contents of the
> element the link is in" (or something like that,) and the example in the
> link-types.html file replaces a <li> element with a series of <li> elements
> in the frag file. Maybe I'm misunderstanding what is meant by "panel" in the
> docs but that was just the start of my confusion.
> Now, when I attempted to use the attribute, within a panel class div, I
> created an unordered list containing a single list item, the link, and a
> frag.php file that created several list items. When I touched the link, it
> did replace the link with the output of the frag file, but the output had no
> style. Adding a <ul>...</ul> to the file output solved the problem. So it's
> working, but why did I need to add the unordered list tags to the Frag? Is it
> because the process 'steps' back to them because they have no other content?
>
> --
> You received this message because you are subscribed to the Google Groups
> "iPhoneWebDev" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
> For more options, visit https://groups.google.com/groups/opt_out.
--
You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
