logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$20
Make AJAX theme work with plugins

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!

Andreu Llos | 08/03/12 at 9:54am Edit
Tutorial: How to assign prize money


(5) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    08/03/12
    10:13am
    Martin Pham says:

    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:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script
    http://codex.wordpress.org/Function_Reference/wp_register_script

    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);
    });

  • avatar
    Last edited:
    08/03/12
    10:51am
    Jatin Soni says:

    Check your jquery is coded with jquery no-conflict

    • 08/03/12 10:58am

      Andreu Llos says:

      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.

  • avatar
    Last edited:
    08/03/12
    11:42am
    Arnav Joy says:

    please have a look in this article

    http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/

    • 08/03/12 12:14pm

      Andreu Llos says:

      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?

  • avatar
    Last edited:
    08/03/12
    12:07pm
    LatinUnit says:

    Can you please post a link to your website

    • 08/03/12 12:16pm

      Andreu Llos says:

      Of course, here you have http://plantillastico.com/folio-two-wordpress-edition/

  • avatar
    Last edited:
    08/06/12
    6:09am
    Christianto says:

    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(History.getState().url+' .item-wrapper', function(response, status, xhr){
    // your code..
    })


    When using ajax.load with selector expression (History.getState().url+' .item-wrapper'), all js files are removed so it won't be execute

    you can read the explanation in jQuery.load doc on Script Execution section
    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


    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 jQuery.contents(), and delete it if not needed..

    Hope this help..

    Previous versions of this answer: 08/06/12 at 6:05am | 08/06/12 at 6:07am | 08/06/12 at 6:09am

This question has expired.





Current status of this question: Community pot



Please log in to add additional discourse to this page.





Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.