Showing validationsummary with some kind of javascript effects Options
darrenjferguson
Posted: Friday, July 04, 2008 4:36:58 PM

Rank: Fanatic

Joined: 3/19/2008
Posts: 219
Location: London, UK
Hello All,

I've been working on AJAX blog comments for my Umbraco blog using a combination of .net UpdatePanel and jQuery.

Has anyone ever managed to combine the two so that .net elements such as a ValidationSummary can be show/hidden using a javascript library (jQuery) - to add some nice effects - Fade - Slide - background colour changes etc.

Thanks

Darren Ferguson - Umbraco level 2 certified
www.darren-ferguson.com - www.fergusonmoriyama.com
warren
Posted: Friday, July 04, 2008 5:17:35 PM

Rank: Addict

Joined: 7/19/2006
Posts: 783
Location: Leigh-on-Sea, Essex, UK
Yeh this is possible to do Darren, add a CSS class to the ValidationSummary control and display = dynamic

Then you could do something like this - fadeOut the validation Summary

Code:
$().ready(function(){

    $("#FormBuilder .fadeMe")
        .fadeIn(2000)
        .animate({opacity: 1.0}, 5000)
        .fadeOut(2000, function() {
            $(this).hide();

        });
});



The animate is used as a pause method, as its already at full opacity it doesn't do anything and acts as a pause.

Warren




Warren Buckley an Umbraco MVP 08-09 & level 1 certified developer
darrenjferguson
Posted: Friday, July 04, 2008 5:32:54 PM

Rank: Fanatic

Joined: 3/19/2008
Posts: 219
Location: London, UK
Em,

Thanks Warren. I'm a little bit lost.

Wouldn't that just fade it every time jQuery is 'ready'? What does the display = "dynamic do?

I forgot to mention that the control is inside a UpdatePanel, so I somehow want to override the 'show event' for the ValidationSummary if such a thing is possible.



Darren Ferguson - Umbraco level 2 certified
www.darren-ferguson.com - www.fergusonmoriyama.com
warren
Posted: Friday, July 04, 2008 5:43:33 PM

Rank: Addict

Joined: 7/19/2006
Posts: 783
Location: Leigh-on-Sea, Essex, UK
OK the dyanmic setting on the control shows the Summary control only if validation fails and hence the css class you add will then get picked up by jQuery.

However if you use static for the display method it basicalys hides the control in the HTML with an inline style="display:none" and jQuery will still see this in the page and start to run your fade effect.

Quote:
I forgot to mention that the control is inside a UpdatePanel, so I somehow want to override the 'show event' for the ValidationSummary if such a thing is possible.


I'm not sure what you want to do here Darren?

Im on MSN for a bit if you need to discuss.
Warren



Warren Buckley an Umbraco MVP 08-09 & level 1 certified developer
darrenjferguson
Posted: Friday, July 04, 2008 5:53:03 PM

Rank: Fanatic

Joined: 3/19/2008
Posts: 219
Location: London, UK
Hi Mate,

MSN is blocked from here.

My explanation wasn't clear enough probably.....

The show of the ValidationSummary is working fine. Somewhere within all the MS provided script it gets shown when I hit my submit button and some field validators fail.

What I want to do is define how the validator is shown, so intercept the event and use a jQuery effect instead.

I'm out of the office and to the pub now so I'll dig into this more tomorrow!


Darren Ferguson - Umbraco level 2 certified
www.darren-ferguson.com - www.fergusonmoriyama.com
warren
Posted: Friday, July 04, 2008 5:57:28 PM

Rank: Addict

Joined: 7/19/2006
Posts: 783
Location: Leigh-on-Sea, Essex, UK
Yeh this is not a problem. If you try what I said it should work mate.

As when you click submit and it fails the HTML is inserted and jQuery can then do its magic by fadingOut after a set period of time.

If you dont want it to just show you may have to with jQuery start off by hiding the element first then continue with what you want to do.

//Warren


Warren Buckley an Umbraco MVP 08-09 & level 1 certified developer
darrenjferguson
Posted: Friday, July 04, 2008 6:01:27 PM

Rank: Fanatic

Joined: 3/19/2008
Posts: 219
Location: London, UK
sorry i am probably being thick.

the bit I don't get is that your jQuery will fire when the DOM is ready, not when the validationsummary is shown.

because I am using a updatepanel the DOM/page isn't reloading each time i submit, it uses AJAX/partial page loading.
I need to execute the jQuery you provided *but* when the validation fails.

Darren Ferguson - Umbraco level 2 certified
www.darren-ferguson.com - www.fergusonmoriyama.com
warren
Posted: Friday, July 04, 2008 6:06:21 PM

Rank: Addict

Joined: 7/19/2006
Posts: 783
Location: Leigh-on-Sea, Essex, UK
So when the page loads the first time the validationsummary is already in the HTML? If not then this will work fine.

Did you change the property on the ValidationSummary for display?

Warren



Warren Buckley an Umbraco MVP 08-09 & level 1 certified developer
darrenjferguson
Posted: Friday, July 04, 2008 6:17:22 PM

Rank: Fanatic

Joined: 3/19/2008
Posts: 219
Location: London, UK
warren wrote:
So when the page loads the first time the validationsummary is already in the HTML? If not then this will work fine.

Did you change the property on the ValidationSummary for display?

Warren



No it isn't, but as the requests are ajax the jQuery document ready will only fire once the first time the page loads.....

I am reading this http://msdn.microsoft.com/en-us/library/bb386571.aspx

I think it holds my answers :)

I'll post here when I crack it!



Darren Ferguson - Umbraco level 2 certified
www.darren-ferguson.com - www.fergusonmoriyama.com
Users browsing this topic
Guest


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.