Replace doesn't do anything, what am I doing wrong?

[firedev]

I have html that looks correct to me:

<div id="id" data-turbolinks-temporary>Replace this<div>

No errors in console:

$('#id')
[<div id=​"id" data-turbolinks-temporary>​…​</div>​]

$('[data-turbolinks-temporary]')
[<div id=​"id" data-turbolinks-temporary>​…​</div>​]

Turbolinks.replace('hello', {change: ['id']})
true

But nothing changes:

$('#id').text()
"Replace this"

[tortuetorche]

Hi @firedev,

Can you try this ?

Turbolinks.replace('<div id=​"id" data-turbolinks-temporary>hello</div>', {change: ['id']});

Cheers, Tortue Torche

[firedev]

Okay I see now.

But still, I need to replace <td> and it works only with <div>. Is it by design?

[tortuetorche]

For replacing a <td>, you can do that:

Turbolinks.replace('<table><tr><td id=​"my_id">hello</td></tr></table>', {change: ['my_id']});

Because Turbolinks need a well-formed HTML fragment.

[firedev]

Thanks I'll try in the morning. But this means I need to add another view around my td just to render it from Turbolinks.

Kind of defeats the purpose.

[tortuetorche]

I don't think that replacing the DOM content with a HTML fragment is the main goal of Turbolinks.replace(). You should have an entire HTML page in the first argument of Turbolinks.replace(), not a fragment of it.

Maybe jQuery UJS is more appropriate for what you want to do...

[firedev]

In fact I am rendering this from the controller. And yes I am replacing js.erb partial with render change. But it happens that I can render only part of the view.