I am trying to get the following logic to work. Any suggestions would be greatly appreciated.
here is what I'm trying to do..
if <input type="button" name="filter" id="filter" value="Save / Change" /> is clicked.
then check if requiredFields() returns true
if requiredFields() returns true
then display jQuery UI dialog
from jQuery dialog action
set form field, change form action, submit form, change form action back to original action
jQuery(function($)
{
$("#filter").on("click", function() {
if(requiredFields()) {
$("#dialog").dialog("open");
$( "#dialog" ).dialog({
resizable: false,
height:175,
modal: true,
position: {
my: "center top",
at: "center top",
of: window
},
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
$('input[name="setAccess"]').val('1');
$("#myForm").attr("action", "submit.epl");
$( "form:myForm" ).submit();
$("#myForm").attr("action", "form.epl");
},
"No": function() {
$( this ).dialog( "close" );
$('input[name="setAccess"]').val('');
$("#myForm").attr("action", "submit.epl");
$( "form:myForm" ).submit();
$("#myForm").attr("action", "form.epl");
}
}
});
}
});
});
Here is Fiddle demo
I would suggest to change your workflow a bit... I would suggest to initialize modal dialog immediately on document ready event with autoOpen: false and later just use $("#dialog").dialog("open"); method to open it.
Related
I have a button that opens a jQuery Dialog
$( "#dialog" ).dialog({
autoOpen: false,
title: 'Contract',
height: 450,
width:1100,
modal:true,
resizable: true
});
$( ".btnSend" ).click(function() {
var id=$(this).attr('id');
$( "#dialog" ).load( "index.php?id="+id );
$( "#dialog" ).dialog( "open" );
$('.ui-widget-overlay').css('background', 'silver');
});
The index.php page loads very slowly so I would like to show a message before the page is completely loaded.
I try the classic loader script like
$(window).load(function() {
$(".loader").fadeOut("slow");
});
with proper CSS and HTML but this hide completely the dialog it seems that does not work well.
Do you have any idea/solution ?
Thank you!
Show a Loading spinner or Message until it loads completely.
HTML
<span id="loading" style="display:none;">Loading..</span>
JavaScript
$("#loading").show(); //Before loading the Data
$( "#dialog" ).load( "index.php?id="+id, function(){
$("#loading").hide(); //On Completion, hide it.
}
);
I want to show the confirmation window for the user who want to delete the data from database.
And I use this confirm() function to achieve this:
var str = document.getElementById("myHiddenDiv").innerHTML;
if (confirm(str))
{
$.ajax(...
<div id="myHiddenDiv" style="display: none;"><strong>Dont delete this</strong>
<br />
...
</div>
However it prints the html attribute in the windows confirmation such as the tag of <strong> and <br/>. I don't want that. How to do that?
Get the text from selected div like
var str = document.getElementById("myHiddenDiv").innerText;
Or you can also getting text with
var str = document.getElementById("myHiddenDiv").textContent;
I recommend using a modal window to this, http://jqueryui.com/dialog/#modal-confirmation.
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
//$.ajax(...
},
Cancel: function() {
$( this ).dialog( "close" );
//$.ajax(...
}
}
});
});
</script>
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/
I am attempting to create a timepicker inside of a popup form. I am struggling with event delegation -- I am capable of getting the timepicker to work outside of the form, but not inside.
My current code, which does not have the timepicker popup:
$(document).ready(function() {
$('#timepick').timepicker({
showPeriod: true,
showLeadingZero: true
});
});
$(function() {
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add Time": function() {
$( "#time-table tbody" ).append( "<tr>" +
"<td>" + time.value + "</td>" +
"</tr>" );
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
$("#add-time").button().click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
This does not work inside of the popup box, only for #timepick outside of it. I know I somehow need to utilize the .on() jquery function.
$(document).ready(function() {
$('#timepick').on("click", function(){
timepicker({
showPeriod: true,
showLeadingZero: true
});
});
Did not work either.
A pastebin of the current tryout:
http://pastebin.com/gta7TD47
EDIT:
So this MOSTLY works:
$(document).ready(function() {
$('#dialog-form').on('click','#time',function() {
$('#time').timepicker({
showPeriod: true,
showLeadingZero: true
});
});
});
The only problem is, it currently requires you to click on the box, which then adds the event handler, and then click off and click back on -- so it requires a click before working. How do I get it to fire immediately? Somehow using .trigger()?
You're not delegating anything. You're merely binding the event directly on the timepick element.
If you want to delegate an event, you'll need an aditional selector:
$('body').on('click','.allElementsYouNeedSelector',function(){});
The code above will apply the anonymous callback function as an event handler for all click events that are triggered on any element that has the allElementsYouNeedSelector class, anywhere in the $('body') tag.
So if you want to delegate from, say your dialog-form element:
$('#dialog-form').on('click','*',function()
{//will be called when any child of the #dialog-form is clicked
});
Mind you, if you use the on method like this, it's translated to the delegate method internally.
Update:
In light of your update, I must say: it makes no sense at all to delegate an event for an element that has a unique ID. Perhaps you could try this:
$('#time').on('click',{showPeriod: true,showLeadingZero: true},timepicker);
This binds a click listener to the #time element, and applies the timepicker method as an event handler, passing the object literal {showPeriod: true,showLeadingZero: true} as an argument, just like you're doing. Of course, you can do the same thing using delegation:
$('#dialog-form').on('click','*',function()
{//regardles of which child was clicked, apply the timepicker method to #time
$.timepicker.apply($('#time'),[{showPeriod: true,showLeadingZero: true}]);
});
As ever, to avoid having to scan the DOM on each call, you can add a closure
$('#dialog-form').on('click','*',(function(time)
{
return function()
{
time = time || $('#time');//in case $('#time') didn't exist when function was created
$.timepicker.apply(time,[{showPeriod: true,showLeadingZero: true}]);
};
}($('#time')));
Try this,
$(document).ready(function()
{
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add Time": function() {
$( "#time-table tbody" ).append( "<tr>" +
"<td>" + time.value + "</td>" +
"</tr>" );
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$("#add-time").click(function() { //don't use buttun() here
$( "#dialog-form" ).dialog( "open" );
});
$('#time').timepicker({ //use the correct id attr of text field
});
});//end of document
/////Html part/////
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="time">Time</label>
<input type="text" id="time" name="time" style="width: 70px;" id="timepick" value="01:30 PM" />
</fieldset>
</form>
</div>
<button id="add-time">Add time</button>
hope this helps
i have below function in my jsp which create and opens the dialog. There is textbox in this dalog. What i want is when i enter on this dialogue
CreateCustomer button should be licked
function createCustomerDialog(){
$("#createCustomerDialog").dialog( {
title : ""Create Customer,
buttons : {
'CreateCustomer' : function() {
},
'Cancel': function() {
$( this ).dialog( "close" );
}
}
});
$("#createCustomerDialog").dialog("open");
}
i tried this but dnot working
$('.ui-dialog-buttonpane > button:last').focus();
On dialog input's onKeyPress event check for a keycode == 13 (ENTER key), when this code is reached just click your button.
$("#yourInputId").keypress(function (e) {
if (e.keyCode == 13)
$("#yourButtonId").click();
});
May be you should use .click() method instead .focus() in this code:
$('.ui-dialog-buttonpane > button:last').focus();
And I think you should try button:first selector, because CreateCustomer button will first.
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
alert('Delete all items clicked');
},
Cancel: function() {
$( this ).dialog( "close" );
alert('Cancel clicked');
}
}
});
And in browser console try this:
$('.ui-dialog-buttonpane button:first').click();