Pull GetOption() variable into jQuery dynamically created html

Question

I have a page with the following markup in the site theme footer:

<div id="modalpopup"><div id="inside"></div></div>

I have a variable in the WP db I can retrieve via GetOption() which I would like to stuff into that div#inside on page load via jQuery.

When I've done AJAX before it's always been upon the user hitting a button to cause a POST, but this is a bit different so I'm kinda stuck.

I need to retrieve that variable from the db, send it to the jQuery function and then have the HTML generated rendered all -before- the page loads.

Ideas?

Answer 1

You would still do this with AJAX, except that instead of firing on some event like a 'click', or 'hover', or submit, you would fire the Javascript function on jQuery(document).ready instead. That will execute immediately on page load. It doesn't let you execute the code before the page loads as your question states but you can't run Javascript before the page loads. Javascript runs client-side, in the browser. The page has to load in order for that to happen.

Answer 2

Two possible solutions here-

Solution one is to not hardcode the modal markup into the template and instead use the wp_footer action to insert it, along with your data:

function wpa_wp_footer(){
    $someval = 'foo'; // get_option results
    echo '<div id="modalpopup"><div id="inside">' . $someval . '</div></div>';
}
add_action( 'wp_footer', 'wpa_wp_footer' );

Personally, I would do it this way, as simple as it gets, keeps it theme-agnostic.

Solution two is more in line with your original idea, and gets the data to javascript so you can insert it yourself. But instead of making a separate request for the data via ajax, localize the script to have the data printed to the page when it's rendered.

Here's your standard enqueue for adding javascript to a theme, along with the localize call to add extra data.

function wpa_scripts() {
    wp_enqueue_script(
        'wpa_script', // script handle
        get_template_directory_uri() . '/js/script.js',
        array('jquery'),
        null,
        true
    );
    // do your get_option here to set whatever data you're passing
    $script_data = array(
        'some_var' => 'someval'
    );
    wp_localize_script(
        'wpa_script', // the script handle enqueued above
        'wpa_data',
        $script_data
    );
}
add_action( 'wp_enqueue_scripts', 'wpa_scripts' );

Then in your javascript, access the data like:

jQuery('#inside').html( wpa_data.some_var );