Make AJAX theme work with plugins WordPress
Hi!
I'm developing a theme that loads all the page and post content with AJAX so the page doesn't reload.
All the theme is working fine, but when I try to run a plugin that use javascript, it doesn't load it's javascript inside the ajax content, it only loads javascript on homepage. This means that the theme is not compatible with any plugin that uses javascript.
Do you know any filter, function or anything to load javascript of third-hand plugins when I load a page with AJAX?
I tried to copy the plugin javascript inside my jQuery AJAX function and it works fine, but I don't want people to do that every time they install a plugin...
Thanks in advance!
Answers (5)
Martin Pham answers:
try this function for wordpress load script
add_action('wp_enqueue_scripts', 'load_scripts_method');
function load_scripts_method() {
wp_enqueue_script( 'customscript', 'custom-script-path', array( 'jquery' ));
}
Readmore:
[[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script"]]http://codex.wordpress.org/Function_Reference/wp_enqueue_script[[/LINK]]
[[LINK href="http://codex.wordpress.org/Function_Reference/wp_register_script"]]http://codex.wordpress.org/Function_Reference/wp_register_script[[/LINK]]
OR using lazyload script (call back)
function lazyscript(url,success){
var script=document.createElement("script");
script.src=url;
var head=document.getElementsByTagName("head")[0],
done=false;
script.onload=script.onreadystatechange = function(){
if ( !done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") ) {
done=true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}
// example
getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){
var m = document.createElement("script");
m.src = 'child-jquery-plugin';
document.body.appendChild(m);
});
Jatin Soni answers:
Check your jquery is coded with jquery no-conflict
Andreu Llos comments:
As my explanation says, I guess that there isn't any jQuery Conflict. jQuery is not running when I load a page with AJAX because it was already loaded previously on homepage.
Arnav Joy answers:
please have a look in this article
http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/
Andreu Llos comments:
Thank you. I already know this article and sometimes I have used the admin-ajax.php, but in this case, the problem is that the theme is an adaptation of a html and it loads the URL using a $.load('url'). I'm not using admin-ajax.php here and neither the corresponding ajax wordpress actions. Is this a problem?
Plugarized answers:
Can you please post a link to your website
Andreu Llos comments:
Of course, here you have http://plantillastico.com/folio-two-wordpress-edition/
Christianto answers:
Hi,
I check your site and found out that you are using .load with selector expression to get the content.
( I hope is not wrong code to load the content :D )
$mainContent.load(<strong>History.getState().url+' .item-wrapper'</strong>, function(response, status, xhr){
// your code..
})
When using ajax.load with selector expression (<strong>History.getState().url+' .item-wrapper'</strong>), all js files are removed so it won't be execute
you can read the explanation in [[LINK href="http://api.jquery.com/load/"]]jQuery.load doc on Script Execution section[[/LINK]]
<blockquote>If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed</blockquote>
If you need to execute all js in the target page, You can use .load function without selector,
or could be by creating temporary iframe that is attach to dom but hidden, so you can access part of the page with [[LINK href="http://api.jquery.com/contents/"]]jQuery.contents()[[/LINK]], and delete it if not needed..
Hope this help..