We Keep Coding

On load instead of document ready with other javascript on page?

I currently have this bit of code going that looks for a certain class and adds the QTY text inside the class. I have to do it this way as I don't have access to the base HTML code for this portion of the site, but rather can do so via JS access.
The current code I have running is as follows:
$('.cart-product-qty').each(function() {
$(this).prepend("QTY: ");
});
But the problem I just ran into is when certain functions are performed in the shopping cart it doesn't refresh, so it ends up dropping the QTY text. Is there another method so that it keeps it there continuously even if the page "refreshes"?

Listen to the parent div underneath the products will be listed. So whenever the content changes, you can trigger your function.
DOMSubtreeModified event might be helpful.
var element = document.getElementById('div');
element.addEventListener('DOMSubtreeModified', updateQtyText);
function updateQtyText(e) {
$('.cart-product-qty').each(function() {
$(this).prepend("QTY: ");
});
}
Reference : fire a call when inner HTML changes.
This might help

How do I make a JS function triggered in one HTML page edit elements defined in a second HTML page?

Basically I have two HTML pages, and both are connected to the same JS file. I want a function triggered by an event handler element in the first HTML to edit an element in the second HTML page, and then open it.
Here's a very basic example:
$("#p1").click(function() {
$("#p2el").text("TEST");
})
<button id="p1">CLICK</button>
In this example, the button p1 is defined in the first HTML, and the p2el element is defined in a second HTML page, both linked to the same JS file.
In the above example, I also used location.href inside the function. The idea being that, the element is edited, and automatically the second HTML page is loaded.
It's not working, and I don't know why. The second HTML page loads, but the element p2el is not edited.
I suspect this is has to do with data not transferring to the second HTML, but I am not sure why and what is happening exactly. I tried using localStorage inside the function, and then use the stored data as a condition that edits the element in the second HTML page...
function second() {
if(localStorage["key"] == "on") {
$("#p2el").text("TEST");
location.href = "secondpage.html"
}
}
$("#p1").click(function() {
localStorage["key"] = "on";
second()
})
... but It didn't work.
I hope somebody can help me out.

