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 ?

Of course you cannot trigger the change event if the element doesn't exist. You have to create it first. — NielsNet, Mar 11 '19 at 10:13
Try to trigger and get value using document or any pre-existing parent container as below: To trigger : $(document).on("trigger", "#support", function(){}); and for changing value: $(document).find("#support").val("S1"); — Rohit Mittal, Mar 11 '19 at 10:25
Thank you Rohit Mittal, I've tried your solution. For me, it was something like that. But here again, it didn't work. However, Kishan's one did, so I can continue my project ! — Hey, Mar 11 '19 at 19:02

score 0 · Accepted Answer · answered Mar 11 '19 at 11:04

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);
    
}
[...]

score 0 · Answer 2 · answered Mar 11 '19 at 19:44

0

@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

answered Mar 11 '19 at 19:44

stan chacon

768
1
6
19

Hello stan chacon, I didn't know the deferred.done() method. It looked good, I've read the doc and tried this in my code but I didn't manage to get the desired result. Furthermore, if I use this method with the first ajax, I need to adjust a big part of the code :-s as the code presented in the question is very simplified. – Hey Mar 12 '19 at 09:03
@Heycava check this link it has some little example i done https://stackoverflow.com/questions/54711318/return-callback-value-outside-callback-function-ajax/54711790#54711790 – stan chacon Mar 13 '19 at 18:14

Trigger an ajax in a select loaded in ajax

2 Answers2