Catch changes in dynamicly updated tables - javascript

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!

Related

jQuery toggle on click out

I have a series of spans (togglers) and a series of divs (toggled). I created a make_toggle function that receives the toggler and its corresponding toggled as arguments.
Everything seems to work kind of ok up to the point where I try to implement a "toggle on click out". What I've tried is to attach to the html click event a function that checks whether the target of the click is contained within the toggled element. On toggle "back", I would then detach the handler so I am only checking when I need.
var check_if_clickingout = function(e) {
if (!toggled[0].contains(e.target)) {
toggle();
}
};
See fiddle: https://jsfiddle.net/andinse/65o211nc/11/
It doesn't even seem to work anymore but when it used to, it was triggering many more times than necessary (which was the reason for me to come here ask for help).
What am I doing wrong? What is the most effective way to go about this kind of situation where I am giving functionality to a series of independent DOM elements?
Just putting this out here that this seems to do the same thing.
$("span").click(function() {
$(this).siblings("div").toggleClass("blue");
});
Maybe I am missing something more that I am not seeing in your example.
See more: http://api.jquery.com/toggleclass/

jquery event added multiple times

I have a fairly large javascript class that generates an complete ajax-generated application. In one version of the ajax page there are a number of dropdown menus. These menus can get created and destroyed at various points during the life cycle of the application.
This is the behaviour I see:
User opens page version 1: no dropdowns
User goes to page version 2: dropdowns added with jQuery onchange event. Work as intended.
User returns to version 1 of page, dropdowns removed.
User returns to version 2 of page, dropdowns added again (using same element IDs)
dropdowns will now have 'double' event handling, triggering the event for each onchange.
The behaviour I'm struggling with is as follows.
On the initial page load, I add an onchange event:
function myClass(){
//Initiate once for current and future elements.
jQuery(document).on('change',".mydropdowns",
function(e){
self.submitDescriptionChange(this);
}
);
}
myClass.prototype.submitDescriptionChange = function (el){
doSomeAjaxStuff();
}
This works fine, except that each time the user goes to pages version 1 and returns to page version 2, the event gets multiplied. Very quickly you can end up with the event firing 20 times per change event, which in this case creates 20 ajax calls.
Logically, by using jQuery.off() I should be able to avoid this. But what happens instead is that the event is removed from both past and future elements, which means that when I recreate page version 2, the dropdowns won't work.
Every way I have tried this (and I've tried LOADS), I either end up with no event firing, or multiple events firing. I cannot seem to find a way to add/replace the elements whereby the event is only ever fired once.
Any ideas how I can solve this?
UPDATED
Yeah, so it turns out I misdiagnosed the problem. It actually came from repeatedly rebinding a 'hashchange' event, rather than rebinding the onchange event. Apologies for misdirection. Moving to bind() function to somewhere where it only executed once fixed the issue.
Since you do not want .off() to remove your events from other pages, I would suggest using namespaces for your events. For example, something like this:
function myClass(pageno) {
var pref_ev = 'mypage' + pageno + '.' + 'change';
$(document).off(pref_ev).on(pref_ev, ".mydropdowns", function(e) {
self.submitDescriptionChange(this);
});
}
This way, each page will have its own "change" event such as "mypage1.change". The event is still registered normally as a change event; the prefix namespace "mypage1" is used to only perform the .off() call on the right events.
I am not sure what plugin you are using for your dropdown menus but there should be a "destroy" method on that plugin. If you call that when removing the dropdowns that should work. Also, if you are only hiding the second page and not actually removing it from the DOM you dont have to re-invoke the plugin as the plugin will still be saved on the element.

jQuery late binding of Ajax elements doesn't work

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

how to prevent mutiple registration of a single event handler in jquery

I have a <div> box displaying search message and some radio button for recent message. There is link option for slide toggle.
When you click on that link it will show some input field and check box and radio button. And at the same time the text of link change to hide option. If you click on that it will hide all the input and checkbox option.
When I refreash the whole page its working properly but when that paticular box or part is refreashing then the box is hiding and imediately hides. If you refresh that portion n number of times the box is going on toggling continously. I think the problem is in registration of event handler. So please give me some solution.
CODE :
$(document).ready(function() {
$(".SideBar-blockheader1").click(function() {
e.preventDefault();
$(".SideBar-blockcontent1").slideToggle("fast");
});
$(".SideBar-optionheader").click(function() {
$(".SideBar-optioncontent").slideToggle("fast");
$(this).text($(this).text() == $("#hideopt").attr('value') ? $("#showopt").attr('value') : $("#hideopt").attr('value'));
});
$(".SideBar-optionheader").text($("#showopt").attr('value'));
$(".SideBar-optioncontent").hide();
});
jQuery has a method, called data() which can be used to extract the attached handler information of an HTML element. You can see if the element has already a click handler, and if it has, then stop re-attaching another handler to it.
if(typeof $('#id').data('events').click == 'object')
{
// A click handler is already attached
}
else
{
// No click handler; Attach one;
}
Although you haven't provided code, I suspect you are using .click(). For jQuery 1.7+ you should be using .on() in delegate mode (the element you bind to is an ancestor, not the clickable element itself) or .delegate() if pre jQ 1.7.
For example:
$('someAncestor').on('click', 'a.specialLink', function(event) {
event.preventDefault();
// the rest of your code for the click handler
})
"someAncestor" is any valid selector that is an ancestor of your link that will not be destroyed, rebuilt, or otherwise manipulated after the DOM is built. It doesn't have to be the direct ancestor.
[updated below after seeing code sample and comments]
There are a few things going on. First, .on() will only work if you're using jQuery 1.7+. Next, .on() can be invoked a few different ways (I wrote about it here: http://gregpettit.ca/2011/jquery-events-its-on/) and you need to be invoking it while delegating an ancestor listener, not simply as a substitute for click. Next, you haven't provided code for your attempted update, only for the original code; it's hard to tell what "didn't work" about trying to use .on(). Moving along, I'm not actually sure what this line is meant to do:
$(this).text($(this).text() == $("#hideopt")...etc...
I can't think of why you would want to try to treat a jQuery object as a variable. I'm not saying the code is wrong, I'm just saying I don't get it. Also, I hate ternary operators... which is part of the reason I don't get it. I much prefer readable conditionals. ;-)
Next, you're calling preventDefault() on "e" but you're not passing "e" into your functions. You might just be getting a JavaScript error, period. (e is undefined)
Then there's attr("value") which I believe should actually work. But why not use .val() if it is indeed a node that HAS a value attribute?
Finally, there is tonnes of room for caching your objects. Every time you see that an object is being used more than once, you can benefit (to varying degrees of performance and legibility) from caching it. I have not updated the code with any caching, though-- that's really something for a whole other "How can I best cache my objects?" question.
Anyhow... to solve the problem, you first have to choose a valid ancestor. This can be any ancestor that isn't destroyed during the process of loading in your new data. This could be anything, but the closest ancestor is the best. It might be a section wrapper, but if you're truly desperate it could be a page wrapper or even the body tag. If you bind to document, you're reproducing the deprecated .live() function, which I definitely recommend against. I have used a placeholder selector, ".section" but you need to figure out what an appropriate ancestor is on your page.
$(document).ready(function()
{
$(".section").on("click", ".SideBar-blockheader1", function(e)
{
e.preventDefault(); // probably not necessary if there's no default click behaviour
$(".SideBar-blockcontent1").slideToggle("fast");
});
$(".section").on("click", ".SideBar-optionheader", function(e)
{
e.preventDefault(); // probably not necessary if there's no default click behaviour
$(".SideBar-optioncontent").slideToggle("fast");
$(this).text($(this).text() == $("#hideopt").val() ?$("#showopt").val() : $("#hideopt").val());
});
$(".SideBar-optionheader").text($("#showopt").val());
$(".SideBar-optioncontent").hide();
});

onChange event not firing on a textbox in Chrome

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.

Categories