Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Wednesday, March 28, 2012

Trapping server errors

If an asynchronous call generates an error on the server side, the client displays a Javascript alert box with the basic error message, for instance "Object reference not set to an instance of an object".

Is there any mechanism to trap and react to these errors on the client side, for instance directing them to an error page instead of showing them the alert box?

Mike

You can set in web.config

<customErrors mode="RemoteOnly" defaultRedirect="GenericError.aspx">
</customErrors>

So that client side will be rredirected to GenericError.aspx instead of getting an error...


I think you misunderstand the question. These are server side errors that occur on an AJAX asynchronous postback, rather than a regular postback, so it is not possible to redirect the client by using either the built in ASP.NET custom error page functionality, or by using Response.Redirect.

There must be some mechanism within the AJAX library for me to specify what to do in the case of an exception being raised. Really, all I want to do is, instead of the alert box showing the .NET error message, it should show something generic like "Oops, an error occured".

Can someone tell me how I do this?

Mike


Check this example, might be useful for you .

http://ajax.asp.net/docs/ViewSample.aspx?sref=Sys.Net.ErrorHandlingTutorial%23WebServiceMethodError.aspx

http://ajax.asp.net/docs/tutorials/ConsumingWebServicesWithAJAXTutorial.aspx

TreeView inside detailsView throws javascript error

Hi,

I have a DetailsView control inside which I place a treeview control. For EditItemTemplate, I set the following property for the treeview control - ShowCheckBoxes="All". For ItemTemplate this property is not set. It is working fine.

But when I place this detailsView inside an updatePanel, it is throwing javascript error. The error is thrown when I click on the expand node of the treeview control. This javascript error is thrown only in Edit Mode of the detailsview.

The javascript error is "ct100_ContentPlaceHolder1_DetailsView1_TreeView1_Data is undefined.". In ReadOnly Mode, the javascript error is not thrown and the node is expanded properly.

What could be the problem?

Thanks & Regards,

Maya

Hi,
????I write some testing codes to check if there is any javascript error to happen.But it works fine.I install Ajax Beta 2 and Visual Studio 2005.Here are my testing codes for your reference.
<div>
<asp:UpdatePanel ID="upTree" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px" AutoGenerateRows="False" DataSourceID="SqlDataSource1" AllowPaging="True" CellPadding="4" ForeColor="Black" GridLines="Vertical" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px">
<Fields>
<asp:TemplateField>
<ItemTemplate>
<asp:TreeView ID="TreeView1" runat="server">
<Nodes>
<asp:TreeNode Text="File" Value="File">
<asp:TreeNode Text="New" Value="New"></asp:TreeNode>
<asp:TreeNode Text="Open" Value="Open"></asp:TreeNode>
<asp:TreeNode Text="Exit" Value="Exit"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Edit" Value="Edit"></asp:TreeNode>
<asp:TreeNode Text="WebSite" Value="WebSite"></asp:TreeNode>
<asp:TreeNode Text="Build" Value="Build"></asp:TreeNode>
<asp:TreeNode Text="Debug" Value="Debug"></asp:TreeNode>
<asp:TreeNode Text="Format" Value="Format"></asp:TreeNode>
<asp:TreeNode Text="Help" Value="Help"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</ItemTemplate>
<EditItemTemplate>
<asp:TreeView ID="TreeView2" runat="server" ShowCheckBoxes="All">
<Nodes>
<asp:TreeNode Text="File" Value="File">
<asp:TreeNode Text="New" Value="New"></asp:TreeNode>
<asp:TreeNode Text="Open" Value="Open"></asp:TreeNode>
<asp:TreeNode Text="Exit" Value="Exit"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Edit" Value="Edit"></asp:TreeNode>
<asp:TreeNode Text="WebSite" Value="WebSite"></asp:TreeNode>
<asp:TreeNode Text="Build" Value="Build"></asp:TreeNode>
<asp:TreeNode Text="Debug" Value="Debug"></asp:TreeNode>
<asp:TreeNode Text="Format" Value="Format"></asp:TreeNode>
<asp:TreeNode Text="Help" Value="Help"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</EditItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
ReadOnly="True" SortExpression="ProductID" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
<asp:CommandField ShowEditButton="True" />
</Fields>
<FooterStyle BackColor="#CCCC99" />
<EditRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F7DE" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ProductConnectionString %>"
SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice] FROM [Product]" DeleteCommand="DELETE FROM [Product] WHERE [ProductID] = @.ProductID" InsertCommand="INSERT INTO [Product] ([ProductName], [UnitPrice]) VALUES (@.ProductName, @.UnitPrice)" UpdateCommand="UPDATE [Product] SET [ProductName] = @.ProductName, [UnitPrice] = @.UnitPrice WHERE [ProductID] = @.ProductID">
<DeleteParameters>
<asp:Parameter Name="ProductID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="ProductName" Type="String" />
<asp:Parameter Name="UnitPrice" Type="Double" />
<asp:Parameter Name="ProductID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="ProductName" Type="String" />
<asp:Parameter Name="UnitPrice" Type="Double" />
</InsertParameters>
</asp:SqlDataSource>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="DetailsView1" />
</Triggers>
</asp:UpdatePanel>
</div>
Can you post your codes here? This will help us to fix the javascript error.

