SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery Dialog Confirmation

    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?

    Code:
    <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. #2
    SitePoint Enthusiast doddsey_65's Avatar
    Join Date
    Sep 2010
    Location
    North East UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    $(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;
    					}
    				}
    			});
    		});
    		
    	});
    Test and help out with a new
    100% open source forum package: A Simple Forum
    Check the A Simple forum Github Page
    Visit my Github profile to see what I work on.

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code:
    $('.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. #4
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •