Append result of ajax to a div on pressing submit

4 Views

I am working in wordpress and this is an ajax call and I want the result of a row returned to a div with id #hero. Now since the result is a for loop and hero div is in each row. And the form has multiple submit buttons. Pressing the submit button of a particular row should return result to #hero div of that row only. I mean the closest div (the very next div with id as hero). The ajax call returns the result on first click and the result is shown in hero id div. But it does not work when I press submit button again. Kindly note that their are multiple submit buttons associated with form and they are basically stars as I am trying to build a star rating system in wordpress.

jQuery

Read More
jQuery(function ($) {
    $(document).on("click",".star", function(e) {
    e.preventDefault();

    var comp = jQuery("#competition").val();
    var aidd = jQuery("#aid").val();
    var myclickvalue= jQuery(this).val();
    //alert(comp+aidd);


         var sentdata =({

            action: 'star',
            clickval:myclickvalue,
            compete:comp,
            id:aidd
        })

     $.post(yes.ajaxurl, sentdata, function (res) { //start of funciton

            $("#hero").html(res);
            return false;
        } //end of function
        ,
        'json');

    }); //end inner function
}); //end main function

PHP Code (I am just pasting the form code the whole code has also other sql queries etc.) 

$form.= '<form id="voteform" action="" method="post">';
$form.= "<input id='category' name='category' type='hidden' value='$result->category'>"; 
$form.= "<input id='aid' name='aid' type='text' value='$result->aid'>";
$form.= "Title :".$result->title.'<br>';
$form.= "<div class='mg-image' style='margin-top:15px;'><img id='articlecontest' src='$result->path' width='250' height='250' ></div>" . '<br><br>';


$form.= "<input id='competition' name='competition' type='hidden' value='$result->competition'>";
$form.= "Username :".$result->username.'<br>';

$form.= "<div id='totalvotes'>"."Total Votes:".$result->votessum."<div>".'<br>';
$form.= "<div id='articlesummary'>".$result->articlebody."</div>";

$form.="<div id='clickme' style='color:blue; font-size:16px; font-family: Satisfy, Cursive;'>".'READ MORE'."</div>";
$form.= '<div id="articlebody">'.'This is body text'.$result->body.'</div>';
///////////////
$form.="<input class='star' id='star1' type='image' type='submit' name='star5' src='http://localhost:8080/test/wp-content/uploads/2015/05/star0.png' value='1' style='border:0px!important;'>";
$form.="<input class='star' id='star2' type='image' type='submit' name='star5' src='http://localhost:8080/test/wp-content/uploads/2015/05/star0.png' value='2' style='border:0px!important;'>";
$form.="<input class='star' id='star3' type='image' type='submit' name='star5' src='http://localhost:8080/test/wp-content/uploads/2015/05/star0.png' value='3' style='border:0px!important;'>";
$form.="<input class='star' id='star4' type='image' type='submit' name='star5' src='http://localhost:8080/test/wp-content/uploads/2015/05/star0.png' value='4' style='border:0px!important;'>";
$form.="<input class='star' class='star' id='star5'  type='image' type='submit'  name='star5' src='http://localhost:8080/test/wp-content/uploads/2015/05/star0.png' value='5' style='border:0px!important;'>";

$form.='<input class="star" name="star5" src="http://localhost:8080/test/wp-content/uploads/2015/05/star0.png" type="image" type="submit" value="6" /></form>';
///////////////
$form.='<div id="hero">'.'</div>';
}//end of foreach
$response['form']=$form;
    echo json_encode($response['form']);
    exit();

}
Post Views: 4

Related posts

Leave a Reply

1 comment

  1. You HTML markup does not show several sibling div for each submit button, hence you can not achieve what you have stated in your question. Assuming you have a div#hero next to each submit button, you should change this part of your code:

     $.post(yes.ajaxurl, sentdata, function (res) { //start of funciton

            $("#hero").html(res);
            return false;
        } //end of function
        ,
        'json');

    To this:

    var element = $(this);
 $.post(yes.ajaxurl, sentdata, function (res) { //start of funciton

            $(element).next(".hero").html(res);
            return false;
        } //end of function
        ,
        'json');

    But with your current markup, you should change the code to this one. I have assumed that you changed #hero to .hero

    var element = $(this);
 $.post(yes.ajaxurl, sentdata, function (res) { //start of funciton

            $(element).siblings(".hero").html(res);
            return false;
        } //end of function
        ,
        'json');