Reputation: 11865
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?
Upvotes: 1
Views: 1583
Reputation: 32608
.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
Upvotes: 1
Reputation: 69915
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);
});
Upvotes: 1
Reputation: 207557
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 );
}
});
Upvotes: 3
Reputation: 360912
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);
}
Upvotes: 0