Develop Reference

jQuery Popup to Delete

I am trying to make a jQuery popup to delete the record from table.
Here's what I am doing to call my function:
echo '<div id="dialog-confirm">'.'<td>' . '<input type="image" src="delete.png" id = "deleteconfirm" style = "height:20px;margin-left :8px;" onclick = "deleterecord('.$row['id'].')">' . '</td>'.'</div>';
And here's my function:
function deleterecord ( id ) {
function fnOpenNormalDialog() {
$("#dialog-confirm").html("Confirm Dialog Box");
// Define the Dialog and its properties.
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Modal",
height: 250,
width: 400,
buttons: {
"Yes": function () {
$(this).dialog('close');
callback(true);
},
"No": function () {
$(this).dialog('close');
callback(false);
}
}
});
}
$('#deleteconfirm').click(fnOpenNormalDialog);
function callback(value) {
if (value) {
window.location.href = 'delete_ven.php?id=' + id;
} else {
alert("Rejected");
}
}
}
Any help? It's not working.

Your callback method doesn't get any information about row ID. For example you could change following lines:
callback(true);
to
callback(id);
and
window.location.href = 'delete_ven.php?id=' + id;
to
window.location.href = 'delete_ven.php?id=' + value;
Edit: Additionally remove all lines containing "fnOpenNormalDialog" and fix the code accordingly. The click event is assigned in html already, and the function inside function isn't meant work this way.

knockout paging retaining old page on jquery dialog cancel and open

I have an issue with knockout paging .I am using knockout paging on jquery dialog.The issue is when i navigate from page1 to page2 ,page3 or page4 and close the dialog and open the dialog again i see the page which i closed last but not from first page .Attached the jsfiddle below.Please let me know if you have any questions.
http://jsfiddle.net/bharatgillala/yuvNt/57/
var data = [
{Player:"PAGE1", runs:"34889"},
{Player:"PAGE1", runs:"83366"},
{Player:"PAGE1", runs:"52534"},
{Player:"PAGE2", runs:"02232"},
{Player:"PAGE2", runs:"55899"},
{Player:"PAGE2", runs:"90483"},
{Player:"PAGE3", runs:"02565"},
{Player:"PAGE3", runs:"98500"},
{Player:"PAGE3", runs:"20285"},
{Player:"PAGE4", runs:"57757"},
];
var StaticDataExample1 = function(data){
// stuff I care about
this.items = ko.observableArray(data);
// pager related stuff
------------------------------
this.currentPage = ko.observable(1);
this.perPage = 3;
this.pagedItems = ko.computed(function(){
var pg = this.currentPage(),
start = this.perPage * (pg-1),
end = start + this.perPage;
return this.items().slice(start,end);
}, this);
this.nextPage = function(){
if(this.nextPageEnabled())
this.currentPage(this.currentPage()+1);
};
this.nextPageEnabled = ko.computed(function(){
return this.items().length > this.perPage * this.currentPage();
},this);
this.previousPage = function(){
if(this.previousPageEnabled())
this.currentPage(this.currentPage()-1);
};
this.previousPageEnabled = ko.computed(function(){
return this.currentPage() > 1;
},this);
};
ko.applyBindings(new StaticDataExample1(data),document.getElementById("test"));
$(document).on("click", "[id*=atest]", function ()
{
$("#test" ).dialog(
{
height: 420,
width: 430,
modal: true,
buttons: [
{
text: "Save",
},
{
text: "Cancel",
tabIndex: -1,
click: function () {
$(this).dialog("close");
}
}
],
close: function () { }
});
});

You're almost there actually.
Change your ko.applyBindings to this:
var model = new StaticDataExample1(data);
ko.applyBindings(model, document.getElementById("test"));
Then add an open: function to your $(...).dialog({ ... }) options right after the close: option:
close: function () {
},
open: function () {
model.currentPage(1);
}
Fiddle here: http://jsfiddle.net/yuvNt/63/
And it occurred to me just now; you could even just add the model.currentPage(1); call into your existing close: function if you don't want to add an open: function.
Hope that's useful.

jQueryUI dialog wth dynamic buttons using callbacks

