Javascript on page is not executing before AJAX onComplete event is called

Question

I have a form that makes an Ajax POST request to insert a widget into my database. In the form, I have a select box where you can select from the widgets. After the db insert is made, I must update the select box. I actually just replace the entire form for now.

Because the select box has the widgets, I must have a copy of the objects in javascript. I call this var widget_objects. When the form is replaced during the update event, I print the ruby variable <%= @widget_objects %> and I can see the newly created object. However, when I try to access the javascript var "widget_objects" in the onComplete event, the new object does not exist. I create the javascript widget_objects with this line of code on the page: widget_objects = <%= @widget_objects %>;

So it seems that the line of code above is not executed before Ajax request's onComplete event. However, I thought the onComplete event occurs after the page has been loaded, and I would assume after scripts are eval'd....any ideas?

<%= submit_to_remote( 
     "save_widget", 
     "Save Widget & Generate Embed Code", 
     {
      :url => widgets_url(:user_id => @user.id),
      :update => "widget_form",
      :method => :POST,
      :html => {  :id => "save_widget_button", 
         :onclick => "this.value='Saving...'; this.disabled = 'true';",
         :style => "width: 220px;"
         }, 
      :complete =>"
       $('save_widget_button').disabled=''; 
       $('save_widget_button').value='Save Widget & Generate Embed Code';
       var last_id = $j('select#widget_id').children(':last').attr('value');
       alert( widget_objects[last_id] );
       ",
      :success => "reportMessage('success', request.headerJSON.success, 'save_widget_status'); $('band_form').reset();",
      :failure => "reportMessage('failure', request.headerJSON.errors, 'save_widget_status');"
     }) %>

Answer 1

Setting EvalScripts to true must work.

else you can try loading the script using

> <script> function window.onload(){
> alert('I am loaded as the page
> completes loading') } </script>

if this does not help then you can call fucntion :loading in ajax calls while the response is receieved the function will be called.

Answer 2

I had something similar to this happening in my PHP scripts, where the timing of the scripts seemed out of sync. It was more about how code that appeared AFTER the ajax call would execute before the code in the onSuccess event, and the solution was to wrap the entire event response code inside an anonymous function, like this:

onSuccess: function(reply)
{
 resp = reply.reponseText();
 pieces = resp.split('|');
 (...etc...)
}

You might try something similar after your :complete identifier. Hope this helps!

Answer 3

When dealing with these kinds of problems, use Firefox' JS debugger (install the Firebug add-on), enable automatic breaking on exception (from the Scripts tab), and reload the page. If Firefox intercepts an exception (e.g. originating from within the response rjs) then fix the exception. You may also want to just surround your rjs and :complete code with a 'try { ... } catch(e) { alert(e) }' JS wrapper.

Next, use the JS debugger to set breakpoints inside prototype.js's respondToReadyState method, where you'll be able to inspect the rjs reply from your app and step through the evalResponse() method. You'll narrow it down pretty quickly.