select not getting updated on ajax call

Question

I have an ajax call to dynamically create select elements. the amount of selects is dependent on another select. This works fine. for my test 3 select menus should be created dynamically which works fine. the dynamically created selects will make ajax calls on their own to create some options dynamically, this is where I have the issue. Everything seems to be working except the options for a second select is not getting populated. Please see code below.

Thank you

$('#union').on('change',function(){
    var union_id = $(this).val();
    if(union_id){
        $.ajax({
            type:'POST',
            url:'fetch_referee.php',
            data:'union_id='+union_id,
            dataType: 'json',
            success:function(data){
                $('#dynamic_selects').html(data.html);

                var total = data.total;
                for(i=1; i<=total; i++){
                    $('#allreferee'+i).on('change', function(){
                        var all_games = $(this).val();
                        //alert(all_games);// this is good output is valid 
                        if(all_games){
                            $.ajax({
                                type:'POST',
                                url:'fetch_places.php',
                                data:'all_games='+all_games,
                                dataType: 'json',
                                success:function(html){
                                    alert(html);/// this is good.. returns option values 
                                    $('#refposition'.i).html(html);//the select menu does not get updataded 

                                }
                            }); 
                        }else{
                            $('#refposition'+i).html('<option value=""></option>');

                        }
                    });
                }


            }
        }); 
    }else{

    }
});

You would need a closure, using this technique. I recommend using a better jQuery selector and using `.each()`. `$('[id^=allreferee]').each(function(increment, element){})` — StackSlave, Oct 17 '17 at 22:37
what do you mean? could you please show me an example.. thank you so much — joanb, Oct 17 '17 at 22:41
Wow look at that [pyramid of doom](http://callbackhell.com/)! You should really fix up your code. Take a look at what Promises are. — Derek 朕會功夫, Oct 17 '17 at 22:41
`$('[id^=allreferee]').each(function(increment, element){$(this).change(function(){})})` — StackSlave, Oct 17 '17 at 22:44

Samuel James · Answer 1 · 2017-10-17T22:54:42.597

0

You have to add the selector parameter, otherwise the event is directly bound instead of delegated, which only works if the element already exists (so it doesn't work for dynamically loaded content). Check this for more details

Your code should now look like this

$(document.body).on('change','#union',function(){
    var union_id = $(this).val();
    if(union_id){
        $.ajax({
            type:'POST',
            url:'fetch_referee.php',
            data:'union_id='+union_id,
            dataType: 'json',
            success:function(data){
                $('#dynamic_selects').html(data.html);

                var total = data.total;
                for(i=1; i<=total; i++){
                $(document.body).on('change','#allreferee'+i, function(){
                        var all_games = $(this).val();
                        //alert(all_games);// this is good output is valid 
                        if(all_games){
                            $.ajax({
                                type:'POST',
                                url:'fetch_places.php',
                                data:'all_games='+all_games,
                                dataType: 'json',
                                success:function(data){
                                    alert(html);/// this is good.. returns option values 
                                    $('#refposition'+i).html(data.html);//the select menu does not get updataded 

                                }
                            }); 
                        }else{
                            $('#refposition'+i).html('<option value=""></option>');

                        }
                    });
                }


            }
        }); 
    }else{

    }
});

edited Oct 17 '17 at 22:54

answered Oct 17 '17 at 22:41

Samuel James

1,528
16
15

This didn't work. but the on change event is getting called because the ajax request is happening and it is returning the options they are just not appending to the select element – joanb Oct 17 '17 at 22:51
check this `$('#refposition'.i).html(html)` There is a dot, I presume you meant `+`. Am updating my answer to use + – Samuel James Oct 17 '17 at 22:53
Yes thank yo so much! I meant to put the +.. I changed it and still doesn't work.. I think the problem is there I am getting the options in the html var.. they are just not appending to the select menu.. i see the select menus in the source code are fine.. ids are fine – joanb Oct 17 '17 at 22:56
Is the select menu you want to append data to created on the fly? You should post your html as well – Samuel James Oct 17 '17 at 22:57
I found the problem I added this var id = '#refposition'+i; alert(id); on change event is returning refposition4 for all selects... it should be refposition1.. refposition2... etc – joanb Oct 17 '17 at 23:00
can you see why i is returning 4 instead of the correct value that should be incremented from 1 – joanb Oct 17 '17 at 23:02
It could be returning 4, if the total records is 4, it means the last value is overwriting the rest. Could you post your html? – Samuel James Oct 17 '17 at 23:06
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156957/discussion-between-joanb-and-samuel-james). – joanb Oct 17 '17 at 23:07

score 0 · Answer 2 · answered Oct 17 '17 at 23:38

I'm sure that your methodology is flawed, but if you must:

$('#union').change(function(){
  var union_id = $(this).val();
  if(union_id !== ''){
    $.post('fetch_referee.php', 'union_id='+union_id, function(data){
      $('#dynamic_selects').html(data.html);
      $('[id^=allreferee').change(function(){ // I would give the Elements an HTML class instead - but
        var t = $(this), all_games = t.val();
        // console.log(all_games); // this is good output is valid ??
        if(all_games === ''){
          t.html("<option value=''></option>");
        }
        else{
          $.post('fetch_places.php', 'all_games='+all_games, function(html){
            // console.log(html); // this is good.. returns option values ??
            t.html(html); // the select menu does get updataded ??
          }, 'json');
        }
      });
    }, 'json');
  }
});

select not getting updated on ajax call

2 Answers2