Develop Reference

Calling a function with AJAX

I'm not sure how to explain this completely, but I hope this will make sense.
I have a function that I've made that calculates the remaining amount to spend to qualify for free delivery when the basket value total falls within certain thresholds.
The basket value is updated with AJAX every time a product is added to the basket.
The add to basket button appears in an AJAX generated modal.
I need my function to be called on every page refresh and also every time a product is added to the basket when the AJAX generated add to basket button is clicked. I'm trying to do all of this with the below, but it doesn't seem to work correctly. One of the problems is that the event fires multiple times when the add to basket button is clicked and another is that the basket total is updated after the event and so the total isn't calculated correctly.
Can anyone explain how I would tidy all off this up?
function totalBag() {
var standardDeliveryLow = 49.99;
var standardDeliveryHigh = 64.99;
var expressDeliveryLow = 65.00;
var expressDeliveryHigh = 99.99;
var bagValue = $('#basket-value').text();
var bagTotal = Number(bagValue.replace(/[^0-9\.-]+/g,""));
if (bagTotal >= standardDeliveryLow && bagTotal <= standardDeliveryHigh) {
var standardDifference = parseFloat(Math.round((standardDeliveryHigh - bagTotal) * 100) / 100).toFixed(2);
$('<div class="delivery-message"><p>£'+ standardDifference +' from standar delivery</p></div>').insertAfter('.breadcrumbs');
} else if (bagTotal >= expressDeliveryLow && bagTotal <= expressDeliveryHigh) {
var expressDifference = parseFloat(Math.round((expressDeliveryHigh - bagTotal) * 100) / 100).toFixed(2);
$('<div class="delivery-message"><p>£'+ expressDifference + ' from express delivery</p></div>').insertAfter('.breadcrumbs');
} else {
return false;
}
}
$(document).on('ajaxSuccess', function(e) {
$('[name="AddItemToBasket"]').on('click', function() {
$('body').bind('ajaxSuccess.custom', function() {
totalBag();
//alert('this works');
$(this).unbind('ajaxSuccess');
});
});
});
totalBag();

EDIT: Have fixed the issue where text was duplicating. Also have added comments for more understanding.
Had a check at the link you specified and tried the following modified code.
As per #ADyson, have removed the click event, which is fixing the multiple event firing.
Regarding your other problem, the total is updated after the event, yes the HTML is getting updated after the ajaxSuccess is triggered. Hence have used the ajaxSuccess event itself to get the basket amount and use it in totalBag fn.
It seems to be working. Kindly confirm:
//Adding empty div so that we can just update the value later
$(document).on('ready', function(){
$('<div class="delivery-message"></div>').insertAfter('.breadcrumbs');
})
function totalBag(bagTotal) {
var standardDeliveryLow = 49.99;
var standardDeliveryHigh = 64.99;
var expressDeliveryLow = 65.00;
var expressDeliveryHigh = 99.99;
//var bagValue = $('#basket-value').text();
//var bagTotal = Number(bagValue.replace(/[^0-9\.-]+/g,""));
//Using a variable to store the calculated amount with text
var innerHTML = "";
if (bagTotal >= standardDeliveryLow && bagTotal <= standardDeliveryHigh) {
var standardDifference = parseFloat(Math.round((standardDeliveryHigh - bagTotal) * 100) / 100).toFixed(2);
innerHTML= "<p>£"+ standardDifference +" from standar delivery</p>";
} else if (bagTotal >= expressDeliveryLow && bagTotal <= expressDeliveryHigh) {
var expressDifference = parseFloat(Math.round((expressDeliveryHigh - bagTotal) * 100) / 100).toFixed(2);
innerHTML= "<p>£"+ expressDifference +" from express delivery</p>";
} else {
return false;
}
//Updating the placeholder with new contents
$(".delivery-message").html(innerHTML);
}
//Gets triggered after every Ajax Success.
//e -> event object, xhr -> The Ajax object which has request and response details,
//settings -> The settings we used to trigger Ajax, including the request URL
$(document).on('ajaxSuccess', function(e, xhr, settings) {
//Checking if the request is of Adding Item to Basket
if(settings.url.indexOf("AddItemToBasket") !== -1){
//Getting the response and parsing it
var resp = xhr.responseText;
var respObj = JSON.parse(resp);
//Checking if response is success i.e., item added to cart successfully
if(respObj.success){
//Getting the updated Basket value and calling totalBag
var bagTotal = respObj.basket.subTotal;
totalBag(bagTotal);
}
}
});
totalBag(0);

