То, что я вижу, не то, что я получаю

Question

(упрощенный) Сценарий: удаленная база данных MySql и HTML-страница с двумя кнопками: SHOW и SELECT. SHOW загружает одну запись и отображает поля в форме.

Все в порядке с этой стороны.

SELECT был сделан с новым подходом для меня:
Я передаю параметр функции PHP для запроса БД и создания html-файла с помощью resuls.
Этот файл представляет собой серию из <UL><LI><a id="1"...data..</LI></UL>, которая будет вставлена ​​в DIV.
Один из <LI> содержит ссылку, которая при нажатии вызывает функцию SHOW. Идентификация записи производится с помощью идентификатора, связанного с якорем.

Эта процедура работает нормально; Я получаю новый сегмент HTML (который я могу проверить на удаленном веб-сервере).
Вставляется (???) внутри моего DIV, и содержимое отображается правильно на экране, но ... его не существует.

Нажав на ссылки, не активируется процедура SHOW (на самом деле, предупреждение с идентификатором вызова никогда не отображается).
Глядя на источник HTML-страницы из Mozilla, он по-прежнему показывает предыдущий контент без нового добавленного (или замененного) кода.

Это причина названия этого сообщения: я вижу то, чего на самом деле нет.
Возможно, у меня должен быть AJAX, чтобы «обновить» его видимость DOM, но и не понимаю, как это сделать.

Это часть JQuery скрипт, который я использую, чтобы получить новое содержание:

$("#select").click(function() { 
    $.ajax({ 
     url: "new_record_list.php", 
     cache: false, 
     success: 
      function(recNumber) 
      { 
       $("#selected").val(recNumber); //ok 
       $("#recordList").load("list.txt"); //'list.txt is created by new_record_list.php 
       alert($("#recordList").html()); //this is OK 
      } 
    }); 
}); 

Все это хорошо, но где это мясо?

Answer 1

Поскольку я не могу прокомментировать ваш новый пост из-за репутации:

Удалить обработчик событий нажмите внутри функции loadRecord.

Событие click было уже связано в верхней части вашего скрипта. Что происходит, так это то, что вы нажимаете кнопку, активируете функцию загрузки записи, которая связывает новый обработчик кликов, вызывая действие над всеми щелчками за ним.

Пластинка нагрузка должна выглядеть вместо этого:

function loadRecord(){  
     ind = $(this).attr("id"); 
     $("#thisRecord").val(ind); //shows the clicked record 

     $.get("show_record.php",{id:ind}, function(gotString) 
     { 
      ptr=0; //used to fetch fields 
      pos=0; 
      lun = gotString.length; 
      if (lun==0) { 
       alert ("Empty string!"); 
       return false; 
      }; 

// fetch received keys and values then fills the fields            
      while (ptr < lun) { 
      ..... //not interesting here    
      }; //while 

     });                     
     return false; //required! 

}; 

Кроме того, вы должны заменить

$(document).on('click', '.compLink', function() { 
    loadRecord(); 
}); 

с

$(document).on('click', '.compLink', loadRecord); 

И loadRecord будет передано событие мыши как аргумент. $ (this) также будет ссылаться на ссылку, которую вы нажали внутри функции loadrecord. В противном случае вам нужно передать элемент, щелкнув по этой функции.

Answer 2

Скорее всего, слушатель, которого вы создали, не подключался к новым dom-узлам. Вы можете исправить это путем присоединения слушателя к родительскому элементу, который существует при создании страницы или даже документ, как так:

$(document).on('click', '.show', function() { 
    //click event 
}); 

Заменить «.Show» с селектором Jquery для ссылок

Answer 3

Один из вопросов, Я могу видеть, сразу это вызов AJAX, она должна быть вдоль линий:

$("#select").on("click", function() 
{ 
    $.ajax({ 
     url: "new_record_list.php?record=MY_RECORD_VALUE", 
     type: "GET", 
     success: function (response) 
     { 
      $("#selected").val(response); 
      $("#recordList").html(function() 
      { 
       $.ajax({ 
        url: "list.txt", 
        typ: "GET", 
        success: function (response2) 
        { 
         $("#recordList").html(response2); 
        } 
       }); 
      }); 
      alert($("#recordList").val()); 
     }, 
     beforeSend: function() 
     { 
      $("#recordlist").html("Loading..."); 
      $("#selected").val("Loading..."); 
     } 
    }); 
}); 

Это даст лучший результат с $.ajax вызова, который вы сделали.

Метод .load() может быть ненадежным порой, поэтому почему (IMO) лучше сделать ajax внутри ajax, потому что это то, что вы делаете с меньшим контролем.

Если вы сделали function(recNumber), это неправильно. Я боюсь, что вернувшийся из вызова AJAX ответ - все, что будет показано, если вы используете его как фактическую страницу, например. если у вас были:

Тогда все это будет возвращено, а не только поле ввода id_valued.

Answer 4

Я следовал за подсказки от Erin плюс некоторых других предложений, найденных на этом форуме и в настоящее время программы ПОЧТИ работ.
На самом деле это происходит, но когда загружается новый набор записей, для обновления дисплея (то есть для вызова функции loadRecord) необходимо дважды щелкнуть по ссылке, только в первый раз. Все следующие клики реагируют немедленно.

Я пытаюсь опубликовать весь сценарий, для вас специалисты, чтобы посмотреть, что я вряд ли сделал:

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $(document).foundation(); 

    var $scrollbar = $("#scrollbar1"); //other stuff 
    $scrollbar.tinyscrollbar(); 

    //Erin suggestion + my understanding 
    $(document).on('click', '.compLink', function() { 
     loadRecord(); 
    }); 



/* =========== ADD Rows ============================== */ 
/* action called by hitting the "selectRow" button. 
/* query the DB and get a list of rows (5 fields each) 
/* that are then inserted into the '#recordList' DIV. 
/* Each rows has format: 
/* <UL><LI><A id="xxx" class="compLink" ...>item xxx</A></LI><LI>....</LI></UL> 
*/ 

    $("#selectRow").on("click",function() 
    { 
     $.ajax(
     { 
      url: "new_record_list.php", 
      type: "GET", 
      success: function(recNumber) //if ok, we get the number of records 
      { 
       $("#selectedRecords").val(recNumber); //show how many records we got 

         $("#recordList").load("newRecords.txt"); //loads the remote text file into the DIV 

        } 

      }); 

    }); 
/* ====================================================== */ 



/* =========== LOAD Record ============================== */ 
/* loads and displays an entire record from DB, 
/* based on the ID of clicked link with class="compLink" 
/* in '#recordList' DIV. 
/* Example: <a id="1" class="compLink" ...> 
*/ 
function loadRecord(){ 
    $(".compLink").click(function(event) 
     {   
      ind = $(this).attr("id"); 
      $("#thisRecord").val(ind); //shows the clicked record 

      $.get("show_record.php",{id:ind}, function(gotString) 
      { 
       ptr=0; //used to fetch fields 
       pos=0; 
       lun = gotString.length; 
       if (lun==0) { 
        alert ("Empty string!"); 
        return false; 
       }; 

// fetch received keys and values then fills the fields            
       while (ptr < lun) { 
       ..... //not interesting here    
       }; //while 

      });                     
      return false; //required! 

     }); 
    }; 
/* ====================================================== */ 




    return false;        
}); 

</script> 

Я надеюсь, что это достаточно ясно. Благодаря