Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
If you need this to load before the page loads, why do you need to do this with jQuery? Why not do it with PHP? –  s_ha_dum May 6 '13 at 19:02
    
Because the code I posted is built into the theme and is used all over the place for various popups. The idea is that 'modalpopup' is available for every page to use as a container for modal popup windows. –  jchwebdev May 6 '13 at 19:06
    
The short answer is that 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. There is information missing from this question and it is beginning to look like a pure Javascript question which would be off-topic per the faq. Please try to clarify. –  s_ha_dum May 6 '13 at 19:22
    
It's not a 'pure javascript question'. The page loads with the skeletion markup I indicated. And then -somehow- I want to dynamically grab a value from the WP theme option (which I assume is PHP) and -then- pass that string off to a jQuery function to stuff it into the #inside div. If there were a form and button involved I'd know what to do with AJAX. I want to know how to trigger that behaviour -without- a form... just on page load. –  jchwebdev May 6 '13 at 19:46
    
You still do it with AJAX, which you claim to know how to do, you just fire the function on jQuery(document).ready instead of on submit or on click... –  s_ha_dum May 6 '13 at 19:56

2 Answers 2

up vote 1 down vote accepted

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.

share|improve this answer

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 );
share|improve this answer
    
I have to do some investigating, but wp_localize_script looks -real- promising. Thanks for the example! I got my AJAX solution working in about 10 minutes, but this looks more intuitive. I can't use your 1st solution as there is too much 'stuff' that happens on virtually every page with js and those divs. –  jchwebdev May 7 '13 at 4:40

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.