Monday, March 26, 2012

How do I get Javascript Inside Content Template to fire on postback

I have 3 ASP controls inside of a ContentTemplate (some of mysyntax may be a little off below (doing it from memory here) but you'll get the idea):

<contenttemplate>

<asp:dropdownlist id= "control1" runat="server".../>

<asp:dropdownlist id "control2" runat="server".../.../>

<input type='button' onclick ='changeControlVisibility();' "control1".../>

<script type='Javascript>

'changeControlVisibility();

</script>

</contenttemplate>

Now, the''changeControlVisibility' javascript SETS a hidden value back and forth from 1 to 0 each time its clicked,AND it sets the 'style.visibility' property of both Control1 and Control2 .

So, when the changeControlVisibility runs during the the Load of the page, Control1 is then visible and Control2 is not visible. After the page has been loaded, each time the BUTTON is clicked after that, its the opposite actions (control1 =hidden & control2=visible) to (control1-visible & control2=hidden). This all works great.

The issue is this, when the selectedindexchanged of either of the dropdowns fires a postback (which is what I want) the

<script type='Javascript>

'changeControlVisibility();

</script>

never gets called or run, therefore all the controls within the contenttemplate get set to style.visiblity =visible (so they all appear) becasue that script never gets called during the postback.

Any suggestions on how to get it run or any good workarounds?

Thanks very much and I will immediated mark the issue resolved to the genius who comes up with a solid answer.

You can solve this by having that JavaScript outside of your UpdatePanel (in the <head> tag would work) of your page and then call it everytime the UpdatePanel gets updated. Have a look at the PageRequestManager class which enables you to execute JavaScript before, during, after UpdatePanels are loaded.

<

scripttype="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
function pageLoaded(sender, args){
if (args.get_panelsUpdated().length > 0){
changeControlVisibility();
}
}
</script>

That's a basic example and you can add better checks for specific UpdatePanels but you get the idea.

Al


thanks, that sound like the answer.

last thing, it looks like in your example that the line 'Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);'

is adding a new script, if I am wanting to call an existing one, is there a differnt even I should use?


Never mind, i get it now...

So when I create my javascript then

'Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

is actually part of my actual javascript.

thanks so much!


Cool. Yes.

I had started to reply to your other message:

"
pageLoaded is name of the handler method that gets called, you can name it anything and have it execute any existing script also.

Details about the pageLoaded event can be found here:
http://ajax.asp.net/docs/ClientReference/Sys.WebForms/PageRequestManagerClass/PageRequestManagerPageLoadedEvent.aspx
"

Sounds like you've got it.

Cheers,
Al


Thanks Al you made my day!

No comments:

Post a Comment