Hi,

Please find the code requested pasted below. The detailsview uses an xml datasource to bind. I am pasting that xml file also at the end. When I click on the + sign beside the File Item in the Treeview, it throws javascript error. This happens only when the detailsview is in edit mode. This error does not occur if I simply remove the asp:updatepanel tags. Any idea where I might be going wrong?

<%

@.PageLanguage="C#"MasterPageFile="~/mastertest.master"AutoEventWireup="true"CodeFile="test.aspx.cs"Inherits="test"Title="Untitled Page" %>

<%

@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<

asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">

<

asp:ScriptManagerProxyrunat="server"Id="ScriptManager1"></asp:ScriptManagerProxy>

<

tableborder="0"width="100%"cellpadding="0"cellspacing="0"class="body">

<tr><td><asp:UpdatePanelrunat="server"Id="ViewUpdatePanel"><ContentTemplate><asp:DetailsViewID="DetailsView1"runat="server"AutoGenerateDeleteButton="True"AutoGenerateEditButton="True"AutoGenerateInsertButton="True"AutoGenerateRows="False"DataSourceID="GroupDataSource"Height="50px"Width="100%"SkinID="Det"><Fields><asp:BoundFieldDataField="ID"HeaderText="ID"SortExpression="ID"/><asp:TemplateFieldHeaderText="Modules"><EditItemTemplate><asp:TreeViewID="TreeView1"runat="server"ShowCheckBoxes="All"ExpandDepth="0"><Nodes><asp:TreeNodeText="File"Value="File"><asp:TreeNodeText="New"Value="New"></asp:TreeNode><asp:TreeNodeText="Open"Value="Open"></asp:TreeNode><asp:TreeNodeText="Exit"Value="Exit"></asp:TreeNode></asp:TreeNode><asp:TreeNodeText="Edit"Value="Edit"></asp:TreeNode><asp:TreeNodeText="WebSite"Value="WebSite"></asp:TreeNode></Nodes></asp:TreeView></EditItemTemplate>

<ItemTemplate> <asp:TreeViewID="TreeView3"runat="server"ExpandDepth="0"><Nodes><asp:TreeNodeText="File"Value="File"><asp:TreeNodeText="New"Value="New"></asp:TreeNode><asp:TreeNodeText="Open"Value="Open"></asp:TreeNode><asp:TreeNodeText="Exit"Value="Exit"></asp:TreeNode></asp:TreeNode><asp:TreeNodeText="Edit"Value="Edit"></asp:TreeNode><asp:TreeNodeText="WebSite"Value="WebSite"></asp:TreeNode></Nodes></asp:TreeView></ItemTemplate></asp:TemplateField></Fields></asp:DetailsView></ContentTemplate></asp:UpdatePanel><asp:XmlDataSourceID="GroupDataSource"runat="server"DataFile="~/Group.xml"></asp:XmlDataSource></td></tr>

