1

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?

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
Lukas Bijaminas
  • 176
  • 3
  • 12
  • What do your browsers’ error consoles say? – CBroe Jun 13 '12 at 13:59
  • The console does not show any error – Lukas Bijaminas Jun 14 '12 at 08:05
  • Actually, Chrome console shows: Uncaught ReferenceError: jQuery is not defined. I need to find out how to define it, because I have successfully included `` in my code. – Lukas Bijaminas Jun 14 '12 at 09:52
  • 1
    @LukasBijaminas that's all that is required to define jQuery. This may be an issue with the content being transferred over https but the jQuery request is delivered over http. In that case you can use a [protocol-relative URL](http://paulirish.com/2010/the-protocol-relative-url/), e.g. ``. Paul's article also provides a fallback to load jQuery from your server. – Joseph Yaduvanshi Jun 14 '12 at 12:52

3 Answers3

3

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.

christopher_h
  • 777
  • 7
  • 14
  • Same issue was with IE .. Wonder how Mozilla works without these fixes.. Nyways your answer was helpful .. thanks – mjs Mar 11 '13 at 08:22
0

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?

Community
  • 1
  • 1
Joseph Yaduvanshi
  • 20,241
  • 5
  • 61
  • 69
  • I did this but it didn't help. I changed the id to "i0", so it wouldn't conflict the DOCTYPE declaration. I also applied the changes to the code but it still didn't work. A reason why I was using `.live()` is because later on I use `.die()` to kill the event handlers, so the user wouldn't be able to click on the other picture. – Lukas Bijaminas Jun 14 '12 at 07:56
0

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.

Jesse Fowler
  • 1