1

I'm getting predefined values, which i have to insert into two selects:

<div id="wrapper">
    <select id="first">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select id="second"></select>
</div>

Options inside #second depends on selected value in #first. This options are loaded via ajax:

$('#first').change( function() {
        $.ajax({
            url: "giveMeValues.phpOrWhatever"
        }).done(function() {
            // just simulating data from ajax call
            $('#second').append(
                '<option value="a">a</option>'+
                '<option value="b">b</option>'+
                '<option value="c">c</option>'
            );
        });
    });

The problem is, I can set value of #second after ajax data will be loaded. So following code will of course not work:

$('#first').val('2').change();
$('#second').val('b').change();

So i tried to use .promise() to wait untill ajax call inside change handler will be completed:

$('#first').val('2').change();
    $('#wrapper').promise().then( function() {
        $('#second').val('b');
        console.log('setting value...');
    });

But it doesn't work. My question is: how i can wait to end of ajax call, and then set #second value?

Here you have fiddle for this problem: http://jsfiddle.net/W2nVd/

Thanks for your time.

Kasyx
  • 3,170
  • 21
  • 32

3 Answers3

2

You need to set the promise from the ajax like so:

(function($) {
    // Our Ajax promise variable
    var promise;

    $('#first').change( function() {
        // Set the ajax promise variable
        promise = $.ajax({
            url: "#"
        }).done(function() {
            $('#second').append(
                '<option value="a">a</option>'+
                '<option value="b">b</option>'+
                '<option value="c">c</option>'
            );
            console.log('appending new content...');
        });
    });

    $('#first').val('2').change();
    // the var `promise` was set on the line above when it executed 
    // the `change()` callback
    promise.promise().done( function() {
        $('#second').val('b');
        console.log('setting value...');
    });

})(jQuery);

JSFiddle: http://jsfiddle.net/W2nVd/2/

chrislondon
  • 12,487
  • 5
  • 26
  • 65
0

Perhaps I'm missing some of your workflow requirements, but can't you just set the value of #second after you append the options?

$.ajax({
            url: "#"
        }).done(function() {
            $('#second').empty().append(
                '<option value="a">a</option>'+
                '<option value="b">b</option>'+
                '<option value="c">c</option>'
            );
            $('#second').val('b');
            console.log('appending new content...');
        });

Updated fiddle: http://jsfiddle.net/W2nVd/1/

CodingIntrigue
  • 75,930
  • 30
  • 170
  • 176
  • I was thinking about it too, but the problem is, this change should be set only one time. With your code, allways after changing `#first` `#second` will be set to `'b'`. – Kasyx May 29 '13 at 12:57
0

.done() is exactly what you are searching for just put it inside..like so

try ...

$('#first').change( function() {
    $.ajax({
        url: "giveMeValues.phpOrWhatever"
    }).done(function() {
        // just simulating data from ajax call
        $('#second').append(
            '<option value="a">a</option>'+
            '<option value="b" selected="selected">b</option>'+
            '<option value="c">c</option>'
        );
    });
});

.... or..... 

$('#first').change( function() {
    $.ajax({
        url: "giveMeValues.phpOrWhatever"
    }).done(function() {
        // just simulating data from ajax call
        $('#second').append(
            '<option value="a">a</option>'+
            '<option value="b">b</option>'+
            '<option value="c">c</option>'
        );
        $('#second').val('b'); // change value after options are available


    });
});
Sven Delueg
  • 1,001
  • 11
  • 23
  • 1
    I was thinking about it too, but the problem is, this change should be set **only one time**. With your code, allways after changing #first #second will be set to 'b' – Kasyx May 29 '13 at 13:01
  • ok..? but also it will do the Ajax-call and append 3 more optionsevery time...so do you want to this everytime you change #first? or the whole function should only execute once? – Sven Delueg May 29 '13 at 13:32
  • It was just simplification as my comment noticed: `// just simulating data from ajax call`. In real situation, this values will depends on selected option. – Kasyx May 29 '13 at 13:33