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)" <fjr...@gmail.com> 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 iphonewebdev+unsubscr...@googlegroups.com.
> To post to this group, send email to iphonewebdev@googlegroups.com.
> 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 iphonewebdev+unsubscr...@googlegroups.com.
To post to this group, send email to iphonewebdev@googlegroups.com.
Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
