Hello!
I am trying to create portlets that dynamically load their content (usinq
jQuery).
My first approach was to leave the header + footer + decorations of the
portlet OUTSIDE of the dynamically loadable content. It worked just fine but
I had to abandon that approach so that I could use the same code both for
statically- and dynamically-loaded content (e.g. when no AJAX support was
available). So far so good.
Now to my problem:
I use the following code for loading my dynamic content
1 function reload(id, uri) {
2 var tag = "#"+id;
3 $svjq(tag).text("");
4 $svjq(tag).load(uri, function(data) {
5 // debug ouotput of the loaded data
6 console.log("Data: \n"+data);
7
8 // PROBLEM ARISES HERE!
9 });
10 $svjq(tag).find("XXX")...// OR HERE!
11 }
The loading works fine, but after the dynamic content has been loaded I can
not seem to get access to it using jQuery!
Short description:
Line 3 clears the content (I know! There are better solutions!)
Line 4 loads the content
Line 6 dumps the data on the console; this is for debuging only, so that I
can establish that the correct content is loaded
After the data is properly loaded I did expect to be able to find it by
traversing the DOM tree in traditional jQuery fashion (like in Line 10).
However, dumping the contents of the 'tag' shows it containing no content at
all; it is empty even though the browser renders the expected new result. I
thought: "Oh, Well! The browser holds two copies of the DOM tree; one that
is the original page and one that is the modified content used for
rendering". Therefore I attempted to manipulate the loaded content within
the function (Line 8). The content is visible there, that I have established
in Line 6. But I do not know how to access it jQuery-style.
Does anyone have any suggestions?
(Why am I trying to modify the loaded content? I want to inject a title row
with various decorations and clickable content.)
