jQuery error "missing ; (semicolon) before statement <script type="text/javascript">\n " after Ajax request. Any idea?

Question

Hello there,

I am stuck with my Rails application where I use JQuery to post/get ajax requests and I have this following error (found by using Firebug).

missing ; before statement 

<script type="text/javascript">\n

I am using the JQuery ajax method to post like this:

function day_on_change() {    
     jQuery.post( "/times/add"+ "?day_id=" + $('#day_id').val() + "&pool_id=" + $('#pool_id').val() ,null, function(data) {
       $('#container').html(data);
     }, "script");
}

The function 'day_on_change' is called when a select dropdown menu is changed. It posts to 'times/add' with ajax and the response data is replaced in the Div with id 'container'.

The response data is as follows:

<script type="text/javascript">
  DD_roundies.addRule('#normal_header_2', '5px 5px 0 0');
  DD_roundies.addRule('#normal_footer', '0 0 5px 5px');

</script>


<script type="text/javascript">
jQuery(function($) {

  //more js code here
});
</script>
<!-- Some HTML here too -->

Any help would be appreciated.

Cheers.

Answer 1

Run your code through JSLint

(Note: JSLint will hurt your feelings)

Answer 2

After raging hours of debugging and trying to solve the problem, I finally found out what's causing the problem. Please let me explain

From Rails app, when I call ajax requests like

jQuery.post( "/times/add"+ "?day_id=" + $('#day_id').val() + "&pool_id=" + $('#pool_id').val() ,null, function(data) {
       $('#container').html(data);
     }, "script");

, it seems JQuery expects the response to be a "script" (since I uses 'script' option in the jQuery.post method). But in my controller of the Rails app, I was responding to that request as follows:

 respond_to do |format|
      format.html { render :action => 'embed' }
      format.js { render :partial => 'embed_' + @size, :locals => {:timetable_entries => @timetable_entries} }
    end

I was responding the request with a partial which is just 'html.erb' file which has mixed codes including JS, HTML and Ruby. And after testing for some hours, I found out that I still have various kinds of error in the firebug even without the javascript in the response data. It gives me "XML cannot be the whole program" error when I have no js code in there. So after reading this, I realize that I am returning the response data in wrong format.

So I changed my controller to respond like this.

 respond_to do |format|
      format.html { render :action => 'embed' }
      format.js
    end

which will basically expect 'add.js' file to process the javascripts. So I created the add.js and in there I put this.

$("#container").html("<%= escape_javascript(render :partial => 'embed_' + @size, :locals => {:timetable_entries => @timetable_entries}) %>");

Then only I see no more errors in the browser. I hope this will save hours of frustrations for those who have same problem like me.

Cheers.