Update panel in IE 10 - javascript

I have create a sample program in Asp.net which updates time on a button click. This time is shown in a label. Button and and label both are inside update panel say upd1.
Following is the aspx code
<script type="text/javascript" >
function fnhn() {
__doPostBack("upd1","");
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager id="ScriptManager1" runat="server" EnablePageMethods ="true" > </asp:ScriptManager>
<div>
<asp:UpdatePanel ID="upd1" runat ="server" ><ContentTemplate >
<asp:label runat="server" id="lbl_c" ></asp:label>
<asp:button runat="server" id="btn_b" Text="Click" />
</ContentTemplate>
</asp:updatepanel>
</div>
</form>
</body>
and following is the source code.
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
lbl_c.Text = Date.Now.ToString
End Sub
End Class
Now problem which i facing is as follows. I am able to update this time on button click without any postback in any browser other than IE 10. In IE10 my whole page gets refresh. which I obviously dont want to happen. Plz help me guys.
In a thread I also come to know about up leveling the user agent of IE10 through following.
Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
If Request.UserAgent.ToLower.ToString.Contains("msie 10.0") Then
Page.ClientTarget = "uplevel"
End If
End Sub
Which didnt help me to come out of this issue.
Any comment suggestion and solution is valuable.

Can you check if your IE10 is allowing cookies? If you disabled cookies at some point the session would not be working (if cookie based) and therefore the AJAX would cause a full postback.

Have you tried adding the EnablePartialRendering? This should be the default, but may be overridden elsewhere.
<asp:ScriptManager id="ScriptManager1" runat="server"
EnablePageMethods="true" EnablePartialRendering="true" />

Related

Selecting from dropdownlist causes page to open in new window

I have an asp.net page using vb.net. There is a linkbutton that opens up a store's website in a separate tab. This is done using Javascript. There is also a dropdownlist that contains coat sizes. The dropdownlist posts back.
Here is the problem I'm having.
The user clicks on the linkbutton that takes him to the store's website in a separate tab. The store's website does in fact come up in a tab. However "AFTER" the user does this, if the user selects a size from the dropdownlist the original page opens up in a new tab. This should not happen. Selecting a coat size from the dropdownlist should not cause the original page to open in a new tab after clicking on the linkbutton. Can someone let me know how to solve this? Thanks in advance.
Server Code Below.
Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As System.EventArgs)
Dim size As String
size = DropDownList1.SelectedValue
End Sub
Protected Sub LinkButton1_Click(sender As Object, e As System.EventArgs)
Dim link As String
link = "http://"
link = link + "www.google.com"
Response.Redirect(link)
End Sub
Page Code Below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server"
onselectedindexchanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True">
<asp:ListItem>Sm</asp:ListItem>
<asp:ListItem>Med</asp:ListItem>
<asp:ListItem>Lg</asp:ListItem>
<asp:ListItem>XLg</asp:ListItem>
</asp:DropDownList>
<br /><br />
<asp:LinkButton ID="LinkButton1" runat="server"
onclick="LinkButton1_Click" OnClientClick="SetTarget();">LinkButton</asp:LinkButton>
</form>
</body>
<script type = "text/javascript">
function SetTarget() {
document.forms[0].target = "_blank";
}
</script>
</html>

How to run javascript using server side code in ASP.Net Web Form application in update panel?

I want to use some javascript code inside update panel in ASP.Net web form application using serverside code. The problem is the following code only works if i used it outside update panel but not works inside, even with alert.
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Server" OnClick="Button1_Click"/><br />
<asp:Button ID="Button2" runat="server" Text="Cleint" OnClientClick="alert('Hello World(Cleint)')"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Code Behind
protected void Button1_Click(object sender, EventArgs e)
{
this.ClientScript.RegisterStartupScript(this.GetType(),
"ShowMessage", string.Format("<script type='text/javascript'>alert('{0}')</script>",
"Hello World (Server)"));
}
when running this application only the Client Click event works but not the server side event. However when removing update panel ant try again both events work.
I searched a lot and found some similar questions but all answers didn't work. I just wanna to fix problem for the example i put above. Thanks
Try to replace your code behind in the button click event with this:
ScriptManager.RegisterStartupScript(this, this.GetType(), this.ClientID, string.Format("alert('{0}')", "Server"), true);
Hope this helps.

