wordpress : call ajax in the button click

issue :
– Calling ajax request and write text in the html .

problem :
– the first time when calling ajax and write the values in the div successfully
– the second time the ajax get the data (in the page source ) but the values in the div doesn’t change although the cache: false .
– i try to generate random number to show the issue well.

Read More

Code:

1-Ajax call :

$("#Finish").click(function () {
     $.ajax({
         type: 'POST',
         async: true,
         url: document.location.origin + "/air/ajaxCalls.php",
         dataType: 'json',
         cache: false,
         data: {
             ajaxType: "Finish",
             examid: 1,
             index: 2,
             qid: <? php echo $currentquestion ?> ,
             ansid: $('#tags').val(),
         },
         success: function (data) {
             //    alert("success");
             if (data) {
                 //    alert(data.status); 
                 // $("questiontext").html("next question");
                 // alert("data");
                 // alert('empty')

                 $('#tags').val("");

                 document.getElementById('questiontext').innerHTML = "<p>" + "<?php echo mt_rand() . getQuesName($currentquestion) . rand(); ?>" + "</p>";
                 document.getElementById('answerstext').innerHTML = "<?php getAnswers($currentquestion); ?>"

                 $("#questiontext").html("<?php echo mt_rand()?>");

                 $('input[type="checkbox"]').on('change', function () {
                     $('input[type="checkbox"]').not(this).prop('checked', false);
                 });

                 $('#check1').click(function () {});
                 $('#choose1, #check1').click(function () {
                     $('#check1').click();
                 });

                 $('#check2').click(function () {});
                 $('#choose2, #check2').click(function () {
                     $('#check2').click();
                 });

                 $('#check3').click(function () {});
                 $('#choose3, #check3').click(function () {
                     $('#check3').click();
                 });

                 $('#check4').click(function () {});
                 $('#choose4, #check4').click(function () {
                     $('#check4').click();
                 });

                 function Populate() {
                     vals = $('input[type="checkbox"]:checked').map(function () {
                         return this.value;
                     }).get().join(',');
                     // console.log(vals);
                     $('#tags').val(vals);
                 }

                 $('input[type="checkbox"]').on('change', function () {
                     Populate()
                 }).change();



                 if (data.status == 1) { ///sucess
                     alert('answer inserted');
                 }

             } else {
                 alert("Error : Please try again");
                 return false;
                 // no data found
             }
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
             alert("Error : " + errorThrown);
         }
     });

 });

2 – receive calls:

 if ($_POST['ajaxType'] == "Finish") {
     echo json_encode(array("status" => 1));
 }

3- div (html)

<div id="questiontext">
    <p>

    </p>
</div>

Related posts

Leave a Reply

1 comment

  1. I had this exact same issue a couple days ago. The issue is that in your AJAX call:

      $.ajax({
         type: 'POST',
         async: true,
         url: document.location.origin + "/air/ajaxCalls.php",
         dataType: 'json',
         cache: false,
         data: {
             ajaxType: "Finish",
             examid: 1,
             index: 2,
             qid: <? php echo $currentquestion ?> ,
             ansid: $('#tags').val(),
         },
    

    Change your url to the main wordpress AJAX file. Usually it can be found in the /wp-admin/ folder of your website. Once you change the URL from

    document.location.origin + "/air/ajaxCalls.php"
    

    to

    ../../wp-admin/admin-ajax.php
    

    Go into your main function file and add a new AJAX call. For example, create something like this:

    add_action("wp_ajax_populate", "populate");
    
    function(populate){
     if (data) {
                 //    alert(data.status); 
                 // $("questiontext").html("next question");
                 // alert("data");
                 // alert('empty')
    
                 $('#tags').val("");
    
                 document.getElementById('questiontext').innerHTML = "<p>" + "<?php echo mt_rand() . getQuesName($currentquestion) . rand(); ?>" + "</p>";
                 document.getElementById('answerstext').innerHTML = "<?php getAnswers($currentquestion); ?>"
    
                 $("#questiontext").html("<?php echo mt_rand()?>");
    
                 $('input[type="checkbox"]').on('change', function () {
                     $('input[type="checkbox"]').not(this).prop('checked', false);
                 });
    
                 $('#check1').click(function () {});
                 $('#choose1, #check1').click(function () {
                     $('#check1').click();
                 });
    
                 $('#check2').click(function () {});
                 $('#choose2, #check2').click(function () {
                     $('#check2').click();
                 });
    
                 $('#check3').click(function () {});
                 $('#choose3, #check3').click(function () {
                     $('#check3').click();
                 });
    
                 $('#check4').click(function () {});
                 $('#choose4, #check4').click(function () {
                     $('#check4').click();
                 });
    
                 function Populate() {
                     vals = $('input[type="checkbox"]:checked').map(function () {
                         return this.value;
                     }).get().join(',');
                     // console.log(vals);
                     $('#tags').val(vals);
                 }
    
                 $('input[type="checkbox"]').on('change', function () {
                     Populate()
                 }).change();
    
    
    
                 if (data.status == 1) { ///sucess
                     alert('answer inserted');
                 }
    
             } else {
                 alert("Error : Please try again");
                 return false;
                 // no data found
             }
         },
    }
    

    Now you have your populate function in your functions.php file rather than your jquery file. This makes it so all you have to do with your AJAX call is specify the action you want to preform. This ammounts to adding

    "action":"populate",
    

    into your data array.

    Hopefully this helps out a bit, let me know if I can clarify more.