Going For AJAX: contenttemplate

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):

<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.

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!

How do I dynamically create updatepanel and then contenttemplate linkbutton and triggers a

I need to be able to create multiple updatepanels which have a link button in them. I have no idea how many updatepanels I'm going to have which have link buttons as the data coming back is from a database. Right now I'm taking the data from a database and putting that into a datalist.

It all works great until I wanted to add a updatepanel to it; then it said the updatepanel cannot be used in that context. So, if it cannot be as simple as what I tried below, how do I dynamically create an updatepanel for each row of data returned from the database?

Each row in the database has a unique ID so the ID of the linkbutton and the asyncpostbacktrigger controlid could be assigned that unique ID.

This works fine without adding updatepanel:
<asp:ScriptManager ID="ajaxClientComponentMgr" EnablePartialRendering="true" runat="server">
<Services>
<asp:ServiceReference Path="~/AjaxWebService.asmx" InlineScript="true" />
</Services>
<Scripts>
<asp:ScriptReference Path="~/Javascript/ajaxJScript.js" />
</Scripts>
</asp:ScriptManager>

<asp:DataList ID="DataSource_Stories_Display" runat="server">
<ItemTemplate>
<asp:Table CssClass="stories_table_block" runat="server">
<asp:TableRow runat="server">
<asp:TableCell CssClass="stories_right_content" runat="server">
<span class="stories_content_header"><%#DataBinder.Eval(Container.DataItem, "Title Name:")%></span><br />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</ItemTemplate>
</asp:DataList>

This complains of being "not in this context" after adding updatepanel:
(Note: unique_id_for_this_link added just to show that each iteration would have a unique number at that location)

<asp:ScriptManager ID="ajaxClientComponentMgr" EnablePartialRendering="true" runat="server">
<Services>
<asp:ServiceReference Path="~/AjaxWebService.asmx" InlineScript="true" />
</Services>
<Scripts>
<asp:ScriptReference Path="~/Javascript/ajaxJScript.js" />
</Scripts>
</asp:ScriptManager>

<asp:UpdatePanel ID="something_unique_id_for_this_panel" ChildrenAsTriggers="False" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:LinkButton ID="unique_id_for_this_link" OnClientClick="paneDataRequest();return false;" CssClass="story_link" runat="server">Click Me</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="unique_id_for_this_link" />
</Triggers>
</asp:UpdatePanel>

</asp:TableCell>
</asp:TableRow>
</asp:Table>
</ItemTemplate>
</asp:DataList>

UPDATE: Okay...Swapping where UpdatePanel was located fixed part of the issue.

UpdatePanel, if it is outside of Datalist will work as follows:

<asp:UpdatePanel ChildrenAsTriggers="False" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:DataList ID="DataSource_Stories_Display" runat="server">
<ItemTemplate>
<asp:Table CssClass="stories_table_block" runat="server">
<asp:TableRow runat="server">
<asp:TableCell CssClass="stories_right_content" runat="server">
<span class="stories_content_header"><%#DataBinder.Eval(Container.DataItem, "Title Name:")%></span><br />
<asp:LinkButton OnClientClick="paneDataRequest();return false;" CssClass="story_link" runat="server">Click Me</asp:LinkButton>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>

New problem discovered!

If I try to assign an ID to the asp:LinkButton (a unique value for each row of database data) I just end up getting all types of errors:

<asp:LinkButton id="some_unique_id" OnClientClick="paneDataRequest();return false;" CssClass="story_link" runat="server">Click Me</asp:LinkButton>

If the ID is omitted, it works fine...not what I'm after.

Next Question:

How do I assign a unique ID number to LinkButton? If I cannot assign it, how can I determine the IDs which are assigned to it so that I can build the <triggers></triggers> part of the updatepanel control?

UPDATE 2:

Visual Studio .Net Beta 2, using the scenario above from second post, does not auto-generate IDs (when you view source of the generated page) for:

<asp:LinkButtonOnClientClick="paneDataRequest();return false;"CssClass="story_link"runat="server"></asp:LinkButton>

Visual Studio .Net Beta 2, using the scenario above from second post, does auto-generate name values (although not IDs) for buttons such as:

<asp:ButtonOnClientClick="paneDataRequest();return false;"Text="default"runat="server"></asp:Button>

Monday, March 26, 2012

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

How do I dynamically create updatepanel and then contenttemplate linkbutton and triggers a

Going For AJAX

Blog Archive

About Me