I am using jquery prettyPopin in one of my projects and it is working fine ... Problem is i want it to work on the php page loaded using ajax. But it does not seem to work ...

My question in short is whether a jQuery plugin works in a ajax-loaded page as it does on the parent page? To make it clear my JS libraries are added in the parent page. No libraries are added in the loading script.

Do the jQuery plugins work on the ajax pages ? Also, i do not want to include js libraries in ajax page.

Any help is wele ... Thanx in advance ...

I am using jquery prettyPopin in one of my projects and it is working fine ... Problem is i want it to work on the php page loaded using ajax. But it does not seem to work ...

My question in short is whether a jQuery plugin works in a ajax-loaded page as it does on the parent page? To make it clear my JS libraries are added in the parent page. No libraries are added in the loading script.

Do the jQuery plugins work on the ajax pages ? Also, i do not want to include js libraries in ajax page.

Any help is wele ... Thanx in advance ...

• php
• javascript
• jquery
• ajax

5 Answers 5

any jquery plugin will work in ajax loaded pages as well. but if you are trying to call it in ajax loaded page, you need to call plugin after ajax pleted.

Yes it does work, but you have to initialize any plugins after the page has been loaded. Example when using .load():

$("#page").load("/page.php", function(response, status, xhr) {
    $('#selector-on-loaded-page').plugin();
});

You just have to include the plugin as usual on the main page.

There may be a jQuery conflict you can use your code like this

var $jq = jQuery.NoConflict();
$jq("#page").load("/page.php", function(response, status, xhr) {
    $jq('#selector-on-loaded-page').plugin();
});

It should work because the included js can be used on the loaded DOM and the included js.

Yet, it depends on how the plugin works and how you are calling it. For instance, it will likely not work if it gets dynamically applied onload or if you tried to wrap it inside your $(document).ready() of your main code.

[EDIT] According to the doc of the plugin:

Don't forget to apply the plugin again for instance, you have to put:

$("a[rel^='prettyPopin']").prettyPopin();

in the callback of your .load() statement.

So lets say you are using the plugin "foo" this way :

$(".something").foo();

in the end of the ajax request (once you get the data back from php and create the new elements) re-write the same line $(".something").foo();

another way would be to figure out how to integrate live in the way you use the plugin