Note that there are some explanatory texts on larger screens.

plurals
  1. POShow spinner while loading an iframe in a facebox
    primarykey
    data
    text
    <p>I am using jQuery <a href="http://defunkt.io/facebox/" rel="noreferrer">facebox</a> to open a new window for authenticating Facebook users with <a href="https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview" rel="noreferrer">Devise/Omniauth</a> in my rails app. </p> <p>At first I wanted to simply load this in a div like so:</p> <pre><code>$('#facebook-auth').live 'click', -&gt; $.facebox '&lt;div id="foo"&gt;&lt;/div&gt;' $('#foo').load $(this).attr 'href' false </code></pre> <p>But the problem is that this will not work because there are multiple redirects. The first link opens <code>/auth/facebook</code>, which redirects to <code>graph.facebook.com</code>, 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:</p> <pre><code>$('#facebook-auth').live 'click', -&gt; 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 </code></pre> <p>Is there a way for me to open a new window and load its contents in the facebox? Or is there a better approach?</p> <p><strong>Edit</strong></p> <p>Thanks to Jared's suggestion I was able to do this using an iFrame mod from <a href="http://lnx.shortcutto701.com/2010/05/21/using-iframe-with-facebox-jquery-plugin/" rel="noreferrer">here</a>. See <a href="http://jsfiddle.net/AExpj/" rel="noreferrer">this jsFiddle</a>. 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:</p> <pre><code>$(".badge").live "click", -&gt; $.facebox -&gt; $.get "page.html", (data) -&gt; $.facebox data false </code></pre> <p>But I'm not sure how to do this with the iframe mod.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload