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.
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.
Now I public my code or exercise where I use the form inside the window's dialog(Jquery).
I want programmed and I have the solution but the script inside the function's javascript doesn't work.
Why?
Now I speak about my project.
Using the dialog's window (Jquery my code) for adding anything.
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?
My Project:
<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>
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");
}
But it doesn't work either.
I changed your jsFiddle to get a few things working, but it's probably still not the way you want it:
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.
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.
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" );
});
You are getting the "too much recursion" error because of this line:
close: function () {
$(this).dialog("close");
}
What you are saying here is that when the dialog is closed, you should close the dialog, which fires this handler in an infinite loop. Comment out this line or just remove it completely.
来源：https://stackoverflow.com/questions/13708265/particular-case-programmed-query-string-using-form-inside-dialog