特殊情况：使用对话框内的表单编程查询字符串 [英] Particular case: Programmed Query string using form inside dialog
问题描述
我包含了我的项目片段。
当我运行此代码时，单击窗口对话框上的添加，并在提交内部，Firebug响应错误。
I include a snippet of my project. When I run this code clicking add on the window's dialog, and inside the submit, Firebug responds with an error.
我想知道为什么这样做不是 alert（Se funziona questo mi hai aiutato）;
I would like to know why this does not alert ("Se funziona questo mi hai aiutato");
有一个在网站末尾的示例，它在我的电脑上工作正常。
There is a example at the end of the site and it works fine on my pc.
现在我公开我的代码或练习我在窗口对话框（Jquery）中使用表单的地方。
Now I public my code or exercise where I use the form inside the window's dialog(Jquery).
我想要编程并且我有解决方案，但函数的javascript中的脚本不起作用。
I want programmed and I have the solution but the script inside the function's javascript doesn't work.
为什么？
现在我谈论我的项目。
使用对话框窗口（Jquery我的代码）添加什么。
Using the dialog's window (Jquery my code) for adding anything.
该项目不起作用。因为（使用Firebug控制台）它在库 jquery.min.js第2行上给了我这个错误过多的递归按下按钮后添加对话框。
The project doesn't work. Because (using Firebug Console) it gives me this error too much recursion on the library jquery.min.js line 2 after pressing the button add the Dialog.
如何改进运行警报的代码？
How can I improve the code to run the alert?
我的项目：
<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>
我也看了这个问题如何在使用JQuery提交我的GET表单时更改查询字符串？并且他使用了（总是在函数的提交内）这个脚本：
I looked also this question How to change the querystring when I submit my GET form using JQuery? and he used (always inside the function's submit) this script:
function(event) {
event.preventDefault();
$this = $(this);
alert("Se funziona questo mi hai aiutato");
}
但它也不起作用。
推荐答案
我改变了你的jsFiddle以使一些工作正常，但它可能仍然不是你想要的方式：
I changed your jsFiddle to get a few things working, but it's probably still not the way you want it:
jsFiddle 。
我在你的jsFiddle中添加了jQuery和jQuery-ui，所以它会编译，并在你应该放置表单提交代码的位置放置一个警告存根。
I added jQuery and jQuery-ui to your jsFiddle so it would compile, and put an alert stub in where you should put your form submission code.
您的 .submit（）处理程序未被调用，因为添加和取消按钮是由jquery-ui <$ c $添加的c> .dialog（...）调用并且不属于< form> 元素。
Your .submit() handler was not getting called because the add and cancel buttons are added by the jquery-ui .dialog(...) invocation and are not part of the <form> element.
如果你把ajax代码放在添加按钮功能处理程序中，你应该好好去。我不知道你的大部分代码是做什么的，但这可能至少有帮助。
If you put your ajax code in the "Add" button function handler you should be good to go. I don't know what most of your code does, but this might at least help.
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" );
});
这篇关于特殊情况：使用对话框内的表单编程查询字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
