jQuery Popup to Delete - javascript

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.

Related

jquery dialog cause other function not working

I have a OK button, when click it, it calls hideTyre(). the hideTyre() function calls SetBankFees function.
I also have $("#dialog-immpay").dialog() and $("#dialog-SelectFees").dialog().
The problem is that when I place hideTyre() before the two dialog(), OK button click cannot found the hideTyre(),
if I place the hideTyre() after the two dialog(), then hideTyre() is executed, but I got another error, it says the SetBankFees() is undefined.
Although the two dialog() work fine here, I guess the two dialog() cause the problem. But I could not figure out whats wrong there.
I appreciate your help very much.
<script>
...more js functions
function SetBankFees()
{
`enter code here` }
`enter code here` ...more js functions
function hideTyre()
{
SetBankFees();
$("#tyreDiv").hide();
$(".main").show();
}
var immPayF8OrF9 = "";
$("#dialog-immpay").dialog({
autoOpen: false,
height: 400,
width: 750,
modal: true,
dialogClass: "no-close",
buttons: {
"Save without Print Invoice": function () {
allFields.removeClass("ui-state-error");
FImmPay = immPay_Payment;
FComp = immPay_Comp;
FImmPayDate = CCDateStrToJDate($("#datePay").val());
FCompDate = CCDateStrToJDate($("#dateCom").val());
if ((FImmPay > 0.005) || (FComp > 0.005))
{
FSaveImmPay = true;
FImmPayReceipt = immPay_Receipt;
}
else
FSaveImmPay = false;
FPrtInv = immPay_PrtInv;
$(this).dialog("close");
},
"print all unissued invoices": function () {
allFields.removeClass("ui-state-error");
FImmPay = immPay_Payment;
FComp = immPay_Comp;
FImmPayDate = CCDateStrToJDate($("#datePay").val());
FCompDate = CCDateStrToJDate($("#dateCom").val());
if ((FImmPay > 0.005) || (FComp > 0.005))
{
FSaveImmPay = true;
FImmPayReceipt = immPay_Receipt;
}
else
FSaveImmPay = false;
immPayF8OrF9 = "F8";
$(this).dialog("close");
},
"print last invoice only": function () {
allFields.removeClass("ui-state-error");
FImmPay = immPay_Payment;
FComp = immPay_Comp;
FImmPayDate = CCDateStrToJDate($("#datePay").val());
FCompDate = CCDateStrToJDate($("#dateCom").val());
if ((FImmPay > 0.005) || (FComp > 0.005))
{
FSaveImmPay = true;
FImmPayReceipt = immPay_Receipt;
}
else
FSaveImmPay = false;
immPayF8OrF9 = "F9";
$(this).dialog("close");
},
"Esc": function () {
$(this).dialog("close");
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
if (immPayF8OrF9 == "")
DoAfterDoImmPay();
else
ShowOption("#dialog-showPrintingOption", OriInvOption);
}
});
$("#dialog-SelectFees").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Select the fee" : function () {
allFields.removeClass("ui-state-error");
$(this).dialog("close");
AddRow(y);
},
"Cancel" : function(){
allFields.removeClass("ui-state-error");
$(this).dialog("close");
}
}
});
});
// if leave hideTyre() here, then error SetBankFees(); is undefined
// function hideTyre()
// {
// SetBankFees();
// $("#tyreDiv").hide();
// $(".main").show();
// }
...more js functions
</script>
<button onclick="hideTyre()">OK</button>
The problem is function hideTyre() and function SetBankFees() are in different scopes.
SetBankFees() is inside $(function () {}), but hideTyre() is not.
What my findings are the function outside $(function () {}) cannot access the function inside $(function () {}), but function inside $(function () {}) can access the function outside $(function () {}).

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);
});​

.click function only works with breakpoint

enter code hereI have a clickover box, and inside this box I have a button. WHen the popover isShown, I setthe .click function through javascript. The click function only gets called when I put a breakpoint on the
$("#button").click(function (event)
http://www.leecarmichael.com/bootstrapx-clickover/examples.html
Any ideas would be greatly appreciated
$('.socialMediaEnabled .btn-palette-checkbox-unchecked').clickover(
{
// auto_close: 3 * 1000,
width: 170, height: 80,
placement: 'right',
onShown: function () { button.init(); }
})
var button= function (credentials, url)
{
this.init = function ()
{
//facebook
$("#button").attr('onclick', '').unbind('click');
$("#button").click(function (event)
{
}
}
}
When I ran that code, I was getting an error stating that init was not a valid function.
Try using a new on the button object:
var button = new function() {
this.init= function() {
//facebook
$("#button").attr('onclick', '').unbind('click');
$("#button").click(function(event) {
alert('a');
});
}
}​
Fiddle: http://jsfiddle.net/johnkoer/XWbfV/19/

jquery UI dialog buttons - return true?

buttons : {
Ok: function() {
$(this).dialog('close');
return (typeof callback == 'string') ?
window.location.href = callback :
callback();
},
Cancel: function() {
$(this).dialog('close');
return false;
}
},
For jquery UI, I need to return values the same as a javascript confirm message a 1 and a 0
I assume I do a callback, but unsure how to reference the callback...
EDIT
jsp developer stated that he doesn't neccessarily need a callback, but needs to be able to do something similar to:
if (answer == true) {
//do something
}
else {
//do something different
}
how would I do that?
You cannot do a return in a jquery dialog.
What you can do:
buttons: {
Ok: function() {
$(this).dialog('close');
callback_fn(1);
},
Cancel: function() {
$(this).dialog('close');
callback_fn(0);
}
},
//later on:
function callback_fn(bool){
//do something with the 1 or 0
}

Categories

Resources