Particular case: Programmed Query string using form inside dialog - javascript

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");
http://api.jquery.com/submit/
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:
jsFiddle.
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.

Related

HTML form continues to submit before JQuery Dialog selection is made?

I have a form in HTML:
<form id="notes" method="post" onsubmit="return notes_validate()">
In this form I've included a JQuery Dialog box (I've connect the scripts and it's working):
<div id="dialog-confirm" title="Alert" style="display:none;">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Continue and submit?</p>
</div>
I have a JavaScript script called "notes_validate()" that validates elements on the form and returns true if all elements pass the checks.
In this script, as one of the final validation steps, I prompt the user with this JQuery Dialog box; I'm trying to get the Dialog box to submit the form if "Yes" is selected and return false (don't submit the form) if "Cancel" is selected.
In "notes_validate()" is:
if(validated){
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:240,
width:300,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
return false;
}
}
});
});
}
The issue is that the form is automatically submitting before any option is selected. I also have a submit button in the form in HTML:
<input class="submit" style="float:left" type="submit" value="submit" />
What's the issue(s)?
The problem is you're expecting onsubmit="return notes_validate()" to keep the form from submitting, but your threading is messed up. You're not returning anything directly from notes_validate().
Once you hit $( "#dialog-confirm" ).dialog({...}), that's a different "thread". Your notes_validate method is continuing on as if nothing happened.
What you need is
function notes_validate(event) {
if(validated){
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:240,
width:300,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
$( "#notes" ).submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
}
event.preventDefault();
}
Update:
As pointed out, it would be better to remove the onsubmit portion of this altogether. Changing your button to the following after removing the onsubmit from your form should do the trick:
<input class="submit" style="float:left" type="button" onclick="notes_validate()" />

Create a JQuery dialog modal function with parameters

I am a bit newbie in Jquery and java scripts and a bit confuse in this matter.
Here's my code of a simple modal message alert taken from JQuery UI.
The problem is that the function is being called in the div class in the HTML code:
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-message" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
But what i want to do is to create 2 parameters: 1 receives some text and the 2nd is when i press ok it goes to a link.
I am developing a website and i don't want to use the browsers alert, just want to use that JQuery script and do something like this:
<?php
function alerta($texto="",$redirect=""){
print("<Script language=javascript>");
if($texto!="")
print("alert(\"$texto\");");
if($redirect!="")
print("window.location=\"$redirect\";");
print("</script>");
}
?>
You can echo your text (Variable 1) inside the div modal, and then use the redirect function on 'OK' button click event:
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
window.location = "$YOUR_VARIABLE_2";
}
}
});
});

How to open a jQuery Dialog from a jump menu

I want to fire a jQuery dialog from a jump a menu. How do I do this?
Here is my script:
<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#bulkConfirm" ).dialog({position:['middle',60],
open: function(event, ui) {
jQuery('.ui-dialog-titlebar-close').removeClass("ui-dialog-titlebar-close").html('<span style="float:right;"><img src="../images/x.png" /></span>');
},
dialogClass: 'ui-widget-shadow',
modal: true,
autoOpen: false,
width: '650px',
close: function(ev, ui) {$(this).close();}
});
$( ".bulkConfirmOpen" ).click(function() {
$( "#bulkConfirm" ).dialog( "open" );
return false;
});
});
</script>
And here is my menu:
<select name="fieldname" size="1" onChange="go()" class="select" >
<option selected="selected"><em>Questions Bulk Edit Options...</em></option>
<option value="#">Change Category Assignments</option>
<option class="bulkConfirmOpen" href="#" >Change Status to Approved</option>
<option value="#">Move to Another Folder</option>
</select>
I want to open the dialog with the "Change Status to Approved" option. Currently it opens the dialog quickly, but then it immediately redirects to a page not found. The other menu items will be directed to other page links. A little help please?
you can try this: http://jsfiddle.net/TXkrM/
$(function () {
$(".select").change(function () {
if($('option:selected',this).attr('class')=='bulkConfirmOpen'){
$(this).dialog();
}
});
});
Giving options a href attribute is not a valid way.

jquery modal is not working

jquery modal working when code is in same page
index.jsp
<script>
function show()
{
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
}
</script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
<div id="dialog-modal" title="Demo" style="display:none">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
but, when i'm trying to separate the above code in different file, then it is not showing
index.jsp
<script>
function show()
{
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "/dialog.jsp#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
}
</script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
</body>
dialog.jsp
<div id="#dialog-modal" title="Demo">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
thanks in advance !!
You cannot call an external resource in a jQuery selector like $("/dialog.jsp#..."). Instead you need to load the resource with an AJAX call.
First, add a node to your main HTML to receive it. I've added <div id='dialog-content'></div>. Then load the .dialog() on that node:
<script>
function show()
{
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-content" ).dialog({
height: 140,
modal: true,
// Use load function to populate the dialog:
load: function() {
$("#dialog-content").load("/dialog.jsp#dialog-modal")
}
});
});
}
</script>
</head>
<body>
<div id='dialog-content'></div>
<input type="button" value="Demo" onClick="show()" >
</body>
That's simply not going to work; jQuery is not going to load the other page fragment for you just because you reference it with that selector; it's not even valid selector syntax.
If you want to load the dialog from another file, you'll have to either do a <jsp:include> to include it server-side or else make an explicit ajax call (with jQuery .load() or .ajax() or whatever) when something happens that makes you want to show the dialog.
That's because there is not element in the dom with the id "dialog-modal'. Your selector is incorrect. Do a console log of your jquery selector result and you'll see it's empty. Make sure the element in loaded in the dom. You can also create it on the fly:
$('<div id="my-popup">').dialog({
height: 140,
modal: true
});
Adding a "path" to your jQuery selector does not put the javascript in a separate file, and I don't think I've seen a successful use of having your HMTL markup in a separate file.
Move the markup back to index.jsp and move the show() function into a seperate .js (not .jsp) file.
Link the new .js file to index.jsp:
<script type="text/javascript" src="/show.js"></script

jQuery dialog not working properly

I have the following script:
<script type="text/javascript">
$( "#addLocation" ).dialog({
autoOpen: false,
modal: true,
height: 700,
width: 550,
buttons: {
"Add Location": function() {
document.forms["mapform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
</script>
<script type="text/javascript">
function showLocationDialog() {
$("#addLocation").dialog("open");
}
</script>
<div id="addLocation" style="display:none;">
<form action="" method="post" name="mapform">
<input type="text" name="name" />
<input type="submit" />
</form>
</div>
<button onclick="javascript:showLocationDialog();">Add an address</button>
The button does not open the dialog and I cannot understand why.. can anyone assist?
Thanks,
Wait for the DOM to be ready.
Stick your .dialog() code in a $(document).ready() or $() block
1 - Put the .dialog() initialization into a $(document).ready() { ... });.
2 - Remove the extra comma from after the buttons value:
buttons: {
"Add Location": function() {
document.forms["mapform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}, <-- remove this, causes IE to spontaneously combust
another thing to try...
remove the display:none css from the addLocation div..the dialog will take care of hiding everything once its initialized on document.ready

Categories

Resources