I'm not really sure how to go with this, but here goes:
I have form elements that trigger a function (mainly for validation purposes). This triggers on click, on change etc. These are written with vanilla JavaScript.
If it's a straight-forward HTML element then everything works fine. E.g. a element fires on change.
However, if I use a jQuery script (e.g. a jQuery colour selector), then although that jQuery script populates an field, the validation script doesn't fire.
This I suppose is obvious as you don't click, blur, change it, it's just the jQuery script changing it.
Of course I could change the JavaScript in the colour selector jQuery script so it also fires the validation script, but there must be a better way where as well as on click, on change, on blur etc. I can also activate the function when it picks up that another script is changing it. I need this for various occasions and scripts.
Another example is a rating script (rate out of 5). It uses radio buttons as a non-jQuery fallback and the jQuery script just hides those radios (with CSS), displays the star images and then changes the radios when the user interacts with the star images. That way the server handles a form submit the same way regardless of the availability of jQuery. However, the validation script doesn't fire.
Any ideas?
Apparently the elements are being inserted on the dom after the javascript run.
try using $.live() instead of $.blur()
so even if this script elements are inserted after the page rendered, events will be bound to em.
http://api.jquery.com/live/
Related
Ok here's the deal... I have a primefaces page, and I'm modifying the style-class of some components using a JQuery Script. The problem is that, after a failed validation of some fields, the script stops modifying the style-class so the style fails for some components. I'm trying to refresh the page using update="#form" on the submit button, but it won't work as the validation is ajax level. Refreshing the page manually works but is not desirable, and won't keep nor the error messages neither the field values that were validated without errors.
I can only guess what your script is doing but most likely it's working on DOM-Elements which are changed or replaced by an AJAX-call. Example:
$(document).ready(function() {
$('input').on('change', function() {
$(this).add('class', 'changed');
});
});
This script registers an event on all input-fields it's finding after the DOM is ready. If an AJAX-call adds a new input field or rerenders one of the input-elements you don't have automatically registered events on them.
You need to register the events after the AJAX-call again via e.g. oncomplete="registerEvents();" where registerEvents does the same things you did in your $(document).ready function.
Beware of registering events multiple times on the same element.
What's the best way to "preserve" and "re-display" portions of an html page, along with jquery event handlers you've set up?
More detail:
I'm writing a "one-page javascript application" that lets users perform two different calculations. The user selects which calculation they want by clicking a radio button.
When they click radio button A, a big part of the UI needs to get displayed with appropriate html controls (and jquery event handlers) that allow the user to enter the parameters for calculation A.
Likewise, if the user clicks radio button B, that section of the page needs instead to show all the controls (and its associated jquery event handlers) that allow the user to enter the parameters for calculation B.
My question is how to best handle the swapping of calculation A and B's html controls and their associated jquery event handlers?
I had thought about just using jquery's .html() to get and set the parameter section part of the page, but I'm thinking that will not preserve any event handlers that I'd set up for those controls. Is that right? In that case, I'd need to either re-wire up the event handlers as the user switches between calculations or do something else.
(In essence I think what I want to do is to be able to preserve a chunk of the dom (which hopefully includes jquery event handlers) but I don't write a ton of jquery and am I'm not sure how to approach that... I'm wondering if I could get the whole parameter section of a page represented as a jquery node, and save that off (to a js variable) and restore it, as needed, if that would do the trick??
Thanks for any ideas!
Michael
Honestly, usually it's easier just to hide()/ show() elements rather than removing them/ re-adding them.
Add a calculation-1 class to elements you want to be visible for the first calculation, and calculation-2 for the second calculation elements. This will let you get a jQuery variable of all calculation 1 and 2 elements via $('.calculation-1') and $('.calculation-2).
You can then add an event handler for the radio's that hide() and show() the elements accordingly.
If you use html(), you'll lose events bound to the elements children. Unless you attach your handlers to an ancestor which you don't remove.
You can also use detach(), which will remove the elements from the DOM, but persist the event handlers you added. However, if your elements are dotted all over the DOM, it's hard to track their origional position, and TBH is more effort than it's worth.
Say I have a JQuery object, el, that has selected an element. Is it legal, safe, and reasonable to call el.trigger("change") if the selected element is a DIV? What about other element types? For that matter, can I call el.change()?
The JQuery documentation for .change() says:
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements.
It's not clear to me what "limited" means here. It might be referring to the fact that these are the only three element types that will produce these events automatically, but it could instead mean that other elements aren't allowed to.
Empirically, Chrome v28 seems to allow it, but I want to know if I can expect it to work in general.
Goal
I have a pseudo-control that's composed of a set of buttons and spans wrapped in a div. Each instance of the control maintains and manages a value, which is modified by clicking the control's buttons. When the value changes, I need to send an event out from the div so that the rest of the page can react. I don't want to listen for the click events outside the control, since that couples the surrounding code to the controls' internals and not all clicks change the value.
I could create a new event name, but the built-in "change" event seems like conceptually correct, so I'd rather use it if I can. As an added bonus, my page already a "change" handler bound the right place with the right behavior (because I have some input and select controls on the page, too).
I need to support IE8 and up, in case the answer varies by browser make and version.
There are no restrictions, you can trigger any event type you like on any HTML element.
The jQuery documentation is simply telling you that change is only automatically triggered on <input>, <textarea> and <select>
So firefox has a nifty mechanism which will try to autocomplete values in fields when a page is reloaded or the back button is used. Which is great and all except when you have something like a drop-down which when set to a value modifies the page using ajax.
What winds up happening is that the browser reloads the page, the drop down is pre-filled with the remembered value, and then no change event is fired when the dom is ready. And therefore the change handlers attached don't fire and thus the page does not update.
Is there a good way to "fix" this behavior so that it works for the user as expected:
a) We do want the browser to auto-complete because that is a good user experience.
b) Still want that onchange event firing.
The only thing I can think of doing at the moment is to add an on-ready event to the document which has javascript pre-populated with initial values in the form, when the document loads the javascript will check the pre-populated values and if not matching what is in the input will trigger the change handlers.
Anyone have a better solution? Is there a lib that does this already?
(Using Rails 2.3.5 + jQuery)
Unfortunately there appears to be no way of actually disabling firefox from auto-filling fields when reloading a page or using the back-forward button. Fortunately the values are already there during $(document).ready() event so as long as everything in those inputs can have the .change even initially fired on them, it don't matter where the values came from and it just works.
I think you can add autocomplete="off" to prevent the browser from prefilling those fields.
You can also have a function that runs onload and basically checks to see if the value of the field matches what was specified in the value="" parameter.
I'm working on a quiz for school but I've bumped into a problem. I got a JavaScript library for custom radio buttons (CUSTOM FORM ELEMENTS by Ryan Fait if it's helping). The script hides the input buttons and adds custom styled spans instead.
Desired behaviour, when I click one a span (added with JavaScript) I want to remove disabled attribute from my "Next Question"-button which when pressed takes you to the next question. I don't want users to accidentally proceed to the next question, without choosing an answer.
The problem is when I press the added spans nothing happens, but when I press another identical span which I have added in the HTML it works just as intended.
The span got the class radio, which I'm doing a lookup on with jQuery.
Short: Can't get jQuery .click() functions to work with spans added using JavaScript earlier in the document.
You are looking for jQuery's live() function. You would do something like:
$(".radio").live("click", function() {
// Enable the button here
});
Your other option would be to use the new delegate() function if you have jQuery 1.4.2 included on your page. Similar syntax, however, it only scans within the element it's called on for child elements of the kind you want to bind an eventListener to and I believe it has much less of a performance impact on large pages. (Not applicable in your case, but it's always good to practice with the best tools.)
$("element_containing_radio_buttons").delegate(".radio" "click", function() {
// Enable the button here
});