Question

我正在尝试使用JQueryUI对话框，这样我就可以在内部Web应用程序中获得漂亮的格式化确认对话框。我有一个事件监听器附加到Submit按钮，然后它将获取数据并在对话框中显示它。到目前为止，我可以在对话框中获取它并且格式很好，但看起来好像提交操作正在传播而不是等待用户选择选项（确认或取消），即此对话框在屏幕上闪烁，然后在页面处理提交操作时消失。

我可能错过了一些小事，但我不确定是什么，有人可以帮忙吗？我应该以某种方式添加stopProagation（）函数吗？提前谢谢。

以下是我正在做的事情的片段（我希望代码正确插入）：

var StripyTables ={
init: function(){


    // hook into the Accept and Exit button
    var acctUpdate = $("#finishShipment");

    for (var i = 0, ii = acctUpdate.length; i < ii; i++)
    {
       $(acctUpdate).bind("click", StripyTables.finishListener);
    }
},

finishListener: function(event){
    var id   = document.getElementById('session_id').value;
    var url  = 'http://'+window.location.hostname+'/truck/webServices/verifyCarr.svc.php';
    var args = 'id='+id;
    var retval = StripyTables.doAjax(url, args);
    var len = retval.length;
    if(retval==null || retval==""){
        event.preventDefault();
    }
    else{
        if(len<100){
            event.preventDefault();
            alert(retval);
        }
        else{
            $('#dialog').html(retval);
            var $dialog = $('<div></div>')
            .html(retval)
            .dialog({
                autoOpen: false,
                width: 700,
                height: 350,
                title: 'Final Detail for Route: '+id,
                buttons: {
                    "Confirm Route": function() {
                        $( this ).dialog( "close" );
                       // with a form with an ID of 'frm_processRoute', will this work?
                        $('#frm_processRoute').submit();
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                        event.preventDefault();
                    }
                }
            });
            $dialog.dialog('open');
        }
      },
 doAjax: function(url, args){
    var retVal;
    retVal =   $.ajax({  
                    type: "GET",
                    url: url,
                    data: args,
                    async: false
                }).responseText;
    if(retVal==null || retVal=="")retval=99;
    return retVal;
}
}
}StripyTables.init();

Answer 1

打开对话框时似乎无法提交表单。而且，您可以简化finishListener功能：

finishListener: function(event){
    event.preventDefault(); //stop form submit here
    var id   = document.getElementById('session_id').value;
    var url  = 'http://'+window.location.hostname+'/truck/webServices/verifyCarr.svc.php';
    var args = 'id='+id;
    var retval = StripyTables.doAjax(url, args);
    var len = retval.length;
    if(retval==null || retval==""){
       //show error message
    }
    else{
        if(len<100){
        //show error message
        alert(retval);
    }
    else{
        $('#dialog').html(retval);
        var $dialog = $('<div></div>')
        .html(retval)
        .dialog({
            autoOpen: false,
            width: 700,
            height: 350,
            title: 'Final Detail for Route: '+id,
            buttons: {
                "Confirm Route": function() {
                    //$(#your-form).submit();
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
        $dialog.dialog('open');
    }
  }

使用带有“提交”按钮的JQuery UI对话框

1 个答案: