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?

Answers


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.


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?


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.


Need Your Help

Best practices combining list and non-list views, like the Market

android listview scrollview

I'm trying to tackle a problem that seemingly many Android developers have, which is how to intersperse lists with non-list data, in one big scrollable pane.

Record MMS Video stream using .NET

c# video streaming capture

I want to record MMS and RTMP streams using .NET. Can anyone give some sample code snippet.