Содержимое Div не изменяется при первом нажатии

Question

У меня проблема с изменением содержимого div. Сначала я делаю вызов ajax и получаю массив JSON с сервера. Все идет нормально. Затем я хочу изменить содержимое div на то, что я получил от сервера. Проблема заключается в том, что содержимое не изменяется при первом щелчке. Ответ всегда в порядке, я проверил с Fiddler и в своем коде, что получаю правильный ответ. Но, остается загадка, почему div на моей странице не изменился с первого щелчка. Почему мне приходится дважды кликать каждый раз? Я трачу часы на это, все пробовал, ничего не кажется логичным. Вот мой код (проект MVC 4):

$('#btnsearch').click(function() 
{ 
    var searchStr = $('#txtSearch').val(); 
    var noOfPages = 1; 

    $.ajax({ 
     type: "POST", 
     datatype: 'json', 
     url: $('#btnsearch').data('request-url'),/*URL from Razor's page*/ 
     data: { pageNo: noOfPages, searchString: searchStr },/*MVC 4 call*/ 
     success: function (jsontext) 
     { 
      $('#hiddenSearchResult').val(jsontext); 
     }, 
     error: function() 
     { 
      alert('Error when searching!'); 
     } 
    }); 

    var json = $('#hiddenSearchResult').val(); 
    if (json.length === 0){ alert('result is empty!'); 
    return;}/*with empty json, parsing throws error*/ 
    json = JSON.parse(json); 
    if (json.Content == undefined) return; 

    for (var i = 0; i < json.Content.length; i++) { 
     switch (i) { 
      case 0: 

       $('#snippetsdivinner').html(json.Content[i].ContentString); 
       break; 
      case 1: 

       $('#snippetsdivinner1').html(json.Content[i].ContentString); 
       break; 
      case 2: 

       $('#snippetsdivinner2').html(json.Content[i].ContentString); 
       break; 
      case 3: 

       $('#snippetsdivinner3').html(json.Content[i].ContentString); 
       break; 
     } 
    } 
}); 

Answer 1

Код от var json = $('#hiddenSearchResult').val() года выполняется сразу же после того, как запрос AJAX запускается, но до его завершения, поэтому в то время $('#hiddenSearchResult') еще не заселен.

При повторном нажатии кнопки он заполняется завершением запроса AJAX, и, таким образом, код после того, как ваш $.ajax выполняет, как вы ожидаете.

Вы должны переместить свой код внутри функции success, чтобы все это выполнялось при завершении запроса AJAX.

Answer 2

Это асинхронный, вы должны ждать, пока вы не получите результата

$('#btnsearch').click(function() 
{ 
    var searchStr = $('#txtSearch').val(); 
    var noOfPages = 1; 

    $.ajax({ 
    type: "POST", 
    datatype: 'json', 
    url: $('#btnsearch').data('request-url'),/*URL from Razor's page*/ 
    data: { pageNo: noOfPages, searchString: searchStr },/*MVC 4 call*/ 
    success: function (jsontext) 
    { 
     if (jsontext.length === 0){ alert('result is empty!'); 
      return; 
     }/*with empty json, parsing throws error*/ 
     var json = JSON.parse(jsontext); 
     if (json.Content == undefined) return; 

     for (var i = 0; i < json.Content.length; i++) { 
     switch (i) { 
      case 0: 
       $('#snippetsdivinner').html(json.Content[i].ContentString); 
       break; 
      case 1: 
       $('#snippetsdivinner1').html(json.Content[i].ContentString); 
       break; 
      case 2: 
       $('#snippetsdivinner2').html(json.Content[i].ContentString); 
       break; 
      case 3: 
       $('#snippetsdivinner3').html(json.Content[i].ContentString); 
       break; 
     } 
    } 
     }, 
     error: function() 
     { 
      alert('Error when searching!'); 
     } 
    }); 
}); 

Answer 3

Вы, вероятно, нужно также поместить весь код, начиная с

var json = $('#hiddenSearchResult').val(); 

внутри успеха дозвона AJAX.

Answer 4

Если вы используете datatype: 'json' в своем аякс-звонке, вам не нужно делать json = JSON.parse(json);.
И что другие ответы говорят о том, чтобы поместить весь ваш код в функцию обратного вызова success.