Navigating to a new page completely resets the "JavaScript envirionment".
Your JS files are reloaded, everything starts anew. Some things persist through page loads, such as local storage and cookies, but function calls certainly don't.
To do what you want to do, you'll need to:
Listen to the click event, and save the fact it was clicked somewhere.
(You're already doing this)
On page load, check the storage to determine whether or not the button was clicked at some time. If it was, do whatever you want. You will probably want to reset the stored value so this happens only once.
This will probably do the trick for you:
if(localStorage["key"] === true) {
localStorage["key"] = false; // reset the key.
$("#p2el").text("TEST");
}
$("#p1").click(function() {
localStorage["key"] = true;
location.href = "secondpage.html"
});

Can we remove click event without calling it?

I am having problem in overriding the pagination code given by grid. What I need to do is kind of hack the pagination given by my grid.
We are having a lot of records. So, what we are doing we are loading records to a threshold limit.
So, lets assume the threshold limit is 50 and page size is 10 so there will be 5 pages. So, when user comes to 5th page next button provided by the grid will be disabled.
So, what we need to do we need to make it enable and if user clicks on it I need make ajax call and load another 50 records(threshold limit) in the grid.
After that I need to disable this event so that next time user clicks it should not do the make ajax call and it should work like previously (by going from 1st page to 2nd page and so on)
All the above things mentioned I am able to do. But here problem comes when user goes to 5th page and go back to some other page let say 3 without clicking next button. Now, after going to 3rd page
when user clicks on the next page button it is making ajax call as I have make the button enable when user comes to 5th page and provided a click event to it.
So even if I provide a condition to run only on when grid current page is 5 then also it is running because after going to 5th page I will make button enable and bind and event. So, as I provided the event it will run without even specifying the condition.
How do I make the click event work as default and only when the user is at 5 it will make the ajax call.
This is my code -
///grid Current page will tell us which page we are in the grid.
if(gridCurrentPage==5){
query(".dojoxGridWardButton").forEach(function(element) {
query(".dojoxGridnextPageBtnDisable").replaceClass("dojoxGridnextPageBtn", "dojoxGridnextPageBtnDisable");
query(".dojoxGridlastPageBtnDisable").replaceClass("dojoxGridlastPageBtn", "dojoxGridlastPageBtnDisable");
});
callNextButton(gridCurrentPage)
}
And this is the function.
function callNextButton(gridCurrentPage) {
var target = dojo.query(".dojoxGridnextPageBtn");
var signal = on(target, "click", function(event){ ///Adding click event
if (gridCurrentPage ==5 ) {
var deferred = new dojo.Deferred();
setTimeout(function() {
deferred.callback({
called: true
})
}, 2000);
if (checking some conditions) {
////////doing Ajax call
deferred.then(function() {
//calling a callback
})
},
error: function(e) {}
};
})
signal.remove(); //Removing click event
}
Note : My grid is enhanced grid which is part of dojo toolkit. But probably its a design issue so, any comments/advices are welcome.
I really need an advice here. Please anyone can find the problem where it is it will be reqlly helpful.

javascript function reloads page upon completion

I have a simple javascript program that runs onclick of an image.
However, whenever I clicked the image, the page reloaded.
After a lot of debugging I found that the page doesn't reload until right as the script completes.
There are several setTimeouts in the code, but I noticed the page was reloading instantly. I even changed these timeouts to 15000 milliseconds, but it still reloads immediately.
I am using jquery, if it makes any difference.
I also want a different result from the program every time you click it, so that each time you click it a different script runs and a some text changes in a specific order. I did this by changing the onclick attribute of the images in each script to the name of the next script, so that script one would switch onclick to script two, and so on. I set a timeout on these switches so that one click doesn't race through every single script. script two isn't running, so that much works.
my code:
function getSounds() {
console.log("script. initiated");
$("#soundwebGetSoundDirections").html("Now, Wait until the file is done downloading and click below again.");
console.log("new message");
$("#soundwebGetSoundA").attr('href',"");
console.log("href eliminated");
setTimeout($("#soundwebGetSoundImg").attr('onclick','findFile()'),2000);
console.log("onclick to findFile()");
}
function findFile(){
console.log("FINDFILE")
$("#soundwebGetSoundDirections").html("Find the file(it's probably in your downloads), copy the path of the file (usually at the top of the file explorer) and paste in it the box below. Then, make sure there is a '/' at the end of the path and type 'Linkiness.txt' (case sensitive, without quotes) at the end. Once you have all that stuff typed, click the icon again.");
console.log("FIND IT, DARN IT!!");
$("#soundwebGetSoundPathInput").css("opacity",1);
console.log("diving into reader");
setTimeout($("#soundwebGetSoundImg").attr('onclick','readFile()'),1000);
}
function readFile(){
console.log("loading...");
$("#soundwebGetSoundDirections").html("loading...");
if(document.getElementById("soundwebGetSoundPathInput").value.length == 0){
setTimeout($("#soundwebGetSoundDirections").html("Please fill in Path!"),1000);
setTimeout(findFile(),2000);
}
}
and the HTML that's linked to,
<a id = "soundwebGetSoundA" href = "https://docs.google.com/feeds/download/documents/export/Export?id=1ynhHZihlL241FNZEar6ibzEdhHcWJ1qXKaxMUKM-DpE&exportFormat=txt">
<img onclick = "getSounds();" class = "soundwebImgResize" src = "https://cdn3.iconfinder.com/data/icons/glypho-music-and-sound/64/music-note-sound-circle-512.png" id = "soundwebGetSoundImg"/>
</a>
Thanks for any help,
Lucas N.

If you don't want clicking the image to cause the anchor tag to load the href, then move the image tag outside of the anchor tag.

You aren't using setTimeout correctly. You should be passing in a function not a statement. So, for example, instead of
setTimeout($("#soundwebGetSoundDirections").html("Please fill in Path!"),1000);
setTimeout(findFile(),2000);
you should use
setTimeout(function () { $("#soundwebGetSoundDirections").html("Please fill in Path!") },1000);
setTimeout(findFile,2000);
I think the same goes for setting the onclick attribute but I've never tried dynamically changing an onclick attribute like that.
Since you're already using jQuery you could try using .on('click'... and .off('click'... if your current setup isn't working.

Check if the webpage has been modified

I am working on chrome extension for facebook. If you use facebook, you know that when you scroll down to the bottom of the news feed/timeline/profile it shows more posts. The extension actually adds a button beside the "like" button. So I need to check if there are more posts to add that button to.
Right now to check if the page has been modified, I use setInterval(function(){},2000).
I want to run a function when the user clicks the button. But this function doesn't work if I put it outside (or even inside) setInterval() – The Koder just now edit
How can I check if the webpage has been modified WITHOUT using a loop?
Example:
$(document).ready(function(){
window.setInterval(function(){
$(".UIActionLinks").find(".dot").css('display','none');
$(".UIActionLinks").find(".taheles_link").css('display','none');
$(".miniActionList").find(".dot").css('display','none');
$(".miniActionList").find(".taheles_link").css('display','none');
//only this function doesn't work:
$(".taheles_link").click(function(){
$(".taheles_default_message").hide();
$(".taheles_saving_message").show();
});
//end
$(".like_link").after('<span class="dot"> · </span><button class="taheles_link stat_elem as_link" title="תגיד תכל´ס" type="submit" name="taheles" onclick="apply_taheles()" data-ft="{"tn":">","type":22}"><span class="taheles_default_message">תכל´ס</span><span class="taheles_saving_message">לא תכלס</span></button>');
$(".taheles_saving_message").hide();
}, 2000);
});
In the future, this extension will use AJAX, so setInterval() can make even more problems for me.

If I understand correctly you want to get a notification when the page's DOM changes. And you want to do this without using the setInterval() function.
As your problem lies within the attaching event handlers to elements that are created after the page has loaded, you might be interested in checking out the jquery.live event attachment technique. I think it will solve your issue.
In general you want the page to throw a mutation event. There is a mutation event spec that might be what you're looking for. Here are some links that might be useful.
http://tobiasz123.wordpress.com/2009/01/19/utilizing-mutation-events-for-automatic-and-persistent-event-attaching/
Detect element content changes with jQuery

$(document).ready(function(){
setInterval('fun()',5000);
fun();
});
function fun()
{
alert(11)
}