Going For AJAX: content

Showing posts with label content. Show all posts

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 change the Content in Accordion?

Is there any way to change text of the Content in Accordion dynamic?Hi falconyin,

Yes - you can access MyAccordion.Panes[0].Content.ContentContainer which derives from Panel, or you can include an <asp:Label> that you get access to with MyAccordion.FindControl.

Thanks,
Ted

Saturday, March 24, 2012

How catch updatepanel in client?

When back button pressed in browser, updatepanel updates again...

I need catch updatepanel content in client...

can i?

I have an UpdatePanel that update in client with delay. i need catch content of this UpdatePanel in client, because this content is shared in all pages.

Best sample for resolving this problem is Yahoo Mail... update panle update all contet in all CallBack... i need catch contents in client...

Please help me... tnx

i need help Confused

plz......

How can I use updatepanel to do a partial page update of the contents of a division (div).

Hello,

I am new to AJAX and know I must be missing the obvious with this question. I would like to dynamically change the HTML content between opening and closing HTML DIV tag. The partial page update examples that I have seen, update controls rather than content such as HTML with in a division. The example used to illustrate the problem is trivial. In my actual application, the updated content will actually come from a database and include HTML tags.

Thanks in advance for your assistance.

The following steps lead to an example of my question:

Start a new AJAXEnabled Web Application using Visual Studio 2005.

In design mode, drag an Updatepanel from the AJAX Extensions tools to the designer.

Drag a DIV from the HTML Tools to the Updatepanel.

Drag a Button from the Standard Tools to the Updatepanel, but outside the DIV box.

Switch from Design to Source Mode and type the following line between the Opening and Closing Div tags:
This is the link displayed when the page is loaded: <ahref="http://www.someplace.com">someplace</a><br/>

Here is all of the generated code up to and including step 6:

<%@dotnet.itags.org.PageLanguage="vb"AutoEventWireup="false"CodeBehind="Default.aspx.vb"Inherits="AJAXEnabledWebApplication1._Default" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Untitled Page</title>

</head>

<body>

<formid="form1"runat="server">

<asp:ScriptManagerID="ScriptManager1"runat="server"/>

<div>

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<divstyle="width: 160px; height: 100px">

This is the link displayed when the page is loaded:<ahref="http://www.someplace.com">someplace</a><br/>

</div>

<asp:ButtonID="Button1"runat="server"Text="Button"OnClick="Button1_Click"/>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Looks like duplicate post

http://forums.asp.net/t/1125367.aspx

Wednesday, March 21, 2012

How can I reset the AJAX Timer component if the mouse is moved!

I have a few pages that use UpdatePanels and Timer components to refresh the content periodically. However I need to have it refresh only when the mouse hasn't been moved for a minute so it doesn't interrupt the user.

I have been using a javascript timer to refresh a custom component that uses callbacks but it is interfering with the AJAX UpdatePanel and causing State Corruption so I would like an all AJAX solution if possible.

Question 1: Can mouse movement reset an Ajax Timer, if so how?

Question 2: Is there a way to trigger the UpdatePanel from Javascript?

1. Use the method show here to get a refrence to the behavior for the timer, thenhttp://ajax.asp.net/docs/ClientReference/Sys.UI/BehaviorClass/BehaviorGetBehaviorsByName.aspx, call

Sys$UI$_Timer$_stopTimer & then this

Sys$UI$_Timer$_startTimer

Not sure if that will work exactly, but, through that or somthing similar you should be able to manipulate the timer on the client side.

2. Take a look at this post, it has a few differnt examples of how to do an update from javascript:http://forums.asp.net/thread/1541012.aspx

Thanks for the help there. I now need to figure out which behaviour name to look for in the timer, i guess?

Easily referencing behavior instances

It used to be tricky to get a reference to a behavior from client script, but now you can simply add a "BehaviorID" attribute to your control's property specification and it will be easily accessible on the client via ASP.NET AJAX's Sys.Application.findComponent(id) method or its $find(id) shortcut. (Note: If BehaviorID isn't specified, the behavior's ID on the client will be the same as the extender control's ClientID.) See DynamicPopulate or ResizableControl for examples.

I guess I should have added... that its used for the AJAX toolkit, so you might not be able to specify the BehaviorID, but you still should be able to get it with the find method.

I have tried the following code but it doesn't change the timer, it still goes off after a minute:

code = "function MainMenuPage_onmousemove(){"
code += " var b = $find('" & MT.ClientID & "');"
code += " if(b){"
code += " mouse_moved=1;"
code += " b.Sys$UI$_Timer$_stopTimer;"
code += " b.Sys$UI$_Timer$_startTimer;"
code += " }"
code += "}"

Please excuse the code formatting above (I create strings of the code snippets I need for the page and then useRegisterClientScriptBlock)

I'm not receiving any Javascript errors when I move the mouse. I know it's finding MT.ClientID as I use another javascript timer to display the mouse_moved variable. Perhaps I'm not changing the actual instance of the timer? Wild guess here. I really need to have more time to study the nitty gritty bits of AJAX but as it is I hardly have time to do this much.

I appreciate your time on this. I hope you have more bright ideas because I'm fresh out.

I tested the below code & it seems to work ... notice how i removed the Sys$UI$_Timer$ from the method call and added a () at the end

 code ="function MainMenuPage_onmousemove(){"; code +=" var b = $find('" + Timer1.ClientID +"');"; code +=" if(b){"; code +=" mouse_moved=1;"; code +=" b._stopTimer();"; code +=" b._startTimer();"; code +=" }"; code +="}";

Awesome. That worked.

Thank you very much.

how can i make draggable/dockable elements on a web page

I want to create a web page where I can drag and drop content, and dock it on other parts of the page. I also want that content to remain in the most current position on the page when the page is reloaded. I want to do something along the lines of what they did atPageflakes but I have no clue how to implement it. Can anyone offer suggestions? I just need some pointers as how I should approach this.

Thanks!

I have discovered the wonderful world of webparts, which answers my question here. Check outthis article if you want to learn to create these kinds of sites too.