javascript popup in Timer control and UpdatePanel control not working

MasterPage.master
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="10000">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
MasterPage.master.vb
Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
'some sql select codes
con.Open()
Dim result As Integer = DirectCast(cmd.ExecuteScalar(), Int32) 'ExecuteScalar() only return 1 row and ignore rest
con.Close()
If result > 0 Then
'Page.ClientScript.RegisterStartupScript(Me.GetType(), "AlertMessageBox", "alert('hello world');", True)
'Page.ClientScript.RegisterStartupScript(Me.GetType(), "AlertMessageBox", "alert('" & result & " hello world');", True)
ScriptManager.RegisterStartupScript(Me.UpdatePanel1, Me.UpdatePanel1.GetType(), "AlertMessageBox", "alert(‘hello world’);", True)
End If
End Sub
Basically I have a Timer control that run a SQL Select on a fixed interval and if the result is greater than 0, there will be a popup alert.
The codes work fine if I do not use an UpdatePanel but without the UpdatePanel, whenever the Timer control runs, the page will refresh, causing whatever the user is working on to be lost.
edit: further clarification
Timer1_Tick does run every 10sec. The problem lies with the pop-up, no pop-up occurs on the browser.
Add OnTick="Timer1_Tick" to your .master markup.
Also, you should not need to, but your could try adding:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>

textbox value set in javascript is not avaliable in serverside page load event

I have following situation.I have set a textbox value by calling a JavaScript function from serverside.The textox value is assigned perfectly but it is not on server side it is showing blank.
This is my code.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Page.ClientScript.RegisterStartupScript(Me.GetType(), "set", "setValue();", True)
TextBox1.Text = txt.Text
End If
End Sub
and This is my javascript function.
<script type="text/javascript">
function setValue() {
document.getElementById("<%=txt.ClientID %>").value = "Hello World";
}
</script>
and here is my mark up
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txt" runat="server">
</asp:TextBox>
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
<asp:Button ID="btnClic" runat="server" Text="Click Me" />
</div>
</form>
The first texbox value is assigned perfectly.but it was not showin on second textbox.
txt.Text value will not be accessible in the code, you can use below javascript code to achieve this.
<script type="text/javascript">
function setValue() {
document.getElementById("<%=txt.ClientID%>").value = "Hello World";
document.getElementById("<%=TextBox1.ClientID%>").value = document.getElementById("<%=txt.ClientID%>").value;
}
</script>
I solve my problem with bellow method.
If you have TextBox that must be set in client side with JavaScript,
You must replace it with HTML > Input(Text)
<asp:TextBox ID="txt1" runat="server" ></asp:TextBox>
replace with:
<input id="txt1" type="text" runat="server" />
then in html source change it to runat="server"
now you can change its text in client side and get its value at server side with: txt1.Value
I Hope be useful.
You can not get value of textbox if you will assign it in your javascript function.
Try this way.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
TextBox1.Text = "Hi"
Page.ClientScript.RegisterStartupScript(Me.GetType(), "set", "setValue();", True)
TextBox1.Text = txt.Text
End If
End Sub
It may help you. Now Your Textbox value will be "Hello World". You have to assign some values before calling the javascript function.
UPDATE
The only solution is You must have to use Jquery Ajax to use textbox value in server side.
Use this link for your reference. Jquery Ajax in ASP.Net

How can I defer loading UpdatePanel content until after the page renders?