pageinit code executing fine but elements do not update with content and click events do not work

Original loading of the page seems to work fine. Navigating from another page back to the .index page has the issue. The pageinit code executes fine, all values are calculated fine in the calculate method. However elements are not updated and click event is broken. Change events no longer fires when values change.
index.js file
$(document).on("pageinit", ".index", function () {
getElement("btnCalculate").addEventListener("click", calculate, false);
$("#txbGrossIncome").change(function () {
store.set("grossIncome", getElement("txbGrossIncome").value);
});
$("#txbTaxRate").change(function () {
store.set("taxRate", getElement("txbTaxRate").value);
});
calculate();
});
function calculate() {
var grossIncome = parseFloat(store.get("grossIncome"));
var taxRate = parseFloat(store.get("taxRate"));
if (grossIncome) {
getElement("txbGrossIncome").value = grossIncome;
}
else {
grossIncome = parseFloat(getElement("txbGrossIncome").getAttribute("placeholder"));
}
if (taxRate) {
getElement("txbTaxRate").value = taxRate;
}
else {
taxRate = parseFloat(getElement("txbTaxRate").getAttribute("placeholder"));
}
var netIncome = grossIncome - (grossIncome * (taxRate / 100))
var totalExpenses = calcExpenses();
var totalBudget = calcBudget(netIncome, totalExpenses);
getElement("txtTotalExpenses").innerHTML = "$" + totalExpenses.toFixed(2);
getElement("txtBudget").innerHTML = "$" + (totalBudget / 12).toFixed(2);
}
I'm not sure what is causing this behavior. Any ideas? I can send a private link to where this is hosted if necessary to observe the behavior.

Cordova navigator.app.backHistory button on html different approach

I'm building hybrid app with Intel XDK and I need help with back button and it's function. I have only one index.html file. All "pages" are 's and each one have different id.
I navigate through them using activate_subpage("#uib_page_10");
$(document).on("click", ".firs_div_button", function(evt){
//#uib_page_10 is div with it's content
activate_subpage("#uib_page_10");
var thisPage = 1;
goBackFunction (thisPage); //call function and pass it page number
});
$(document).on("click", ".second_div_button", function(evt){
//#uib_page_20 is div with it's content
activate_subpage("#uib_page_20");
var thisPage = 2;
goBackFunction (thisPage); //call function and pass it page number
});
I have set this EventListener hardware on back button.
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
alert("hello");
navigator.app.backHistory();
}
This is functional but it does not work as it should, in my case and for my app.
When I navigate from one page to another (5 pages / divs) and hit back button, sometimes it does not go back to the first page. It just go "back" to history too deep and close the app, without changing the actual page (view) before closing.
Now, I have an idea, but I need help with this.
I will not use history back, I will use counter and dynamic array for up to 5 elements.
function goBackFunction (getActivePage) {
var active_page = getActivePage;
var counter = 0; // init the counter (max is 5)
var history_list = [counter][active_page]; // empty array
counter = counter + 1;
:
:
:
}
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
//read the array and it's positions then activate:
activate_subpage("#PAGE_FROM_ARRAY");
counter = counter - 1;
if (counter == 0) {
//trigger the app exit when counter get's to 0.
navigator.app.exitApp();
}
}
This is only idea, not tested. I would like to store list of opened pages in Array and when back button is pressed, to activate the pages taken from the Array list, backwards.
I do not know how to do this, I'm not a expert :( There is may be batter way to do this. If someone have any suggestion, I will accept it :D

