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

Can you post your responseText value as well here? Or that of your whole ajax as a JSON string? — Ravi Y
– Ravi Y, Commented Dec 24, 2012 at 8:40
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); — axel.michel
– axel.michel, Commented Dec 24, 2012 at 8:43

Community · Accepted Answer · 2017-05-23 10:24:45Z

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);
 }

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Dec 24, 2012 at 8:41

Ryan

14.7k9 gold badges68 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

kaboom Over a year ago

sorry, I also used prototype. Thats the reason for the "$"

Talha Akbar Over a year ago

@RPM please also add comments that what you have done! so, the OP can understand what he had a mistake in his code!

Blender Over a year ago

Native DOM elements don't have a .fadeIn() method. Wrap that element in a jQuery function.

Blender Over a year ago

@RPM: You don't need to find the element again. Just use jQuery(quoteElement) and it'll work.

Ryan Over a year ago

@Blender Okay I wasn't aware of that. So jQuery would be using the cached selection that was gotten by document.getElementById()?

Blender · Accepted Answer · 2012-12-24 08:43:27Z

0

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().

answered Dec 24, 2012 at 8:43

Blender

300k55 gold badges462 silver badges511 bronze badges

Comments

Danilo Radenovic · Accepted Answer · 2012-12-24 08:40:01Z

0

I think the code should be:

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

Since you already have a jQuery variable quote

answered Dec 24, 2012 at 8:40

Danilo Radenovic

1,0291 gold badge11 silver badges27 bronze badges

Comments

Ajinkya · Accepted Answer · 2012-12-24 08:43:41Z

0

I think you must use that

function displayQuote(ajax){
    var quote = ajax.responseText;

    $("quote").hide();
    $("quote").innerHTML = quote;
    $("#quote").fadeIn(1000);
}

edited Dec 24, 2012 at 8:43

Ajinkya

22.7k33 gold badges113 silver badges164 bronze badges

answered Dec 24, 2012 at 8:43

RAZVOR

551 silver badge8 bronze badges

Collectives™ on Stack Overflow

jQuery has error of unexpected token

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related