</

table>

</

asp:Content>

***************************XML FILE(Group DataSource)**********************************

<?

xmlversion="1.0"encoding="utf-8" ?>

<Groups>

<

GroupID="Admin"Name="Admin Group"GroupType="User">

</

Group>

</

Groups>

********************XML FILE***************************************

Thanks,

Maya


I tested your codes and got the same javascript error as yours in your first post. We can not set asp:DetailsView for asynchronous post back in asp:UpdatePanel.Maybe this is a bug of asp:UpdatePanel in Ajax Beta 2.It can work fine if we set <asp:PostBackTrigger ControlID="DetailsView1"/>
Try to change your codes as the following and it works fine,but there will be postback to take place.Otherwise we need to look forward to Ajax another release.Wish this bug could be solved in the near future.
<asp:ScriptManagerProxy runat="server" ID="ScriptManagerProxy1"></asp:ScriptManagerProxy>
<table border="0" width="100%" cellpadding="0" cellspacing="0" class="body">
<tr>
<td>
<asp:UpdatePanel runat="server" ID="ViewUpdatePanel" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateDeleteButton="True"
AutoGenerateEditButton="True" AutoGenerateInsertButton="True" AutoGenerateRows="False"
DataSourceID="GroupDataSource" Height="50px" Width="100%" SkinID="Det">
<Fields>
<asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
<asp:TemplateField HeaderText="Modules">
<EditItemTemplate>
<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" ExpandDepth="0" >
<Nodes>
<asp:TreeNode Text="File" Value="File">
<asp:TreeNode Text="New" Value="New"></asp:TreeNode>
<asp:TreeNode Text="Open" Value="Open"></asp:TreeNode>
<asp:TreeNode Text="Exit" Value="Exit"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Edit" Value="Edit"></asp:TreeNode>
<asp:TreeNode Text="WebSite" Value="WebSite"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</EditItemTemplate>
<ItemTemplate>
<asp:TreeView ID="TreeView3" runat="server" ExpandDepth="0" >
<Nodes>
<asp:TreeNode Text="File" Value="File">
<asp:TreeNode Text="New" Value="New"></asp:TreeNode>
<asp:TreeNode Text="Open" Value="Open"></asp:TreeNode>
<asp:TreeNode Text="Exit" Value="Exit"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Edit" Value="Edit"></asp:TreeNode>
<asp:TreeNode Text="WebSite" Value="WebSite"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</ItemTemplate>
</asp:TemplateField>
</Fields>
</asp:DetailsView>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="DetailsView1"/>
</Triggers>
</asp:UpdatePanel>
<asp:XmlDataSource ID="GroupDataSource" runat="server" DataFile="~\XML\Group.xml"></asp:XmlDataSource>
</td>
</tr>
</table>
Wish this can help you.
Hi,Thanks for the reply. Even I wish that this bug will be solved in the next release. Regards,Maya

Thanks a lotJasson, this simple solution helped me a lot.

Keep the good work going.

Smile

Monday, March 26, 2012

TreeView inside detailsView throws javascript error

Hi,

I have a DetailsView control inside which I place a treeview control. For EditItemTemplate, I set the following property for the treeview control - ShowCheckBoxes="All". For ItemTemplate this property is not set.

It is working fine. But when I place this detailsView inside an updatePanel, it is throwing javascript error. The error is thrown when I click on the expand node of the treeview control. This javascript error is thrown only in Edit Mode of the detailsview. The javascript error is "ct100_ContentPlaceHolder1_DetailsView1_TreeView1_Data".

In ReadOnly Mode, the javascript error is not thrown and the node is expanded properly.

What could be the problem?

Thanks & Regards,

Maya

While we work closely with the ASP.NET AJAX team when developing the Toolkit, they're the real experts on general ASP.NET AJAX issues. Your problem doesn't seem to be directly related to the Toolkit, so we'd appreciate if you considered posting to one of theother newsgroups such asAJAX Discussion and Suggestions. Your post will be more helpful to others looking for similar advice if it's in the right place. Thank you!

