Question

Hope someone can help me.

I have used the following tutorial as a guide to running ajax in wordpress http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/

I have the following code in my functions.php file

wp_enqueue_script( 'my-ajax-request','/wp-content/themes/son-of-suffusion/js/ajax.js', array( 'jquery' ) ); 
// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); 


/*AJAX STUFF*/

// this hook is fired if the current viewer is not logged in
do_action( 'wp_ajax_nopriv_' . $_REQUEST['action'] );
 // if logged in:
do_action( 'wp_ajax_' . $_POST['action'] );


// if both logged in and not logged in users can send this AJAX request,
// add both of these actions, otherwise add only the appropriate one
add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );
add_action( 'wp_ajax_myajax-submit', 'myajax_submit' ); 

function myajax_submit() {   

    echo 'ajax submitted';    

    die;

    // IMPORTANT: don't forget to "exit"  
    exit;

}

and this code in my ajax.js file

// JavaScript Document

jQuery(function($){
   $(".selected").click(function () {

      alert("jQuery is working");
      $.post(MyAjax.ajaxurl, {
    action: 'myajax-submit',
      postID : MyAjax.postID

  }, function(response) {

     $("#content").html("loading...");
     $("#content").html(response);      


    });

     });


})

The jQuery alert is displaying, but the ajax code is not working and the full page refreshes. Am I doing something wrong? There are no errors in my js code, when I use Firebug.

Thank you in advance

Answer 1

In your click function, pass an event like below.And add

ev.preventDefault

$(".selected").click(function (ev) {

  //prevents default action of the element
  ev.preventDefault();
  alert("jQuery is working");
  $.post(MyAjax.ajaxurl, {
  action: 'myajax-submit',
  postID : MyAjax.postID

  }, function(response) {

 $("#content").html("loading...");
 $("#content").html(response);      


});

 });