Html code generated by jquery is not accessible

Question

I had a headache debugging the following code :

Presentation

If I run the following code :

$.get('/api/Customer/1', function(data){
    projects = data.data.projects;
    var $el = $('#mySelect');
    $el.empty();
    projects.forEach(function(element, index, array){
        var text = element.name;
        addSelectOption("mySelect", element.idProject, text);
    });
});

/**
 * Function which add an option to the select input which id is idSelect.
 */
function addSelectOption(idSelect, value, text)
{
    var option =
            $('<option></option>').attr("value", value).text(text);
    $('#' + idSelect).append(option);
}

My select will look like :

<select id="mySelect">
    <option value="1">proj1</option>
    <option value="2">proj2</option>
    <option value="3">proj3</option>
    <option value="4">proj4</option>
</select>

Failure

So, if I append the following line after my ajax code :

$('#mySelect').val("2");

My select should display proj2. But it doesn't.

Success

The only way I found to make it work is the following code :

$.get('/api/Customer/1', function(data){
    projects = data.data.projects;
    var $el = $('#mySelect');
    $el.empty();
    projects.forEach(function(element, index, array){
        var text = element.name;
        addSelectOption("mySelect", element.idProject, text);
    });
    $('#mySelect').val("2");//the only change between the presentation code
});

It looks like the html generated by jquery has a scope which is the get ajax request.

Question

I don't understand why the first code fail to set the selected value of mySelect to proj2. Can you explain it to me please ?

ALL AJAX, not set to sync, work like that - that is the A for Asynchronous does. This is not just jQuery — mplungjan, Aug 28 '14 at 12:17
@MilindAnantwar I edited the question to add the code of this function. — Moebius, Aug 28 '14 at 12:19
possible duplicate of [How to return the response from an Ajax call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — mplungjan, Aug 28 '14 at 12:20
In your failure case your ajax take more time to responde and your select code is executed. Use $.ajax with asynch: false option — Shail, Aug 28 '14 at 12:20
@mplungjan: yes i know that. Owner had already display this in success case. still he asking about failure case so i just giving alternate solution. — Shail, Aug 28 '14 at 12:24

score 2 · Accepted Answer · answered Aug 28 '14 at 12:18

2

It's because ajax request is asynchronous. The option with value 2 is not created when you ask val() function to set it. When you put it into ajax callback option is available and it set correctly.

answered Aug 28 '14 at 12:18

SSA

5,433
4
36
50

score 2 · Answer 2 · answered Aug 28 '14 at 12:20

In addition to what @SSA said, here is how you can solve it using a callback:

$.get('/api/Customer/1', function(data){
    projects = data.data.projects;
    var $el = $('#mySelect');
    $el.empty();
    projects.forEach(function(element, index, array){
        var text = element.name;
        addSelectOption("mySelect", element.idProject, text);
    });
}).done(function(){ // <- Called when the $.get is completed
    $('#mySelect').val("2");
});

Or you can just do the operation inside the $.get success callback along with your other code.

Html code generated by jquery is not accessible

Presentation

Failure

Success

Question

2 Answers2