Rails / jQuery / Modal forms - Cache issue? sometimes they just stop working

Question

I have an app that uses remote links, jQuery functions to handle them, and partials that load (modal) after the jQuery is finished. (Rails 3.2.11, Ruby 1.93, jQuery 1.9, running in development environment )

99% of the time everything works fine - the partial appears in a modal form floating above the "parent" form with the background darkened and the parent form blocked from click and scroll actions.. Works well...

Every once in a while what happens is that this breaks.. After clicking on a (remote) link, the screen is darkened but no modal form..

The jQuery does work - I can see entries in the browser logs, can have alert notifications etc but the partial never appears.. There are no console errors from the browser nor any Rails errors displayed in the terminal window.. It seems as if the Jquery is executing but handoff to Rails / the partial is never made...

This sounds like some kind of caching issue... I've tried rake assets: clean to no avail. What I have done taken a backup that worked, and copied over the new code and everything is working again.. I haven't changed the CSS in quite a while so that doesn't seem to be an issue either.

Any idea as to what the problem might be?

The routes check out etc...

Here are my files:

view code:

<div class="modal" class="modal-hidden">
    <div class="modal-content" class="modal-hidden"> 
    </div>
</div>


<%= link_to(activity["status"], {:controller => 'statuses', :action=>'edit', :id=>activity["object_id"]},:remote=>true,:class=>"edit")%>

news.js

$(document).ready(function() 
{
  // .... misc functions... 
    $('#newsfeed').on('click','.edit', function(evt) {

     -----------misc code that makes modal divs visible and sizes them - not relevant to issue------

      $(".modal-content").css({ top:0, left: dialogLeft, position:"fixed", display:"inline"});
      evt.preventDefault(); 
  });
  //  .... misc functions... 
});

edit.js

$('.modal-content').html("<%= j(render(:partial=> 'statuses/edit', :locals=>{:id=>:id, :activity_list_id=>:activity_list_id}).html_safe).html_safe %>");

_edit.html.erb

body style="background: #4B7399">
<table style="background:#ffffff">
<tr>
<td>
<h2>Edit Status</h2>
<%= form_tag({:controller => :statuses, :action => :update, :id=> @status.id}, {:method => :put, :remote=>true} ) do |f|%>
    <br></div>
<%= hidden_field_tag :id,  @status.id.to_s%><br>
Status: <%= text_area_tag :status, @status.status.to_s %><br>
<%= submit_tag "Update"   %>
<% end %>
<button class="close">Close it</button>

<%= render "layouts/modal" %>

development.rb

  config.serve_static_assets = true

What could be causing this? Is my jQuery just not correct but a working version is cached? Not quite sure what to make of this issue...

First thought: is your `news.js` code in a document.ready block? — Mike Manfrin, Aug 08 '14 at 23:53
Can you confirm this sentence: If you refresh the entire page, it works, but if you click on your link twice, it doesn't work at the second time. — Mauricio Moraes, Aug 13 '14 at 20:19
Not using bootstrap modals nor jquery UI.. just rolled my own (code above)... — Ruben Catchme Obregon, Aug 14 '14 at 01:10
Everything works fine - I can refresh the page etc.. Can click multiple times.. It just sort of "breaks" out of the blue once in a while and won't work after that.. Browser goes dark (as it's supposed to) but no modal form etc.. — Ruben Catchme Obregon, Aug 14 '14 at 01:11
Question: are you using turbolinks? if turbolinks is turned on you need to listen for both the document ready and the page:load events — Pure Function, Aug 14 '14 at 09:10
`What I have done taken a backup that worked, and copied over the new code and everything is working again..` So it works now? Can you just diff the working and non working apps? — Brad Werth, Aug 14 '14 at 23:23
Have you tried watching the Network tab in browser's dev tools to make sure the last ajax request is completing successfully? — James Mason, Aug 15 '14 at 17:49

score 2 · Answer 1 · edited May 23 '17 at 11:50

2

Try to use //= require jquery_ujs in application.js instead of //= require jquery, and if you use this line javascript_include_tag *js_libraries, :cache => 'cached_js', then you need to remove cache attributes.

Try to add this code in application.js:

$(function(){
  $('a').attr('remote', 'true').attr('data-type', 'script');
});

Read these answers: answer_1, and answer_2.

edited May 23 '17 at 11:50

Community

1
1

answered Aug 15 '14 at 18:53

Mohamed Yakout

2,868
1
25
45