CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrap
KCE
KCE

Reputation: 1209

Rails plain href with remote: true being treated as JS on one place in page but HTML in another

My problem

I realize that there are a ton of questions about using remote: true and having the server process the request as HTML instead of javascript so that you get a MissingTemplate Error on SO already.

So far none of them answer my question. To prove that:

  1. I know that I have included / bundled etc jquery, jquery-ujs etc because this link used to work. Also I can see them getting included on the rendered page and also as mentioned in the question, I'm getting the server to successfully process the request as JS in many places.

  2. I know that I'm not having a precompiled assets issue because I don't have any precompiled assets (deleted the public/assets folder myself just to make sure).

If I put the following on my index page right at the top

<%= link_to "Test", "/create_tags_dialog", :remote => true %>

It renders the html perfectly:

<a data-remote="true" href="/create_tags_dialog">Test</a>

and correctly calls the remote script, no TemplateMissing Error because the request is processed as JS.

Just to be sure I even copied the rendered HTML back onto the index and they both work as expected:

<a data-remote="true" href="/create_tags_dialog">Test2</a>

(i.e. the server processes the request as JS and I get no TemplateMissing Error)

Now for the problem

If I put the same link_to line into a bootstrap dropdown <ul> the request gets processed as HTML and I get a MissingTemplate Error. I checked and the rendered html is identical! Again, just to check, I put the raw html in as well <a data-remote="true" href="/create_tags_dialog">Test</a>

The only difference between identical uses of this anchor tag is that the second use (the broken one) is inside of a bootstrap dropdown which gets rendered as a partial on page load.

Could it be the partial? Please let me know if I can include any outputs, error logs, screenshots etc to help clarify things.

Note

I see a few solutions like this one

Which recommend ensuring this line is in the index

<%= javascript_include_tag "jquery", "jquery_ujs" %>

I don't have that line exactly, mine is

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

and my application.js is

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require jquery-readyselector
//= require fastclick
//= require_tree .

Also the link is working in a different div of the same page at the same time, but just in case I thought I'd mention this. . .

Update

Thanks to AmShaegar I discovered the change in my code that causes this to break. I added a stopPropagation() to my dropdowns because I want them to stay open after click like this:

$('#tags-filter-dropdown').click (e) ->
  e.stopPropagation()

If I comment this out, my remote-link goes back to working. Any suggestions for how I can both keep that dropdown from closing and activate a remote link? I tried implementing AmShaegar's solution of giving the link a class and preventing propagation / default on the link specifically but it just killed the link (unresponsive). Is there a middle ground?

Upvotes: 1

Views: 1127

Answers (1)

AmShaegar
AmShaegar

Reputation: 1539

Based on this question and my comment above:

It may help if you disable bootstraps onclick handler for your remote link. You need to give your link a special class and then write your own onclick handler.

link_to "Test", "/create_tags_dialog", :remote => true, { class: 'no_bootstrap' }

$(".no_bootstrap").click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    // You may still want to close the drop down manually here.
    // See bootstrap documentation for this.
});​

Update

Looks like you need to trigger the remote click event manually after you stopped propagation. Therefor you need to know how rails does it internally.

From viewing the source code I would say this could work like this:

$(".no_bootstrap").click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    $(e.target).trigger('click.rails');
});​

Upvotes: 1

Related Questions