I have the following code to bind some validation logic to be fired when a user updates the value of a textbox. I expect that the //Do some stuff here code will execute when any of the textboxes it is bound to lose focus.
function RegisterHoursValidationHandlers() {
$('.topic-frame-body input[type=text]').live('change', function () {
//Do some stuff here
});
}
This works exactly as I expect in IE, Firefox and Safari. However, the event never fires in Chrome and I have no idea why.
UPDATE: I was able to get the desired effect by changing 'change' to 'blur'. Though this still doesn't explain why it doesn't worh with 'change'.
There's no known quirk about chrome. (the change event is supported across all browsers)
Example with live showing it working against dynamic content.
Test it here:
There is a piece of information or an assumption being made here that makes this unsolvable.
UPDATE: If it works when you change it to blur, it is possible that you are overwriting the previous event or function. By changing it to blur, whatever is overwriting it no longer will because it is a a different event.
This would also explain why you are not seeing any errors. (keep in mind, I believe that jQuery will chain events bound to the same elements, but live() is a bit of a special case - but that fact might point to it being the function, not the event binding)
Try using .delegate() instead http://api.jquery.com/delegate/
I've tried you code in both FF and Chrome - http://jsfiddle.net/B3aRy/ - It worked in both. So maybe its an issue elsewhere in your code?
What version of Jquery are you using?
I can't see the issue myself, but .live does not support the "change" event until jquery 1.4+
Try:
function RegisterHoursValidationHandlers() {
$(".topic-frame-body input[type='text']").live('change', function () {
//Do some stuff here
});
}
With the quotes around 'text' as I have it. Worth a shot.
Or try:
$(".topic-frame-body input:text").live();
The point being, I think the problem is in the details of how you're targeting the input field, rather than in the method.
Related
I have an APEX application where there are many drop down items. I've bound change event handlers to them using the bind function of jQuery.
Now when I load the content of a drop-down programmatically using $('#ELEMENT').trigger('apexrefresh'), the drop-down reloads but the change event handler fires automatically.
How do I prevent this from happening? I tried avoiding binding the event handler using bind and instead adding the onChange attribute to the element. The incorrect behaviour was still present.
Here is the skeletal code:
$(document).ready(function()
{
$('#P7021_MSG_DEF').bind('change', function(e)
{
console.log('bound function onChange() msg_def');
updateStartWord();
}
);
});
function updateMsgDef()
{
console.log('function updateMsgDef() ');
$('#P7021_MSG_DEF').one('apexafterrefresh', function()
{
if( $x('P7021_RESTORE_CHK').value == 'Y')
{
setdefault('P7021_MSG_DEF', vJson.msg_def);
}
updateStartWord();
}
).trigger('apexrefresh');
}
In the above code, when the updateMsgDef is called from another function the function updateStartWord() gets called twice - once by updateMsgDef() itself and again by the onChange handler that was bound to P7021_MSG_DEF item.
If anyone could help on this?
Calling $('#ELEMENT').trigger('apexrefresh') is going to trigger the change event. Short of going back to the drawing board altogether, the solution is going to be a hack whatever you do. You could poke about in (and quite possibly break) Oracle's javascript. You could write your own AJAX to populate the select list.
The easiest way might be to check in your onChange event which element currently has focus, eg:
onChange = "if($( document.activeElement).attr('id')=='YOUR_PAGE_ELEMENT')
{ $( document.activeElement).trigger('apexrefresh'); };"
If the user has changed the select list, it should still have focus. There's no guarantee that will work in all browsers, but I think it should be ok in current Chrome and IE versions.
I've been in a similar situation to yours, and have come to accept that if the page logic is too complicated to implement using DAs, maintaining it is likely going to be a nightmare whatever happens. Much as I like "proper" programming, Apex is really all about the declarative controls.
I have a page that loads tables dynamically. I want to check if any of the tds contain a keyword, and depending on that change some CSS styling.
On first load everything works well, but when something changes in the table, my function doesn't get triggered.
Here is my code. The 1st block works well, but the 2nd doesn't?
$( document ).ready(function() {
$("tr td:contains('*')").each(function(){
$(this).parent("tr").css({ "background-color": "red" });
$(this).parent().children().css({ "background": "inherit" });
});
});
jQuery('body').on('change', '.content', function () {
$("tr td:contains('*')").each(function(){
$(this).parent("tr").css({ "background-color": "red" });
$(this).parent().children().css({ "background": "inherit" });
});
});
If I understand correctly, you're attempting to listen for changes in the table itself, meaning inner html changes, added rows, etc.
Unfortunately, the reason you're not seeing the change event firing is because that event only fires when the value of the element is changed; there is no such property for tables, rows and cells.
From jQuery's documentation on the change event, found here:
This event is limited to elements, boxes and
elements. For select boxes, checkboxes, and radio buttons,
the event is fired immediately when the user makes a selection with
the mouse, but for the other element types the event is deferred until
the element loses focus.
The reason why it works the first time is because, of course, you're not wrapping it in the change event; it is firing immediately when your on-ready function fires. Your selector works fine, of course, the table is simply never firing the event you're looking for.
I've not personally done this myself, but one solution found on SO can be seen here, which involves setting up a type of poller which constantly checks whether anything has changed. It also explains how you can then set up a custom event, which you can fire, thus further separating your code into manageable pieces.
Apparently they also discuss using jqGrid, which has a refresh event you may want to consider as well.
Hope that helps.
Edit
You might also be able to make use of the MutationObserver, whose documentation can be found here, and what looks like a pretty good example of its use on SO here. In the SO example, the poster indicates they tested it on browsers as far back as IE 7, however according to this, MutationObserver is not 100% compatible by itself (maybe he uses a polyfill), so make sure you test it properly.
Wrap the on change function with document.ready
$(function(){
/*code*/
});
Thanks everybody for your help, i found solution using custom build plugin that i found here:
jQuery watch div
It works like a charm for me!
Trying to make a jsfiddle so I can post it on here and get some help with a problem; however, I'm having a problem getting jsfiddle to act as expected, so I'm having a problem trying to document my problem!
http://jsfiddle.net/eidsonator/he4Vc/#base
I'm trying to add a blur event handler to a input with id of "part". My alert fires as soon as the page loads (which it shouldn't) and doesn't fire when focus is lost. This behavior persists in chrome and in firefox (I'm coding for an internal web app, so I can ignore ie!)
$("#part").on('blur', alert('lost focus'));
I've changed the load method, and tried wrapping it in my own $(document).ready(function() {}); as well as using .blur() and different versions of javacript... any clues?
Thanks!
You are calling alert straight away, and passing the return value of it to the .on() method. Instead, you need to pass a reference to a function that can be invoked when the event is received:
$("#part").on('blur', function () {
alert('lost focus')
});
Here's an updated fiddle.
you have written a wrong syntax .see the docs for more info,and change your code to
$("#part").on('blur', function(){
//do something
});
I don't know why, but this code makes IE9 and Safari crash, and does not work at all in Opera.
$('#contentPage').on('DOMSubtreeModified', function(){
if($(".iframey[date-current]").length){
$(".iframey:not(.hidden)").prevUntil("iframe").addClass('smaller');
}});
What should I do to make this code work in all browsers?
---edit---
The code in jsfiddle
http://jsfiddle.net/rzP5S/
Working grate in chrome and firefox
You are modifying the dom in a dom modified event handler, you should check if the modification was due to your code in the handler to prevent an endless loop.
Also
Warning! the DOMSubtreeModified event type is defined in this specification for reference and completeness, but this specification deprecates the use of this event type.
http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified
What #Musa is saying is correct. There is an infinite loop. Is there any reason why you need to handle it in DOMSubtreeModified? Can't you just do the work within the click event instead? This seems to behave the same:
$(".onePost").live("click", function() {
$(".onePost").removeClass('smaller');
$("iframe")
.addClass('hidden')
.removeAttr('src')
.removeAttr('date-current');
$(this).nextAll("iframe:eq(0)")
.removeClass('hidden')
.removeAttr('style')
.attr({src: $(this).data('href')})
.attr('date-current', 'here');
if($(".iframey[date-current]").length){
$(".iframey:not(.hidden)").prevUntil(".iframey").addClass('smaller');
}
});
http://jsfiddle.net/rPPSj/
I'm really stuck with a jQuery issue and I hope someone can help me out...
So I have a list of options on the left, and when you click on one, a form is generated via Ajax on the right. There's this element in the form:
<input type="text" class="value" value="something">
And what I want to do is to call
$(".value").tagsInput();
which is a jQuery plugin that works pretty much like Stack Overflow's 'Tags' input field when you ask a question.
So I tried this:
$(document).ready(function() {
$(".value").on("load", function () {
console.log("Tags Input");
$(".value").tagsInput();
});
});
and nothing is printed out. I've also tried this:
$(document).on("change", ".value", function () {
console.log("Tags Input");
$(".value").tagsInput();
});
and it doesn't work either. I'm wondering where I did wrong. Can anyone help me out?
As pointed out by Shabnam, the "change" event is not what you want, as it is fired only once the field is blurred.
Anyways, from the plugin documentation, it looks like you don't have to call that function every time a key is pressed, but it attaches its own event handlers autonomously.
So, probably you should be fine with just:
$(document).ready(function() {
$(".value").tagsInput();
});
Your .on handler will never work, as the load event is fired only by document when the page is ready.
If you want to debug things a bit, have a look at the supported callbacks, such as onChange.
SIDE NOTE
I don't like how that plugin is written, as it clogs the "global" jQuery.fn namespace with lots of functions, while jQuery documentation recommends not doing so (see: Namespacing).
UPDATE
See here: http://jsfiddle.net/aFPHL/ an example of this working (the .load() was monkeypatched to avoid having to call an actual URL, but its behavior is pretty much the same as the real one).
"change" event gets fired when the input element loses focus. If you want ajax call at the end of each key input, try using keyboard events