Showing posts with label hidden. Show all posts
Showing posts with label hidden. Show all posts

Saturday, March 24, 2012

Trigger UpdatePanel using Javascript

Hi everyone, I'm trying to refresh an updatepanel using javascript.

What I did worked out, I put a hidden button inside my panel and set it as a trigger then called mybutton.click() in the javascript. The problem is that this doesn't work with firefox, a full postback happens when my function is called. Anyone know a work around that works fine in IE and firefox?

Thank you.

http://weblogs.asp.net/rajbk/archive/2007/01/21/refresh-updatepanel-via-javascript.aspx

Do you mind telling us what scenario you are using this in?


hello.

the strategy you're using seems to be correct. can you post some demo code?

Thank you for the replies, what i'm doing is I have a modalpopup on my page where a user uploads photos, then when the modalpopup is closed, I have the OnOkScript call the button click event and update my updatepanel which contains thumbnails of images, so when a person uploads a photo using the modalpopup, then closes it, the photo they added shows up on the list of thumbnails.

Here is a code sample...(i'm using a label not photos for testing now)

My Code Behind:

protectedvoid btnRefreshThumbnails_Click(object sender,EventArgs e)

{

lblTest.Text =

"event fired";

}

Javascript:

function

refreshImages()

{

document.getElementById(

'<%= btnRefreshThumbnails.ClientID %>').click();

}

Page Code:

<

asp:UpdatePanelrunat="server"id="upThumbnails"UpdateMode="Conditional">

<

ContentTemplate>

<asp:Labelrunat="server"Text="Label"id="lblTest"></asp:Label><asp:Buttonrunat="server"Text="abc"id="btnRefreshThumbnails"CausesValidation="false"OnClick="btnRefreshThumbnails_Click"style="display:none;"></asp:Button></ContentTemplate><Triggers><asp:AsyncPostBackTriggerControlID="btnRefreshThumbnails"EventName="Click"></asp:AsyncPostBackTrigger></Triggers>

</

asp:UpdatePanel><cc1:ModalPopupExtenderID="ModalPopupExtenderUploader"runat="server"OkControlID="imgBtnClose"DropShadow="false"TargetControlID="btnUploadPhotos"PopupControlID="pnlUploader"OnOkScript="refreshImages() "BackgroundCssClass="bg">

</cc1:ModalPopupExtender>

I'm going to give the hidden field method a shot to see if it works well in firefox...Thanks.


The hidden field worked!! Maybe firefox just always posts back when you call the click() method.

Thank you for all the help.


hello.

hum...well, this code is working ok here:

<%@. Page Language="C#" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" id="manager" />
<asp:UpdatePanel runat="server" id="panel">
<ContentTemplate>
<%= DateTime.Now.ToString() %>
<asp:Button runat="server" id="bt" style="display: none" />
<input type="button" value="partial postback" onclick="$get('bt').click()" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html

Hire is my solution, that works in IE, FF, Opera:

<script type="text/javascript">function updateTime(param) { var hiddenField = document.getElementById("<%=hidCurrentFileId.ClientID%>"); hiddenField.value = param; __doPostBack('<%=hidCurrentFileId.ClientID%>','');}</script><asp:HiddenField ID="hidCurrentFileId" runat="server" Value="" /><asp:UpdatePanel ID="updPanel" UpdateMode="Conditional" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="hidCurrentFileId" EventName="ValueChanged" /> </Triggers> <ContentTemplate><%= hidCurrentFileId.Value%> <br/><%= DateTime.Now.ToString();%> </ContentTemplate></asp:UpdatePanel>

Hello, I have two questions about the above code:

1) How do you capture this event on the server?

2) If the "ValueChange" of the hidden field causes the updatepanel to post back, doesn't the "__doPostBack('<%=hidCurrentFieldID.ClientID%>',''); cause the ENTIRE PAGE to postback?


Trying to do the above from user controls doesn't work, but I got the above code working with some changes.

1) Added a 'return false;' after the __doPostBack...this stopped the full page postback

2) I placed the hidden field INSIDE the update panel and set a trigger with an OnValueChanged="myCodeBehindFunction"

3) In the code behind I retrieve the parameter passed in using:

Dim myArgumentAsString = Request.Params.Get("__EVENTARGUMENT")

4) I set the clientID in the preRender

The full code is:

ASPX...

<scripttype="text/javascript">function test1(node, eventArgs) {var hiddenField = document.getElementById('<%= hiddenFieldID %>');

hiddenField.value = node.Text;

__doPostBack(

'<%= hiddenFieldID %>',node.ID);returnfalse;

}

</script>

<asp:UpdatePanelID="updPanel"UpdateMode="Conditional"runat="server"><ContentTemplate>

<asp:HiddenFieldID="tbTrigger1"runat="server"OnValueChanged="handleNodeClick"/><asp:LabelID="lblNode"runat="Server"></asp:Label><br/>

