Develop Reference

jquery getscript causing loop

I am using .load to call content from a section of my site when someone clicks a link. I am then using getscript to load in any scripts that are needed that .load strips out.
However, the content call function is needed on links that are loaded from this loaded content.
I am therefore in a situation where there is a loop being created and multiple executions.
This isn't an issue if the user clicks on one or two links to load content from other pages, but if they do it for several links then I get a spike in CPU, and therefore need to find a solution.
I am not sure why there is this issue, as the script executions are done through user clicks, so there shouldn't be continual execution.
The script looks like this:
$(document).ready(function () {
$('.Select a').one("click", function () {
var toLoad = $(this).attr('href') + ' .containerPlus';
$("body").append($("<div class='loadedcontent'>").load(toLoad, function () {
$.getScript("scripts required for loaded content", function () {
$.getScript("load this script again");
}));
});
});
basically the user clicks on a link, this calls the content and loads it into a new container, scripts needed on that page are then loaded, and then finally this code is applied to any links within this loaded content that need it.
This is a loop, but as there is a click element, I wouldn't have thought the second execution wouldn't take place until another click event.
Thanks for any advice
Richard

Content not loading dynamically into DIV using jQuery mobile

This example does not show exactly the problem, just to have an idea. For example when I click on the page 2, the content does not load in the div, I must refresh the page to see the content of the page 2.
P.S : The same code is duplicated in the others pages.
Code :
$(document).ready(function() {
$('.content-primary').html("Content of page 1"); // This line just in this example
//$(".content-primary").load("content-of-page.php"); // but I used this code on all my pages
});

This is a common jQuery Mobile problem.
You should not use document ready with jQM, instead jQM provides page events. Your problem is document ready who can, and usually triggers before page is loaded into the DOM. That is why refresh helps, at that point page is already loaded.
I made you a working example: http://jsfiddle.net/Gajotres/8hKe2/
$(document).on('pagebeforeshow', '#foo', function(){
alert('This is foo');
});
$(document).on('pagebeforeshow', '#bar', function(){
alert('This is bar');
});
Basically each page event will trigger javascript code only meant for that page. If you want your code to execute only once, pageinit event should be used instead of pagebeforeshow, like this:
$(document).on('pageinit', '#foo', function(){
alert('This is foo');
});
$(document).on('pageinit', '#bar', function(){
alert('This is bar');
});
If you want to find more take a look at my other article/answer: https://stackoverflow.com/a/14469041/1848600

JS asynchronous/load behaviour

I have an application that is scraping websites for data. It is scraping the website in an iFrame. I need to scrape to subsequent website from that same iframe that both have an entry adress that leads to a page with a field and a button. On that page I enter a number into the field and push the button to go to the next page. The problem I have is that when I (coded) push the button, it doesn't wait for the page to load and scrapes before there is anythong there.
setTimeOut and Delay seem to be ignored completely.
$(document).ready(function() {
$('#startbutton').click(function() {
$('#iframe').attr('src', 'www.pageone.com');
// Here I start a load because I need to wait for the button to become available.
$('#iframe').one('load', function() {
$('#okbutton').click();
});
// This is where it goes wrong. I would assume that it waits for the second page
// to load. But it doesn't. Adding another load block didn't help.
scrapeFunction();
});
});
How do I get these timings right?

when I (coded) push the button, it doesn't wait for the page to load and scrapes before there is anythong there
Actually, it doesn't even wait for the button to be pressed. Instead, you want to wait for another load event:
var $if = $('#iframe');
// (1) assign a load handler
$if.one('load', function() { // that says "When loaded (first), …
// (3) assign the next load handler
$if.one('load', function() {
// (5) which then (second load) can scrape the content
scrapefunction();
});
// (4) and load it
$('#okbutton').click();
}); // …"
// (2) and load it
$('#iframe').attr('src', 'www.pageone.com');

This will execute the code inside when the iFrame has been loaded.
$("iframe").ready(function() {
//iFrame loaded
scrapeFunction();
});​

Detect first page load with jQuery?

I need to detect the first time a page loads in jQuery so that I can perform some actions only when the page loads the first time a user navigates to that page. Similar to server side code page.ispostbasck. I have tested $(document).ready and it fires every time the page loads so this will not provide what I need. I have also tried the jQuery Load function - it also fires every page load. So by page load an example is that I have an HTML input tag on the page of type button and it does not fire a postback (like an asp.net button) but it does reload the page and fires $(document).ready
Thanks

You will have to use cookie to store first load information:
if (! $.cookie("cookieName")){
// do your stuff
// set cookie now
$.cookie("cookieName", "firstSet", {"expires" : 7})
}
Note: Above example uses jQuery Cookie plugin.

An event doesn't exist that fires only when the page is loaded for the first time.
You should use jQuery's .ready() event, and then persist the fact that you've handled a first time page load using your method of choice (i.e. cookie, session variable, local storage, etc.).
Note: This method will never be fool proof unless you can store this information at the user level in a DB. Otherwise, as soon as the user clears their cookies, or whatever method you choose, the "first time loaded" code will fire again.

I just ran into this problem and this is how I handled it. Keep track of the first time the page loads by using a variable initialLoad:
var initialLoad = true;
$(document).ready(function() {
...
...
...
initialLoad = false;
});
Then in other functions, you can do this:
if (initialLoad) {
//Do work that is done when the page was first refreshed/loaded.
} else {
//Do work when it's not the initial load.
}
This works well for me. If the user is already on the page and some jQuery functions run, I now know if that user just loaded the page or if they were already on the page.

The easy solution is to use jQuery ‘Once’ plugin
$(element).once('class-name', function() {
// your javascript code
});

Running javascript whenever UpdatePanel refreshes

I am using an asp.net update panel to refresh the content on a page when a menu item is selected.
Within the content that is updated are images which have a javascript reflection function which is triggered with the following line of code:
window.onload = function () { addReflections(); }
This runs fine when the page is first loaded but not when a menu item is selected and the update panel is run.
On previous projects using jquery code I have replaced document.ready with function pageLoad but there is no document.ready on this page.

Like this:
<script>
// ASP.NET AJAX on update complete
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function(sender, args) {
// your code here, eg initToolTips('/Common/images/global/popup3.gif');
});

Basically, it's because that event isn't triggered by an update panel refresh.
There are ways to achieve this behaviour though, Ajax.Net has an EndRequestHandler function that you can hook into.
Here's a good example:
http://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-updatepanel-asychronous-ajax-request-is-over/

i think u should use
function pageLoad(sender, arg) {
if (!arg.get_isPartialLoad()) {
// in first load only
}
//every time the update panel refreshed
}
Regards

Take a look to this event:
http://msdn.microsoft.com/en-us/library/bb383810.aspx
window.onload is fired when the entire page is loaded. UpdatePanel uses an AJAX approach, so whenever it's updated and round trip ends, the page remains loaded and only a portion of this has been updated.
In other words, you need to do that "when a request to the server ends".