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
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 () {}).
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 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);
});
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/
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
}