Question

I am using jQuery dialog plugin because i need to make decision upon user click

here is my code

  <script type='text/javascript'>


  $(function() {
    //destroying dialog


    $('#rdy').tipsy();
    $('#flt').tipsy();
    $('#num').tipsy();
    $('#tpe').tipsy();
    $('#reg').tipsy();
    $('#etd').tipsy();
    $('#dla').tipsy();
    $('#dp').tipsy();
    $('#rem').tipsy();
    $('#to').tipsy();   
    $('#eta').tipsy();
    $('#arr').tipsy();
 });
    $(function(){
        var fDep=document.forms.fDep;
        var flt=fDep.elements['flt[]'];
        var num=fDep.elements['num[]'];     
        var reg=fDep.elements['reg[]'];
        var etd=fDep.elements['etd[]'];
        var dla=fDep.elements['dla[]'];     
        var dep=fDep.elements['dep[]'];     
        var eta=fDep.elements['eta[]'];     
        var arr=fDep.elements['arr[]'];
        for (var i=0;i<flt.length;i++){
            //var aCtrl=ctrls[i];
            //window.alert(etd[i].value);
            $(flt[i]).mask("aa?a");
        }
        for (var i=0;i<num.length;i++){
            //var aCtrl=ctrls[i];
            //window.alert(etd[i].value);
            $(num[i]).mask("99?999");
        }
        for (var i=0;i<etd.length;i++){
            //var aCtrl=ctrls[i];
            //window.alert(etd[i].value);
            $(etd[i]).mask("99:99");
        }
        for (var i=0;i<dla.length;i++){
            $(dla[i]).mask("99:99");
        }
        for (var i=0;i<dep.length;i++){
            $(dep[i]).mask("99:99");
        }
        for (var i=0;i<eta.length;i++){
            $(eta[i]).mask("99:99");
        }
        for (var i=0;i<arr.length;i++){
            $(arr[i]).mask("99:99");
        }

        for (var i=0;i<reg.length;i++){
            $(reg[i]).mask("99?9999");
            //$(reg[i]).css("color","#ff00ff");
        }

    });

    $(".edit_tr").change(function(){

        //window.alert($(this).attr('id')); 
        var rowID=$(this).attr('id');
        //window.alert($("#dep" + rowID).val());

        var sendReq;

        var flt=$("#flt"+rowID).val();
        var num=$("#num"+rowID).val();
        var tpe=$("#tpe"+rowID +" option:selected").val();
        var reg=$("#reg"+rowID).val();
        var etd=$("#etd"+rowID).val();
        var dla=$("#dla"+rowID).val();
        var dep=$("#dep"+rowID).val();
        var rem=$("#rem"+rowID).val();
        var city=$("#city"+rowID +" option:selected").val();
        var eta=$("#eta"+rowID).val();
        var arr=$("#arr"+rowID).val();
        //window.alert();
        var dataStr="flt="+flt+"&"
                    +"num="+num+"&"
                    +"tpe="+tpe+"&"
                    +"reg="+reg+"&"
                    +"etd="+etd+"&"
                    +"dla="+dla+"&"
                    +"dep="+dep+"&"
                    +"rem="+rem+"&"
                    +"city="+city+"&"
                    +"eta="+eta+"&"
                    +"arr="+arr;
        //window.alert(dataStr);

        $("#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Сохранить": function() {

                $("#ico"+rowID).html("<img src='images/indic.gif' />");
                $( this ).dialog( "close" );
                sendReq=true;
            },
            "Отмена": function() {
                $("#ico"+rowID).html("");
                $( this ).dialog( "close" );
            }
        }
        });     


        if (sendReq==true){
            $.ajax({
                type: "POST",
                url: "updFlt.php",
                data: dataStr,
                cashe: false,
                success: function(html){
                    $("#ico"+rowID).html("");
                    window.alert("It's ok");
                }
            });
        }else
        {
            window.alert("false");  
        }

        });





</script>

that’s I have dialog popup that has 2 buttons when user clicks the first button I need to send data using ajax else cancel…

  $("#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Сохранить": function() {

                $("#ico"+rowID).html("<img src='images/indic.gif' />");
                $( this ).dialog( "close" );
                sendReq=true;
            },
            "Отмена": function() {
                $("#ico"+rowID).html("");
                $( this ).dialog( "close" );
            }
        }
        });

after that i do checking and send to server using ajax

    if (sendReq==true){
        $.ajax({
            type: "POST",
            url: "updFlt.php",
            data: dataStr,
            cashe: false,
            success: function(html){
                $("#ico"+rowID).html("");
                window.alert("It's ok");
            }
        });
    }else
    {
        window.alert("false");  
    }

    });

The result which I’m getting is that window.alert("false"); -this line of code gets executed before jQuery dialog popup!! Why it is so??? When I run my web app and change table row standard alert pops up first(modal form) then I reach confirm-dialog
$(“#dialog-confirm” ).dialog() popup though this line of code precedes standard alert call !!!

Answer 1

change the code to this:

$("#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Сохранить": function() {

                $("#ico"+rowID).html("<img src='images/indic.gif' />");
                $( this ).dialog( "close" );
                $.ajax({
                type: "POST",
                url: "updFlt.php",
                data: dataStr,
                cashe: false,
                success: function(html){
                    $("#ico"+rowID).html("");
                    window.alert("It's ok");
                }
            });
            },
            "Отмена": function() {
                $("#ico"+rowID).html("");
                $( this ).dialog( "close" );
            }
        }
        });