jQueryUI Modal Refreshing Page on Close - javascript

In my jQueryUI modal, whenever I click on the buttons, the parent page refreshes, even when I have preventDefault() or return false. Is this expected behavior?
The HTML:
<li><a id="addFunds" class="no-close" href="#">Add Funds</a></li>
The modal:
<div id="addFundsModal" class="modal-hidden" title="Add Funds to Your Account">
<div class="leftBar">
<h3>Add Funds</h3>
//other stuff
<form>
//<fieldset>, etc.
<button class="modal-close btnBlue" href="#">Cancel</button>
<button class="add-funds btnGreen">Add Funds</button>
</form>
</div>
</div>
The jQuery:
$('#loggedInDropdown').on('click', '#addFunds', function(e) {
e.preventDefault();
$('#addFundsModal').dialog({
modal: true,
dialogClass: 'no-close',
width: 500
});
});
$('.ui-dialog').on('click', '.modal-close', function(e) {
e.preventDefault();
$('#addFundsModal').dialog('close');
});
I'm also not sure about whether I should use dialog.close or dialog.destroy, but that is for another post, I suppose.

We usually attach the button behavior inside the .dialog options:
.dialog({
resizable: false,
height:240,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});

Your issue is in the event delegation, i think your click event for cancel never gets executed because .ui-dialog is created only the first time you click on the link so initially attaching the event to that class doesn't take any effect (as .ui-dialog doesn't exist then) and with normal button behavior form submits, page refreshes.
Try:
$('#addFundsModal').on('click', '.modal-close', function (e) {
e.preventDefault();
$('#addFundsModal').dialog('close');
});
or apply it to the class (must better)
$('.modal-hidden').on('click', '.modal-close', function (e) {
e.preventDefault();
$('#addFundsModal').dialog('close');
});
Demo

Related

How to write a synchronous jQuery dialog for validation before submit?

