Trigger an ajax in a select loaded in ajax

Question

First, here is a very simplified version of my code :

HTML :

<form id="add">
    <select id="cat">
        <option selected value="">…</option>
        <option value="a">A</option>
        <option value="b">B</option>
    </select>
</form>
<div id="result_processing"></div>

JavaScript :

$(document).on("change", "#cat", function() {
    var table = $(this).val();
    $.ajax({
        url: "ajax.php",
        type: "post",
        data: {
            table: table
        },
        success: function(result) {
            $("#add").append(result);
        }
    });
});

ajax.php :

$html = '<select id="support">';
$html .= '<option value="S1">Support 1</option>';
$html .= '<option value="S2">Support 2</option>';
$html .= '</select>';
echo $html;

JavaScript :

$(document).on("change", "#support", function() {
    var idsupport = $("#support").val();
    $.ajax({
        url: "ajax2.php",
        type: "post",
        data: {
            idsupport: idsupport
        },
        success: function(result) {
            var append_r = result;
            append_r += '<input type="submit" value="Send" id="send" />';
            $("#add").append(append_r);
        }
    });
});

ajax2.php :

$html = '<input type="text" />
echo $html;

JavaScript :

$(document).on("submit", "#add", function(e) {
    e.preventDefault();
    $.ajax({
        url: "processing.php",
        type: "post",
        data: $("#add").serialize(),
        dataType: "text",
        success: function(result) {
            $("#result_processing").html(result);
        }
    });
});

Now, I would like, at the validation of the form, to preselect #cat. I can add some jQuery on my submit, in the "success" part :

[...]
success: function(result) {
    $("#result_processing").html(result);
    $("#cat").trigger("change");
    $("#cat").val("a");
}
[...]

That code works .

And now, I'd like to make the same thing on the second "select" : #support. But, as the support is loaded in ajax, it does not work. For example :

[...]
success: function(result) {
    $("#result_processing").html(result);
    $("#cat").trigger("change");
    $("#cat").val("a");
    $("#support").trigger("change");
    $("#support").val("S1");
}
[...]

Nothing is selected on #support. I guess the reason is: at this moment, #support does not exist in my DOM. By the way, if I do a console.log($("#support").val()) after this code, I get "undefined".

I wanted to make a document trigger in the document trigger (documentriggerception). Like that :

[...]
success: function(result) {
    $("#result_processing").html(result);
    $("#cat").trigger("change");
    $("#cat").val("a");
    $(document).trigger("change", "#support", function() {
        $("#support").val("S1");
    });
}
[...]

But it doesn't work either. A friend of mine also suggested me to create a hidden field, where to put the #support value, and make a condition in the #cat ajax to fill #support. But it seems not to be the best solution.

Would anyone have a better idea ?

Answer 1

Put some time gap so second select will be in DOM.

 [...] success: function(result) { $("#result_processing").html(result); $("#cat").trigger("change"); $("#cat").val("a"); setTimeOut(function(){ $("#support").trigger("change"); $("#support").val("S1"); },800); } [...] 

Answer 2

@Heycava the proper way to resolve this is using promises ! on your first ajax call you need to chain a done that will run another request to fill your second select:

function func1() {
       $.ajax({ ... }).done(func2);
    }

Hope it Helps