Old hand at ASP.NET, new to the UpdatePanel. I have a reporting page which executes a fairly length SQL query... takes about 10 seconds right now. What I would like to do is have my page fully render, with some placeholder text (Loading...) and then have the UpdatePanel kick off the actual time-consuming reporting process and render the report when it's done.
So... my theory is to use RegisterStartupScript() to kick this off and drop the string from GetPostBackEventReference() to trigger the UpdatePanel update. Some problems crop up:
1) Can I actually use GetPostBackEventReference w/ the UpdatePanel or do I need to trigger it some other way? Use this method on a button inside the Update Panel?
2) What event gets triggered when the postback reference is the UpdatePanel? It's not clear to me. I've got to call my databinding code somewhere! Again, maybe I need to use a button inside?
I had to do something very similar recently, here's how i did it (right or wrong):
The trick is a "Hidden Async Postback Trigger".
<asp:UpdatePanel ID="upFacebookImage" runat="server">
<ContentTemplate>
<!-- Your updatepanel content -->
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="hiddenAsyncTrigger" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="hiddenAsyncTrigger" runat="server" Text="AsyncUpdate" style="display:none;" />
Then from JavaScript, whenever you want to trigger the async postback, you do this:
__doPostBack('<%= hiddenAsyncTrigger.ClientID %>', 'OnClick');
In my example, i needed to trigger an async postback from a particular JS event. But you could attach it to doc ready.
I seem to remember trying #Marko Ivanovski's way, but for some reason it didn't work. I think you need to specify a "postback-able" control (ie a button) to trigger the postback.
HTH.
Updating this with my solution, I pieced together mostly from the first answer above.
I need my page to load, then then start loading content for my update panel. The panel calls some webservices and we don't want the whole page to crash in the event that the remote server doesn't respond. We don't want the wait either.
My HTML:
<asp:UpdatePanel ID="udpCheckout" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Image ID="imgSpinner" runat="server" Visible="true" ImageUrl="~/images/ajax-loader.gif" />
<br />
<asp:Label ID="lblWait" runat="server" Visible="true" Text="Please wait..."></asp:Label>
<asp:Button ID="hiddenAsyncTrigger" runat="server" Text="AsyncUpdate" style="display:none;" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="hiddenAsyncTrigger" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
My Code behind snippets:
In page_load:
ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType, "LoadUpdate", GetPostBackEventReference(hiddenAsyncTrigger, String.Empty), True)
And the button handler:
Sub LoadUpdatePanels(ByVal o As Object, ByVal e As EventArgs) Handles hiddenAsyncTrigger.Click
System.Threading.Thread.Sleep(5000) 'wait 5 seconds so I can see the page change
imgSpinner.Visible = False
lblWait.Text = "Content is now loaded."
'udpCheckout.Update()
End Sub
This was my test to see if I could get it working. Now to replace all of this with the real code!
Try something like this (not tested).
Set the UpdateMode of the UpdatePanel to Conditional.
Add this to your <head> section:
<script type="text/javascript">
window.onload = __doPostBack('UpdatePanel1', ''); // Replace UpdatePanel1 with the ID of your UpdatePanel
</script>
Simplifying RPM1984's very helpful earlier answer (thanks ;)) and showing some tweaks & a little more of the surrounding detail that I found necessary:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="upFacebookImage" runat="server">
<ContentTemplate>
<asp:PlaceHolder runat="server" ID="PlaceHolderMediaPrompts" />
<asp:Button ID="hiddenAsyncTrigger" runat="server" Text="AsyncUpdate" OnClick="WasPage_Load" style="display:none;" />
</ContentTemplate>
</asp:UpdatePanel>
Note:
The hidden button's vital OnClick= parameter, this is what specifies the server function to call!
No trigger clause or triggers in the Update-panel, I am using the child controls which are automatically triggers - specifically the button Click event.
And to trigger it from client-side Javascript you can use:
document.getElementById("hiddenAsyncTrigger").click‌​();
However, I found it necessary to prevent this being called on subsequent page loads (as it caused unnecessary page load looping & consequent flicker). See the neat little IsPostBack() check below :)
e.g. To invoke this after page load (as per the original question), I just added a call to invoke the above line of code as the onload-parameter to the main Body-tag thus:
<body onload="DoPostLoad();">
...
<script type="text/javascript">
function DoPostLoad()
{
if ( IsPostBack() != true ) // ***This is NEW and ESSENTIAL! ***
document.getElementById("hiddenAsyncTrigger").click();
}
function IsPostBack() { // Ref. https://stackoverflow.com/questions/26978112/execute-javascript-only-on-page-load-not-postback-sharepoint
var ret = '<%= Page.IsPostBack%>' == 'True';
return ret;
}
. . .
</script>
</body>

Categories