CODEWITHSUNDEEP
jqueryfacebookgoogle-chromefacebook-apps
Lukas Bijaminas
Lukas Bijaminas

Reputation: 176

jQuery does not work in facebook app with Chrome

I have a code, using jQuery, that checks whether the correct image was clicked and then changes the image to red or green, according to whether the answer was correct. After that, it waits 2 seconds and reloads the page to show the next pictures pair. It works just fine using it on its own, but once I put it in the facebook application, it does not work properly.

In IE and Firefox, it changes color on the click but does not reload the page. In chrome, however, it does not even change the color on the click. Could it be the issue with the iframe or something? Do I need specific parameters when I use jQuery within an iframe?

The excerpt from my code looks like this:

jQuery(document).ready(function(){
   jQuery('img#0').live("click", function(){
        if (jQuery(this).hasClass("correct")){
            jQuery(this).attr('src', "0g.png");
        } else{
            jQuery(this).attr('src', "0r.png");
        }

    });
});

As you can see, I have even changed $ to jQuery to prevent the conflict with other possible libraries.

Any ideas how I can get this to work?

Upvotes: 1

Views: 2433

Answers (3)

christopher_h
christopher_h

Reputation: 807

when you are running jquery inside of a facebook page or app you have to use https, including the link inside your html to your script file.

Upvotes: 3

Jesse Fowler
Jesse Fowler

Reputation: 1

Okay, this could be the dumbest idea ever - but it just worked for me. JQuery loaded fine on a webpage in chrome while looking at the webpage - not in Facebook. When I loaded it in chrome in the fb app, it failed.

IE worked fine. I found that I linked to http:// instead of https:// (remember everything has to be secure). When I changed it to https:// it worked fine.

Upvotes: 0

Jim Schubert
Jim Schubert

Reputation: 20367

An image with an id of 0 is an invalid HTML element id in HTML4 and XHTML. It is valid in HTML5. This could be an issue with your DOCTYPE declaration.

If changing the DOCTYPE doesn't resolve the issue, you can delegate to the image click event.

// html
<div id="someElement">
   <img class="correct" />
</div>

// jquery
$("div#someElement").delegate("img", "click", function() {
   var correct = $(this).hasClass("correct");
   $(this).attr('src', (correct ? "0g.png" : "0r.png" ) );
});

jQuery.delegate() is similar to the .live() function in that it will apply to current an future elements. The difference is that delegate() applies an event handler to a parent element (someElement) and watches for bubbling events from children. live() watches for these bubbling events at the top of the document and may possibly be worse for performance. There is more information on the documentation page and a lot of discussion here on SO regarding the differences between the two.

Here are relevant links to the ID attribute specifications:

html5 spec
html4 spec
xhtml guidelines
What are valid values for the id attribute in HTML?

Upvotes: 0

Related Questions