jquery wait on change event

Question

With jQuery I built a dynamic form; when the first select-input (named category) changes a second select-input (named subcategory) appears with sub-select items. And this works perfect now.

When a specific url parameter is given I want to auto-fill in the form after the page is ready.

$(document).ready(function () {
    // initialize defaults
    var category = getUrlParameter('category');
    var subcategory = getUrlParameter('subcategory');
    if (category && subcategory) {
        $("select#category").val(category).change();
        $("select#subcategory").val(subcategory).change();
    }
});

Where getUrlParameter is a helper function I copied from Sameer Kazi.

Currently the first select-input is filled in, the second select-input is generated but not filled in. So actually, the change command needs to wait untill the first change command is ready.

Did you thought about a bool value switching true on `$("select#category").val(category).change();` — JustARandomProgrammer, Jun 28 '17 at 09:00
*when the first select-input (named category) changes a second select-input (named subcategory) appears with sub-select items* we need that code, its important for the problem... — Jonas Wilms, Jun 28 '17 at 09:00

score 8 · Accepted Answer · answered Jun 28 '17 at 09:32

You can using jQuery's .when() function, which handles an asynchronous function first before .then() is called.

$.when($("select#category").val(category).change()).then(function() {
  $("select#subcategory").val(subcategory).change();
});

Here below is a small example using those two functions. I have added a console.log function to the select change event handlers so that you can follow what happens.

$("select#category").on('change', function() {
  console.log('[on change] category changed');
  $("select#subcategory").show();
});

$("select#subcategory").on('change', function() {
  console.log('[on change] subcategory changed');
});

$(document).ready(function () {
    // initialize defaults
    var category = 1;
    var subcategory = 2;
    if (category && subcategory) {
        $.when($("select#category").val(category).change()).then(function() {
            console.log('[then] activating subcategory');
            $("select#subcategory").val(subcategory).change();
        });
    }
});

select#subcategory {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category">
 <option>...</option>
 <option value="1">value 1</option>
 <option value="2">value 2</option>
</select>
 
 <select id="subcategory">
   <option value="1">subvalue 1</option>
   <option value="2">subvalue 2</option>
 </select>

score 2 · Answer 2 · answered Jun 28 '17 at 09:01

2

setTimeout(function(){
$("select#subcategory").val(subcategory).change();
},300);

maybe this? Wait 300 ms till make other change. I guess its enough to have a first one done :)

answered Jun 28 '17 at 09:01

DanielWaw

669
7
22

1

this works! but it is fundamentally incorrect. Usually I code Python and guessing is not really accepted there... – Joost Döbken Jun 28 '17 at 09:03

score 0 · Answer 3 · answered Jun 28 '17 at 09:06

0

$("select#category").on("load",function(){
    $("select#subcategory").val(subcategory).change();
});

Maybe this will work if I got your problem

answered Jun 28 '17 at 09:06

JustARandomProgrammer

277
1
3
15

score 0 · Answer 4 · answered Jun 28 '17 at 09:08

0

Maybe you can listen for event onChnage

$("select#category").on("change",function(){
    $("select#subcategory").val(subcategory).change();
});

also instead of $("select#category").val(category).change(); try $("select#category").val(category).trigger('change');

answered Jun 28 '17 at 09:08

Yordan Nikolov

2,598
13
16

the onChange event already runs before the second select-input is ready; this works only with the time out as suggested by @DanielWaw – Joost Döbken Jun 28 '17 at 09:15

jquery wait on change event

4 Answers4

Linked