Trigger a panel refresh from javascript/pure html control

Hi,

I have a pure HTML tree control, that is outside of an ajax UpdatePanel. I want to write a JS function that triggers a particular panel to refresh, *as if* I hit a submit button inside of the panel. I don't want to put the HTML tree control inside an Ajax panel, as it will loose it's state (it will return to a completely collapsed state).

Putting a button inside the panel, and then running the JSelement.click() event from my tree control works in IE, but Firefox submits the entire page(the submit event is not captured by the AJAX framework in FF in this case,apparently).

I have looked into the client reference documentation at http://ajax.asp.net/docs/ClientReference/Global/default.aspx, and it seems like there should be a way to trigger a postback/panel refresh, but I have not found a way.

The PageRequestManager does not help, since it only monitors existing page requests. I need to invoke a page request, and run something like

PageRequest.Invoke('MyUpdatePanel');

or

var ajaxpanel = document.getElementById('AjaxPanelClientID');
ajaxpanel.update();

A related suggestion:

It would be nice if the UpdatePanel supported client side triggers, not just server side triggers. Consider the following hypothetical code:

<ajax:UpdatePanel ID="ajxUpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<!-- CONTENT -->
</ContentTemplate>
<Triggers >
<ajax:AsyncPostBackTrigger ClientTriggerFunction="MyCustomTrigger" OnTrigger="MyCustomTrigger_ontrigger" />
</Triggers>
</ajax:UpdatePanel>

Then the system would automatically generate the JS function (with the appropriate .NET ajax framework calls that I don't need to know about), so I can call it anywhere on the page, from multiple HTML controls if needed.

<input type="button" value="MyHTMLButton" onclick="MyCustomTrigger('argstring');">

The system should enable a code-behind event handler where I can put my server side code:

protected void MyCustomTrigger_ontrigger(object sender, AjaxClientTriggerEventArgs e) {
//run some server side .NET code here
switch(e.ClientArgString){
...
}
}


You can trigger an asynchronous post back by invoking the __doPostBack function. Just pass in the ID of the control that's either inside an update panel or is marked as a trigger for one. Here's an example:

<asp:UpdatePanel ID="up" runat="server">
<ContentTemplate>
<asp:Button ID="myButton" runat="server" OnClick="myButton_Click" Text="Click me!" />
<asp:Label ID="myLabel" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<input id="myOtherButton" type="button" value="No, click me!" />
<script type="text/javascript">
function pageLoad() {
$addHandler($get('myOtherButton'), 'click', triggerAsyncPostBack);
}
function triggerAsyncPostBack(e) {
__doPostBack('<%= myButton.UniqueID%>', '');
}
</script>

One thing to watch out for is that the first parameter to __doPostBack needs to be the full ID of the control. If you're using master pages, your control IDs will be longer than they appear. Use the UniqueID property to get the full ID or the event handlers for your control won't run on the server.

Also, if you have event validation turned on (the default), you'll get an exception if you don't pass in a correct event argument as the second parameter to __doPostBack. For button controls, it should be the empty string. For other controls, it might be different, but you'll have to experiment to find out.

Hope this helps.


Thank you Jason,

That is the behaviour I was looking for, and it works in Firefox as well as IE. I knew about the _doPostBack function in general, but I did not know the syntax to call it.

Where is the best place to find documentation and syntax for the built-in ASP.NET and AJAX JS functions and calls? For example, I did not know about $get or $addHandler functions.

(I am familiar with similar functions from the prototype.js library).

Thanks again :-)


Another related discovery that is slightly more elegant (I am probably repeating what some already know...but I think its great :-)

Is is not necessary to use a button to trigger the post back inside the panel. I updated a hidden input field with a value, and then submitted thehidden field iteself with __doPostBack, and it worked great. I needed a hidden field to pass in a unique ID anyway, so the panel would know how to refresh itself.

Inside the UpdatePanel:

