I am using jQuery facebox to open a new window for authenticating Facebook users with Devise/Omniauth in my rails app.
At first I wanted to simply load this in a div like so:
$('#facebook-auth').live 'click', ->
$.facebox '<div id="foo"></div>'
$('#foo').load $(this).attr 'href'
false
But the problem is that this will not work because there are multiple redirects. The first link opens /auth/facebook
, which redirects to graph.facebook.com
, which redirects back to my callback url, which finally redirects to a confirmation page. I need to display the confirmation page to the user. The way I have it working right now is by opening an external window like this:
$('#facebook-auth').live 'click', ->
width = 600
height = 400
left = (screen.width / 2) - (width / 2)
top = (screen.height / 2) - (height / 2)
window.open $(this).attr('href'), 'authPopup', "menubar=no,toolbar=no,status=no,width=#{width},height=#{height},toolbar=no,left=#{left},top=#{top}"
false
Is there a way for me to open a new window and load its contents in the facebox? Or is there a better approach?
Edit
Thanks to Jared's suggestion I was able to do this using an iFrame mod from here. See this jsFiddle. However I would like to show the loading spinner while the iframe content is loading. Is this possible? According to the documentation, the way to do it normally is like this:
$(".badge").live "click", ->
$.facebox ->
$.get "page.html", (data) ->
$.facebox data
false
But I'm not sure how to do this with the iframe mod.
try this css trick.. is this what you are trying to do?
iframe {
background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
}