04 Jul 2010

Confirm anchor click with jQuery ui

Blog, Code, javascript, jQuery 13 Comments

Ok, so you need to pop up the confirm dialogue when a user clicks an anchor using jQuery right? There are several solutions to this problem but this soilution is the one I prefer.

First of all set the dialogue autoOpen option to false. This will stop the dialogue to open when initialised. Secondly set the window.location.href property to $(this).dialog(‘option’, ‘href’). We will set this option in the next step.


$("#anchor-dialog-confirm").dialog({
    resizable: false,
    height:140,
    modal: true,
    buttons: {
	'Ok': function() {
	    window.location.href = $(this).dialog('option', 'href');
	},
	'Cancel': function() {
	    $(this).dialog('close');
	}
    },
    autoOpen: false
});

The second and final step is simple. We need to stop the browser from following the href property and we do this using two methods. We need to call preventDefault() on the event and set the function return false. We also need to pass the href property to the dialogue by adding it to the options.


$('.my-anchor').click(function(e){
    e.preventDefault();
    $("#anchor-dialog-confirm").dialog('option', 'href',$(this).attr('href')).dialog('open');
    return false;
});

Happy coding and leave some comments if you found this helpful or know a better way :)

13 Responses to “Confirm anchor click with jQuery ui”

  1. Anonymous says:

    Your information is good…..
    its very use article

  2. Anonymous says:

    Hi buddy, your blog’s design is simple and clean and i like it. Your blog posts are superb. Please keep them coming. Greets!!!

  3. Alan says:

    Amiable brief and this mail helped me alot in my college assignement. Gratefulness you seeking your information.

  4. Anonymous says:

    This is a really good read for me, Must admit that you are one of the best bloggers I ever saw.Thanks for posting this informative article.

  5. Movie Spoiler says:

    Thanks for the nice post…

  6. geo green crete says:

    I found your site via google thanks for the post. I will save it for future reference. Thanks.

  7. Edu University says:

    Super post – and great domain by the way:-)

  8. Democrat says:

    Such a well written post.. Thnkx for sharing this post!

  9. nanocad says:

    it was very interesting to read.
    I want to quote your post in my blog. It can?
    And you et an account on Twitter?

  10. Apu says:

    Thanks for u r information

    its very useful

  11. Zilvinas Juraska says:

    I’m not that much of a internet reader to be honest but your blogs really nice, keep it up! I’ll go ahead and bookmark your site to come back later on. Cheers

  12. Zenon says:

    Thank you, was indeed very helpful to me

  13. N9REX says:

    Thank you, awesome!

Leave a Reply