I save an array in localStorage with all pages navigated and I go back using a pop() on the array. At the moment, it's the best way I got to go back.
This is my code:
// First, create the table "pages"
function init_pages_table()
{
var pages = new localStorageDB("pages", localStorage);
if (!pages.isNew())
{
pages.drop();
pages.commit();
}
var pages = new localStorageDB("pages", localStorage);
pages.createTable("Pages", ["nome"]);
// commit the database to localStorage
// all create/drop/insert/update/delete operations should be committed
pages.commit();
}
// Add a page into the array:
function push_pagename(pagename)
{
var pages = new localStorageDB("pages", localStorage);
if (!pages.tableExists("Pages"))
{
init_pages_table();
pages = new localStorageDB("pages", localStorage);
}
pages.insert("Pages", {nome: pagename});
pages.commit();
}
// Pop a page form the array:
function pop_pagename()
{
var output = '';
var id_page = ''
var pages = new localStorageDB("pages", localStorage);
var last_page = pages.queryAll("Pages", { limit: 1,
sort: [["ID", "DESC"]]
});
$.each(last_page, function(index,value){
output = value.nome;
id_page = value.ID;
return false;
});
var rowdeleted = pages.deleteRows("Pages", {ID: id_page});
pages.commit();
return output;
}
You can also define functions for set, get, read:
function set_backpage(pageurl)
{
push_pagename(pageurl);
}
function get_backpage()
{
return pop_pagename();
}
function read_backpage()
{
var output = '';
var id_page = ''
var pages = new localStorageDB("pages", localStorage);
var last_page = pages.queryAll("Pages", { limit: 1,
sort: [["ID", "DESC"]]
});
$.each(last_page, function(index,value){
output = value.nome;
id_page = value.ID;
return false;
});
return output;
}

Refresh page adding a new random parameter

I want to load an url with a random parameter. For example (rnd is a random value):
Load www.website.com?rnd=2398
Push F5
Automatically load www.website.com?rnd=4583
Goto step 3 is you push F5, but with a new rnd value
I tried use onbeforeunload, but I don't want it asks me if I prefer to stay here or to leave the page. I use this function too:
jQuery().ready(function () {
var actualUrl = window.location.href;
var aleat = Math.round(Math.random() * 100000);
if (actualUrl.indexOf('rnd') != -1) {
$("a[href]").attr('href', function (index, href) {
if (href.indexOf("javascript") == -1 && href.indexOf("mailto") == -1) {
return href + (href.indexOf('?') != -1 ? "&rnd=" + aleat : "?rnd=" + aleat);
}
});
}
});
With this function, if I use rnd param then I add a new rnd param in all my href. So when I click in a href, a load the url with a new random param. My problem is...How can I actualize the url using F5/refresh?

You can use this plugin:
https://github.com/carhartl/jquery-cookie
And make something like this:
$(document).ready(function(){
var url = window.location.href;
var rnd = url.split('rnd=')[1];
var cookie = $.cookie("rnd");
var newRnd = Math.round(Math.random() * 100000);
$.cookie("rnd", newRnd);
if(rnd == cookie || !cookie) {
window.location.href = 'http://www.website.com/?rnd=' + newRnd;
}
});
This is just a quick draft, i haven't test it but should be close, hope this helps you.

field value gets undefined jquery

Can I Clear a event que in javascript?
when I have done one click event and then does another click event the input field gets the value undefined even when it has a value like "newfile.jpg"
I retrieves the values by doing somevariable = $('#cke_104_textInput').val();
but somevariable gets the value undefined.
here is the javascript code:
$(function () {
// Handler for .ready() called.
function changeLink() {
link = $('#cke_104_textInput').val();
if (link == "") {}
else {
link = link.replace("_", "/");
parts = link.split('.');
explodeExtension = parts[parts.length - 1];
link = link.replace("/download/", "/download/" + explodeExtension + "/");
link = link.replace("." + explodeExtension, "");
$('#cke_104_textInput').val('');
$('#cke_104_textInput').val(link);
clearInterval(changelink);
}
}
function changePic() {
link = $('#cke_103_textInput').val();
if (link == "") {}
else {
link = link.replace("_", "/");
parts = link.split('.');
explodeExtension = parts[parts.length - 1];
link = link.replace("/download/", "/show/" + explodeExtension + "/");
link = link.replace("." + explodeExtension, "");
$('#cke_103_textInput').val('');
$('#cke_103_textInput').val(link);
clearInterval(changepic);
}
}
$('#cke_60').live('click', function (event) {
changelink = setInterval(function () {
changeLink()
}, 1000);
});
$('#cke_64').live('click', function (event) {
changepic = setInterval(function () {
changePic()
}, 1000);
});
});
In the code i try to rewrite the content of two input fields.
this has to be done because the files are not in the sites root they are outside of it, and to be able to show or download them on the site the urls need to be in a specific format.

To answer your first line question, yes you can. Take a look at unbind()

You are creating link as a global variable, which means it is clashing with itself.
Change link = $('#cke_104_textInput').val(); to var link = $('#cke_104_textInput').val();.
Also as a side note, you have this code twice:
$('#cke_104_textInput').val('');
$('#cke_104_textInput').val(link);
which is redundant and inefficient. You should remove the first line in both cases, because selecting an element (even via ID) is not a free operation.