CODEWITHSUNDEEP
phpjqueryajax
Roronoa Zoro
Roronoa Zoro

Reputation: 21

My ajax request response hangs my firefox browser?

I created dependable dropdown for country state and city using ajax in php. If I run it in Chrome or Opera it's working, but if I run it in Firefox the browser hangs

$(document).ready(function(){
  $('#country').on('change',function(){
      var country_id=$(this).val();
      $.ajax({
            type:'POST',
            url:'ajax/get_state.php',
            data:{country_id:country_id},
            success:function(data){
              $('#state').html(data);
            },
            error:function(){

            }
        });
      });

  $('#state').on('change',function(){
  var state_id=$(this).val();
  $.ajax({
      type:'POST',
      url:'ajax/get_city.php',
      data:{state_id:state_id},
      success:function(data){
            $('#city').html(data);
          },
          error:function(){

          }
      });
    });
});

here is get_state.php :- 

<?php

include '../config.php';
if(isset($_POST['country_id'])){
  $sql = mysqli_query($db_connect,"SELECT * FROM states where country_id = '".$_POST['country_id']."'") or die(mysqli_error($db_connect));

?>
<option value="0">Select State</option>
<?php
while($row = mysqli_fetch_array($sql)){

echo "<option value=".$row['id'].">".$row['name']."</option>";

}

}

?>

and here is get_city.php :- 

<?php

include '../config.php';
if(isset($_POST['state_id'])){

$sql = mysqli_query($db_connect,"SELECT * FROM cities where state_id = '".$_POST['state_id']."'") or die(mysqli_error($db_connect));

?>
<option value="0">Select City</option>
<?php
while($row = mysqli_fetch_array($sql)){

echo "<option value=".$row['id'].">".$row['name']."</option>";

}

}

?>

here is my ajax and all ajax php code. This code working fine in other browser but if i run in Firefox so Firefox hang.

Upvotes: 1

Views: 398

Answers (4)

treyBake
treyBake

Reputation: 6560

You should really have error handling in your ajax request. It probably isn't hanging as much as you think, but actually erroring.

Modify your empty error: function() lines to:

error: function(res)
{
    console.log(res);
}

in your console (F12 on Firefox) it should display some debugging information for your ajax request. This will help you narrow down the problem (in which case edit your question to that specific problem).

Note: Not sure if this is fully classes as an answer or a comment- either way, this should address the freezing issue and help debug it further.

Upvotes: 2

Ritul Lakhtariya
Ritul Lakhtariya

Reputation: 358

here i found some issue on your php code you just echo for each row 

<?php

include '../config.php';
if(isset($_POST['country_id'])){
  $sql = mysqli_query($db_connect,"SELECT * FROM states where country_id = '".$_POST['country_id']."'") or die(mysqli_error($db_connect));

?>
$html .= "<option value='0'>Select State</option>";
<?php
while($row = mysqli_fetch_array($sql)){

$html .="<option value=".$row['id'].">".$row['name']."</option>";

}

}
echo $html;
?>

you can see in your code every line you are trying to echo, generally after echo ajax call will fire success call so it will go in infinite

so best practise is that store in variable $html and echo in last.

i hope it will help you

Upvotes: 0

Ritul Lakhtariya
Ritul Lakhtariya

Reputation: 358

change your code with this code it will start working properly.

$(document).ready(function(){


$(document).on('change','#country',function(){
      var country_id=$(this).val();
      $.ajax({
            type:'POST',
            url:'ajax/get_state.php',
            data:{country_id:country_id},
            success:function(data){
              $('#state').html(data);
            },
            error:function(e){
                alert(e);
            }
        });
      });

  $(document).on('change','#state',function(){
  var state_id=$(this).val();
  $.ajax({
      type:'POST',
      url:'ajax/get_city.php',
      data:{state_id:state_id},
      success:function(data){
            $('#city').html(data);
          },
          error:function(e){
            alert(e);
          }
      });
    });
});

i made two changes here

  1. i use $(document).ready(function(){ instead if $('#country').on('change',function(){
  2. and also found bug here $('#country,'). extra comma was thare.

Upvotes: 2

Sasith Dilan Sumanasekara
Sasith Dilan Sumanasekara

Reputation: 95

Your code having a error.

$(document).ready(function(){
  $('#country,').on('change',function(){

In $('#country,') there are extra comma. Replace with $('#country'). With that error It haven't run from any browser for me.

Upvotes: 1

Related Questions