0

I have a jquery postback and after getting reply as JSON I'm changing value of an input type select like this

$('#new-address select[name=\'country_id\']').val(data['country_id']).trigger('change');
$('#new-address select[name=\'zone_id\']').val(data['zone_id']);

and after changing the selected value I am firing an event 'change' to fill state select input and after that I want to change the selected value of state select input but from above code it's not changing the value of state select but it's filling states.

So I thought may be control is not coming back after trigger to this function so to test that I put one alert to see whether it's coming here or not like this

$('#new-address select[name=\'country_id\']').val(data['country_id']).trigger('change');
alert('came here');
$('#new-address select[name=\'zone_id\']').val(data['zone_id']);

after testing this I got alert saying came here and after clicking OK, the value of state is changing as I wanted.

So what is wrong in my approach before and why it's working fine after adding alert? What changes should I do to get what I want?

Thanks in advance.

Pankaj
  • 585
  • 1
  • 9
  • 22
  • 2
    Javascript runs sequential line by line and your ajax call may take some time to come back, thats when you should load your select in the callback of the ajax call, let me know if you want the code for it. Alert paused your sequence, hence it worked latter – abhijit Sep 11 '12 at 11:42
  • @abhi thanks for replying. Can you post the code..I'm trying but still it's not working fine.. – Pankaj Sep 11 '12 at 12:01
  • 1
    No probs, http://stackoverflow.com/questions/815103/jquery-best-practice-to-populate-drop-down just use the code from the link and put that inside your first select change event and pass parameter from the first select. – abhijit Sep 11 '12 at 12:08

2 Answers2

0

I am not sure it's correct or wrong way but it worked for me. As suggested by @abhi that javascript runs sequentially so I changed my code to this:

$('#new-address select[name=\'country_id\']').val(data['country_id']);
var selectedstate = data['zone_id'];
$.get(
      "index.php?route=common/home/country&token=<?php echo $token;?>",
       { 'country_id': data['country_id'] },
       function(json) {
           html = '<option value=""><?php echo $text_select; ?></option>';
           if (json['zone'] != '') {
               for (i = 0; i < json['zone'].length; i++) {
                    html += '<option value="' + json['zone'][i]['zone_id'] + '"';
                    if (parseInt(json['zone'][i]['zone_id']) == parseInt(selectedstate)) {
                        html += ' selected="selected"';
                     }
                     html += '>' + json['zone'][i]['name'] + '</option>';
                }
           } else {
                   html += '<option value="0" selected="selected"><?php echo $text_none; ?></option>';
                  }
          $('#new-address select[name=\'zone_id\']').html(html);
        },
        'json'
);

by doing this I got what I wanted because selected value of state is set while it's making html for state select.

Pankaj
  • 585
  • 1
  • 9
  • 22
0

This has to do with the async property of your ajax call. It is not recommended but you can set it false and it should work fine. Or you really need to learn how to use call back functions instead!

Community
  • 1
  • 1
Hazem Salama
  • 14,891
  • 5
  • 27
  • 31