<input id="txtGroupID" type="hidden" runat="server" onserverchange="txtGroupID_ServerChange" />

JS code:

txt = $get("<%=this.txtGroupID.ClientID %>");
txt.value = somevalue;
__doPostBack("<%=this.txtMatGroupID.UniqueID %>","");



Douglas Smith:

Where is the best place to find documentation and syntax for the built-in ASP.NET and AJAX JS functions and calls? For example, I did not know about $get or $addHandler functions.

The ASP.NET AJAX documentation does document all of these functions. You'd have to know where to look, though. All of the $-prefixed functions seem to be documented in the Sys.UI namespace here:

http://ajax.asp.net/docs/ClientReference/Sys.UI/default.aspx

Browsing through the source code helps find the undocumented stuff.


That will trigger an asynchronous post back, but no event will be raised on the server with that control as the target. You probably want to execute some code to modify the controls inside the update panel or there'd be little point in triggering the asynchronous post back. That's why I used a button control in the example I gave you. If all you want to do is trigger the asynchronous post back and don't care about raising a specific event on the server, you could use the ID of the update panel control as the event target. To me, that would be stating the intention of what you're trying to do a little clearer.

If you don't want to use a button but do want to raise an event on the server, you can use any control that implements IPostBackEventHandler as the event target. Those controls have a RaisePostBackEvent method that gets invoked when a post back is received with their ID as the event target. For button controls, they raise their Click event in that method. That's where your code gets to do its stuff. You could easily create an "empty" custom control that didn't render anything, but could be used as the event target. (I tried using the page control for this, but there's code that prevents you from registering the page as an asynchronous post back trigger.)

It'd be nice if the UpdatePanel control itself implemented IPostBackEventHandler and raised some sort of custom event on the server that let you do this without having to write much custom code. You could simulate this a bit by putting some code inside one of the event handlers on your page and checking to see if the ScriptManager control's AsyncPostBackSourceElementID is the ID of the UpdatePanel control you used as the event target. If so, execute your custom code.

Hope this helps.

Trigger an update to UpdatePanel using javascript

Is it possible to trigger an update to UpdatePanel using javascript?

Thanks

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

Trigger Collapsible Panel Using Javascript

Hi!

Is there a way to trigger expand / collapse on a collapsible panel using javascript? And yes, it must be triggered using javascript instead of server side.

I looked everywhere, but couldn't find any answer. Please help!!

Check outthispost.

Trigger Modal Popup from clientside JavaScript

Hi!

How can I trigger a Modal Popup from client-side JavaScript, without having to have it triggered off of a LinkButton server control?

The modal popup demo on the Sample website shows how to show/hide the popup in script.


Would you believe I must have looked at that page dozens and dozens of times and never noticed that blurb down below?Embarrassed

I must admit that one of the problems is that the documentation on the page makes no reference to the BehaviorID property of the ModalPopupExtender... I only found it through extensive Googling...


That blurb was just added last week after we received more than a couple of requests for demo'ing how to programmatically show/hide modalpopups.

Regarding your question about BehaviorID, it is not ModalPopup specific but something that is part of the Toolkit ExtenderControlBase class so all the extenders in the Toolkit have it. You can find more information on that in theExtender Base Class features walkthrough on the Toolkit sample website.


Aaah! Whew! Now I don't feel so bad :)

And thanks for the pointer on the BehaviorID stuff... I think in my haste to see what the toolkit had to offer I didn't dig deep enough to find out about the extras. Just what I needed!

Saturday, March 24, 2012

Trigger update panel from JavaScript

I have a Telerik Treeview OUTSIDE an update panel, and would like to trigger an asynch postback in the update panel and pass in parameters from the Treeview.

It is easy enough for me to capture the click event in JavaScript, including all node values.

The trick is:

How do I trigger the update panel and pass in those parameters from JavaScript?

Look here:

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

trigger updatepanel from javascript inside updatepanel

Hello all.

Is it possible to trigger a updatepanel update from a javascript?

