JQuery Dialog Confirmation

JavaScript
1

Hi devs

I have searched many forums and I can’t seem to find the answer to a challenge I am faced with.

Please see my code below.

I have a list of anchors with either a class “confirm” or “button-disabled”. When I click on the anchor via jQuery, the function executes a expected and the dialog opens up but the function does not wait for a response from the dialog. It just continues straight through the rest of the function and navigates to the href location of the anchor without confirmation. I basically first want confirmation before allowing the browser to redirect to the anchors href.

I have tried an alternative way to do it but it’s not the ideal way to do it and it’s not practical. Can anyone give me some advice?


<script type="text/javascript">
	$(document).ready(function() {
		$('.confirm').click(function(evt) {					
			var answered = false;
			var answer = false;
			
			$("<div>Are you sure?</div>").dialog({
				title: 'Please confirm...',
				modal: true,
				buttons: {
					"Continue": function() {
						$( this ).dialog( "close" );
						answer = true;
						answered = true;
					},
					Cancel: function() {
						$( this ).dialog( "close" );
						answer = false;
						answered = true;
					}
				}
			});
			
			while(!answered) {
				//sleep
				setInterval(function(){
					//do nothing
				}, 1000);
			}
			
			return answer;
		});
		
		$('.button-disabled').click(function() {
			return false;
		});
	});
</script>
2

In your Continue method you could call another method which would follow the href of the anchor and the main click event of .confirm would prevent anything from happening.


$(document).ready(function() {
		$('.confirm').click(function(evt) {	
                        evt.preventDefault(); // Prevent the default event (follow href)				
			var href = $(this).attr('href');
			
			$("<div>Are you sure?</div>").dialog({
				title: 'Please confirm...',
				modal: true,
				buttons: {
					"Continue": function() {
						$( this ).dialog( "close" );
						followLink(href);
					},
					Cancel: function() {
						$( this ).dialog( "close" );
						return;
					}
				}
			});
		});
		
	});
3

Hi there,

Essentially doddsey_65 has given you your solution.
The key is to prevent the link’s default action (navigating to another page) using preventDefault();.
After that you can chose whether to follow the link depending on what the user clicks:

$('.confirm').on("click", function(e) {	
    e.preventDefault();
    var href = this.href;
    
    $("<div>Are you sure?</div>").dialog({
        title: 'Please confirm...',
        modal: true,
        buttons: {
            "Continue": function() {
               window.location.href = href
            },
            "Cancel": function() {
                $(this).dialog( "close" );
            }
        }
    });
});

Demo

HTH

4

Fantastic; Thank you for your quick tips. I did this before but that was during 2009 so I could not exactly remember what I did back then.

Have a great day and happy coding :wink: