0

I'm trying to implement Facebook functionalities into my application. The first functionality was being able to login use facebook. The second one to allow the user to import friends from facebook into the application.

The problem is however that when I'm using the FB API the JQuery Mobile functionalities stop.

The layout works perfect if I remove the Facebook API code. This means that if I add a fieldset with the data-role set to controlgroup, none of the JQuery Styles and function are applied to the element and its children.

Does anyone know a solution for this problem? (There should be more JQuery Mobile apps making use of the social API).

Controller.js

this.handleContactsFacebook = function () {
        this.initialize();

        function retrieveContacts () {
            FB.api('/me/friends/?fields=id,first_name,middle_name,last_name,username,name', function(response) {
                (new Contact()).showContactListFacebook(response.data);
            });
        }

        FB.getLoginStatus(function (data) {
            if (data.status === 'connected') {
                retrieveContacts();
            }
            else if (data.status === 'not_authorized') {
                $.mobile.changePage("menu.html");
            }
            else {
                $.mobile.changePage("menu.html");
            }
        });
    };

contact.js

this.showContactListFacebook = function (contacts) {
        var fieldset = $("<div data-role=\"fieldcontain\">" +
        "<fieldset data-role=\"controlgroup\">" +
            "<legend>Agree to the terms:</legend>" +
            "<input type=\"checkbox\" name=\"checkbox-1\" id=\"checkbox-1\" class=\"custom\" />" +
            "<label for=\"checkbox-1\">I agree</label>" +
            "</fieldset>" +
        "</div>");
        $("fieldset").remove();
        $("#contactsFacebook").prepend(fieldset);
    };

http://forum.jquery.com/topic/jquery-mobile-ignored-data-role-when-implementing-facebook

halfer
  • 19,824
  • 17
  • 99
  • 186
lt.kraken
  • 1,287
  • 3
  • 10
  • 27
  • Any errors in Firebug JS console? – Boris Ivanov Nov 08 '13 at 11:31
  • only my console output and GET requests are shown in the FireBug Console. – lt.kraken Nov 08 '13 at 12:09
  • You didn't apply any enhancement method. Try `$("contactsFacebook").trigger("create");`. – Omar Nov 08 '13 at 12:46
  • 1
    check this http://jsfiddle.net/4s6yg/ – Omar Nov 08 '13 at 12:53
  • @Omar seems to have solved the problem, how did you find out that trigger("create") should be used? Because I've never used it, and everything always worked perfectly. – lt.kraken Nov 08 '13 at 13:25
  • When appending/modifying/changing items dynamically, you should call enhancement methods. It depends on the widget i.e. `.listview("refresh")`, `.trigger("pagecreate")`, etc... Static items get enhanced on `pagecreate` event, that's why you never call them manually. Check this http://stackoverflow.com/questions/14550396/jquery-mobile-markup-enhancement-of-dynamically-added-content – Omar Nov 08 '13 at 13:28

1 Answers1

0

Try adding jQuery.noConflict() in your code. I think facebook api may use the $ token as well as jquery (hence jquery mobile also)

More info here: http://api.jquery.com/jQuery.noConflict/

You could also try replacing the $ for jquery code with jQuery and see if that solves the conflict ie replace $("fieldset").remove(); with jQuery.("fieldset").remove();

Ray Andison
  • 276
  • 1
  • 10