XML error in JavaScript file

Question

When I execute this JavaScript file in Firefox;

    <script type="text/javascript" >
        $(function () {
            $(".comsubmit").click(function () {
                var comsn = $("#comsn").val();
                var comrn = $("#comrn").val();
                var compic = $("#compic").val();
                var comment = $("#comment").val();
                var eventid = $("#eventid").val();
                var dataString = 'comsn=' + comsn + '&comrn=' + comrn + '&compic=' + compic + '&comment=' + comment + '&eventid=' + eventid;
                if (comment == '') {
                    alert('Must Type Comment to Post Comment');
                } else {
                    $("#flash").show();
                    $("#flash").fadeIn(400).html('<img src="assets/uploading.gif" />Loading Comment...');
                    $.ajax({
                        type: "POST",
                        url: "comments_post.php",
                        data: dataString,
                        cache: false,
                        success: function (html) {
                            $("ol#update").append(html);
                            $("ol#update li:last").fadeIn("slow");
                            $("#flash").hide();
                        }
                    });
                }
                return false;
            });
        });
    </script>

I get this error

Error: missing } in XML expression
Line: 31, Column: 2
Source Code:
}); });

The arrow points inbetween the first semi colon and the space.

What can I do to fix this error?

Answer 1

I don't know whether this will help or not, but you should:

Add <!-- or <![CDATA[ and --> or ]]> to comply with XHTML standards.

Example:

<script type="text/javascript">
/* <![CDATA[ */

  alert("testing");

/* ]]> */
</script>

You should try to eliminate html inside your Javascript. Example:

$("#flash").fadeIn(400).html('<i'+'mg src="assets/uploading.gif" /'+'>Loading Comment...');

Answer 2

I think the HTML you are passing from the Ajax call is not properly formated. Can you add an alert and make sure it looks OK?

Answer 3

Few remarks about your code:

1. You don't need the cache: false option as you are performing a POST request.

2. Instead of concatenating the parameters into dataString let jQuery handle formatting and escaping:

   $.ajax({
       type: "POST",
       url: "comments_post.php",
       data: { 
           comsn: comsn, 
           comrn: comrn, 
           compic: compic, 
           comment: comment, 
           eventid: eventid
       },
       success: function (html) {
           $("ol#update").append(html);
           $("ol#update li:last").fadeIn("slow");
           $("#flash").hide();
       }
   });
   

3. Check the Content-Type header returned by comments_post.php. If it is not properly set (for example if it is set to text/xml), jQuery might try to parse the returned XML, while in reality you are returning HTML.