3

I know that .append() does not have any callback function, but when I try to do this:

$.onShadowboxFinished = function (f) {

var postid = $(f.link).parent().attr("id");
var loadUrl = "wp-admin/admin-ajax.php?action=mfields_show_post&p=" + postid;
$('#infos_wrap').load(loadUrl).append();
alert("loaded! test selector :"+$('a.projectimgs').first().attr("href"));

}

I am loading content ( links and images ) into the div #infos_wrap. Once all links and images are loaded, I want to manipulate content ( example : Select the links to add them to the shadowbox cache )

For now, the 4th line is executed before the 3th.

Thanks for your help !

PS : If someone want really to help ( i'd appreciate it ^^ )
You can check the site : http://www.tom-portfolio.fr/wp-login.php
login: visitor
pass: visitor
The javascript file is portfolio.js
Use your firebug or GoogleDev tools to view it!
Thanks a lot !

KouiK
  • 116
  • 2
  • 9

1 Answers1

2

What you want to do is use the callback function for the .load() function because it is asynchronous (meaning the code after it keeps executing until it recieves a response and fires its callback function):

var postid  = $(f.link).parent()[0].id,
    loadUrl = "wp-admin/admin-ajax.php?action=mfields_show_post&p=" + postid;

$('#infos_wrap').load(loadUrl, function () {
    alert("loaded! test selector :"+$('a.projectimgs').first()[0].href);
});

Note that .load() will replace the contents of #infos_wrap with the response from the AJAX call (#infos_wrap in this case) so we don't have to use .append() (internally .html() is used which replaces the HTML of the selected element(s) rather than appending the response).

Also note that I changed a couple instances of .attr() where it wasn't needed.

Documentation for .load(): http://api.jquery.com/load

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • Thx for your answer ! But, i should precise that the links `a.projectimgs` are loaded via ajax. – KouiK Dec 06 '11 at 21:12
  • `$('a.projectimgs').attr("href")` is still undefined : the alert appear before the content is loaded into the div – KouiK Dec 06 '11 at 21:13
  • @KouiK Make sure that the `` tags have `href` attributes or selecting them will return nothing. Since we are using the callback function for `.load()`, the content **will** be there, we probably just aren't selecting it properly. Here is an example of my code working: http://apexeleven.com/stackoverflow/jquery.load/ – Jasper Dec 06 '11 at 21:19
  • Of course my links have an href attribute. But i got the following error, on the 'alert' line : Uncaught TypeError: `Cannot call method 'first' of null` : It means that the selector scan the DOM before the loaded content is appended to it ... How to make sure the alert execute only when the content has been loaded to the div ? I'll check your link. thanks – KouiK Dec 06 '11 at 21:22
  • @KouiK You are too quick to assume the response from the server isn't loaded into the DOM when the callback function fires. Log just the jQuery selector inside the callback function: `console.log($('a.projectimgs'));` – Jasper Dec 06 '11 at 21:27
  • Could you pls help me by checking my website ? i'd really appreciate that : [here](http://www.tom-portfolio.fr/wp-login.php) , enter login: visitor, pass:visitor. Click login, and then click the link on the top page _slashcreations_, to access my home page. Then click on **portfolio**, and click on the thumbnail called **sales gueules**. U will see that shadowbox will load. My function is included in a **shadow box callback function**. – KouiK Dec 06 '11 at 22:16
  • And on the left sidebar, there is a **panel, loaded via ajax**, including some thumbnails, which i want to setup for shadow box. Please, check the file portfolio.js, and search for the line including : **load(** : It's where i have an error i guess :( – KouiK Dec 06 '11 at 22:16
  • I'd reaally appreciate if you can take a look at this. I spent 2 full days on this load callback bug :'( Thanks a lot! – KouiK Dec 06 '11 at 22:26
  • @KouiK It seems like in all the JavaScript files you are including, you have a conflict with using `$` to access the jQuery object. Try changing all the `$` symbols associated with your jQuery script to `jQuery`. An example: change `$(window).width();` to `jQuery(window).width();`. This seemed to work using FireBug's console. There is `$.noConflict()` but I can't give much advice on it since I've never used it: http://api.jquery.com/jquery.noconflict – Jasper Dec 06 '11 at 22:56
  • Doh ! You were right :) It'sw orking now :) ... But i still need to find how to recache shadowbox images after an ajax call .. But this seems to be another problem ^^ I'll ask on the appopriate forum. Thanks for your help. Bye – KouiK Dec 07 '11 at 01:48