Javascript替换不适用于jQuery

Question

So I am using jQuery to load in an html file then do a simple string replace on some tokens. However they will not do the replace. Can someone explain to me why this is not working with the replace calls?

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());
                        });

It is getting all the way to the append at the bottom with no errors however it is not replacing any text.

I have even tried storing the pendingLoadDiv to a variable then running the replace calls on the variable and still am having the same issue.

Any ideas?

Answer 1

You really should not use load, I am sure the browser freaks out with the invalid characters in the id. Plus you are doing all of this DOM look ups when you can just work with the string directly.

$.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

In the load success handler it has not yet updated the container. You should first set the html into the container and then try to replace.

$('#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 3

.replace() will only replace the first instance of the string, then return. To do a replaceAll, use a regular expression with the global flag: http://jsfiddle.net/RwPuu/

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

EDIT: The jQuery API documentation also seems to state, contrary to the other answers, that the selected element's content is replaced, then the callback is run. http://api.jquery.com/load

Answer 4

I'd guess that at the time the inner function has been called, Jquery has not yet updated the contents of your div with the loaded data, so you're search/replacing the OLD data, which is about to get deleted.

Try

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