Close the iframe after login with Shadowbox module

Question

I have installed the Shadowbox module and I use it to show the login page in a pop-up iframe.

The problem is when I click on the sign-in form submit button the iframe still appears and the page refreshing inside the iframe is not the original page.

How can I close the iframe after login and make the page reload?

The Ajax error is the following:

An AJAX HTTP error occurred.
HTTP Result Code: 200
Debugging information follows.
Path: /arabdc/system/ajax
StatusText: parser error
ResponseText:
parent.window.location.reload(true);[ {"command":"settings","settings":{"basePath":"\u002Farabdc\u002F", "pathPrefix":"", "ajaxPageState":{"theme":"bartik", "theme_token":"PQ_SrF6skDNUXCQNOJJg54EPuosNo0QM5sX6fr2Sfko"}, "heartbeat_language":"ar", "heartbeat_poll_url":"http:\u002F\u002Flocalhost:8888\u002Farabdc\u002Fheartbeat\u002Fjs\u002Fpoll", "shadowbox":{"animate":0, "animateFade":0, "animSequence":"wh", "auto_enable_all_images":0, "auto_gallery":0, "autoplayMovies":true, "continuous":0, "counterLimit":"10", "counterType":"default", "displayCounter":1, "displayNav":1, "enableKeys":1, "fadeDuration":"0.35", "handleOversize":"resize", "handleUnsupported":"link", "initialHeight":160, "initialWidth":320, "language":"ar", "modal":false, "overlayColor":"#000", "overlayOpacity":"0.85", "resizeDuration":"0.35", "showMovieControls":1, "slideshowDelay":"0", "viewportPadding":20, "useSizzle":0}, "custom_search":{"form_target":"_self", "solr":0}}, "merge":true}, {"command":"invoke", "selector":null, "method":"myJavascriptFunction", "arguments":[ ]}, {"command":"insert", "method":"prepend", "selector":"head", "data":"\u003Cstyle type=\u0022text\u002Fcss\u0022 media=\u0022all\u0022\u003E@import url(\u0022http:\u002F\u002Flocalhost:8888\u002Farabdc\u002Fsites\u002Fdefault\u002Ffiles\u002Ffontyourface\u002Ffont.css?mmj0o1\u0022);\u000A@import url(\u0022http:\u002F\u002Flocalhost:8888\u002Farabdc\u002Fsites\u002Fdefault\u002Ffiles\u002Ffontyourface\u002Flocal_fonts\u002Fmyride-normal-normal\u002Fstylesheet.css?mmj0o1\u0022);\u003C\u002Fstyle\u003E\u000A", "settings":null} ]

Answer 1

Looks like a Closed [Fixed] bug in Issues for Shadowbox From the page here is a patch file.

shadowbox_login-additional_links-1488718-25.patch Or read the ISSUE alos check #6

Answer 2

The best way I came up with is; to make the login form use AJAX. So after a successful login the browser will fire a custom javascript function to close Shadowbox iframe window and reload the parent window.

Alter login form to support AJAX

/**
 * Implement hook_form_alter().
 */
function mymodule_form_alter(&$form, &$form_state, $form_id) {
  if($form_id == 'user_login') {

    $form['#prefix'] = '<div id="user-login-form-wrapper">';
    $form['#suffix'] = '</div>';

    $form['actions']['submit']['#ajax'] = array(
      'wrapper' => 'user-login-form-wrapper',
      'callback' => 'user_custom_login_ajax_callback'
    );
  }
}

function user_custom_login_ajax_callback(&$form, &$form_state) {    
  // if invalid user info return form with error messages
  if(form_get_errors()) {
    return $form;  
  }  

  // invoke custom jQuery function to close Shadowbox and reload window
  $commands = array();
  $commands[] = ajax_command_invoke(NULL, 'myJavascriptFunction');

  return array('#type' => 'ajax', '#commands' => $commands);
}

Create a javascript file with your custom module or put it with your custom them and add the following code in it:

(function ($) {

  $.fn.myJavascriptFunction = function() {
    if($('#sb-nav-close', parent.document).length > 0) {
      // reload parent window
      reloadParentPage();
      // close Shadowbox
      $('#sb-nav-close', parent.document).trigger('click');
    } 
  };  

  // to support reload in all browsers    
  function reloadParentPage() {
    var selfUrl = unescape(parent.window.location.pathname);

    parent.location.reload(true);

    parent.window.location.replace(selfUrl);

    parent.window.location.href = selfUrl;
  }

})(jQuery);