Develop Reference

How to display jquery dialog on link click

I would like to have a jquery pop up with confirmation info when clicking on a specific link in my navigation menu.I have the code below, but the popup does not appear, but the info on the popup display on the page among other page content.
HTML Link
<li>Order </li>
Dialog content
<div id="dialog-confirm">
<div class="message">UI Content goes here</div>
<div class="buttons">
</div>
jquery
<script>
$( function() {
$( "#dialog-confirm" ).dialog({
$( "#order").click({
resizable: true,
height: "auto",
width: 600,
modal: true,
buttons: {
"Yes": function() {
window.location.replace("https://link_here");
},
No: function() {
window.location.replace("https://link_here");
}
}
});
});
} );
When I remove the $( "#order").click({ part of the jquery, it works as a popup for every link clicked, so the issue must be there but I am unable to solve.

You have calling dialog function before click
Please check below code
$(function(){
$('#order').click(function(e){
e.preventDefault();
$( "#dialog-confirm" ).dialog({
resizable: true,
height: "auto",
width: 600,
modal: true,
buttons: {
"Yes": function() {
window.location.replace("https://link_here");
},
No: function() {
window.location.replace("https://link_here");
}
}
});
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<li>Order </li>
<div id="dialog-confirm" style="display: none;">
<div class="message">UI Content goes here</div>
<div class="buttons">
</div>

1) add autoOpen: false to the dialog settings first, so popup won't be shown automatically on page load.
2) add click method on your link which will be showing the popup.
See this fiddle:
https://jsfiddle.net/4eo9w1cr/

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()" />

Open div when click a another div

I have a html structure. With the following:
<div class="edit"><a class="formtri" href="#">CHANGE</a>
And:
<div id="user_adr" style="display:none">
I want, when i click CHANGE, get user_adr div on front. Ajax or other solution. I tried jQuery .load function but it's not work. How can i do this?
Demo

You can use toggle() function to show / hide html element.
Live Demo
$('.edit').click(function(){
$('#user_adr').toggle();
});

alternatively you can use toggle functionality.
$('.edit').on('click',function(){
$('#user_adr').toggle();
});
if not toggle. then alternative method of toggle is this.
$('.edit').on('click',function(){
if('#user_adr').is('visible'))
{
$('#user_adr').show();
}
else
{
$('#user_adr').hide();
}
});
//to change display to none
$('#yourDivId).attr('display','none');

you can use jquery ui. dialog() method to show a dialog box. like this. Jquery dialog
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>

if in case there is any other div with same class name edit above solutions may not be helpful so better u keep a unique id as "change"
<div class="edit"><a class="formtri" id="change" href="#">CHANGE</a>
$("#change").on("click", function(){
$('#user_adr').show();
});
$("#change").on("click", function(){
$('#user_adr').toggle();
});

Particular case: Programmed Query string using form inside dialog

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.

jQuery UI Dialog not showing correctly

I'm using jQuery UI 1.8.19 and Twitter Bootstrap 2.0.3 in a site I'm developing. I want to show a modal dialog when click in a Delete and for this I do that:
<div id="dialog-confirm" title="<?php echo lang("event:delete_confirm_title") ?>">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><?php echo lang('event:delete_confirm_content') ?></p>
</div>
And the JS to fire the event is this one:
$(function() {
$("#delete").click(function(){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"<?php echo lang('event:delete') ?>": function() {
$( this ).dialog( "close" );
},
"<?php echo lang('global:cancel_label') ?>": function() {
$( this ).dialog( "close" );
}
}
});
});
});
For some reason the modal dialog is always showed at the end of the page when it shouldn't be I think and when I click the element the dialog appears but the page is redirected instantaneously to my home page and didn't know the cause because I don't have redirects in any place and also there are no forms there. Any advice or help on this?
Best regards

You should add style='display: none' to your dialog div so it won't be displayed at startup.
Then if the page is sent to home when you click the button, you may want to check what type of button #delete is and finish it's function with return falseif it's a Submit for example to avoid normal click event handler to be launched :
$(function() {
$("#delete").click(function(e){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"<?php echo lang('event:delete') ?>": function() {
$( this ).dialog( "close" );
},
"<?php echo lang('global:cancel_label') ?>": function() {
$( this ).dialog( "close" );
}
}
});
e.preventDefault();
});
});
Edit : Modification done according to Scott suggestion

This happened to me as well. There is only one cause I know of. The dialog CSS file is not being loaded.
See my SO Question: position:fixed breaks in IE9