Good day. I can not cope with the puzzle in MVC. There are four lists and they need to be linked. That is, by selecting something in the first list, we form a second one and so on. Scheme "Country-city-district-street". Used the scheme in ajax request and partial views. We carry out a bunch of the first two lists, but as soon as the second list is formed, and choosing from it something the third list does not form.

$('#state').change(function() { // получаем выбранный id var id = $(this).val(); $.ajax({ type: 'GET', url: '@Url.Action("GetItems44")/' + id, success: function (data) { // заменяем содержимое присланным частичным представлением $('#city').replaceWith(data); } }); }); $('#city').change(function () { var id = $(this).val(); $.ajax({ type: 'GET', url: '@Url.Action("GetItemsTopic")/' + id, success: function (data) { $('#punkt').replaceWith(data); } }); }); $('#punkt').change(function () { var id = $(this).val(); $.ajax({ type: 'GET', url: '@Url.Action("GetItemsTopic2")/' + id, success: function (data) { $('#street').replaceWith(data); } }); });

It gets into the first get, and the second no longer.

  • According to the documentation , the The .replaceWith() method removes all data and event handlers associated with the removed nodes. This is where the dog rummaged. - Yaant
  • Can I clarify, because I was there and do not understand a little what to do ?? What can replace .replaceWith () or how you can convey the list received to the next. list ??? - Irina
  • when calling $('#city').replaceWith(data); The previously installed onchange event onchange cleared. Accordingly, one must either use some other way of filling the necessary element with the received data, or install the handler immediately after calling replaceWith() - Yaant
  • And what elements can you advise? I am not strong in scripts. Thank you very much in advance, but how can you show by example what and how? :) - Irina
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

Offhand, if you change the code like this, it should earn:

 $('#state').change(function() { // получаем выбранный id var id = $(this).val(); $.ajax({ type: 'GET', url: '@Url.Action("GetItems44")/' + id, success: function (data) { // заменяем содержимое присланным частичным представлением $('#city').replaceWith(data); $('#city').change(function () { var id = $(this).val(); $.ajax({ type: 'GET', url: '@Url.Action("GetItemsTopic")/' + id, success: function (data) { $('#punkt').replaceWith(data); $('#punkt').change(function () { var id = $(this).val(); $.ajax({ type: 'GET', url: '@Url.Action("GetItemsTopic2")/' + id, success: function (data) { $('#street').replaceWith(data); } }); }); } }); }); } }); });

However, I warn you that I practically had nothing to do with jQuery, so that nuances are possible. :)

In general, the problem lies in the fact that you first install event handlers on the city and punkt , and after that when the state changes, the call to $('#city').replaceWith(data); which completely replaces the city element, resetting the previously installed handler. Accordingly, one of the options (see the proposed code variant) is to make the handlers installed after the call to replaceWith() . Here, by itself, it is assumed that an element with id="city" returned in data , otherwise nothing will work. :)

Well and still this variant of the code assumes that selects change strictly alternately, and it is impossible to miss a choice of state , having begun at once with city .

  • It all worked !!! You have no idea how I was saved =)) Thank you so much! - Irina
  • Good evening, there was a small problem. I chose all the lists, the post in the controller transmits the id of the items selected from the list, but as soon as it has saved everything, the page is refreshed and everything that has been entered remains in the filled fields, all but those fields to which I applied this bundle. How to be ?? How to display what is selected in the list with a bunch? - Irina

Hang the event handler for the whole document - then the events on the elements changed by the Ajax will work as it should, for example:

 $(document).on('событие', 'селектор', function () { //Код });