JS $.post wait for response before displaying result

Question

I'm new to JavaScript. I wrote the below function to post data to a PHP page and then return the result. The function works fine, but sometimes it fails to get the result; i believe this might be because its not waiting for the response.

I tried looking for a wait/delay function for JS but i couldn't find one.

One of the solutions i found suggested using ajax. I tried to do that but i couldn't get it to work. Maybe i also have to change my php code?

My JS Code

<script>
$('#room_no').change(function () {

    var id = "<?php echo intval(isset($_GET['id'])); ?>";
    var str = "<?php echo $room_no; ?>"; // "A string here"
    alert(str);
    if (id == 1) {

    } else {

        //Selected value
        var inputValue1 = $(this).val();
        var selected_unit_no = $('#ddlUnitNo').val();

        //Ajax for calling php function
        $.post('room_no_2.php', {
            dropdownValue: inputValue1,
            dropdownValue2: selected_unit_no
        }, function (data) {

            var select = document.getElementById("room_no");
            var rented_as_rooms = data.split(".")[0];
            var rented_room_no = data.split(".")[1];
            var number_of_rooms_in_unit = data.split(".")[2];
            var tenant_name = data.split(".")[3];
            var tenant_rid = data.split(".")[4];
            var tenant_monthly_rent = data.split(".")[5];

            if (rented_as_rooms == 0) {
                document.getElementById("txtRentName").value = '';
                alert('Selected Room Is Empty');
                $('#room_no option')[0].selected = true;

            } else {

                //      select.innerHTML = "";

                document.getElementById("txtRentName").value = tenant_name;
                document.getElementById("txtRent").value = tenant_monthly_rent;
                $("#hdnRentedId").val(tenant_rid);

            }


            //do after submission operation in DOM
        });

    }

});
</script>

My PHP Code

<?php
$resultA = mysqli_query($link, "SELECT u.uid ,  u.floor_no ,  u.unit_no , u.rented_as_rooms, u.unit_room_no,  u.electric_meter_number, u.electric_meter_type,u.sub_electric_meter_no, u.water_meter_no,  u.branch_id ,  u.status ,  u.added_date, r.rid,  r.r_name ,  r.r_email ,  r.r_contact ,  r.r_address ,  r.r_nid ,  r.r_floor_no ,  r.r_unit_no , r.r_unit_room_no,  r.r_advance ,  r.r_rent_pm ,  r.r_date ,  r.r_gone_date , r.r_password ,  r.image ,  r.r_status ,  r.r_month ,  r.r_year ,  r.branch_id ,  r.added_date FROM tbl_add_unit u LEFT JOIN tbl_add_rent r ON r.r_unit_no = u.uid where u.branch_id = " . (int)$_SESSION['objLogin']['branch_id'] . " AND r.r_unit_room_no =" . $_POST['dropdownValue'] . " AND u.uid =" . $_POST['dropdownValue2'] . "  order by uid ASC") ;

if (! $resultA){
   echo $unit_room_no = '';

} else {

while ($row1 = mysqli_fetch_array($resultA))
    {
    echo $row1['rented_as_rooms'].'.'.$row1['r_unit_room_no'].'.'.$row1['number_of_rooms_in_unit'].'.'.$row1['r_name'].'.'.$row1['rid'].'.'.$row1['r_rent_pm'];
    }
}

?>

This is the ajax code i wrote. i used alert (data) to check if i was getting any response back but i wasn't.

$.ajax({
    url: 'room_no_2.php',
    type: 'POST',
    data: 'dropdownValue=' + inputValue1 + '&dropdownValue2=' + selected_unit_no,
    dataType: 'json',
    success: function (data) {
        alert('ajax completed. Response:  ' + data);
    }
}

Your PHP script is vulnerable to SQL injection. [Use prepared statements](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php/60496#60496). — AuxTaco, Sep 15 '18 at 22:19

score 1 · Accepted Answer · answered Sep 15 '18 at 22:00

On http://api.jquery.com/jquery.ajax/ says that "dataType: "jsonp" requests do not support synchronous operation. " try changing the dataType to html.

And add also an error function next the the success function:

$.ajax({
      type: 'POST',
      data: {var1:valuevar1,var2:valuevar2,etc:etc},
      async: true,
      url: "urlforyourPHPfile",
       success: function(data) {
           //things to do on success
        },
        error: function(data){
            alert("Error");
        },
     contentType: "application/x-www-form-urlencoded;charset=ISO-8859-15",
     dataType: 'html'
    });

JS $.post wait for response before displaying result

1 Answers1