Prevent fancybox to load on page reload

[Rhobur]

Hi,

I did a fancybox popup for create account/login, no problem with that.

It loads on page document.ready and transmit the data to the controller.

But after the email is input in the popup, then the authentication page is reloaded with the new data and the script tries to load the popup again and gives an error popup saying "The requested content cannot be loaded.

Please try again later.".

This time the popup it is not needed since the page display the registration form.

Can't think of any condition for the loading the popup since the page DOM elements are the same on both cases and can't set up a condition depending on the existence of such an element.

It probably isn't rocket science but it eludes me.

A bit of help guys?

R.

[rocky]

You could check whether there are POST variables or even check for individual POST variables if required. For example:

 

{if $smarty.post|count == 0}Popup code here{/if}

[Rhobur]

Hi Rocky,

Thanks for the idea, it worked of course and helped me to check and could be that the error I got was not from the popup trying to load as I thought.

"The requested content cannot be loaded. Please try again later." could be a fancybox error missing some content or not having some var defined properly I think.

It is just I cannot find what it is.

Here is my js:

$( document ).ready(function() {

	var url = '#popup';

	if (!!$.prototype.fancybox) {
			$.fancybox({
				'autoSize' : false,
				'width' : 600,
				'height' : 'auto',
				'hideOnContentClick': false,
				'href': url
			});
		};
		console.log(url);

	$(document).on('click', '#SubmitCreate',(function(e){
		if(window.FormData !== undefined)  // for HTML5 browsers
		{
		 var formData = new FormData($('#create-account_form'));
		 formData.append('controller', 'Authentication');
			$.ajax({
				type: 'POST',
				data: formData,
				dataType: 'json',
				processData: false,
				cache: false,
				success: $.fancybox.close(),
			});
		};
	}));
});

The message appears in a fancybox on top of the authentication page which loads without error.

After passing the email and reloading the authentication, in the console the #popup url appears a second time but I am not sure that it is the popup trying to reload or is related to the error.

The "formData.append('controller', 'Authentication');" line has no impact, can be removed, so it's not the cause.

Do you see something not right?

Thanks for trying to help.

[rocky]

Fancybox might be trying to load the page as an image. Try changing:

				'href': url

to:

				'href': url,
				'type': 'iframe'

This should force Fancybox to read it as a page.

[Rhobur]

If I do that it tries to load the whole page instead of just the div and it stays on loading with the animated gif.

Also in the console the url appears twice, that's probably because of the $( document ).ready(function() causing a doubled fancybox.

I can remove that, but I do not want the whole auth page to load just the div containing the email/password inputs.

Currently it works as intended with the exception of the pestering error message, closing it reveal the auth page alright. 

[rocky]

Sorry, I can't think of anything else. I'd need all your code so I could debug it.

[Rhobur]

It is the default's theme authentication.tpl.

I have just added

<div style="display: none;">

<div id="popupLogin">

before the 

<div class="row">

<div class="col-xs-12 col-sm-6">

<form action="{$link->getPageLink('authentication', true)|escape:'html':'UTF-8'}" method="post" id="create-account_form" class="box">

around line 86.

The js script above is included in the authentication.tpl

It won't remain there, it is just for testing.

First time the fancybox loads OK with url :http://domain.com/login?back=my-account

After submitting the email the url is http://domain.com/login?back=my-account#account-creation, the auth page is loaded OK but with that fancybox error message on top.

PS 1.6.1.4

[rocky]

Sorry, I can't get the code to work on my test site.

[Rhobur]

OK, thanks for taking the time and trying to help!