Javascript Event Delegtion -- Adding a timepicker to a popup form - javascript

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

Related

window confirm print the html tag in ajax post

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>

jQuery dialog ui on button click with function not working

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.

Better replacement for ShowModalDialogue

Currently in my website, I am displaying a ShowModalDialogue to display a warning. Recently I have been asked to modify the behavior of this as belows :
Earlier behavior :
I used to just show a warning message. The user can click OK or Close button of the dialogue box to proceed.
New behavior :
I have been asked to insert a text box in the same ShowModalDialogue. Now the user has to insert his initials before clicking OK button. Also now he can not close the dialogue by clicking Close button also. If he tries to close the dialogue by clicking either on Close button or OK button while text box is empty, same pop up has to open with warning. But the trouble is after closing the warning message dialogue is shifted randomly on screen even though its properties have been modified such that it will not move.
Now I have been asked to replace this ShowModalDialogue by something better.
I have two suggestions : 1. CSS div Popup 2. Ajax-control ModalPopup.
Which one of them is better?
Is there anything else which can be used instead that I can use?
My major concerns are good look and easy to handle.
Thanks in advance.
Wanna try qTip2? This one got lots of options for you.
http://craigsworks.com/projects/qtip2/demos/#dialogues
you can simply do it with jquery UI
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create an account": function() {
bValid = $("#d-form").valid();
if (bValid ){
$( "#users tbody" ).append( "<tr>" +
"<td>" + $( "#name" ).val() + "</td>" +
"<td>" + $( "#email" ).val() + "</td>" +
"<td>" + $( "#password" ).val() + "</td>" +
"</tr>" );
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
Fiddle

An issue with jQuery dialog

Say I have the following link:
<a onclick="confirmDelete()" href="delete.do&xyz">Delete user</a>
and the following is the confirmDelete function:
function confirmDelete()
{
if(!confirm("delete user?"))
{
return false;
} else
{
return true;
}
}
Basically when click on link, it checks whether the user select ok or cancel and then perform based on it.
Problem: I have got hundreds of similar links on my platform and we decide to turn all the javascript alerts to jquery dialog.
I used the following to somehow override the alert:
$(function(){
window.confirm = function(message) {
$('#overrideAlert').text(message).dialog({
resizable: false,
modal: true,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
};
});
It works fine and the alert comes up as a jquery dialog but the issue is because of the fact that it is not possible to return something from a handler like dialog, I am not sure how to tell my button in the filed, that the user selected ok or cancel.
Basically I m not sure how to link them all together.
Please help
The issue is because of javascript asynchronous nature . As you are using jQuery . could try following method .
$('a[onclick="confirmDelete()"]')
.attr('onclick','')
.click( function(){
var anch = this,
message = "delete user?";
$('#overrideAlert').text(message).dialog({
resizable: false,
modal: true,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
alert( "window.location=" + anch.href );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
return false ;
});
I made jsfiddle http://jsfiddle.net/wB389/
Maybe like so:
"Ok": function() {
window.location=deleteURL;
$( this ).dialog( "close" );
},
It's probably a little more complicated that that since you use relative url's but you can get the current url using window.location.protocol + window.location.port + window.location. window.location.host + window.location.pathname

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