Let us consider the following context: you have a dropdown selection box, and want do load specific content dynamically via Ajax for each entry of the box.

<select id='box_id'>
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
</select>

The following jQuery Ajax call looks ok and works in FireFox, but it doesn’t work for the Internet Explorer. For the Internet Explorer it results in the strange Javascript error

“;” expected

with a ridiculous high line number, for example 169340661. WTF ? Why does IE complain that “a semicolon character is expected”, although FireFox works fine ? The error ‘semicolon’ expected can result from an text which is not escaped properly ( for example from the usage of & without using the escaped version &amp; ). But it can also result from a jQuery Javascript:

$('#box_id').change(function () {
  $.ajax({
      type: "GET",
      url: "/your_url",
      data: "param="+$('#box_id').val(),
      async: true,
      dataType: "script",
      success: function(data){
         $("#form").html(data);
      }
 });
});

The reason is the dataType “script”. If the dataType is “script” and HTML code is returned, then IE tries to treat the result as Javascript and produces errors, contrary to the Firefox browser which is a bit smarter in this case. If you use dataType: “text”, it works in both browsers. Or you can use simply $.get instead of $.ajax :

$('#box_id').change(function () {
 $.get("/your_url", {"param":$('#box_id').val()},
    function(data){ $("#form").html(data); }
 );
});

It took me a while to figure this out. The Javascript error message “;” expected succeeded by a line number which points into the nirvana was not very helpful. Hopefully this tip will be useful for someone else.

Advertisement

javascript

, ,

2009/04/09

2 Comments