<%

=DateTime.Now.ToString()%></ContentTemplate></asp:UpdatePanel>

------------------

Public hiddenFieldIDAsString =""

Sub handleNodeClick(ByVal senderAsObject,ByVal eAs System.EventArgs)

Try

Dim myArgumentAsString = Request.Params.Get("__EVENTARGUMENT")Dim tempLBLAs Label =CType(Me.FindControl("lblNode"), Label)

tempLBL.Text = myArgument

Catch exAs ExceptionEndTryEndSubProtectedSub Page_PreRender(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.PreRenderTryDim tempHFAs HiddenField =CType(Me.FindControl("tbTrigger1"), HiddenField)IfNot tempHFIsNothingThen hiddenFieldID = tempHF.ClientIDCatch exAs ExceptionEndTryEndSub


I ran into the same problem and after searching I found the answer via a response Garbin gave someone on this thread.

http://forums.asp.net/thread/1275541.aspx

Adding the UseSubmitBehavior="false" then allowed the click() of the hidden button in javascript to work.


Try the extender control I build

http://daron.yondem.com

Wednesday, March 21, 2012

Trouble w/ Atlas and Custom User Control

I am trying to create a simple user control that shows a hidden div when an imagebutton is clicked. It works perfectly in a regular page, but in a user control it is conventionally posting back rather than refreshing via Atlas. I have an <atlas:ScriptManager> tag in the page for the control. Below is my code for the control:

<%@dotnet.itags.org. Control Language="C#" AutoEventWireup="true" CodeFile="RatingsBar.ascx.cs" Inherits="UserControls_RatingsBar" %>
<asp:ImageButton ID="showBarGraphButton" runat="server" ImageUrl="~/_Images/bargraph.gif"
OnClick="showBarGraphButton_Click" />

<atlas:UpdatePanel ID="updatePanel1" runat="server" RenderMode="Inline">
<Triggers>
<atlas:ControlEventTrigger ControlID="showBarGraphButton" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="barGraphPopup" CssClass="popupHide" runat="server">
<asp:Image ID="sampleImage" runat="server" ImageUrl="~/_Images/barGraphExample.gif"/>
</asp:Panel>
</ContentTemplate>
</atlas:UpdatePanel>

Below is my code for the default.aspx page:
<%@dotnet.itags.org. Page Title="Hi There" Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"Inherits="_Default" %><%@dotnet.itags.org. Register TagPrefix="uc" TagName="Karmevent" Src="~/_UserControls/Karmevent.ascx" %><%@dotnet.itags.org. Register TagName="RatingsBar" TagPrefix="uc" Src="~/_UserControls/RatingsBar.ascx" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>Untitled Page</title><link href="_Stylesheets/StyleSheet.css" rel="stylesheet" type="text/css" /><atlas:ScriptManager ID="ScriptManager" runat="server" /></head><body><form id="form1" runat="server"><uc:RatingsBar ID="rb1" runat="server" /></form></body></html>
Nevermind, everyone. I re-did the code from scratch and it works. I still have no idea what I did wrong, but it's working now.

trouble with PostBack in UserControl

I have a trouble with partitial postback via AJAX.

I derived from LinkButton, added some javascipt (put argument in hidden filed and get this argument on server from hiden field) to control and in Render not rendering ID (I dont need ID because I not user server side mechanism for handling control after postBack.)

Now I try work with my new Control:

I putting my derived LinkButton inside UpdatePanel on the page.
And I have not any troubles. When Click on LinkButton - AJAX send partitial PostBack to server.

But when I put my derived LinkButton inside UserControl, and this UserControl put on page inside UpdatePanel - so I have a trouble: when I click on me LinkButton, so page send full postBack to server as if I not use UpdatePanel.

But if I render ID of LinkButton to html, so it's work in page and in userContol without any trouble. (but I don't want render ID because it's many not usefull chracters.)

May be samoebody know what I can do for resolving this situation without rendering ID (it's strangely that it work without LinkButton ID on page and not work inside UserControl?

thanks

Hi psyafter,

Take a look at this link:

http://msmvps.com/blogs/luisabreu/archive/2007/02/01/getting-a-full-postback-from-within-an-updatepanel-without-using-a-postbacktrigger.aspx

Regards,


You can add an event to the usercontrol and fire it on the link button's click event... then add this new event as the trigger.


2Participant:
first post:
I know it, but I have ID in LinkButton, and just not render it to html. And its work in page, but not work inside UserControl that on the page.

second post:
I can't add new event to triger, because LinkButon is inside UserControl, the UserControls is inside UpdatePanel on the page.

may be I can add something via Page.Register... or something like it?


Hi

I think this post can help you:

Can I specify a UserControl custom event as a Trigger for update panel on Parent page? :http://forums.asp.net/p/1123812/1785025.aspx#1785025

If you need more information,please let me know.

Thanks