Disable href, do some ajax stuff, re-enable href

Question

here is the problem :

I have a tag, when i click on it, my href value makes appear a popup (fancybox),

<a class="myIdentifier" href="#myPopup">pop</a>

but, when i click on it i have to do some stuff with ajax to update the fields into my popup... before it appears!

$("body").on('click','.myIdentifier',function(event){
    //DO SOME AJAX AND FILL MY POPUP FIELDS
});

SO this ajax stuff HAS TO be done before the "href" is used to call the popup...

i'm looking for a way to disable my href just for the time i do my jquery function, and then re-enable it to make the popup appear...

Thanks

EDIT / UPDATE ::

Well, thanks for all your answers but, have a look at this :

<a class="btn btn-warning editImp" href="#editImpPopup" title="Edit" id="22">EDIT</a>
<a class="btn btn-warning editImp" href="#editImpPopup" title="Edit" id="32">EDIT</a>
<a class="btn btn-warning editImp" href="#editImpPopup" title="Edit" id="44">EDIT</a>

preventDefault() does not work... seems like the fancybox does not care about it... event is triggered with href anyway...

i use the jquery.fancybox.js, this is a library, i don't know how to manually call the popup! i think i should turn these a tags into other tag which does not respond to fancybox code, apply my ajax stuff to fill the form, and then "manually generate" a "click on a a tag with href set with "editImpPopup"" ...

But how??

Thanks!

(sorry for my english, this is not my motherlanguage...)

FULL CODE :

HTML (the links that call the popup) :

<span class="linkhere">
    <a class="btn btn-warning editImp" href="#editImpPopup" title="Modifier" id="191-150">
        <i class="fa fa-edit"></i>
    </a>
</span>
<span class="linkhere">
    <a class="btn btn-warning editImp" href="#editImpPopup" title="Modifier" id="190-140">
        <i class="fa fa-edit"></i>
    </a>
</span>

JS (initialize the fancybox) :

$(".editImp").fancybox({
    type    :"inline",
    closeBtn :true
});

JS (on.click function where i fill my inputs in my form) :

$("body").on('click','.editImp',function(){

    var id=this.id;
    var tab = id.split('-');
    id = tab[0];
    var ets = tab[1];
    $.ajax({
        type : 'POST',
        url : './php/utils/getImpData.php',
        data : {'id':id},
        dataType : 'json',
        error : function(response){
            alert("ERROR GET IMPLANTATION DATA");
        },
        success : function(response){
            alert(JSON.stringify(response));
            $("#etsEditImp option").removeAttr('selected').filter("[value='"+ets+"']").attr('selected',true);
            $("#stageEditImp option").removeAttr('selected').filter("[value='"+response[0].stage+"']").attr('selected',true);
            $("#downEditImp option").removeAttr('selected').filter("[value='"+response[0].down+"']").attr('selected',true);
            $("#locEditImp option").removeAttr('selected').filter("[value='"+response[0].loc+"']").attr('selected',true);
            $("#nameEditImp").val(response[0].name);
            $("#streetEditImp").val(response[0].street);
            $("#numEditImp").val(response[0].num);
            $("#bEditImp").val(response[0].b);
            $("#prevStage").val(response[0].stage);
            $("#prevDown").val(response[0].down);
            $("#idImp").val(id);
            $("#prevEts").val(ets);
        }
    });
});

UPDATE 2 :

I try this... :

$(".editImp").fancybox({
    type    :"inline",
    closeBtn :true,
    beforeLoad : function(event){
        alert("TEST");
        var id=$(this).id;
        var tab = id.split('-');
        id = tab[0];
        var ets = tab[1];
        $.ajax({
            //...CODE
        });
    },
    onStart : function(){alert("TESTSTART");}
});

i get this error : id is undefined ! i can't get the id back into this part?

Answer 1

You can save the fact (for example, using class) that element was clicked first time to check whether click is for sending ajax or is for opening popup.

Just to mention: .always() is used for testing. If you want to show up popup only on ajax success, it should be .done() instead.

Fiddle.

JS:

$(document).ready(function()
{
    $('.myIdentifier').fancybox();

    $("body").on('click', '.myIdentifier', function()
    {
        var thisEl = $(this);
        if (!thisEl.hasClass("js-ajax_done"))
        { 
            $.ajax({ url: "incorrect_url"}).always(function()
            {
                $('#log').append("Ajax is done<br/>");
                $('#myPopup').text("Ajax data");
                thisEl.addClass("js-ajax_done");
                thisEl.click();
            });
            $('#log').append("End of first click (waiting for ajax)<br/>");
            return false;
        }
        $('#log').append("End of second click (ready to open popup)<br/>");
        thisEl.removeClass("js-ajax_done");
    });
});

HTML:

<a class="myIdentifier" href="#myPopup">pop1</a>
<a class="myIdentifier" href="#myPopup">pop2</a>
<a class="myIdentifier" href="#myPopup">pop3</a>
<div id="myPopup" style="display: none">Popup</div>

<div id="log"></div>