Develop Reference

Trouble with jQuery events and function triggers

Let me explain what the trouble is. I have two functions: compute(); and discount_compute();. When the page firsts load both functions get executed once (OK, since discount_compute() is part of compute so it always runs when compute() is executing). When I open the #autobid-panel (it is set on display:none initially) the function discount_compute runs 1 time because of the $('#autobid').on('click', function(), but then it also runs 2 more times because of the '[data-slider]').on('change.fndtn.slider'). Btw everytime this autobid-panel is closed or opened the slider is initialized again. I only want the discount_compute() to run once when #autobid-panel is opened. Any ideas?
function compute() {
//first function
};
function discount_compute() {
//second function
};
$(document).ready(function($) {
$('.price').change(compute).change();
$('#autobid').on('click', function() {
if ($(this).is(':checked')) {
$('#autobid-panel').removeClass("hide");
$(document).foundation('slider', 'reflow');
discount_compute();
} else {
$('#autobid-panel').addClass("hide");
$(document).foundation('slider', 'reflow');
}
});
$('#discount').on('change', function(){
var value = $(this).val();
$('.range-slider').foundation('slider', 'set_value', value);
discount_compute();
});
$('[data-slider]').on('change.fndtn.slider', function(){
discount_compute();
});
});
Thank your for your help!

You don't really explain the reasoning of the data-slider or why you even call discount_compute(); there if you don't want to run it.
One dirty hack you can do is something to this effect:
function compute() {
//first function
};
function discount_compute() {
//second function
};
var harRun=false;
$(document).ready(function($) {
$('.price').change(compute).change();
$('#autobid').on('click', function() {
if ($(this).is(':checked')) {
$('#autobid-panel').removeClass("hide");
$(document).foundation('slider', 'reflow');
if(hasRun != true) {discount_compute(); hasRun=true;}
} else {
$('#autobid-panel').addClass("hide");
$(document).foundation('slider', 'reflow');
}
});
$('#discount').on('change', function(){
var value = $(this).val();
$('.range-slider').foundation('slider', 'set_value', value);
discount_compute();
});
$('[data-slider]').on('change.fndtn.slider', function(){
if(hasRun != true) {discount_compute();}
});
});
In this way, once hasRun is set to true you no longer call discount_compute().

unfortunately $(document).foundation('slider', 'reflow'); fires a change event, so there isn't any nice way.
one way is to off the event before reflow and on straight after:-
function compute() {
//first function
};
function discount_compute() {
//second function
};
$(document).ready(function($) {
$('.price').change(compute).change();
$('#autobid').on('click', function() {
if ($(this).is(':checked')) {
$('#autobid-panel').removeClass("hide");
$('[data-slider]').off('change.fndtn.slider', discount_compute);
$(document).foundation('slider', 'reflow');
$('[data-slider]').on('change.fndtn.slider', discount_compute);
discount_compute();
} else {
$('#autobid-panel').addClass("hide");
$(document).foundation('slider', 'reflow');
}
});
$('#discount').on('change', function(){
var value = $(this).val();
$('.range-slider').foundation('slider', 'set_value', value);
discount_compute();
});
});

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

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.

What does this BlackBerry Web App Javascript code do?

