Call async request to load info

1 Views

In my wordpress theme, I am using api to load movie info. So, I am trying to call jquery function which will execute ajax request and load the result in a predefined DIV.

But at the time I am calling that function in my content.php page, the document.ready is not yet fulfilled. So, either I need to define the jquery function outside document.ready() (which I think is not a good idea), or I need to call that function on bodyOnload. In the latter case, I am not sure how I can include the urls which are parsed using the get_the_content() function of wordpress from page content.

Read More

Can anybody please advise.

PHP (content.php): 

$pattern = '/REGEX/i';
$replacement = '$1';
$subject = get_the_content();
$urls = preg_split($pattern, $subject); // Let say I have all the links in this variable
echo '<script>loadMovies('.json_encode($urls).');</script>'; // loadMovies() is not available at this point

Now loadMovies() is defined inside custom.js like below 

jQuery(document).ready(function () {
    "use strict";
    function loadMovies(urls){
        console.log(urls);
        // HERE I HAVE MY AJAX CALLS WHICH IS NOT AN ISSUE
        // THE MAIN ISSUE IS THE FUNCTION IS NOT AVAILABLE AT THE POINT I CALL IT
    }
});

And custom.js is added using below in functions.php 

function test_call_js(){
    wp_enqueue_script(
        'custom-js',
        get_stylesheet_directory_uri() . '/js/custom.js',
        array( 'jquery' )
    ); 
}

add_action('wp_enqueue_scripts', 'test_call_js');
Post Views: 1

Related posts

2 comments

  1. You are having a scope issue. You are declaring the function inside another function, which means it won’t be visible from the global scope when you add your script. You need to move the function that’ll be called from your other script in the global scope.

    AJAX call can still be placed at the ready event, so it will load the script once the DOM is ready.

  2. Like minus 4 stated, its a timing issue. You are calling a function which is only created on dom ready. The solution is to call the ajax function on dom ready and just output the variable you need for this function earlier in the script (where you were calling the ajax function)

    i.e. content.php

        $urls = preg_split($pattern, $subject); // Let say I have all the links in this variable
    echo '<script> var urls='.json_encode($urls).';</script>';

    Note all you are doing is defining urls here, this is bad mark up but it needs to be here as you are using the_content() which needs to be run inside the wp loop.

    in your js file

        function loadMovies(urls){
        console.log(urls);
        // define our function.
    }

    jQuery(document).ready(function () {

        loadMovies(urls){
            console.log(urls);
            // call our predefined function
        }
    });

    you can still define your function in your document.ready function but its cleaner to create functions and then call within other functions (in the case above its a anon function)

Comments are closed.