Admin-Ajax call not working to implement star rating

Question

I am trying to implement a star rating in wordpress backend. i have succeded in implementing the system.now am trying to add the star rating to database while the stars are clicked using admin-ajax.

this is my html:

<li name="star" value="one" onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onclick="addRating(this);">

on mouse click it calls addrating function where i have written my ajax, this is my ajax code:

function addRating(obj) {
    $('ul.rating li').each(function(index) {alert("hello");
        $(this).addClass('selected');
        var rate=$('#rating').val((index+1));
        var postid=$(this).data('postid');
        if(index == $("ul.rating li").index(obj)) {
            return false;   
        }
        $.ajax({ url:"<?php echo site_url().'/wp-content/themes/options-framework-theme-master/register_ajax.php';?>",
                type:'post',
                data:{
                postid:'postid',
                rate:'rate'},
                success: function(result){
                    alert(result);
                }
            }
            });
    });
}

and this where the ajax call goes:

<?php 

    $id = $post['postid'];

    update_post_meta($post_id,'starrating',$_POST['rating']);    


 ?>

Ma issue is tht while clicking on the stars no ajax call is going.please help me , am kinda new in ajax.

Answer 1

To add ajax to wordpress, you can follow these steps:

Step 1 : frontend (php file) the look

 <li name="star" value="one" 
                            onmouseover="highlightStar(this);" 
                            onmouseout="removeHighlight();" 
                            onclick="addRating(this);">

Step 2: In the javascript (validation and ajax call):

function addRating(obj) {
    $('ul.rating li').each(function(index) {alert("hello");
        $(this).addClass('selected');
        var rate=$('#rating').val((index+1));
        var postid=$(this).data('postid');
        if(index == $("ul.rating li").index(obj)) {
            return false;   
        }
        var url = "/wp-admin/admin-ajax.php";
        $.ajax({ url:url,
                type:'post',
                data:{
                postid:'postid',
                rate:'rate'},
                success: function(result){
                    alert(result);
                }
            }
            });
    });
}

Step 3 : hook An example :

add_action('wp_ajax_my_function_name', 'my_function_name');// for those connected to your app
add_action('wp_ajax_nopriv_my_function_name', 'my_function_name');// for everybody

Step 4: Write the actual function to handle the backend logic(in functions.php or similar)

 function my_function_name(){
  // my logic goes here
}

Good luck!