current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

I have a page that displays an error div with a class of 'validation-errors' if the user enters an incorrect value into a textbox.

Is there a way to execute a javascript function (it adds a CSS property to a button) when the error div is displayed? The function is currently called in window.onload.

Is there a way to execute the javascript function if window has changed / element added?

share|improve this question
1  
Have you considered using JQuery to do this? –  Liam Sep 19 '12 at 11:59
    
Yes, but I'm not sure how I would do that. It's an MVC website, and I don't actually know/understand how the validation message is being displayed - if I did, I could add a call to the function to apply the CSS to the button when the error div/message is displayed. The button basically needs to be updated when this error message is displayed. –  Theomax Sep 19 '12 at 12:02
    
Here's a basic introduction to JQuery: docs.jquery.com/How_jQuery_Works. It's basically a JavaScript library that allows you to, among other things, select elements based on the class, id, etc. and trigger events. –  Liam Sep 19 '12 at 12:05
    
@Liam - Thanks, I can see already it's better than Javascript –  Theomax Sep 19 '12 at 12:08
    
@aspdotnetuser If you just write the CSS-rules in your stylesheet they will apply even to nodes added with AJAX. –  11684 Sep 20 '12 at 19:59
add comment

3 Answers

up vote 3 down vote accepted 
$('.validation-errors').bind('DOMSubtreeModified', function () {
  if ($('.validation-errors').length) { 
    // code
  }
});
share|improve this answer
    
It doesn't appear to work - I'm trying to display an alert() to test if it works. I've included it inside <script> tags. I'm not sure why it doesn't work. –  Theomax Sep 19 '12 at 12:15
    
I think the problem here is that the div (validation-errors) doesn't exist initially, it's created dynamically, when errors occur. Am I correct? –  tborychowski Sep 19 '12 at 13:15
add comment
up vote 2 down vote

If you have jQuery on the page:

if ($('.validation-errors').length){ /*your code here */ }

in pure JS it would be something like this:

if (document.getElementsByClassName("validation-errors").length){ /*your code here */ }
share|improve this answer
    
Does the JS code need to be executed for window.onload? If so, how can I make it execute each time the page is updated? i.e the erorrs div is not always displayed. –  Theomax Sep 19 '12 at 12:18
    
@aspdotnetuser Yes, it must be executed after the page is loaded. I wouldn't try to check if the whole page is updated (bad idea), I'd rather find the function that creates these error divs and attach it there. –  tborychowski Sep 19 '12 at 15:28
add comment
up vote 1 down vote

if you can use jQuery, you can do

$(".validation-errors").live(function() {/* do whatever you want when your error div exists */ });
share|improve this answer
    
That sounds great. I will give that a go and post back later. –  Theomax Sep 19 '12 at 12:04
    
Just remember that "live" function is deprecated in recent releases of jQuery and should be avoided. –  tborychowski Sep 19 '12 at 13:12
    
@tborychowski Better? –  11684 Sep 20 '12 at 6:51
    
@aspdotnetuser you might want to see tborychowski's comment body my edit in response to that. –  11684 Sep 20 '12 at 6:53
    
@11684 There is no such event as "live" –  tborychowski Sep 20 '12 at 8:56
show 4 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.