Performing methods in click() function before href

Question

I have a button with a href that sends data, and before that I want to show a popup using Bootbox.js

HTML:

<a href="submit?result=something"> 
  <button class="alert btn btn-primary" type="button">Submit</button>
</a>

JS:

$('alert').click(function(){
    bootbox.alert("Submitted!", function() {
        console.log("Alert Callback");
    });
});

This just performs the href action so it does not display the popup using Bootbox.js. Is there a way to perform a function and perform the href right after you close this?

For reference: http://bootboxjs.com

please see http://stackoverflow.com/questions/7078660/jquery-location-href — Makudex, Sep 10 '15 at 07:47

score 1 · Accepted Answer · answered Sep 10 '15 at 07:44

I think you can remove the the hyperlink from the HTML markup, just keep the button and then do something like this:-

$('.alert').click(function(){
    bootbox.alert("Submitted!", function() {
        console.log("Alert Callback");
        window.location.href = '/submit?result=something';
    });
});

Jai · Answer 2 · 2015-09-10T07:53:20.957

You can use return false;:

$('.alert').click(function(e){ // missed the . for the class selector
    bootbox.alert("Submitted!", function() {
        location.href = this.parentNode.href;
    });
    return false;
});

Another suggestion is to use data-* attribute on button itself instead of wrapping it within an anchor:

<button class="alert btn btn-primary" data-href="submit?result=something" type="button">Submit</button>

then you can use this:

$('.alert').click(function(e){ // missed the . for the class selector
    bootbox.alert("Submitted!", function() {
        location.href = this.dataset['href'];
    });
});

Performing methods in click() function before href

2 Answers2