Syntax error in function call

Question

Greetings,

I've been with this about 1 or 2 hours and it seems I cannot find the error in this function I've created to check the availability of something in a Database through jQuery and Ajax.

I'm calling the function with this link for test purpouses since I were unable to catch any errors before.

<a href="#" onclick="availability_check("Despacho", "22/05/2011","12:30", "12:45")">TEST</a>

And the code of the Function is the following:

function availability_check(location, date, from, to){ 
 var check = 'location='+ location + '&date='+ date + '&from=' + from + '&to=' + to;
 $.ajax({
 type: "POST",
 url: "check-availability.php",
 data: check,
 cache: false,
 success: function(response){
 var available = response;
 }
 });
 return available;
}

Declared just under the document_ready function.

Could someone smarter than me tell me what's wrong? Firebug just says:

3

syntax error [Stop in this error] availability_check(

Answer 1

You have three problems there. First of all, you have quotes inside the onclick attribute. Browsers will think you want to end the attribute, not start a JavaScript string. Try using ' instead of ".

The second problem is that you're declaring available inside a closure. When you're back in availability_check, available will be out of scope. Move var available to above $.ajax and change what's currently var available = response; to just available = response;.

The third problem is it seems you don't understand asynchronicity. $.ajax will be called, starting the request, but the request won't finish immediately. It will just continue to return available; before the request has completed. Then, once it has completed, it will set available, but by then it's too late. To fix this, add async: false as another option to $.ajax.

• Antonio Laguna: Awesome. Thanks for all of this, it was pretty useful. :)

Answer 2

You're using quotes inside quotes inside an attribute's quotes, so the first quote after availability_check( becomes the ending quote of the onclick attribute. Change that to:

<a href="#" onclick="availability_check('Despacho', '22/05/2011', '12:30', '12:45')">TEST</a>

or:

<a href="#" onclick="availability_check(&quot;Despacho&quot;, &quot;22/05/2011&quot;, &quot;12:30&quot;, &quot;12:45&quot;)">TEST</a>

It's also good practice to decouple the JavaScript code and the HTML code, so instead of placing this in an onclick attribute, it would be nicer to create data-* attributes, give the element an id, and then use a separate JavaScript file to obtain the element and attach an onclick even handler on it.

• Antonio Laguna: Thanks but the onclick was just for test purpouse since I wasn't able to find the error.

Answer 3

Looks like your quotations are causing the parsing to fail. Try:

<a href="#" onclick="availability_check('Despacho', '22/05/2011','12:30', '12:45')">TEST</a>

Answer 4

The problem is with the onclick attribute:

onclick="availability_check("Despacho", "22/05/2011","12:30", "12:45")"

The problem is that the quotes in the Javascript excerpt are clashing with the quotes delimiting the HTML attribute. This is one of the reasons why it's best not to use inline onclick attributes.

Since you're using jQuery, why not use its event-handler-binding functionality. Give your link an id attribute and do the following:

$('#yourId').click(function() {
 availability_check("Despacho", "22/05/2011","12:30", "12:45");
});

There are a whole host of other selectors, based on CSS selectors, if you prefer. To get to grips with what jQuery has to offer, I'd recommend http://jqfundamentals.com/

Answer 5

Use single quotes here:

<a href="#" onclick="availability_check('Despacho', '22/05/2011','12:30', '12:45')">TEST</a>

Answer 6

be aware that success fires when the response returns. when you call the function availability_check, it is going to do your ajax request and return available immediately, before success is invoked (unless you have a really fast server ;). You should modify with the returned data in the success function....

• icktoofay: Even if you have a really fast server, it's going to wait for the next event loop to fire your callback.
• hvgotcodes: @icktoofay, yeah, i was being sarcastic ;).