Javascript replace not working with 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?

html().toString().replace(....

Senad Meškin
– Senad Meškin

2011-08-08 19:30:13 +00:00
Commented Aug 8, 2011 at 19:30 — Senad Meškin
– Senad Meškin, Commented Aug 8, 2011 at 19:30

epascarello · Accepted Answer · 2011-08-08 19:36:15Z

3

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

answered Aug 8, 2011 at 19:36

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bot Over a year ago

The whole point of using load is so that I do not hard code the html directly into jquery. Much easier if I make template changes to edit one single file then go and edit multiple versions of a string.

Bot Over a year ago

Nvm, I misunderstood your post. I was under the impression you wanted me to hard code the html as a string.

Bot Over a year ago

I had to edit your post to give it the global flag because it would only replace the FIRST instance.

ShankarSangoli · Accepted Answer · 2011-08-08 19:37:11Z

1

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

answered Aug 8, 2011 at 19:37

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Comments

Dennis · Accepted Answer · 2011-08-08 19:52:59Z

1

.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

edited Aug 8, 2011 at 19:52

answered Aug 8, 2011 at 19:39

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

2 Comments

Bot Over a year ago

Thanks! This worked perfect! Any idea why this didn't atleast replace the first instance?

Dennis Over a year ago

It did when I ran it. It would also be worth caching $('#pendingLoadDiv').html(), chaining the replace operations and storing the result back in #pendingLoadDiv. jsfiddle.net/RwPuu/2

Marc B · Accepted Answer · 2011-08-08 19:31:37Z

0

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

answered Aug 8, 2011 at 19:31

Marc B

362k44 gold badges433 silver badges508 bronze badges

Collectives™ on Stack Overflow

Javascript replace not working with jQuery

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related