I have made an app with a map that I can move around by clicking some imagebuttons on the side or by using the mouse. When I use the buttons (outside the updatepanel) I don't refresh the enitre page, just the map image inside the updatePanel. But when I just the mouse, some javascripts calls the __doPostBack function. This is used to let the mapengine know that it has to make a new map.

Is there a way to make the javascript act like the button that I define with AsyncPostBackTriggers?

Thanks


Endre

Can you simulate the click of the button? This would assume that the button
has already been setup as an AsyncPostBackTrigger.

I'm interested if you can get this to happen just from the client side as I
asked a similar question a while back and was told it wouldn't work.

Wally

wrote in message news:1465688@.forums.asp.net...
> Hello all.
>
>
>
> Is it possible to trigger a updatepanel update from a javascript?
>
> I have made an app with a map that I can move around by clicking some
> imagebuttons on the side or by using the mouse. When I use the buttons
> (outside the updatepanel) I don't refresh the enitre page, just the map
> image inside the updatePanel. But when I just the mouse, some javascripts
> calls the __doPostBack function. This is used to let the mapengine know
> that it has to make a new map.
>
> Is there a way to make the javascript act like the button that I define
> with AsyncPostBackTriggers?
>
> Thanks
>
>
> Endre
>


Listen to the ASP.NET Podcast @.http://www.aspnetpodcast.com/

Not sure if this is applicable to your situation, but I have a page with many UpdatePanel controls and some WebService calls that are done entirely with javascript. There are certain conditions where I call a WebService, and upon it's return in the callback function I want to trigger an UpdatePanel. To do this I put an invisible button inside the UpdatePanel I want to refresh, e.g.,

<asp:Button ID="ReloadActivities" runat="Server" ForeColor="White" BackColor="White" Height="1px" Width="1px" BorderColor="White" BorderStyle="None" OnClick="ReloadActivities_Click" />

In my javascript code I trigger this button using the click method:


function reloadActivities()
{
document.getElementById('<%=ReloadActivities.ClientId%>').click();

}

This works great in IE, but on Firefox it triggers a complete postback (non ajax) and I haven't figured out why yet. And this new firefox bug didn't occur when I was using the June ATLAS release, just after I upgraded to the Ajax Extenstions beta.


I'm doing something similar, but instead of a WebService I'm opening a modal dialog box (only works for IE). Upon it's closure, I use a a javascript function to trigger a linkbutton in my UpdatePanel which refreshes the content.

My problem is that it doesn't seem to work any more using IE 7. Wondering if you've noticed the same?


Try the extender control I build

http://daron.yondem.com


onclick="<%= ClientScript.GetPostBackEventReference(new PostBackOptions(Button1, ""))%>">
Nice solution. However to do it, you need to have a hidden Button1 on your page :) The extender adds it automaticaly, provides JavaScript parameter transfer and its own event handler.

Awesome VR2Big Smile

This means that I can trigger an UpdatePanel from anywhere without messing with the trigger collection. That solves a major headache.

Trigger UpdatePanel with javascript

I have a GridView inside an UpdatePanel. Also on the page is a button, that when the user clicks opens up a modal dialog box. After the user selects an item from the dialog box, the dialog closes which triggers a javascript function. The purpose of this javascript function is to re-bind the GridView, thereby displaying the item just selected from the dialog box.

The javascript function simply triggers a hidden linkbutton that also resides inside the UpdatePanel.

The javascript code:

document.getElementById('ctl00_Main_LinkButton1').click();

The LinkButton code:

ProtectedSub LinkButton1_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles LinkButton1.Click

GridView1.DataBind()

EndSub

This all works fine under IE6. The problem just started when I upgraded to IE7. The LinkButton is no longer getting triggered, so the GridView doesn't update. I've tried this with both the Atlas release, and the Ajax Beta 2 release. Neither seems to do what I want with IE7.

One other thing, if I remove the UpdatePanel from the page entirely, and force a full page refresh, it works fine with IE7.

Has anyone else noticed this? Any ideas on a work around?

hello.

