Develop Reference

Does JQuery (div).load recall the (div).load function?

I have a function which when the div is loaded it executes code:
$("#row").ready(function () {
When the page has first loaded, it fires fine, my data loads up without any problems.
How ever I would like to reload the div every time the value of a textbox is changed.
$("#startDatePicker").change(function () {
$("#row").load(document.URL);
});
Which is why I have that code there.
However when I change it, the .change event is fired, however it doesn't reload my div? Now I'm not sure if the div has been reloaded and it just doesn't fire the event or the event is not being loaded again at all.
EDIT
Thanks to the comment using an alert to check if the div is being called, I found out that is it not being called after I load it, so the next question is, how do I recall the (div).ready function again?

I think the issue is with jquery-cache.
Try it:
$("#startDatePicker").change(function () {
$("#row").load(document.URL+'?dt='+new Date().getTime(), function() {
alert( "Load was performed." ); // perform the operations here that
// that you wish to perform on .ready
});
});
See if it helps.

Repeated execution of a jquery statement

Below, mentioned is a jquery code, where 'box1' is a div id and 'colors' is a class inside the modal dialog. However, it results in an unexpected behavior: When I click '.colors' for the first time, an alert box appears, but on clicking it the next time, two alert boxes appear(one after the other). That is, clicking for the nth time will result into 'n' alert boxes, one after another!
Please explain the analogous behavior and a possible solution.
$('#box1').click( function() {
window.location.href='#openModal';
$('.colors').click( function() {
alert('xyz');
});
});

You are assigning a new click event to .colors on every click of #box. You need to make use of .one():
$('#box1').one('click',function() {
window.location.href='#openModal';
$('.colors').on('click',function() {
alert('xyz');
});
});
This will only assign the click handler for .colors once. If you want the ability to click #box1 multiple times, then you need to combine your assignment with .off():
$('#box1').on('click',function() {
window.location.href='#openModal';
$('.colors').off('click').on('click',function() {
alert('xyz');
});
});
This will do allow multiple clicks of #box1 with only one click handler for .colors, because each time it unassigns and reassigns it. I don't recommend this, though, as its a lot of extra work for the DOM to do.

Yeah, you're re-binding click to the .colors class every time #box is clicked. You could fix it by unbinding the previous click events before rebinding. Like so:
$('#box1').click( function() {
window.location.href='#openModal';
$('.colors').off('click').on('click', function() {
alert('xyz');
});
});

Onload fires no matter where I place it

Right, I'm getting quite aggitated with this. I'm probably doing something wrong, but here's what I'm doing:
$(document).ready(function () {
$('#somebutton').click(function () {
openPage1();
});
$('#someotherbutton').click(function () {
openPage2();
});
});
var openPage1 = function () {
$('#iframe').attr('src', 'someurl');
$('#iframe').load(function () {
$('#button').click();
});
};
var openPage2 = function () {
$('#iframe').attr('src', 'anotherurl');
$('#iframe').load(function () {
$('#anotherbutton').click();
});
}
Whenever I click somebutton everything goes as expected. However when I click someotherbutton. The .load() from openPage1() is called first and I can't find a way to stop that. The .load() from openPage1() has a button with the same name, however on openPage2() I need to modify the contents before clicking the buttons.
I need to use .load() because I can't click the buttons before the document is ready.
Basically what I need is two seperate .load() instances on the same iframe, that don't fire off on each other.
Besides that, maybe my understanding of jQuery/JS is wrong, but shouldn't the .load() events only be listening after clicking the corresponding button?
Can someone help me out, this has been keeping me busy all afternoon.

Try using on, and once loaded, unbind
$("#iframe").on("load", function(){
$(this).off("load");
$('#button').click();
});
That way you remove the handler you put up before the second button is clicked?

By writing : $('#iframe').load(function (){ $('#button').click(); });, you are adding a listener on the load event, which will stay and be re-executed on each subsequent reload of the iframe.
Here is a jsfiddle to demonstrate this : click on the "reload" button, and see how many times the "loaded" message appears in your console.
in your case, if you click on #somebutton, then on #someotherbutton, after the second click, you will have two handlers bound on the load event, and both will be triggered.
If you click 5 times on #somebutton, you should end up calling 5 times $('#button').click().
If you want to execute it once, you can follow Fred's suggestion, or use jQuery .one() binder :
$('#iframe').one('load', function(){ $('#button').click() });
Here is the updated jsfiddle : 'loaded' should be displayed only once per click.

Maybe try and replace the lines in both functions like this:
$('#iframe').load(function() {
$('#anotherbutton').click();
};
$('#iframe').attr('src', 'anotherurl');
Otherwise it might be firing the event before the new event-handler has been set.

This isn't really an answer to your problem Now it is an answer, but I think utilizing functions as they were intended could be beneficial here, i.e.:
//Utilize a single function that takes arguments
var openPage = function (frame, src, eventEl) {
frame.attr('src', src); // If you pass frame as a jQuery object, you don't
frame.on("load", function(){ // need to do it again
$(this).off("load");
evEl.click(); //Same for your buttons
});
}
//Simplify other code
$(document).ready(function () {
$('#somebutton').click(function () {
openPage($("#iframe"),somehref,$("#buttonelement"));
});
$('#someotherbutton').click(function () {
openPage($("#iframe"),anotherhref,$("#someotherbuttonelement"));
});
});

JQuery Event repeating in dynamic content

In a page of a website I'm making, the press of a button imports the contents of a another php page and appends it onto the page. However, that other page contains JQuery, and the click event($( ".ExpandRoleButton").click) repeats itself on previous elements every time I import the content. So if I add 3 elements;
Element 1: Repeats the click event 3 times
Element 2: Repeats the click event 2 times
Element 3: Runs the click event once
$("#AjouterPiece").click(function()
{
$.blockUI({ message: '<img src="images/ChargementGeant.gif"/><br/><h1>Un moment svp.</h1>' });
$.post("wizardincl/piste.php", {newPiste: newPiste}, function(data)
{
$("#wizardPistes").append(data);
$.unblockUI();
$(".divNewPiste").fadeTo(300, 1);
$("#nbExemplaires").attr("max", newPiste);
newPiste++
$( ".ExpandRoleButton").click(function()
{
if ($(this).hasClass('RetractRoleButton'))
{
$(this).find('img').attr('src', 'images/ExpandPetitNoir.png');
var that = $(this);
$(this).parent().parent().parent().parent().next().slideUp(500, function() {
that.parent().parent().parent().parent().css('border-bottom', '1px solid #FF790B');
});
$(this).removeClass('RetractRoleButton');
}
else
{
$(this).parent().parent().parent().parent().css('border-bottom', 'none');
$(this).find('img').attr('src', 'images/ExpandPetitNoirRetour.png');
$(this).parent().parent().parent().parent().next().slideDown(500);
$(this).addClass('RetractRoleButton');
}
});
});
});
Currently, part of the JQuery website seems down and after some search, I can't find anything to solve the problem. Is there any way to keep the code from repeating itself like this?

This is because you are binding the event to multiple event handlers. The first time #AjouterPiece is clicked, all .ExpandRoleButton buttons get binded to an onclick handler.
The next time #AjouterPiece is clicked, it gets binded again.
To prevent this, you must unbind the click handlers using the following code before binding it
$( ".ExpandRoleButton").unbind('click')

You can pass in the event with .click(function(e) {...}) and then call e.stopImmediatePropagation() to fire only the current handler, but that only addresses the symptom, not the real problem.
Edit: make sure you are only binding the new instance of the button by adding a context to your selector, like $('.ExpandRoleButton', data). Since you are matching on a class, that selector will grab all the buttons on the page; the context allows you to select only the one inside your result.

A good practice ( solely to prevent issues like this from occurring, unintended multiple click handlers added ) is to..
$(".selector").off('click').on('click', function...
or
$(".selector").unbind('click')...
$(".selector").bind('click')...

Jquery Content Cycle Next/Previous not working

I have a definition list with a lot of text inside of it. When a user comes to the page, I want the jQuery to hide two thirds of that content, add a next and previous button where appropriate, and fade the content in and out. The first third of the content is .issue-group-1, the second third is .issue-group-2, the third, .issue-group-3.
I am trying to set it so that when the user hits the next button, the next button changes classes, and thus acts differently the next time the user clicks it (that is, it takes them to the third page instead of the second.
Right now, the next/previous buttons are working on the first and second "pages" but the next button to the third page won't work.
My code is probably too long and this is maybe not the best way to do it--I'm new to jquery. Any suggestions would be helpful.
$(document).ready(function(){
$('.issue-group-2, .issue-group-3').hide();
$('a#next-button.page1').fadeIn(500);
$('a#next-button.page1').click(function() {
$(this).removeClass('page1').addClass('page2');
$('.issue-group-1').fadeOut(500, function() {
$('.issue-group-2').fadeIn(500);
});
$('a#previous-button').fadeIn(500);
});
$('a#previous-button.page2').click(function() {
$('#next-button.page2').removeClass('page2').addClass('page1');
$('.issue-group-2').fadeOut(500, function() {
$('.issue-group-1').fadeIn(500);
});
$('a#previous-button').fadeOut(500);
});
$('a#next-button.page2').click(function() {
$('a#previous-button').removeClass('page2').addClass('page3');
$('.issue-group-2').fadeOut(500, function() {
$('.issue-group-3').fadeIn(500);
});
$('a#next-button').fadeOut(500);
});
$('a#previous-button.page3').click(function() {
$(this).removeClass('page3').addClass('page2');
$('.issue-group-2').fadeOut(500, function() {
$('.issue-group-2').fadeIn(500);
});
$('a#next-button').fadeIn(500);
});
});

You need to use live instead of click. Check out the documentation.
$('a#next-button.page1').live("click", function() {...});
$('a#previous-button.page2').live("click", function() {...});
$('a#next-button.page2').live("click", function() {...});
$('a#previous-button.page3').live("click", function() {...});