Iterating select dynamic on add and remove lines

Asked

Viewed 63 times

0

I am developing an add and remove lines as in imageinserir a descrição da imagem aqui

The first select comes from a database with PHP and the ones that are added later dynamically come through getJSON. It is working but are being made several requests without stopping this getJSON and select is accumulating the same information, I am doing as follows:

$(document).bind('DOMSubtreeModified', function () {

  $.ajax({
      type:'post',  
      dataType: 'json',  
      url: 'json/list_programs',
      success: function(dados){
        var programs = '';
        $.each(dados, function(key, value){
            programs += '' + value.program_name + '';
        });
        $('.list_programs').append(programs);

      }
    });

});
php jquery mysql json

  • "but several requests are being made without stopping this getJSON" has two possible things to do, or change the event that is triggering the requests (Domsubtreemodified), or always return the full list of options, and in place of append do the replace of options

  • It would not be the case to empty the select before popular it? $('.list_programs').empty().append(programs);

  • @Ricardopunctual which event would I switch to for these requests? Return a complete list as well?

  • @Sam if I put the Empty it’s always empty

  • You who popular all selects at once with what comes from AJAX?

  • @Sam I want to popular the select of each row that is added. When you click the add new line button, the select for it has to be populated via ajax. Not all at once, but only the line that is added. This way it works, only it keeps making several requests non-stop, like a loop and so it duplicates the information in select. Type added new line there populates the select for it and for the request.

  • Then you would have to add :last to pick only the last one and add the listing: $('.list_programs:last').append(programs);

  • @Sam worked only that does not stop making requests, a problem was solved, but the second not, without interacting with the page she is searching for information every moment, will be because of the event Domsubtreemodified?

  • 1

    Yes. This event is triggered when there are changes in the DOM. It was right to call AJAX only when a line is added.

  • @Sam decided that way I said, I put the ajax in a function and called in the event of the click of the new line, thanks for the help

  • @Would Sam have like each line addition to the previous line to have the value of the previously chosen select? Because when I add a line I call the function to fetch the data for the select, but whenever I add a new line makes another call and all the previous lines return to the first value, due to calling the select function, would have some way of fixing that chosen value?

  • When you add a line you populate all selects of all lines?

  • @Sam populates the select of the added line, only the previous lines return to normal. If I added 3 lines and put different values in select: car, bike, scooter there when I add another line, these 3 values go back to the default SELECT AN ITEM for example. I wanted to set the previous values I chose. I know this is happening because I call the function that populates whenever I add the new line, but I was wondering if there is a way to 'lock' the previous values that were chosen

Show 8 more comments

1 answer

0

Solved by placing the EMPTY and calling the ajax inside the event click add new line $('.list_programs').empty().append(programs);

Browser other questions tagged php jquery mysql json

You are not signed in. Login or sign up in order to post.