josi josi - 4 months ago 30
jQuery Question

Wordpress ajax database calls

I am struggling with getting ajax to work, if someone can guide me, it'd be greatly appreciated.

I am building this as a plugin.

I have a file named courselinkscript.js and contains this

jQuery(document).ready(function($){

jQuery(".courselist").change(function () {

jQuery.ajax({
type:"POST",
url: my_ajax_object.ajax_url,
data: { 'action': 'getLinkedCourses' }
//where/what do I put here to work with the data I received.
})


});
});


Then in my main php file named course-listing.php I have this

function getLinkedCourses() {
global $wpdb;
$results = $wpdb->get_results( 'SELECT list.ID, list.course, list.cost, list.length, link.CourseID FROM `wp_course_list` AS list INNER JOIN `wp_course_link` as link ON (list.ID=link.LinkID) WHERE link.CourseID = 1', OBJECT );
echo json_encode($results);

wp_die();

}


function wpb_adding_scripts() {
wp_register_script('courselinkscript', plugins_url('courselinkscript.js', __FILE__), array('jquery'),'1.0', true);
wp_enqueue_script('courselinkscript');
wp_localize_script( 'courselinkscript', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

add_action( 'wp_ajax_my_list', 'getLinkedCourses' );

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );


My calls to ajax don't work as I don't understand what needs to be done to initalise it. Any help is appreciated.

Answer

Use the below mentioned code. It should work.

function getLinkedCourses() {
   global $wpdb;
   $results = $wpdb->get_results( 'SELECT list.ID, list.course, list.cost, list.length, link.CourseID FROM `wp_course_list` AS list INNER JOIN `wp_course_link` as link ON (list.ID=link.LinkID) WHERE link.CourseID = 1', OBJECT );
   echo json_encode($results);

  wp_die();

}


function wpb_adding_scripts() {
   wp_register_script('courselinkscript', plugins_url('courselinkscript.js', __FILE__), array('jquery'),'1.0', true);
   wp_enqueue_script('courselinkscript');
   wp_localize_script( 'courselinkscript', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

add_action( 'wp_ajax_getLinkedCourses', 'getLinkedCourses' );
add_action( 'wp_ajax_nopriv_getLinkedCourses', 'getLinkedCourses' );
// add_action( 'wp_ajax_my_list', 'getLinkedCourses' );

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

Replace your javascript with the below code:

 jQuery(document).ready(function($){

   jQuery(".courselist").change(function () {

      jQuery.ajax({
         type:"POST",
         url: my_ajax_object.ajax_url,
         data: { 'action': 'getLinkedCourses' },
         //where/what do I put here to work with the data I received.
         success: function(data) {
             var obj = jQuery.parseJSON(data);
             console.log(obj);
         },
      });

   });
});