jQuery has error of unexpected token

Question

I had the line of code that ran jQuery library in my header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

My javascript file sends an ajax request to a web service. The web service will output a random quote. The javascript file takes the output and displays it in a div with id='quote'. I checked the php file for web service, it worked fine and printed a random quote. But I kept getting the error below for the line with jQuery

Uncaught SyntaxError: Unexpected token (

And this is code from my javascript file. I also used prototype, that was why I wrote "jQuery" instead of "$"

function displayQuote(ajax){
 var quote = ajax.responseText;
 $("quote").hide();
 $("quote").innerHTML = quote;
 jQuery.("#quote").fadeIn(1000);
}

Thank you

• Ravi Y: Can you post your responseText value as well here? Or that of your whole ajax as a JSON string?
• axel.michel: First, you simply use the string quote as a selector, that one would never match anything, it should be $('#quote') I guess. Next jQuery has no method innerHTML, you could use $('#quote').html(quote). And just to mention you could simplify the code like: $('#quote').hide.html(quote).fadeIn(1000)
• dumbass: Spurious . before (. That is all.

Answer 1

function displayQuote(ajax){
 var quote = ajax.responseText;
 // here i added the # (hashtag) to your selector
 // when referencing an ID you need to use the hashtag '#'
 // when referencing a class you need to the a dot '.'
 $("#quote").hide();
 $("#quote").innerHTML = quote;
 // also write here you were placing a '.' after the jQuery function.
 // since this is the first function in the chain, 
 // you cannot put a period after it
 jQuery("#quote").fadeIn(1000);
 }

Your forgot to add the # hash tag when referencing the <element id ="quote">;

Here is another version of the same thing above: Edit: as pointed out by blender we cannot use document.getElementById('') and fadeIn() in the same context. So to fix this we can just reference the HTML element with jQuery().

function displayQuote(ajax) {
 var quote = ajax.responseText;
 var quoteElement = document.getElementById('quote');
 quoteElement.style.display='none';
 quoteElement.innerHTML = quote;
 jQuery(quoteElement).fadeIn(1000);
 }

• kaboom: sorry, I also used prototype. Thats the reason for the "$"
• Talha Akbar: @RPM please also add comments that what you have done! so, the OP can understand what he had a mistake in his code!
• Blender: Native DOM elements don't have a .fadeIn() method. Wrap that element in a jQuery function.
• Blender: @RPM: You don't need to find the element again. Just use jQuery(quoteElement) and it'll work.
• Ryan: @Blender Okay I wasn't aware of that. So jQuery would be using the cached selection that was gotten by document.getElementById()?

Answer 2

You have a misplaced period:

jQuery.("#quote").fadeIn(1000);
 ^

And your selectors aren't correct:

$("quote") // This finds a `<quote>` tag. You want `#quote`.

Also, use .html() instead of innerHTML:

function displayQuote(ajax){
 var quote = ajax.responseText;
 jQuery("#quote").hide().html(quote).fadeIn(1000);
}

Since you're using Prototype, take a look at jQuery.noConflict().

Answer 3

I think the code should be:

quote.hide();
quote.innerHTML = quote;
quote.fadeIn(1000);

Since you already have a jQuery variable quote

Answer 4

I think you must use that

function displayQuote(ajax){
 var quote = ajax.responseText;
 $("quote").hide();
 $("quote").innerHTML = quote;
 $("#quote").fadeIn(1000);
}