Link to home
Start Free TrialLog in
Avatar of Crazy Horse
Crazy HorseFlag for South Africa

asked on

How to show popup no matter what a user clicks on navigation wise

Hi,

At one point or another, a user is going to be in the middle of a process that I don't want interrupted i.e.: they should be prompted if on a certain screen and they try to click on a navigation link or any other menu items I have in my header or footer. I currently use includes for my navigation and header.

e.g.:

include("header.php");

Open in new window


I know that with jQuery I could target an individual element or a div but what would I do in an instance like this where the alert should happen no matter what navigation item they click on?
Avatar of Leonidas Dosas
Leonidas Dosas
Flag of Greece image

As I understand you want a pop up alert message to confirm the continue of a directing proccess?
Maybe you could attach onClick() to the <body> of the document.
SOLUTION
Avatar of Leonidas Dosas
Leonidas Dosas
Flag of Greece image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Crazy Horse

ASKER

@ Ray, I used jQuery to target the body

$( "body" ).click(function(){
				alert( "Please complete the process" );
			});

Open in new window


This showed the alert when I tried to click on navigation items which is great, but after I dismissed the alert, instead of staying on the page it redirected to the page I had clicked on.

@ Leonidas Dosas,

I am trying to avoid having to give all the div's ID's as using the <body> seems much simpler.

I found this on good old Google, but I don't want to give them the option to proceed to wherever they clicked. They shouldn't be able to leave. Mwahahahahaah (evil laughter)

<script>
window.onbeforeunload = function(event) {
    event.returnValue = "Write something clever here..";
};
</script>

Open in new window

ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi Ray, haha. Under normal circumstances I agree 100% with you. This application I am busy with is for my current job and for my subordinates to fill in production data. There are certain things that they need to do in specific order without getting distracted and clicking somewhere else. So, in this unique situation I absolutely want to force them to finish something before moving elsewhere within the site whether it brings them delight or not ;-)

But after reading your post I am going to have a problem. I need them to to not be able to click on anything except the submit button for the form once completed. So, yeah. How to remove the limitations when it's time to click submit is going to be tricky (for me anyway).

Perhaps I could use jQuery to check if all fields are completed. If not then they can't click submit or anywhere else. If all fields are completed then they can only click submit. Not sure how to do that but maybe that's the right idea?

I will probably have to ask that in a related question because that isn't what I initially asked. What you posted did what I asked and stops a user from redirecting when clicking on absolutely anything clickable.
If you can detect that all fields are completed, you can fire an AJAX request to submit the information.  You don't need a submit button, per se.  I wouldn't do this normally (people like to be able to check their work, change their minds), but it sounds like a culturally different environment over there :-)
No, there should definitely be a submit button so they can check their work before submitting it! Depending on what they input, they will be redirected to different places and that's the part I don't want interrupted. Of course they could just close the browser which then means it wouldn't matter anyway but I will have to test it out and see how it goes.

culturally different environment over there :-)

You have no idea! ;)
... and why is this not an option

var stillProcessing = true; // this gets changed to false when all steps are complete
$('a').click(function(e) {
   if (stillProcessing) {
     e.preventDefault();
     alert('First complete the process');
   }
});

Open in new window


Or you can do this
<script>
var stillProcessing = true;
$(function() {
	$('body').click(function(e) {
		if (stillProcessing && !$(e.target).hasClass('can-click-while-processing')) {
			e.preventDefault();
			alert('kuqala ndiwufeze umsebenzi wakho'); 
		}
	});
});
</script>

Open in new window

The above code will prevent all clicks on Body unless the element clicked has the class "can-click-while-processing"
Thanks, Julian. Will definitely give this a go!