Here's what I would like to do:
I have a SUBMIT button. After clicking the button, the javascript will do some check/validation on my text (such as spelling, uppercase/lowercase). If the check/validation is not passed, then a jQuery dialog will pop-up and confirm with two options:(1) submit anyway (2) cancel (go back to the page and correct some content).
However, I find that the code executes all the script (and skip the dialog's code in the middle), so the dialog's confirmation code executes last and submit anyway. Is there any way to make the dialog's code execute according to its line number? Many thanks!
P.S. I don't want to use the confirm because I need the font larger.
Here's the <form>:
<form name="annotation" id="annotation" method="post">
...
<input type="submit" class="btn" value="SUBMIT" id="submit">
</form>
Here's the script:
<script>
$( "form" ).submit(function( event ) {
// Perform some checking/validation
// ...
if (!valid) {
$("#dialog").dialog({width:500,
buttons: [
{
text: "Submit anyway?",
click: function() {
// Perform submission
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
// Perform cancelation
$( this ).dialog( "close" );
}
}]
});
}
else
{
// Perform submission
}
});
</script>
And the <div>:
<div id="dialog" style="display:none"><h4>Are you sure you want to submit this?</h4></div>
For example, after I click the button (in the condition of valid == false), a very flash showing of the message "Are you sure you want to submit this?" and then the code submit anyway (too fast, I cannot click anything).
Got some help from friend and solved using document.getElementById('').submit(). Firstly, change <input> to <button>:
<form name="annotation" id="annotation" method="post">
...
<button type="button" class="btn" onclick="submit_post()" value="SUBMIT" id="submitBtn">SUBMIT</button>
</form>
Then change the script:
<script>
function submit_post()
{
// Perform some checking/validation
// ...
if (!valid)
{
$("#dialog").dialog({
width:500,
buttons: [
{
text: "Submit anyway",
click: function() {
document.getElementById('annotation').submit();
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
}
else
{
document.getElementById('annotation').submit();
}
}
</script>
You should use preventDefault(), like below
<script>
$("form").submit(function(event) {
var form = event.target;
if (!valid) {
event.preventDefault() //Here you can prevent submission
$("#dialog").dialog({
width: 500,
buttons: [{
text: "Submit anyway?",
click: function() {
// Perform submission
form.submit();
$(this).dialog("close");
}
},
{
text: "Cancel",
click: function() {
// Perform cancelation
$(this).dialog("close");
}
}
]
});
} else {
// Perform submission
}
});
</script>

How to include jquery ui widgets inside a 2nd stacked modal dialog?

I currently have a form inside a modal dialog, which has a link to add/edit options in one of the select drop downs. This link opens a new modal dialog on top of the old one as I want. However, I can't seem to get any jquery ui widgets to work inside this second modal dialog (specifically the accordian and datepicker widgets). I have followed How to execute jquery inside a Modal window? and have both the accordian and datepicker widgets working in the 1st modal dialog.
Code I've been trying for 2nd modal dialog (not working):
$(document).on("click", ".view_dialog_2", function(event) {
$dialog_2.load($(this).attr('href'), function()
{
$('#accordian').addClass('accordian2');
$('#meeting_date').addClass('date2');
$('#follow_up_date').addClass('date2');
$(function() {
$( ".accordian2" ).accordion();
collapsible: true;
});
$(function() {
$( ".date2" ).datepicker();
});
$dialog_2.dialog('open');
});
return false;
});
Code that is currently working for 1st modal dialog:
$(".view_dialog").click(function(){
$dialog.load($(this).attr('href'), function()
{
$(function() {
$("#addPartNum, .order-button")
.button();
});
$(function() {
$( "#meeting_date" ).datepicker();
});
$(function() {
$( "#follow_up_date" ).datepicker();
});
$dialog.dialog('open');
});
return false;
});
I have tried removing the $(document).on event binding for the 2nd dialog but it just takes me to the linked page w/o any modal dialog. I tried adding the classes because I thought maybe there was a conflict since the datepickers are present in the 1st dialog as well.
This is my first project using jquery, and I've been getting it for the most part, but this one has me stumped. Any help would be greatly appreciated :)
EDIT: here is the dialog code for 2nd not working dialog (not sure if necessary or not)
var $dialog_2 = $("#view_dialog_2").dialog(
{
autoOpen: false,
height: 800,
width: 800,
resizable: true,
modal: true,
buttons: {
"Submit": function() {
// do stuff
$dialog_2.dialog("close");
},
"Cancel": function() {
$dialog_2.dialog("close");
}
}
});
EDIT #2: here is a jsfiddle to kind of demonstrate my problem a bit more: https://jsfiddle.net/8pfjz3k5/
Might be more than one way to do this, but here is a simple example you can start from: https://jsfiddle.net/7xo1Lcy1/
HTML
<div id="start-box" title="First Form">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Form</p>
<a id="add" href="#">Add/Edit</a>
<div id="add-box">
<label>Next</label>
<input type="text" />
</div>
<script>
$("#add-box").dialog({
autoOpen: false,
resizable: true,
modal: true,
buttons: {
"Submit": function() {
// do stuff
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
</script>
</div>
<a id="start" href="#dialog-conf">Start Here</a>
JQuery
$(function() {
$("#start-box").dialog({
autoOpen: false,
resizable: false,
height: 340,
modal: true,
buttons: {
"Save": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#start").button();
$("#start").click(function() {
$("#start-box").dialog("open");
});
$("#start-box").on("click", "#add", function(e) {
console.log("Launching Add Box.");
$("#add-box").dialog("open");
});
});
So you can see I moved away from $(document) for the .on(). This should look for a Click event just when the dialog is open. It then opens the next dialog (the first still in the background).
I hope that helps.
EDIT
You didn't init the .accordion(). See update to your fiddle: https://jsfiddle.net/Twisty/8pfjz3k5/2/
$("#accordian").accordion();
Make sure your selector is correct and you call the right methods.

Jquery dialog submit form by Enter Key

I want submit form for Jquery dialog by pressing enter key.
HTML
<!-- Pin Notification Form -->
<div id="pin-dialog-form" title="Verification Pin">
<div id="agent_pin_container">
<input type="password" name="verification_pin" id="verification_pin"
value="" class="form-control" placeholder="Verification Pin" />
</div>
</div>
JQUERY
$( "#pin-dialog-form" ).dialog({
autoOpen: false,
height: 200,
width: 300,
modal: true,
buttons: {
"Submit": function() {
// PROCESS
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$( this ).dialog( "close" );
}
});
Now, I can not use this type of code in here, if (e.keyCode == 13) {. Because, the form is submitted by modal window itself. on the other hand I can not use this,
open: function() {
$(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();
}
because, I need to enter PIN first then focus on submit button.
Is there any other way to do it?
Thanks.
As per comments you should be able to grab keypress document-wide using:
$(document).keypress(function(e){
if (e.keyCode == 13) {
// CODE TO SUBMIT THE FORM either AJAX or *form*.submit()
// CODE TO CLOSE THE MODAL
}
});
sources:
Submitting a form on 'Enter' with jQuery?
Capture key press without placing an input element on the page?

Automatic scroll up after poping jQuery modal

I have jQuery modal popping after user clicks on a icon in the list. List can be huge, so user must scroll down to see full list.
When I click on the icon, modal pops in middle of that screen, and then my browser scrolls up to top of the page.
How can I prevent browser from scrolling up?
HTML
<div class="lista">
<table class="table3">
<tbody>
<?php
foreach ($predmeti as $obj){
?>
<tr>
<td><img src="link">
</tr>
<?php
}
?>
</tbody>
</table>
</div>
js / jQuery
function popModal(){
$( "#foo" ).dialog({
open: function ( event, ui) { /* some code */ },
resizable: false,
height:230,
width: 230,
modal: true,
buttons: {
"Change": function() { /* some code */},
"Close": function() {
$( this ).dialog( "close" );
}
}
});
}
And I have foo div block to show data.
Found out 2 ways of fixing this.
1st:
Added event.preventDefault(); to the popModal(); function.
2nd:
Added onclick = "popModal(); return false;" to the HTML part of calling function.
Credit goes to morodeer.
Hope this helps someone else.
As you have <a href="#">, it jumps to # anchor. To prevent it in jQuery, you should put return false; in the end of onclick event, which is in your case function popModal().
So this code should work:
function popModal(){
$( "#foo" ).dialog({
open: function ( event, ui) { /* some code */ },
resizable: false,
height:230,
width: 230,
modal: true,
buttons: {
"Change": function() { /* some code */},
"Close": function() {
$( this ).dialog( "close" );
}
}
});
return false;
}
For plain JS implementation of preventing default action (like jumping to anchor) just google for event.preventDefault .

How do I bind a close button with an open button using jQuery UI Dialog?

I am trying to create a wizard-like experience with 5 jQuery Dialog modals. I want to fire a new modal from the first one that opens the second, but closes the first. The same with third, the fourth, and the fifth.
I can open the modals nested inside the other modals just fine, but the previous one doesn't close when the next one opens. In the end, I have 5 windows open on top of each other.
Here is the code I am using to open two of the 5 modals(the rest will go in order using the same logic:
<script>
$(function() {
$( "#modal_1" ).dialog({position:['middle',60],
open: function(event, ui) {
dialogClass: 'ui-widget-shadow',
modal: true,
autoOpen: false,
width: '950px',
close: function(ev, ui) {$(this).close();}
});
$( ".modal_1open" ).click(function() {
$( "#modal_1" ).dialog( "open" );
return false;
});
$( ".btnNext" ).click(function(){
$('.ui-dialog-content').dialog( "close" );
})
});
</script>
<script>
$(function() {
$( "#modal_2" ).dialog({position:['middle',60],
open: function(event, ui) {
dialogClass: 'ui-widget-shadow',
modal: true,
autoOpen: false,
width: '950px',
close: function(ev, ui) {$(this).close();}
});
$( ".modal_2open" ).click(function() {
$( "#modal_2" ).dialog( "open" );
return false;
});
$( ".btnNext" ).click(function(){
$('.ui-dialog-content').dialog( "close" );
})
});
</script>
Here is an example of the html:
<a class="button btnNext">Continue</a> <!--this is the button inside the modal that is supposed to fire the next modal-->
<div style="display:none" id="modal_1" title="Login">
<!--#include file="modal_1.asp"-->
</div>
<div style="display:none;" id="modal_2" title="Page Two Title">
<!--#include file="modal_2.asp"-->
</div>
I think I can bind the close function with an opening of the next, but I don't know how. Any help??
I diet your code to clue and did some test.
IMO you had missassigned options.
close: is for event handler, not button.
Use buttons field for define buttons. when click close your dialog and open next one...
$(this).dialog("close");
$("#modal_2").dialog("open");
My simple version below:
$(function() {
$("#modal_1").dialog({
modal: true,
autoOpen: true,
buttons: [{text: "Next",click: function() {
$(this).dialog("close");
$("#modal_2").dialog("open");
}
}]
});
$("#modal_2").dialog({
modal: true,
autoOpen: false,
buttons: [{text: "Next",click: function() {
$(this).dialog("close");
$("#modal_1").dialog("open");
}}]
});
});
I tested it here:
http://jsfiddle.net/JmgKS/8/

Categories

Resources