Question

I have a script which is posting some form data to a Quickbase and I’m getting what the browser interprets as JavaScript error in Quickbase’s XML response. Right now, the data is properly being recorded in Quickbase but I can’t seem to suppress the parsing error. Additionally, I have no access to server-side languages – just client-side JavaScript.

Here’s the Ajax code:

myObject.prototype.get = function (url, formdata, context, callback) {
    var options = {
        "url": url,
        "type": "GET",
        "data": formdata,
        "context": context,
        "complete": callback,
        "dataType" : "jsonp",
        "dataFilter" : function (data,type) { 
            alert(data);
        }
    };
    jQuery.ajax(options);
};

• url = https://www.quickbase.com/db/xxxxxxx?act=API_AddRecord
• data = the data collected from the form the user fills out

The URL that gets generated ends up looking like this:
https://www.quickbase.com/db/xxxxxx?act=API_AddRecord&apptoken=xxxxxxxx&callback=jsonp1284044371978&_fid_11=www.domain.com&_fid_12=xxxxx&_fid_17=xxxxxx&_fid_6=xxxxx&_fid_10=xxxxxxxx&=No+Thanks

Because I’m posting across domains, I’m using the JSONP datatype and that seems to be working correctly until I get this XML response:

<?xml version="1.0" ?>
<qdbapi>
    <action>API_AddRecord</action>
    <errcode>0</errcode>
    <errtext>No error</errtext>
    <rid>740</rid>
    <update_id>1284045768176</update_id>
</qdbapi>

Firebug then throws this error:

“unterminated regular expression literal”

<errcode>0</errcode>\n

You’ll see that I’ve tried to act on the response with the dataFilter setting but I can’t even get it to fire. The script runs and nothing gets alerted.

It might be worth noting that I don’t care about the response from the Quickbase server; I just want the error to go away since I’m not doing anything with the response.

Edit
Vivin Paliath pointed out below that the reason I get the error is because the browser is looking for JavaScript to be returned but since QuickBase won’t return anything but XML, I need a way to either destroy or alter the response
* End Edit *

Can anyone tell me:

1. Why the dataFilter never fires?
2. How can I suppress this error?

Thanks everyone

———-

Update: I’m marking Vivin Paliath’s answer as accepted because they are correct: you can’t do it this way without access to a proxy or server-side languages. I decided to go in a different direction. This is what I did.

1. Create a hidden iframe on the page

   <iframe id="myHiddenIframe" name"myHiddenIframe" src="#" height="1" width="1" style="display:hidden"></iframe>

2. Upon the submission of <form id="myForm">, I collected and serialized the answers :

   var myAnswers = $('#myForm').serialize();

3. Built the URL I want to use:

   var myUrl = 'https://www.quickbase.com/db/xxxxxxx?act=API_AddRecord&apptoken=xxxxxxxx&'+myAnswers;

4. Pushed the iframe to the URL I created
   $('#myHiddenIframe').attr('src', myUrl);

———-

Answer 1

If you’re using using JSONP, then the response should be some kind of Javascript. The problem seems to be that it’s trying to run eval on XML which is not valid Javascript (from what I can see after I accessed the link you provided). This is why you’re seeing the parser error. It seems like QuickBase isn’t generating valid Javascript.

If you have access to something on the server-side, you can create a proxy that goes to QuickBase and returns XML to your AJAX call. This is probably your best bet (especially if QuickBase doesn’t support JSONP).

The way JSONP defeats the same-origin policy is by using a SCRIPT. The SCRIPT tag doesn’t conform to the same-origin policy and therefore you can load Javascript files that are on a different domain. To use JSONP however, the host site must be JSONP-aware. This means that if you specify a callback in a request, it must return valid Javascript that uses the callback you specified in your request. So if QuickBase was JSONP-aware, it might return something like this:

jsonp1284044371978({
   qdbapi: {
      action: "API AddRecord",
      errcode: 32,
      errtext: "No such database",
      errdetail: "The application does not exist or was deleted. If you followed a link to get here, you may want to inform the author of that link that the application no longer exists.",
      dbid: "xxxxxx"
   }
});

This data is now in a SCRIPT tag which gets immediately evaluated. Since you specified a callback function, your callback will now be called with the data returned by QuickBase.

The problem you’re facing is that the data returned by QuickBook is XML and not Javascript. So your SCRIPT tag looks like this:

<script type="text/javascript" src="https://www.quickbase.com/db/xxxxxx?act=API_AddRecord&apptoken=xxxxxxxx&callback=jsonp1284044371978&_fid_11=www.domain.com&_fid_12=xxxxx&_fid_17=xxxxxx&_fid_6=xxxxx&_fid_10=xxxxxxxx&=No+Thanks">
</script>

Which is essentially:

<script type="text/javascript">
<qdbapi>
   <action>API_AddRecord</action>
   <errcode>32</errcode>
   <errtext>No such database</errtext>
   <errdetail>
      The application does not exist or was deleted. If you followed a link to get here, you may want to inform the author of that link that the application no longer exists. 
   </errdetail>
   <dbid>xxxxxx</dbid>
</qdbapi>
</script>

And this, as you know is not valid Javascript. Unfortunately, in this situation, there is no way to get around this problem without using a proxy (as far as I know, you cannot “intercept” the data that the SCRIPT tag receives). Regardless of how the data is being returned, you can wrap it in an alternate form with a proxy or even return it as straight XML (jQuery supports that). If you have a proxy, instead of calling QuickBase, you will call your proxy, which in turn calls QuickBase. Your proxy then returns the XML to your AJAX call. The only change you really need it to set dataType in the jQuery AJAX call to xml instead of jsonp.

EDIT

Per Jon’s comment, you can use an IFRAME as well.