Is it possible to re-execute javascript in an UpdatePanel? - c#

I have the following:
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<script> alert("execute again"); </script>
<asp:LinkButton ID="go" runat="server" Text="Exec JS" />
</ContentTemplate>
</asp:UpdatePanel>
The first time the page renders the script is executed. If I click the button to cause a postback it doesn't execute again.
Is there a way to make it execute the scripts again?

Yo! There's an easy way to get the JavaScript to run again. Put the javascript on the HeadContent portion of your page:
<script>
function BindIt()
{
alert("execute again");
}
</script>
then on your page inside the update panel add portion with a call up to the function that you created for your javascript:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<script type="text/javascript">
Sys.Application.add_load(BindIt);
</script>
...
In a project that I was working on, I wanted all of the javascript on the page to run again, so I just put it all into a massive BindIt style function. It took me a while to figure it out and I tried many methods to get this to work but this was the only way I was ever able to get jquery to work with updatepanels

Since ASP is just pushing the raw data, not actually executing it you'll need to probably use the RegisterStartupScript method of the ScriptManager to programmatically inject the script to load after a partial postback.
EDIT
More directly, try looking in to ScriptManager.RegisterStartupScript() for UpdatePanels. e.g.

If the JavaScript is jQuery related, following link would definitely help:
http://weblogs.asp.net/hajan/archive/2010/10/07/make-them-to-love-each-other-asp-net-ajax-updatepanels-amp-javascript-jquery-functions.aspx
I have personally used the 2nd method mentioned in this article, and it worked for me properly.

Related

What is script manager and updatepanel

I m new to .net, When i workout particular script in visual studio, I got the warning message like this:
Cannot unregister UpdatePanel with ID 'UpdatePanel1' since it was not registered with the ScriptManager. This might occur if the UpdatePanel was removed from the control tree and later added again, which is not supported.
Parameter name: updatePanel
.aspx file:
<asp:UpdatePanel ID="UpdatePanel5" runat="server"> <ContentTemplate>
<asp:Label runat="server" ID="lblInboxCount" CssClass="inboxCount"
Text="Inbox (0)"></asp:Label> </ContentTemplate> </asp:UpdatePanel>
this code for master page:
<asp:ScriptManager ID="ScriptManager2" runat="server">
</asp:ScriptManager>
May i know, what is ScriptManager and UpdatePanel? and what is the function in asp .net?.. I referred msdn and other some materials, but still i didn't get it.
can anyone help me to fix this?
Thanks,
The UpdatePanel is used to perform partial page refreshes. It will AJAX'ify controls contained within it, allowing partial rendering of the area.
When you use an UpdatePanel, you also need to include a ScriptManager. The ScriptManager manages the Ajax script libraries and script files. It also manages partial-page rendering, and client proxy class generation for Web and application services.
You have to add something like this in your ASP page:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
And something similar for UpdatePanel:
<asp:UpdatePanel id="UpdatePanel1" runat="server">
<contenttemplate>
</contenttemplate>
</asp:UpdatePanel>
UpdatePanel is used to prevent page refresh after a postback that occurs when you for example press a button. You just refresh that particular part of the page instead of the whole page.

Need to click button twice to get search results

I'm just starting with ASP.NET in college, and I'm stuck on this one:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="searchGmapButton" runat="server" Text="Search" OnClientClick="SetMap();" />
when I click this button it calls JavaScript, that gets value from textbox and uses google maps api to show map and return longitude and latitude. Then I'm putting those into two hidden textboxes,
$("#MainContent_latBox").val(Marker.getPosition().lat().toString());
$("#MainContent_lngBox").val(Marker.getPosition().lng().toString());
so I can use them in aspx.cs code, that displays closest locations using db search. I'm using for this OnTextChanged="lngBox_TextChanged" on one of those hidden textboxes. Problem is that when I click searchGmapButton it displays map location, and lngBox_TextChanged is working on second click.
I tried to use OnClientClick to run JavaScript and OnClick to run asp code,
<asp:Button ID="searchGmapButton" runat="server" Text="Search" OnClientClick="SetMap();" onclick="Button1_Click"/><br />
but then OnClick code is not working at all. Same happens with first example when I move searchGmapButton outside AJAX UpdatePanel.
Did I missed something silly, or did I got it completely wrong?
Write your java script Function
<asp:UpdatePanel>
<ContentTemplate>
<script type="text/javascript">
// Your Java Scrip Code Here
</script>
</ContentTemplate>
</asp:UpdatePanel>

how to refresh a portion of a page in intervals

