Develop Reference

Stop execution of code in JQuery Dialog like Jquery Confirm

Html Select Tag
<select name="testSelect" id="testSelect" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Jquery code :-
(function () {
var previous;
$("#testSelect").on('focus', function () {
previous = $(this).val();
}).change(function() {
var r = confirm("If you change display type, default value fields will get reset !");
if (r === true) {
previous = $(this).val();
}
else {
console.log(previous);
$(this).val(previous);
}
});
})();
I am using this code to restore the previous selected value if I press No..and its working fine when I use Jquery confirm. Here Jquery confirm stops the execution when I change any value and unless I press Yes or no.
But Now I want to remove Confirm box and Want to use Jquery Dialog box for confirmation. Like this :-
$( function() {
var previous;
$("#testSelect").on('focus', function () {
previous = $(this).val();
}).change(function(event) {
var that = this;
$( "#dialog-confirm" ).dialog({
resizable: false, height: "auto", width: 400, async: false, modal: true,
buttons: {
Yes: function() {
console.log($(that).val());
previous = $(that).val();
$( this ).dialog( "close" );
},
No: function() {
$(that).val(previous);
$( this ).dialog( "close" );
}
}
});
})
} );
But here the problem is .. code gets executed even there is Dialog confirm popup. It doesnot stop like the Jquery confirm box does. I tried many stuff but not working, can anyone please help?
Remember: Everything was working fine in JQuery confirm....but not working in Jquery Dialog...

You need your code in the jQuery document ready state, so that It will get invoke only when the page is completed load and will bind your events to #testSelect.
$( document ).ready(function() {
var previous;
$("#testSelect").on('focus', function () {
previous = $(this).val();
}).change(function(event) {
var that = this;
$( "#dialog-confirm" ).dialog({
resizable: false, height: "auto", width: 400, async: false, modal: true,
buttons: {
Yes: function() {
console.log($(that).val());
previous = $(that).val();
$( this ).dialog( "close" );
},
No: function() {
$(that).val(previous);
$( this ).dialog( "close" );
}
}
});
})
});

HTML Dynamic Popup box

In my jsp I have a for each loop (spring mvc)
<c:forEach items="${ce}" var="contractEntitlement">
<c:if test="${contractHeader.id == contractEntitlement.chId}" >
<tr>
TD's to show each fields ....
<td>
<div class="center">
Confirm Dialog
</div>
<div id="dialog-confirm" class="hide">
<div class="alert alert-info bigger-110">
These items will be permanently deleted and cannot be recovered.
</div>
<div class="space-6"></div>
<p class="bigger-110 bolder center grey">
Are you sure?
</p>
</div><!-- #dialog-confirm -->
</td>
</tr>
</c:if>
</c:forEach>
Each record will have a button for deletion. My jquery is:
$( "#id-btn-dialog2" ).on('click', function(e) {
e.preventDefault();
var href = ($(this).attr('href'));
alert(href);
$( "#dialog-confirm" ).removeClass('hide').dialog({
resizable: false,
width: '320',
modal: true,
buttons: [
{
"class" : "btn btn-danger btn-minier",
click: function() {
$( this ).dialog( "close" );
window.location = href;
}
}
,
{
"class" : "btn btn-minier",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
This works only for the 1st record but when I click the rest it just redirects to page w/o passing jquery. I tried changing based on this stackoverflow question:
Passing data to a jQuery UI Dialog
$( 'a[href*="/view/viewcontract/update/ce/${contractEntitlement.id}"]' ).on('click', function(e) {
But with this, even the 1st record does not pass in the jquery anymore. Any idea how to make my jquery more dynamic?

As mentioned, need unique id's in order for this to work. On jquery when DOM is ready:
var i=0;
$('.testing').each(function(){ // testing is the class name
i++;
var newID='id-btn-dialog2'+i; // increment the id +1 (unique)
$(this).attr('id',newID); // Assign the new id
$(this).val(i);
});
Now that we have unique id's. Need to get the id of the button clicked and popup message box. In jquery :
$('a.testing').on('click', function(e) {
var id = $(this).attr('id');
var href = $(this).attr('href');
alert(href);
e.preventDefault();
$( "#dialog-confirm" ).removeClass('hide').dialog({
resizable: false,
width: '320',
modal: true,
buttons: [
{
"class" : "btn btn-danger btn-minier",
click: function() {
$( this ).dialog( "close" );
window.location = href;
}
}
,
{
"class" : "btn btn-minier",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
This one worked and able to fix my issue. jsp above is the same except:
Confirm Dialog
adding in class "testing".

Jquery Ui modal open doubleclick on row

I am trying to open Jquery ui modal with doubleclicking on tables row.
For now I open modal with a button:
$('button.adminModal').on("click", function (event) { loadDialog(this, event, '#adminPanel'); });
Function loadDialog opens modal with given href.
How can I open modal by doubleclicking on tables row?
I have tried using event ondblclick in tag, but it did not worked.
LoadDialog function:
function loadDialog(tag, event, target) {
event.preventDefault();
var $loading = $('');
var $url = $(tag).attr('href');
var $title = $(tag).attr('title');
var $dialog = $('<div></div>');
$dialog.empty();
$dialog
.append($loading)
.load($url)
.dialog({
autoOpen: false
, title: $title
, width: 500
, modal: true
, minHeight: 200
, show: 'fade'
});
};

This code seems to work fine (see jsfiddle http://jsfiddle.net/darevskaya/NEbJV/):
$( "tr" ).on("dblclick", function(event) { loadDialog(this, event, '#adminPanel'); });
However if rows are added dynamically after the event was added it won't work.
in this case, event delegation could help:
$( "table" ).on("dblclick", "tr", function(event) { loadDialog(this, event, '#adminPanel'); });

check this
<tbody>
<tr class='clickableRow' >
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</tbody>
jQuery(document).ready(function($) {
$( ".clickableRow" ).dblclick(function(event) {
loadDialog(this, event, '#adminPanel');
});
});
OR
$('#thetable').find('tr').dblclick( function(){
});

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

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

Set value for dynamically created form elements in dynamic JQuery UI dialog using JQuery

I'm trying to read data from a service (returns JSON object) and create an editable form in a dynamic JQuery UI dialog so the end user can use it to make changes and submit. The trouble is, when I get data from the server, I can't seem to set the data in the form. If I don't use a dialog, then everything works.
I created an associated JSFiddle in case it helps.
var dialog_box = $('<div></div>');
var animal = { kind : "Cat", has_whiskers : true };
var s = $('<select />', {
"id":"s1"
}).append(
$('<option />',
{
value:"Dog",
text:"Dog"
}
),
$('<option />',
{
value:"Cat",
text:"Cat"
}
),
$('<option />',
{
value:"Bird",
text:"Bird"
}
)
);
s.appendTo(dialog_box);
// doesn't work
$('#s1 option:[value="'+ animal.kind +'"]').prop('selected', true);
var new_div = $('<div/>').html('<input type="checkbox" id="has_whiskers_checkbox" />');
new_div.appendTo(dialog_box);
(animal.has_whiskers) ? $("#has_whiskers_checkbox").prop("checked", true) : $("#has_whiskers_checkbox").prop("checked", false);
dialog_box.dialog({
autoOpen: false,
modal: true,
buttons: {
"OK": function() {
console.log("OK Pressed");
$( this ).dialog( "close" );
$( this ).remove();
}
}
}).dialog('open');

$('#s1 option:[value="'+ animal.kind +'"]', dialog_box).prop('selected', true);
Example