Question

I have an app that is using twitter-bootstrap and I am trying to implement a button that would launch a modal-box loading users/new path. I am able to do this but only if I input the javascript portion of the code directly into the console. Putting into the application.js does nothing.

This is how it is set up in the view:

<a class="btn" id="modal" data-toggle="modal" href="#userModal" >New Reserver</a>

<div class="modal hide" id="userModal">
</div>

If I press the button without executing any javascript an empty modal box loads just as expected. However if I run the following code in the javascript console in my browser while the modal box is open or before clicking on the button everything gets rendered properly. Inside of my users/new is a form partial that also gets rendered and functions properly. Why is it not executing properly inside of my application.js?

$('#userModal').load('users/new #content');

Answer 1

Turns out the code was executing before the DOM was loading properly. I was sure I had checked for that earlier but apparently my syntax was wrong. This fixes it

$().ready(function() {
  $('#userModal').load('users/new #content');
});