Question

We have following workflow for services like twitter and facebook:

1. User clicks “Post” button.
2. We obtain auth url on server
3. We send to client auth url
4. Client opens auth url in standard javascript popup window
5. Client authorizes and returns by callback url
6. On callback url we interacting with social service.

We have big troubles with step 4 on mobile phones.

Standard javascript popups not working on mobile. What alternatives we can use for external auth urls?

UPD Temporary solution is to generate auth links as anchors and place them in document.
It solves problem, but we want better UX.

Answer 1

I am using jquery mobile popup for this mobile sites and it also look perfect desktop browser also. I hope you use callback like these(well i use something like this)

var jsonp = document.createElement("script");
        jsonp.type = "text/javascript";
        jsonp.src = "http://foo.com/api/ad?foo_var=4345&callback=displayinfo";
        document.getElementsByTagName("body")[0].appendChild(jsonp);

In the callback function you can use those popup like

function displayinfo(data) {    
$("#somepopup").html('<div data-role="popup">
                        '+data+'
                    <div id="ok" data-inline=true data-role=button>
                        <a class="ui-link-inherit" href="">Ok</a>
                    </div>
                    <div id="cancel" data-inline=true data-role=button>
                        <a class="ui-link-inherit" href="">Cancel</a>
                    </div>
                    </div>');

                $('#ok').button();
                $('#cancel').button();

                $("#somepopup").popup();
}

you should have a div with id somepopup in your document and all this works fine if you implement jquery mobile. I hope this helps.