0

I would like to make an Ajax call within a JS which I do not wish to enqueue for the whole website.

To do that, I put the script directly at the end of the post for which it is relevant rather than adding wp_enqueue_script().

It works fine so far but I need to add an Ajax call in the script and this does not seem to work as I do not know how to set the wp_localize_script() command in that context.

The expected result is an alert displaying 1 when the button is clicked.

The post is:

<button id="button">
Click me!</button><script type="text/javascript" src="../script.js"></script>

The js file is something like:

jQuery(document).ready(function($){
var s=1;

$('button').on('click',function() {
    //wfire the ajax call
 jQuery.ajax({
    url : postbutton.ajax_url,
    type : 'post',
    data : {
        //name of the function defined in the main plugin php file
        action : 'function',
        data : s
    },
    success : function( response ) {
        alert(response);
            }
      }); 
    });
  });

And the PHP is the following:

add_action('wp_ajax_function','function);
add_action( 'wp_enqueue_scripts', 'function_enqueue_scripts' );
function function_enqueue_scripts() {
//I would not like to enqueue js script since I appended it directly in the post
//wp_enqueue_script( 'ff', '../script.js', array('jquery'), '1.0', true );
    wp_localize_script( 'ff', 'postbutton', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
    ));
};

function function() {
$s=$_REQUEST['s'];
return $s;
}
0
3

If you add the script inline you don't need to use wp_localize_script. All you have to do is directly print your inline script exactly as you need it dinamically.

For example, in your template:

<?php
   // The PHP code of the template here
?>
<script>
jQuery(document).ready(function($){
  var s=1;

  $('button').on('click',function() {
    //wfire the ajax call
   jQuery.ajax({
     url : postbutton.ajax_url,
     type : 'post',
     data : {
        //name of the function defined in the main plugin php file
        action : 'function',
        ajax_url : <?php echo esc_js( admin_url( 'admin-ajax.php' ) ); ?>;
     },
     success : function( response ) {
        alert(response);
     }); 
  });
});
</script>
<?php
    // PHP code of the rest of the template
?>

Anyway you are doing it wrong. If you print inline scripts directly, you can not use the power of WordPress dependencies manager and you can end up with lot of problems. For example, if you decide to move jQuery to the footer, your inline JavaScript, which depends on jQuery, will stop working. Another example is the imposibility of localize the script because it has not an associate handle.

So, if your script depends on another, ALWAYS use WordPress dependencies manager.

And you can enqueue the scripts only in single posts, that is not a problem:

add_action( 'wp_enqueue_scripts', 'function_enqueue_scripts' );
function function_enqueue_scripts() {
    if( is_singular( 'post' ) {
        // Enqueue my script that depends on jQuery
        // only in single post view
        wp_enqueue_script( 'my-script', get_template_directory_uri() . '/script.js', array('jquery'), '1.0', true );
    }
}

Since the upcoming WordPress 4.5 you can print inline scritps with dependencies using the new function wp_add_inline_script(). Until then, I repeat, never print scripts that depends on another or you can not manage the dependencies, including localization.

1
  • Dear Cybmeta,Thanks a million. Not only does it work but I now will be able to customize my scripts loading for all my posts. – Norader Mar 18 '16 at 13:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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