Javascript заменить не работает с JQuery

Question

Итак, я использую jQuery для загрузки в html-файл, а затем выполняю простую замену строки для некоторых токенов.Однако они не сделают замену.Может кто-нибудь объяснить мне, почему это не работает с вызовами замены?

pendingRow.html

<span id="{pendingDbId}" data-database="{pendingName}">
    {pendingName} ({pendingTime}) - <a id="cancel-{pendingDbId}" data-dbId="{pendingDbId}" href="#">Cancel</a>
    <br />
</span>

jQuery

$('#pendingLoadDiv').load('templates/pendingRow.html', function() {
                            $('#pendingLoadDiv').html($('#pendingLoadDiv').html().replace("{pendingName}", $('#database option:selected').text()));
                            $('#pendingLoadDiv').html($('#pendingLoadDiv').html().replace("{pendingDbId}", $('#database').val()));
                            $('#pendingLoadDiv').html($('#pendingLoadDiv').html().replace("{pendingTime}", "--:--:--"));
                            $('#pendingDiv').append($('#pendingLoadDiv').html());
                        });

Это все доходит додобавление внизу без ошибок, однако оно не заменяет никакого текста.

Я даже пытался сохранить pendingLoadDiv в переменной, затем выполнить вызовы замены для переменной, и все еще имею ту же проблему.

Есть идеи?

Answer 1

Вы действительно не должны использовать load, я уверен, что браузер сходит с ума с недопустимыми символами в id. Кроме того, вы выполняете все поиски DOM, когда можете просто работать со строкой напрямую.

$.ajax({
  url: "templates/pendingRow.html",
  success: function( data ){
        var html = data.replace("{pendingName}", $('#database option:selected').text())
                        .replace("{pendingDbId}", $('#database').val())
                        .replace("{pendingTime}", "--:--:--");
        $('#pendingDiv').append( html );
  }
});

Answer 2

.replace () заменит только первый экземпляр строки, а затем вернет.Чтобы выполнить replaceAll, используйте регулярное выражение с глобальным флагом: http://jsfiddle.net/RwPuu/

$('#pendingLoadDiv').html($('#pendingLoadDiv').html().replace(/{pendingName}/g, "replacingString"));

РЕДАКТИРОВАТЬ: Документация API jQuery также, в отличие от других ответов, утверждает, что содержимое выбранного элемента заменяется, затем выполняется обратный вызов.http://api.jquery.com/load

Answer 3

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

$('#pendingLoadDiv').load('templates/pendingRow.html', function(data) {
  var $pendingLoadDiv = $('#pendingLoadDiv').html(data);
  var markup = $pendingLoadDiv.html(); 

  markup = markup.replace("{pendingName}", $('#database option:selected').text());
  markup = markup.replace("{pendingDbId}", $('#database').val());
  markup = markup.replace("{pendingTime}", "--:--:--");

   $('#pendingDiv').append(markup);
});

Answer 4

Я предполагаю, что во время вызова внутренней функции Jquery еще не обновил содержимое вашего div с загруженными данными, поэтому вы ищете / заменяете старые данные, которые скоро будут удалены.

Попробуйте

$('#pendingLoadDiv).load('templates/pendingRow.html', function(data) {
                                                               ^^^^^--- the loaded data
   data.replace("{pendingName}", $('#database option:selected').text()));
   etc...
   $('#pendingDiv').append(data);
}