JQuery :: Change Function Fires When Using "replaceOptions"
Aug 4, 2009
I am using one select to update another and everything works perfectly. However, I am finding the "change" function fires when I use "replaceOptions" to update the second select even though I'm simply re-initiating the second select with a new set of options. I think the "change" function should only fire when I do I physically select another option in the second select and not every time I update the first select. I've recreated a cut/paste demo to illustrate the point below. As you can see, the alert occurs when changing either the first or second select.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
I have a series of checkboxes on a page and the goal is to run an ajax post each time one of the checkboxes is checked. When the page loads, the first time I click each of the checkboxes everything goes as planned. After I receive the response from my ajax php function and all related events fire, I click the checkbox again and nothing happens. The event listener seems to have stopped functioning.
i've a problem using the change-handler in a simple html-formular. the change-handler fires twice when the input-field already defines an onChange-Event.
Example: in head of html: <script src="jquery-1.4.2.js" language="javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#abc").change(function(event){event.srcElement.style.borderColor='red'; });});
I cant figure out why a trigger event fires in the following function:
But not in this function:
When using FF 4 or CHROME 10, it seems to work fine in IE9. I have validated that the second function is pulling the proper elements when selecting the toFire variable, but the trigger just doesnt seem to fire. Value is always true or false, never undefined and the Click event that is being fired in the second function is the same that is being triggered in the first function.
I have a problem with load(), which I cannot find on forum search or google. I have a container "right_col" that should be filled with jQuery after clicking on any hyperlink. The result shall be a HTML page that only changes the content area. On the first loading of the page it works as intended. But after the first load() no more jQuery is used and the page changes URL in Browser and reloads the entire page. After this reload you have again one jQuery that is working and so on.
HTML Code: <div id="right_col"> <div id="right_content"> </div></div>
This is my JS code: $(document).ready(function(){ var fadeTime = 200; $("#right_col").css("display", "none"); $("#right_col").fadeIn(fadeTime); // links $("a").click(function(event){ event.preventDefault(); linkLocation = this.href; $("#right_col").fadeOut(fadeTime, contentloader); }); function contentloader() { $('#right_col').load(linkLocation + ' #right_content',null, function(){ $("#right_col").fadeIn(fadeTime); });}});
As you can see, I'm loading the whole linkLocation and want to replace the content within #right_col with all HTML of #right_content including this div aswell. I tried Firebug to fugure out if i have more than one #right_col after the load(). I tried replacing IDs with classes to prevent element doubling. I tried to remove the #right_content param and pass a variable to my script to only print the needed HTML. Nothing works.
And the Fun part: I also have a menu outside of #right_col. Calls from there on are working perfectly as intended.
How can I make the button call the click event so that the server side method btnExecute_Click() can be called? Also, this button calls a javascript function before server side even.
I have a problem with layers. In my example there's a link inside div#msg with 'z-index:1' and a overlay with 'z-index:2'. Now when "mousedown" fires, will change the div#msg z-index value from 1 to 3 to be on Top, so the link become a clickable link.
The question is, it is possible to make the link on top and open it with just one click?
I am having an issue with the dialog plugin. I have thelatestjquery and dialog version installed. I have a link that opens a form into a div and than I create a dialog with that div to display as a modal Iframe. It opens at the first time I fire the open event and it fires correctly the close event when I close the iframe, but when I try to open for the second time without refreshing the form that the dialog div is in it, it just does nothing. Do not create the dialog again nor display it to me if it is already created.
here is the code that fires up the dialog:
function addPedidoCliente() { $.ajax({ url: server+"/ajax/Pedidos/addPedidoCliente", data: "",
[Code]....
So every time I click on a specific button, this code is called, it is also performing the ajax request as I can see in firebug (the response is ok as well) but the dialog Iframe is not created.
I've got a button toolbar, and users can select rows in a table. When they have selected some row's, they can click one of the buttons, and it invokes a callback. Problem is, when I click the first time, there's nothing wrong. But when I click the second time, it fires the callback two times, when I click the third time it fires the callback three times, and so on. That's a big problem, since the button is used to delete a page, and obviously it should delete it only once, since the AJAX would return an error ortherwise. The code is seperated in three blocks, first the the onclick on the button object, which invokes a function called confirmAction, taking to parameters. [1], a message for the users, [2] the name of the callback unction. When the confirmation is confirmed, the confirmAction function calls the callback. As said before, when I click #delete once, it behaves like expected. But when I click the second time (without refresh) it runs the callback function twice, third time thrice, and so on.
[code] $('#delete').click(function() { confirmAction('Weet je zeker dat je de geselecteerde pagina's wilt verwijderen?', 'destroy'); });
I need to get something fun! with setTimeout function!I am n00b! :D so be patent please.I need when <body onload="Myfunc();"> fires, that function should show "Please wait...!" or "Loading...". for , say 5 seconds!. then it disappear.I used setTimeout with that but it didn't do what I wanted!here is my code:
function Myfunc(){ document.getElementById("ss2").innerHTML = "Loading..."; setTimeout("Myfunc();", 5000);
But I don't know how to fire it (cause the dialog box to appear) using <input> to keep the button's styling in line with the rest of the page. This does not work:
I am trying to implement a div containing an advanced search form drop down on hover and I have everything working (only in FF) except for when I try to add any sort of animation or speed to the '.show' or'.hide' effect. When I try to add speed or seemingly any other effect to the div, the select elements of the search form fires the hover
My problem is: when the mouse enters and leaves the image the image fades in and out for up to four times. The first mouseenter is just fadeout, fadein, fadeout. why is the event being triggered multiple times and more importantly what can I do to prevent this behavior?
I have a series of 6 checkboxes with the same name. The purpose is that whenever one of these is checked or unchecked, another part of the page is filled again based on an AJAX query, that has the values of all the checked checkboxes as input.
I added an onchange event handler like this: $('[name!=stage]').change(refillActionsParameters); what happens is that this handler function gets called 6 times when I check or uncheck any of the checkboxes. As a remedy, I put the onchange handler on the form that contains the checkboxes, but that didn't help, still 6 times.
Also: is there a quick way to retrieve the values or the ids of the checked boxes?
I am using window.unload for some use case in my code. But windows.unload fires on every event. I know to controller it on event like button click or link, but how do I prevent Unload event to fire on refresh or back button event?
I have a problem where the page doesn't expand when more results get loaded via jquery on a facebook style wall. Once more results get loaded the footer stays static instead of moving down.
i have a FAQ Question h2 acting as a trigger to slide out a hidden div below it, the FAQ answer, and clicking it toggles the h2 class so the bg img changes.toggle_container is the hidden div, h2 is the trigger..
code below:
$(document).ready(function(){ $(".toggle_container").hide(); // Hides the container onLoad $("h2.trigger").click(function(){
[code]....
now i have a rating plugin that sits in the h2 tag. when i click the rating star, it behaves as intended, but also then somehow calls the above code and expands the FAQ answer.
What I noticed is that my error callback is fired every time. MyService.asmx: [WebMethod] public FileInfo[] GetFileInfo(int Id){ Proxies.ServiceRef.ServiceClient c = new Proxies.ServiceRef.ServiceClient(); return c.GetFileInfo(Id).ToArray(); }
The Jquery code where I am getting error: $.ajax({ url: url, data: jsonData, type: "POST", contentType: _I.contentType, timeout: _I.timeout, dataType: "serviceproxy", // custom type to avoid double parse dataFilter: function (jsonString, type) { .....
When I debug using firebug the response is as follows. {"d":[{"__type":"Proxies.AFARServiceRef.AssignmentInfo","ExtensionData": {},"AssignDate":"/Date(1317748587667) /","AssignFileName":null,"ClaimId":"PA026195","ClaimantName":"Rachel Weiss","FirstContactDate":"/Date(1302678000000)/","FirstContactTime":{"Ticks":433800000000,"Days":0,"Hours":12, "Milliseconds":0,"Minutes":3,"Seconds":0, "TotalDays":0.50208333333333333, "TotalHours":12.049999999999999, "TotalMilliseconds":43380000, "TotalMinutes":723,"TotalSeconds":43380},"Id":5257, "InspectionDate":"/Date(1302246000000)/","StatusId":1,"SubmittedCount":5, "UploadedCount":9}]}
So, there's a main column of content and to the left of the main column is an A element that is absolutely positioned.I have an announcement system that when there's an active announcement, a box is rendered above the main column, pushing the main column down. However, the A element that is absolutely positioned stays where it is.I added code to check for an active announcement and add a class to the A element so it'll keep it positioned alongside the left-border of the main column.When a user closes the announcement box, it fades out, and the maincolumn moves back up to fill the space - but the positioned A element does not follow. I then added code to the function I had to fade out the box and save a cookie to show the user had closed the active announcement box which removed the active-announcement class I had PHP add to the A element.
The problem is, even though the removeClass function is last in the series of functions, it fires first - the positioned A element moves up to where it should be BEFORE the active announcement box fades out.How can I change this so that the positioned A element has its class removed after the other two things have taken place?[code]
I am wanting to avoid loading a seperate instance of jQuery in each of many iframes. For the most part this is working well. The problem I'm having is with the ready event. It does not seem to work properly withina child iframe. parent.$(document).ready(function () { /* this fires before the DOM is ready.*/ });
Based onwhat I have read I am guessing it is firing immediatelywhen called ratherthan waiting for the DOMto beproperly loaded first. I can getwindow.onload to work, but it fires late in the game. Is it possible to get a proper 'ready' event triggered within an iframe without loading a seperate instance of jQuery ?
I add multiple items with each click and then I want to remove them one by one by clicking. All is ok, but if I add 2-3 items and the click the first one, confirmation alert fires multiple times when i click Cancel. The number of times depends on how many items goes after curent.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd"> <html>
I am using JQuery 1.4.1. I have HTML input elements which created dynamically. I have assigned "focusin" event all input elements. While loading page, it is triggers only once while focusing each input element. When I minimize and maximize the page, focus event is fired multiple times. Finally it show "Stack overflow at line 0".
I have an Autocomplete widget inside a function that works slightly differently depending on the country. It works. I want the user to be able to switch from country to country to country. I started with
getCityFromGeonames("#city2"); //select town via 2 steps - country, town getCityFromGeonames("#city3"); //select town via 3 steps - country, stateProvince, town
This will select in the city2 input, then in the city3 input, then no further action is possible until you reload the page. So I put a change function around it.
$("#city2").change(function () { getCityFromGeonames("#city2"); //select town via 2 steps - country, town getCityFromGeonames("#city3"); //select town via 3 steps - country, stateProvince, town ).change();