I know my way around several programming languages but am struggling understanding Javascript and how it's used in mobile apps. I'm developing for BlackBerry and a using the BlackBerry 10 jQuery Mobile Theme. I'm looking at the App.js from the samples and am confused as to what the App object is.
App = {};
App.init = function () {
console.log("App Init");
App.utils.metaHack();
$("#activity").live("pageinit", function(){
App.page.activity.init();
});
$("#bb_activity").live("pageinit", function(){
App.page.bb_activity.init();
});
$("#progressPage").live("pageinit", function(){
App.page.progress.init();
});
$("#sliderPage, #sliderPageDark").live("pageinit", function(){
App.page.slider.init();
});
$("#togglePage, #togglePageDark").live("pageinit", function(){
App.page.toggle.init();
});
$("#actionBarSample").live("pageinit", function() {
App.page.actionBarSample.init();
});
$('#applicationMenu').live("pageinit", function() {
App.page.applicationMenu.init();
});
}
App.utils = {
metaHack: function () {
var meta = document.createElement("meta");
meta.setAttribute('name','viewport');
meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
document.getElementsByTagName('head')[0].appendChild(meta);
}
}
App.page = {
activity: {},
bb_activity: {},
progress: {},
slider: {},
toggle: {},
actionBarSample: {},
applicationMenu: {}
}
App.page.activity.init = function() {
$('#show').on('click', function () {
$.mobile.loading('show');
});
$('#text').on('click', function() {
$.mobile.loading('show', {
text: 'Loading',
textVisible: true,
textonly: true,
theme: 'a'
});
});
$('#swatch-a').on('click', function() {
$.mobile.loading( 'show', {
text: 'Loading',
textVisible: true,
theme: 'a'
});
});
$('#swatch-a-notext').on('click', function() {
$.mobile.loading( 'show', {
theme: 'a'
});
});
$('#swatch-c').on('click', function() {
$.mobile.loading( 'show', {
text: 'Loading',
textVisible: true,
theme: 'c'
});
});
$('#swatch-c-notext').on('click', function() {
$.mobile.loading( 'show', {
theme: 'c'
});
});
$('#hide').on('click', function () {
$.mobile.loading('hide');
});
}
App.page.bb_activity.init = function() {
console.log("bb_activity");
$('#throttle').on('change', function () {
console.log("throttle");
var speed = $('#throttle').val();
$('#speedTest').activityindicator('speed', speed+'s');
});
}
App.page.progress.init = function() {
var p = 0;
var error = pause = false;
function watchProgress() {
if( p > 100 || error || pause) {
return;
}
$('#rogress').progressbar("setValue", p);
p+= 4;
setTimeout(watchProgress, 100);
}
$('#start').on('vclick', function () {
error = false;
watchProgress();
});
$('#error').on('vclick', function () {
$('#rogress').progressbar("setError", error = !error);
});
$('#pause').on('vclick', function () {
$('#rogress').progressbar("pause", pause = !pause);
});
$('#reset').on('vclick', function () {
p = 0;
error = pause = false;
$('#rogress').progressbar("setValue", p);
});
}
App.page.slider.init = function() {
$('#slider-disabled').slider('disable');
$('#slider-disabled-highlight').slider('disable');
}
App.page.toggle.init = function() {
console.log("toggle init");
$('#flip-disabled').slider('disable');
}
App.page.actionBarSample.init = function() {
var $tabo = $("#tover"),
overflowState = $tabo.hasClass("noContent");
$("#left").on("panelbeforeopen", function() {
//Save the state of the overflow button
overflowState = $tabo.hasClass("noContent");
$tabo.addClass("noContent");
})
.on("panelbeforeclose", function() {
//Put the overflow button into the correct state
if(!overflowState) {
$tabo.removeClass("noContent");
}
});
//Handle overflow menu clicks
$(".bb10-panel").bind("vclick", function() {
//Close the panel
$(this).panel("close");
});
$("#left li").bind("vclick", function() {
//Clear the active state from any other buttons that may have been set to active
$(this).siblings().removeClass("ui-btn-active");
//Add the active state to the selected button
$(this).addClass("ui-btn-active");
//Clear the contents of the tab overflow button
//Add class to put the tab overflow icon in the correct position
//Clear the active state from all tab buttons in action bar
$('[data-role="tab"], [data-role="tab-overflow"]').removeClass("active");
});
$(".inBar").bind("vclick", function() {
//Set the active state to the tab in the actionbar
$('#' + this.id.slice(0, 2)).addClass("active");
$tabo.addClass("noContent").empty();
overflowState = true;
});
$(".notInBar").bind("vclick", function() {
//Set the active state to the tab overflow button
$tabo.empty()
.addClass("active")
.html('<img src="img/generic_81_81_placeholder.png" alt=""><p>' + $(this).text() + '</p>')
.removeClass("noContent");
overflowState = false;
});
$("[data-role='tab']").bind("vclick", function() {
//Change page on tab click
if($(this).data("href")) {
$.mobile.changePage( $(this).data("href"), { transition: "slideup"} );
}
});
}
App.page.applicationMenu.init = function() {
if(typeof blackberry != 'undefined'){
blackberry.event.addEventListener('swipedown', function(){
$('#top').panel("open");
});
$('#menuBtn').css('display','none');
}
else{
$('#simulInst').css('display','none');
}
}
App.init();
Is App an object specific to Blackberry? I did some dabbling and made a small app but didn't use App or init anything.

App in this example is defined at the top:
App = {};
So it's just a new plain old JavaScript object (dictionary), which they then define functions and data to it e.g. App.utils = ....
You can try it out on a browser, press F12 and then go to the console (ESC) and type e.g. blah = {} and you will see a new object created with the name blah. Everything is an object in JavaScript apparently.
Read more
http://www.w3schools.com/js/js_objects.asp

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