обновления функции Ajax на первый вызов только

Question

Я использую жерех MVC 4 вместе с Jquery 1.10.2

Я пытаюсь обновить таблицу в рамках частичного представления и отладки Javascript, кажется, сродни вуду (по крайней мере, мне никак).

При первом вызове моей функции ajax обновление происходит, как ожидалось. Любые последующие вызовы не регистрируются.

Я прочитал несколько статей и ответы stackoverflow, которые включали настройку cache = false, читая вкладку сети в инструментах разработчика, чтобы получить представление о том, что происходит.

Из второго предложения я вижу, что первый вызов возвращает 200 статус ответа, но второй вызов, кажется, ничего не делает.

Я поставил предупреждения в сценарий, при первом вызове все отображаются и обновляются данные, но при втором вызове ничего не происходит, почему?

сценарий

$("#resultsPerPage").change(function() { 
    alert("pre") 
    var selectedText = parseInt($(this).find(":selected").text()) 
    call_PropertyTable("", 1, selectedText); 
    alert("post") 
}) 

    //calls _PropertyTable Partial view 
function call_PropertyTable(param, val, resultsPerPage) { 
    $("#hdnCurrentPage").text(val); 
    alert("pre-ajax") 
    $.ajax({ 
     cache: false, 
     url: "_PropertyTable", 
     type: "get", 
     data: { 'param': param, 'value': val, 'resultsPerPage': resultsPerPage }, 
     success: function (data) { 
      $("#properties").html(data); 
     } 
    }); 
    alert("post-ajax") 
} 

вид

<div id="properties"> 
    @{Html.RenderPartial("_PropertyTable", Model);} 
</div> 

частичный вид

//^^^other data not updating after first ajax call^^^ 
<select id="resultsPerPage" name="dataTables-example_length" aria-controls="dataTables-example" class="form-control input-sm"> 
       <option value="10" @{if (ViewBag.PageRange == 10) { ViewBag.Selected = "selected"; } else { ViewBag.Selected = ""; }} @ViewBag.Selected>10</option> 
       <option value="25" @{if (ViewBag.PageRange == 25) { ViewBag.Selected = "selected"; } else { ViewBag.Selected = ""; }} @ViewBag.Selected>25</option> 
       <option value="50" @{if (ViewBag.PageRange == 50) { ViewBag.Selected = "selected"; } else { ViewBag.Selected = ""; }} @ViewBag.Selected>50</option> 
      </select> records per page 

контроллер

public ActionResult _PropertyTable(string param, int value = 1, int resultsPerPage = 10) 
    { 
     ViewBag.PageRange = resultsPerPage; 
     //other stuff 
     return PartialView(properties); 
    } 

Answer 1

Ваш скрипт заменяет элемент <select> на id="resultsPerPage", поэтому исходный элемент <select>, к которому вы привязали обработчик, больше не существует, и поэтому событие никогда не вызывается. Вам необходимо использовать делегирование событий, используя функцию .on().

Заменить

$("#resultsPerPage").change(function() { 
    .... 
}); 

с

Edit

Несколько предложений по улучшению кода. Непонятно, почему у вас есть отдельная функция call_PropertyTable(), поэтому я просто объединил их для простоты.

var properties = $('#properties'); // cache elements your repeatedly refer to 
properties.on('change', '#resultsPerPage', function() { 
    var selectedText = $(this).val(); // all that's required 
    $.ajax({ 
    cache: false, 
    url: '@Url.Action("_PropertyTable")', // don't hard code your url's 
    type: "get", 
    data: { param: '', value: 1, resultsPerPage: selectedText}, // no need to quote property names 
    success: function (data) { 
     properties.html(data); 
    } 
}); 

Или более просто использовать $.получить() ярлык

$.get('@Url.Action("_PropertyTable")', { param: '', value: 1, resultsPerPage: selectedText}, function(data) { 
    properties.html(data); 
}); 

Вместо того, чтобы вручную создавать разметку, использовать модель представления и прочно связываются с вами свойства модели с использованием HTML хелперы

public class SampleViewModel 
{ 
    public int PageRange { get; set; } 
    public SelectList PageRangeList { get; set; } 
    .... 
} 

public ActionResult _PropertyTable(string param, int value = 1, int resultsPerPage = 10) 
{ 
    IEnumerable<int> pageRanges = new List<int>{ 10, 25, 50 }; 
    SampleViewModel model = new SampleViewModel() 
    { 
    PageRange = resultsPerPage, 
    PageRangeList = new SelectList(pageRanges), 
    .... 
    }; 
    return PartialView(model); 
} 

и в использовании частичного просмотра

@model SampleViewModel 
.... 
@Html.DropDownListFor(m => m.PageRange, Model.PageRangeList) 

Обратите внимание, что непонятно, почему вам нужно сгенерировать выпадающий список в частичном представлении, а не иметь его в главном представлении (вне элемента <div id="properties">), чтобы он не отображался заштрихованными именно с html, который он первоначально был (и, следовательно, использование делегирования событий не было бы необходимым).