Can I continue with a previous prevent link?

Question

I have this link:

$('.popup-window').click(function (e) {
    e.preventDefault();

    $.ajax({
        ...
    })
});

which is a .NET LinkButton (a link that call a javascript, not a real href). I want to prevent Default if ajax return some (let say, false). Else, if true, continue with that link handler.

How can I do it?

PS I need that e.preventDefault(); at the beginning, else .NET handler will act immediatly.

Answer 1

I think I understand what you're looking for.

Here's my idea on it: use a data attribute on the DOM element to decide weither default event should be prevented or not. Initially, the event is prevented but the ajax has the power to "unlock?" it, then fire it again. It's a little bit of custom work but it may do the trick:

var $popupWindow=$('popup-window');

// initially "tell" the LinkButton to prevent default
$popupWindow.data('prevent-default', 1);

// the click event (initially prevents default)
$popupWindow.click(function(e){
    var $this=$(this);

    if ($this.data('prevent-default')==0) { // if "unlocked"

        // "lock" it again (default isn't prevented)
        $this.data('prevent-default', 1);

    } else { // if "locked"
        // default is prevented
        e.preventDefault();

        // test if it should be unlocked
        $.ajax({
            // ...
        }).done(function(data){
            if (data.length>0 && data.response==false) {
                // set the attribute so it shouldn't prevent default
                $this.data('prevent-default', 0);

                // trigger this click (should let the event fire completely)
                $this.trigger('click');
            }
        });
    }
});

---

UPDATE:

An alternative could be to add a Page Method.

(See: Using jQuery to directly call ASP.NET AJAX page methods )

This would reduce the mechanics to somethink like this:

$('popup-window').click(function(e){
    e.preventDefault();

    $.ajax({
        // ...
    }).done(function(data){
        if (data.length>0 && data.response==false) {
            $.ajax({
                type: "POST",
                url: "YourPage.aspx/YourMethod",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    // Replace the div's content with the page method's return.
                    $("#Result").text(msg.d);
                }
            });
         }
     });
});

Answer 2

You can use the __doPostBack() js function to trigger the postback in your AJAX callback.

The only thing is that you need to pass in the id of the control causing the postback, eg

 __doPostBack('btnPopup', null);

you can see more on this function in this question: How to use __doPostBack()

Answer 3

 $('.popup-window').click(function (e) {
data = '?sample=1' //serialized data here
callback    = function(json){
    if(json.returnVar!=true){ //check if returnVar is not true
        e.preventDefault();   //prevent redirect if not true
    }
};

$.ajax({
      type: 'POST',
      url: "../ajaxcall.php", //the url to call for ajax here
      data: data,
      success: callback,
      dataType: 'json'
    });
});

Try this, let me know if you can't understand the code