特殊情况:使用对话框内的表单编程查询字符串

时间:2012-12-04 17:11:10

标签: javascript jquery forms jquery-ui jquery-ui-dialog

我包含了我的项目片段。 当我运行此代码时,单击窗口对话框上的添加,并在提交内部,Firebug响应错误。

我想知道为什么这不是alert ("Se funziona questo mi hai aiutato");

http://api.jquery.com/submit/

网站末尾有一个示例,它可以在我的电脑上正常工作。

现在我公开我的代码或练习在窗口对话框(Jquery)中使用表单的地方。

我想编程并且我有解决方案,但函数的javascript中的脚本不起作用。

为什么?

现在我谈论我的项目。

使用对话框的窗口(Jquery我的代码)添加任何内容。

该项目不起作用。因为(使用Firebug控制台)在按下按钮添加对话框后,它在库too much recursion上给出了此错误jquery.min.js line 2

如何改进运行警报的代码?

我的项目:

<html>
  <head>
    <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <style></style>
  </head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
// <---- VENTAÑAS DE PARAMETERES---->
$(document).ready(function() { 
var regex,v,l,c,b,i,contapara=3;
$( "#wnd_Addparam" ).dialog({
            autoOpen: false,
            height: 'auto',
            width: 350,
            modal: true,
            resizable:false,
            buttons: {
                "Add": function() {
                                 contapara=(parseInt(contapara)+1);
alert("popopo");
                $("#formparam").submit(function() {
                              alert("Se funziona questo mi hai aiutato");
                    });
                                $( this ).dialog( "close" ); 
                                   },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                $( this ).dialog( "close" );
            }
        });

        $( "#btn_Addpar" ).click(function() {
                        i=(parseInt(contapara)+1);
                        $("#formparam").remove();
    $("#wnd_Addparam").append('<form method="GET" name="formparam"  id="formparam" action="${nextstep}"><table><tr><td><label>ID</label></td><td>\
    <textarea class="expand" name="inputp'+i+'_id" id="inputp'+i+'_id"></textarea></td></tr>\
    <tr><td><label>Type</label></td><td><select name="inputp'+i+'_type" id="inputp'+i+'_type">\
    <option value="text">Text</option><option value="integer">Integer</option><option value="float">Float</option>\
    <option value="list_values">List of values</option><option value="range">Range</option>\
    <option value="selection_collapsed">Selection (collapsed)</option>\
    <option value="selection_expanded">Selection (expanded)</option>\
    <option value="subimage">Subimage selection</option>\
    <option value="polygon">Polygon selection</option>\
    <option value="horizontal_separator">Horizontal separator</option>\
    </select></td></tr></table></form>');



                $( "#wnd_Addparam" ).dialog( "open" );
            });
});
</script>
  <body>
<div>
 <input type="button" id="btn_Addpar" value="Add"/>
<input type="button" id="btn_Deletepara" value="Delete"/>
<input type="button" id="btn_Pedit" value="Edit"/>
</div>
<div id="wnd_Addparam" title="New parameter" ></div>
</body>
</html>

我也查看了这个问题How to change the querystring when I submit my GET form using JQuery?并且他使用了(总是在函数的提交内)这个脚本:

   function(event) {
            event.preventDefault();
            $this = $(this);
            alert("Se funziona questo mi hai aiutato");
}

但它也不起作用。

2 个答案:

答案 0 :(得分:3)

我改变了你的jsFiddle以获得一些工作,但它可能仍然不是你想要的方式:

jsFiddle

我将jQuery和jQuery-ui添加到你的jsFiddle中,所以它会编译,并在你应该放置表单提交代码的位置放置一个警告存根。

您的.submit()处理程序未被调用,因为添加和取消按钮是由jquery-ui .dialog(...)调用添加的,并且不属于<form>元素。

如果你将ajax代码放在“添加”按钮功能处理程序中,你应该很高兴。我不知道你的大部分代码是做什么的,但这至少可以帮助你。

var regex,v,l,c,b,i,contapara=3;
$( "#wnd_Addparam" ).dialog({
    autoOpen: false,
    height: 'auto',
    width: 350,
    modal: true,
    resizable:false,
    buttons: {
        "Add": function() {
            contapara=(parseInt(contapara)+1);
            alert("add was clicked");
            // to use ajax uncomment below, depending on the 
            // service you're hitting, you may need
            // to change it to $.get(... etc 
            // which will use HTTP GET verb
            /*
            var $fm = $("#formparam");
            $.post($fm.attr('action'), $fm.serializeArray())
                .done(function(data, ok){
                    alert('call done: ' + ok);
                    // data is the content of the response
                })
                .fail(function(data){
                    alert('call failed');
                    // call failed for some reason -- add error messaging?
                });                            
            */
            $( this ).dialog( "close" );
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
});

$( "#btn_Addpar" ).click(function() {
                i=(parseInt(contapara)+1);
                $("#formparam").remove();
            $("#wnd_Addparam").append('<form method="GET" name="formparam"  id="formparam" action="${nextstep}"><table><tr><td><label>ID</label></td><td>\
            <textarea class="expand" name="inputp'+i+'_id" id="inputp'+i+'_id"></textarea></td></tr>\
            <tr><td><label>Type</label></td><td><select name="inputp'+i+'_type" id="inputp'+i+'_type">\
            <option value="text">Text</option><option value="integer">Integer</option><option value="float">Float</option>\
            <option value="list_values">List of values</option><option value="range">Range</option>\
            <option value="selection_collapsed">Selection (collapsed)</option>\
            <option value="selection_expanded">Selectionddddd (expanded)</option>\
            <option value="subimage">Subimage selectiondddddd</option>\
            <option value="polygon">Polygon selectionddd</option>\
            <option value="horizontal_separator">Horizontal separator</option>\
            </select></td></tr></table></form>');


        $( "#wnd_Addparam" ).dialog( "open" );
    }); ​

答案 1 :(得分:-1)

由于这一行,您收到“太多递归”错误:

close: function () {
    $(this).dialog("close");
}

你在这里说的是当对话框关闭时,你应该关闭对话框,它会在无限循环中激活这个处理程序。注释掉这一行或者完全删除它。