jQuery wait for replaceWith to finish before executing

Question

I bulk replace html in many divs with replaceWith. After replacing I am using jTruncate to truncate the texts. However it doesn't work, because at the time of execution, replaceWith is not done.

I tried the callback trick (How do I extend jQuery's replaceWith function to accept a callback function?) but didn't work.

Any ideas?

$(".hotel_info").each(function () {
    var div;
    div = $(this);
    div.replaceWith(data);
    truncInfo(div);
});

function truncInfo(div) {
    div.jTruncate({
        length: 100,
        minTrail: 100,
        moreText: '[more...]',
        lessText: '[less...]',
        ellipsisText: '...',
        moreAni: 'fast',
        lessAni: 'fast'
    });
}

`.replaceWith()` is a "synchronous" function, so it seems unlikely that some other code runs when it's not done yet. — Ja͢ck, Jun 26 '14 at 11:24
That said, it seems that you're not showing the complete code; where does `data` come from? Is it a function that performs an AJAX call inside? — Ja͢ck, Jun 26 '14 at 11:28
Perhaps [this answer](http://stackoverflow.com/questions/15963590/how-to-synch-javascript-callbacks/15964626#15964626) can help you to synchronise multiple asynchronous tasks. — Ja͢ck, Jun 26 '14 at 11:35
I believe that it does not matter where "data" comes from. Even if it is an AJAX call, since replaceWith is synchronous, it shouldn't execute truncInfo before completing. — wizard, Jun 26 '14 at 12:29
Well, it does matter because `.replaceWith()` is only synchronous when provided with a synchronous callback function; that said, where does `data` come from, you didn't answer that question. — Ja͢ck, Jun 26 '14 at 12:32
From an AJAX call. However I tried with both "async: true" and "async: false" option, but nothing changed. — wizard, Jun 26 '14 at 12:41
Without seeing the whole code it's hard to tell why it won't work as expected. — Ja͢ck, Jun 26 '14 at 12:44
Jack, AJAX has nothing to do with this. I tried with static html "div.replaceWith('Blah, blah, blah, blah...')", and still does not work. — wizard, Jun 26 '14 at 12:52
Great, in that case, create a fiddle or jsbin that demonstrates the issue. — Ja͢ck, Jun 26 '14 at 12:54

score 3 · Answer 1 · edited Jan 16 '20 at 11:57

Ok, found the solution thanks to this post: jQuery replaceWith find new element

It seems that after replace with, the object is removed from the DOM, so a new one is created. So, I had to change the code like this:

$(".hotel_info").each(function () {
  var div;
  var div2;
  div = $(this);
  div2 = div.replaceWithPush(data);
  truncInfo(div2);
});

$.fn.replaceWithPush = function (a) {
  var $a = $(a);
  this.replaceWith($a);
  return $a;
};

Thank you all for your time!

score 1 · Answer 2 · answered Jun 27 '14 at 04:22

Unlike jQuery functions such as .find(), .replaceWith() doesn't update the set of elements (which makes up the jQuery object itself).

This means that upon removal, you're left with old references; the trick here is to keep a reference of what you replace the element(s) with.

In your case, you could do it differently, though:

$(".hotel_info").replaceWith(function () {
    return truncInfo(this);
});

Be sure to make truncInfo return the results of calling jTruncate():

function truncInfo(div) 
{
    return div.jTruncate({
        length: 100,
        minTrail: 100,
        moreText: '[more...]',
        lessText: '[less...]',
        ellipsisText: '...',
        moreAni: 'fast',
        lessAni: 'fast'
    });
}

score -1 · Answer 3 · answered Jun 26 '14 at 13:15

-1

To just try with the async and sync part you can use setTimeout function.

setTimeout(function(){truncInfo(div)}, 3000);

This would wait for 3 seconds before calling the truncInfo function.

3 seconds would be enough for the replaceWith function to complete its processing. You can extend the time as per your choice and check.

This is not an ideal practice but may work in some cases.

For more details on setTimeout please check http://www.w3schools.com/jsref/met_win_settimeout.asp

Hope this helps.

answered Jun 26 '14 at 13:15

Raza

807
1
9
16

The original question says replaceWith is not done. My answer shows exactly how to make the progress wait for specific time. Also i've noted in my answer to check if it suits the questions needs. @Alexander Kludt You don't have to down vote any answer that doesn't look good to you. – Raza Jun 26 '14 at 13:25

jQuery wait for replaceWith to finish before executing

3 Answers3

Linked