Question

Is there any way to suspend execution of javascript until whole page is loaded in a browser? I am updating a div at the bottom of the document using AJAX but when I click this link before whole page is loaded I get an error…

<%= link_to_remote 'Update', :update => 'div_at_the_bottom', :url => { :usual_stuff } %>

Answer 1

Disable the generated link and enable it when the dom has loaded:

1. Disable the link:

   <%= link_to_remote 'Update', 
           { :update => 'div_at_the_bottom', :url => { :usual_stuff } },
           { :disabled => 'disabled', :id => 'update-trigger' }
   %>
   

   (note that to be able to pass this extra option to link_to_remote you need to make the [2nd] "options" hash explicit by wrapping it with curlies {}. Extra help on this)

2. Then somewhere (anywhere after the prototype js lib has been included) enable the link when the DOM has loaded (this is similar to what everyone has been saying to do so far):

   <script>
   $(document).observe('dom:loaded', function() {
       $('update-trigger').disabled = false
   })
   </script>
   

This solution is also semantically agreeable, if that matters to you (it does to me).