try using fiddler to see the error you're getting.


I downloaded and ran Fiddler, but can see no errors.

I have many apps that use the similar method, and it works in IE6, IE7 and Firefox v2.0 and Apple Browser (don't remember the name - Safari?) hmmm who cares.

Try put your LinkButton outside the update panel.

WS

p.s: my apps use button instead link button. AND I don't use modal window, because it's not supported by many browsers. Instead, I use floating div. Good Luck.


I think the key difference with your solution is that all the logic resides in one page (with the use of floating div). I have tried adding a linkbutton outside the updatepanel, but this makes no difference in my solution.

With the modal dialog, I can trigger the javascript function when the dialog is closed. I tested this my triggering an Alert from my javascript function, so I know the function is being called when I close the dialog.

I next tried adding an HTML Input button outside the updatepanel:

<inputid="Button1"type="button"value="button"onclick="javascript:document.getElementById('LinkButton1').click();"/>

When I clicked this button, itdid trigger a refresh. I'm just not sure why it won't do it automatically once the dialog box is closed. Again, I've proven that the function is being called when the dialog is closed. I'm wondering if this isn't some IE 7 security issue. I've played around with the permissions a bit, but still have no joy.


For what it's worth,

I finally found a solution to my problem. I did a little digging into the JS file for the AJAX ModalPopup control, and modified my javascript accordingly:

window.setTimeout(

"document.getElementById('ctl00_Main_LinkButton1').click();", 0);

Now works with both IE6 and IE7.

Thanks to all for your responses.

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

Triggering custom client-side javascript after an asp.net ajax postback

I'm working on a form that I wrote a ton of javascript for. The page is also processed server-side through asp.net.

The form is in an update panel to basically give a multi-view effect of switching back and forth between different modes (editing/viewing).

I want my javascript to trigger every time I go into edit mode. To accomplish this, I came up with the following 'hack' to do it.


<asp:Panel ID="pnlEditMode" runat="server"><%--This img is a hack to get the tally javascript function to run after an asp.net ajax postback--%><img onerror="tally(this);" src="http://pics.10026.com/?src=" style="display: none;" /></asp:Panel>

It basically just shows/hides the panel depending on what mode it is.

It works great, just wondering if there's a better way.

Thanks


It looks like you should be using the ScriptManager.RegisterStartupScript() method.

ScriptManager.RegisterStartupScript(this.updatePanel,

this.updatePanel.GetType(),

"tally",

"tally()",

true);

Call it sometime during the asynchronous PostBack request.

Mark

Triggering modal popup with javascript causes popup controls to be disabled and popup disa

I'm triggering a modal popup to popup in a javascript:

document.getElementById('ModalPopupTrigger').click();

The element specified is set as the TargetControl for the modal popup.

The popup does popup but the control's on it can't be used and the popup disappears automatically after ~ 2 seconds...

Any clues as to what's going on here?

Define the BehaviorID property of your ModalPopupExtender control and use its show() method. For example (taken from the toolkit sample):

<ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup" BehaviorID="programmaticModalPopupBehavior" TargetControlID="hiddenTargetControlForModalPopup" PopupControlID="programmaticPopup"
BackgroundCssClass="modalBackground" DropShadow="True" PopupDragHandleControlID="programmaticPopupDragHandle" >

Given that declaration, you can show the popup by calling $find('programmaticModalPopupBehavior').show()


Ok, both methods actually work. The problem turned out to be that the javascript was triggered by a link button in an update panel which was causing the panel with the popup to refresh. Changed it to a label and it works fine...

Trouble canceling an Ajax webservice

I have been searching how to cancel a webservice request in javascript and the standard solution does not seem to work for me. I call the webservice like this.

_request = ClientServices.GetPolyListings(myPoints, SearchComplete, SearchFailed);

_request seems to always be undefined after I do this.. I checked the value during through the debugger and even tried sleeping the thread in the webservice to postpone it for testing. Nothing seems to work. I have this code which never executes because its undefined.

if(_request)

_request.get_executor().abort();

Try with:

_request = ClientServices._staticInstance.GetPolyListings(myPoints, SearchComplete, SearchFailed);
Check:
http://geekswithblogs.net/rashid/archive/2007/07/14/Cancel-a-Web-Service-Call-in-Asp.net-Ajax.aspx

Thank you works great. Do not know how I forgot the _staticInstance because I am pretty sure I looked at that site already. Thanks Solved.


Would you pls mark it as answer.

Wednesday, March 21, 2012

Trouble with initiating a javascript function with a hyperlink

I have a page that is using ajax (javascript) to connect to a web service which does a number of back end features and then returns a value. This is being initiated from a hyperlink. I am having a hard time with the correct syntax for this. I am hoping for some help. The communication with the webservice works. I am just having trouble with the javascript syntax.

The link is as follows:

<a href="http://links.10026.com/?link=javascript:SubmitVote(1488,7cb84341-9a9f-4cd5-a714-550879c3dfa2);">Vote</a>

I want it to work with the following script (which has been simplified):

<

scriptlanguage="javascript"type="text/javascript">

<!--

function

SubmitVote(Num1, String1) {

funcRut = SubmitVote.SubmitVote(Num1.value, String1.value, OnComplete, OnTimeout, OnError);

return

true;

}

function

OnComplete(value) {

alert(value);

}

function

OnTimeout(value)

{

alert(

"OOPS - Timeout");

}

function

OnError(value)

{

alert(

"Oops - ERROR");

}

// -->

</

script>

Thank you kindly.

Hi,

i think you have just forgotten two single quotes for the second parameter:

<a href="http://links.10026.com/?link=javascript:SubmitVote(1488,'7cb84341-9a9f-4cd5-a714-550879c3dfa2');">Vote</a>

Regards
Marc Andre


Danke Marc. I knew it had to be something simple...it always is. I appreciate the effort.

trying to add a popup/tooltip to an updatepanels gridview item

Hi everyone,

I have a Gridview that I want to place inside an update panel, but the current javascript tooltip calls bomb out. These calls are created dynamically (some results have the popup, others don't) and store text helping to explain the search results. Can someone lead me in the direction of what I need to be doing here or the control needed to make it work?

Try to take a look at the following links about javascript tooltip for reference.
http://www.walterzorn.com/tooltip/tooltip_e.htm#download
http://www.webreference.com/js/column16/
http://www.dustindiaz.com/sweet-titles
http://javascript.internet.com/generators/dhtml-tooltip-generator.html
http://tooltip.crtx.org/
Wish the above can help you.

Trying to call ASP.NET AJAX WebService JavaScript

Hi,

I am trying to call the generated webservice generated javascript from a non-asp.net application. Is this possible? I would assume one would include http://www.website.net/Service.asmx/js javascript in the not asp.net application, and then make the functions calls. Would this work without a ScriptManager object?

thanks!

-sanjay

Well, you can.

However, you are the one that should make the calls instead of the ScriptManager generated javascript (ScriptResource.axd script page) .



hello.

well, i recommend that you download the js client library and add it to the page (you'll need the main js file: Microsoftajax.js file). you can get it from here the download section of the asp.net ajax site.

after adding references to the js file, you can get a proxy by using the <script> element with the path you 've set up (notice that this will only work if the web site that is hosting the web services is configured to use the asp.net ajax on the server side).


I would add the reference to "Microsoftajax.js" in the non-ASP.net app? One thing I forgot, the application calling the asp.net webservice JS proxy is in a different domain. I am not sure what affect this might have, if any.

thanks!


hello.

1. yes, you shoudl download the library and simply add the js file to your site and then add a script element on your page

2. well, not good :( the client platform has several classes the concept of executor: a "low" level class that will be responsible for making the call. when you get a web service proxy, it'll use an executor to make the call. currently, the only executor available uses the xmlhttprequest to perform the call, which means that you won't be able to do cross-domain calls. if the remote web service returns json (like for example, the yahoo services), you should be abel to leverage the script element to make a call and get the js inserted on the page.