I am using this question as the basis for a multipurpose jQueryUI dialog function that I can reuse in my site Question 17013222 I want to be able to reuse the code to display different buttons with callbacks defined in the function call
However, I don’t get the result I need when extending this answer to use a callback function. The callback function is running as I build the dynamic buttons instead of when the Dialog Save button is pressed.
I have a jsFiddle here that shows my incompetence jsFiddle
What do I need to do to get the callback to run as the Save button is clicked?
Below is the simplified code snippet
function showDialog(inToDisplay, inTitle, buttonSetup, inSaveCallback) {
'use strict';
var dialog_buttons = {};
$('#jqDialog').load(inToDisplay + '.asp', function () {
$(this).attr('title', inTitle);
/*Build our button choices*/
if (buttonSetup === 'closeonly') {
dialog_buttons['Close'] = function () {
$(this).dialog("close");
$(this).dialog("destroy");
}
} else if (buttonSetup === 'savecancel') {
dialog_buttons['Save'] = function () {
if (inSaveCallback && typeof (inSaveCallback) === "function") {
inSaveCallback;
};
$(this).dialog("close");
$(this).dialog("destroy");
}
dialog_buttons['Close'] = function () {
$(this).dialog("close");
$(this).dialog("destroy");
}
}
$(this).dialog({
autoOpen: false,
modal: true,
open: function (event, ui) {
},
buttons: dialog_buttons
});
$('#jqDialog').dialog('open');
});
}
function saveAnswer() {
alert('ToDo: Save data here');
}
$(document).ready(function () {
showDialog('ajax_manageAnswer', 'Enter your answer details', 'savecancel', saveAnswer());
});

here... http://jsfiddle.net/reigel/zpyNM/
change this
$(document).ready(function () {
showDialog('ajax_manageAnswer', 'Enter your answer details', 'savecancel', saveAnswer); // remove () on saveAnswer...
});
and this
dialog_buttons['Save'] = function () {
if (inSaveCallback && typeof (inSaveCallback) === "function") {
inSaveCallback(); // add -->> ()
};
$(this).dialog("close");
$(this).dialog("destroy");
}

How to recall a function with Jquery in this example?

How to recall a function and have the
dialog box keep coming back when click 'cancel' button with Jquery in this example?
I am sure it is easy but still learning some of the basics here.
Thanks
function definitelyClose() {
window.location = 'http://www.google.com'
};
var autoCloseTimer;
var timeoutObject;
var timePeriod = 5000;
var warnPeriod = 10000;
$(document).ready(function() {
$('#proba').dialog({
autoOpen: false
});
setTimeout(function() {
$('#proba').attr('title', 'Warning').text('Sesion will expire').dialog('open');
$('#proba').dialog({
buttons: {
'Cancel': function() {
$(this).dialog('close');
clearTimeout(autoCloseTimer);
}
}
});
autoCloseTimer = setTimeout('definitelyClose()', warnPeriod);
}, timePeriod);
});​

You need to create function with a name to
show the initial warning and
to call when the cancel button is clicked.
So you would get something like this:
$(document).ready(function() {
var autoCloseTimer;
var timePeriod = 5000;
var warnPeriod = 10000;
function definitelyClose() {
window.location = 'http://www.google.com'
};
// You need a function with a name
function showWarning() {
$('#proba').attr('title', 'Warning')
.text('Sesion will expire')
.dialog('open');
$('#proba').dialog({
buttons: {
'Cancel': function() {
$(this).dialog('close');
clearTimeout(autoCloseTimer);
// Now you can recall the function
setTimeout(showWarning, timePeriod);
}
}
});
autoCloseTimer = setTimeout(definitelyClose, warnPeriod);
}
$('#proba').dialog({ autoOpen: false });
setTimeout(showWarning, timePeriod);
});​

JQuery UI - "dialog is not a function" Hunh?

I get the error message shown below when I click the button: ($'#billing_button_addTime')
billingController.dialogAddTime.dialog
is not a function
billingController is created in $(document).ready.
function BillingController() {
}
BillingController.prototype.dialogAddTime = $(document.createElement('div'));
BillingController.prototype.loadBillingContent = function () {
//Load the main content
$("#content_area").load('/Content/HTML/billing.html', null, mainController.attachScrollBarsToCPOTable);
//Pre-Load the Add Time Dialog
$(billingController.dialogAddTime).load('/Content/HTML/billing_dialog_addTime.html', null, billingController.bindButtonAddTimeToHandler );
}
BillingController.prototype.bindButtonAddTimeToHandler = function () {
$('#billing_button_addTime').bind('click', billingController.buttonHanderAddTime);
}
BillingController.prototype.buttonHanderAddTime = function () {
billingController.dialogAddTime.dialog({ modal: true });
}