I have a page that above it I want to have a panel that automatically refresh every 5 minutes, and if a user has a message in his inbox show to him. What is the best solution for this?
Should I usel AJAX, jQuery, or JavaScript? My preferred solution is server side solution.
Since you are working with ASP.Net, you can also achieve this behavior by using a combination of the following:
ScriptManager or ScriptManagerProxy (if you have nested pages):
Manages the ajax calls
UpdatePanel: Determines what gets updated. Controls nested within <ContentTemplate> are subject to partial
updates
Triggers: Controls when the content is updated.
For your purpose, a Timer control can be used as a trigger to ensure that partial postbacks are triggered every 5 seconds:
<asp:ScriptManager ID="scriptManagerMain" runat="server"/>
<asp:Timer ID="timer" Interval="5000" runat="server"/>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Panel ID="panelToBeUpdated" runat="server">
<asp:Label ID="lblContent" runat="server" ></asp:Label>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timer" />
</Triggers>
</asp:UpdatePanel>
I would use Jquery to send an AJax request to the server to fetch the updated content. Upon receiving the content I would use JQuery again to update the markup.
You can set this up to trigger every 5 min using setInterval in Javascript
Hard to give a specific example without code. But you basically need to load the new content with an ajax request that is triggered by a timer.
setInterval(function(){
$.ajax({
url: "someUrlThatServesUpdatedContent.aspx",
cache: false
}).done(function( html ) {
$("#results").html(html);
});
}, 300000);
The above is just a simple example to point you in the right direction.
Edit: Here is an example of how to do the ajax call without JQuery
https://stackoverflow.com/a/2792721/1059001
It's possible to do that with AJAX using method described by previous answers, but if you wish to have a server side solution I would recommend loading that part of the page in an iframe, with meta refresh:
<meta http-equiv="refresh" content="300">
This method however would make it difficult to communicate any events or user actions back to main page.

<script> tag get disappeared from rendered HTML after ajax postback action

I have a webpage with one <asp:updatePanel>. In the end of the webpage, some javascript method is added and called such as :-
The updatePanel code used is as follows:-
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Some controls like repeater etc..
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
alert('hi');
MethodCall();
</script>
After some ajax postback action happened on the page, when i see the webpage html using the "View Source". The script tag code area gets disappeared from the webpage html. And this causes the problem at the place where js method is called.
I don't understand why this is happening? Why it is removing the JS code block after the ajax postback action.
Pls suggest some workaround or any solution to my problem.
Thx
You can also add the following js function, that is called by the ASP.Net AJAX client script library.
function pageLoad(sender, args)
{
if (args.get_isPartialLoad())
{
get_isPartialLoad is true when a partial postback has occurred.
}
}

How to call codebehind function without postback with ajax

I have a controller:
<asp:Button OnClick="MyFunction" runat="server" />
I want to be able to call MyFunction without the page reloading. Is this possible with ajax or something? If so how would I do it?
Checkout the ASP.Net instructional videos. Should cover most, if not all, of your questions.
AJAX Videos: The Official Microsoft ASP.NET Site
You have to download Ajax Extensions and install it.
After you do this place instead <asp:Button OnClick="MyFunction" runat="server" /> the following
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Your Text" OnClick="MyFunction" />
</ContentTemplate>
</asp:UpdatePanel>
MyFunction would be a c#/vb function written in your page behind code, not a javascript function. I specified this because i've seen many mistakes that people make regarding this one. OnClick attribute is for c#/vb function and OnClientClick is for javascript function.
For more information regarding how to add ajax functionality to an ASP .NET Page go here
One option is to use page methods.
Add a static method to your page, decorated with the WebMethod attribute:
[WebMethod]
public static void MyMethod(string someParam)
{
}
Enable page methods in your ScriptManager:
<asp:ScriptManager EnablePageMethods="True" ... />
And then you can call it from the client side, using JavaScript (that you can wire to the OnClientClick event of your button):
PageMethods.MyMethod("some value", successCallback, errorCallback);
For more details read the "Calling Static Methods in an ASP.NET Web Page" section on this page:
http://msdn.microsoft.com/en-us/library/bb398998.aspx
Yes you can use Make Client-Side Network Callbacks with Asp.net Ajax using this function you can call your code behind methods without reloading your page. To use this methods you should write your methods as static type.
You can refer this video
http://www.asp.net/ajax/videos/how-do-i-make-client-side-network-callbacks-with-aspnet-ajax
You have one more option using the jQuery Ajax.
The simplest way is to warp your code with an UpdatePanel
There are many examples if you google it.
<asp:Button runat="server" ID="btnShowModal" Text="Show"
OnClick="btnShowModal_Click" />
<asp:Button runat="server" ID="HiddenForModal" style="display: none" />
<ajaxToolKit:ModalPopupExtender ID="Modal1" runat="server"
TargetControlID="HiddenForModal" PopupControlID="PopupPanel" />......it may help u

Categories