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