CODEWITHSUNDEEP
phpjavascriptjquery
kaboom
kaboom

Reputation: 833

jQuery has error of unexpected token

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

Upvotes: 0

Views: 465

Answers (4)

Ryan
Ryan

Reputation: 14649

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

Upvotes: 2

RAZVOR
RAZVOR

Reputation: 55

I think you must use that

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

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

Upvotes: 0

Blender
Blender

Reputation: 298106

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

Upvotes: 1

Danilo Radenovic
Danilo Radenovic

Reputation: 1029

I think the code should be:

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

Since you already have a jQuery variable quote

Upvotes: 0

Related Questions