Calling Jquery whilst partial postback on updatepanel - javascript

I have a very strange issue on Jquery and partial postback on updatepanel.
What I have done is created a jquery logic in code behind and used :
Page.ClientScript.RegisterStartupScript(this.GetType(), "jsSlider" + select.ClientID, sb.ToString());
to create the Jquery Slider feature in a repeater. However Whats happening is when I put this within inside updatepanel it runs ok and the jquery slider works however any partial postback and I lose my lovely jquery slider feature because I need to re-bind the slider feature back after each partial postback.
How can I do this using similar code like Page.ClientScript.RegisterStartupScript(this.GetType(), "jsSlider" + select.ClientID, sb.ToString());
Is there another way to say Page.ClientScript.EVERYPOSTBACK(this.GetType(), "jsSlider" + select.ClientID, sb.ToString()); or something?? I am open to other suggestions?

you can use the "pageLoad" function in your javascript on your front end code. The pageLoad function gets called on the initial pageload and after every partial postback. If there are things that only need to be called on the initial page load, you would still want to put them in document ready.
<script type="text/javascript">
function pageLoad()
{
//...
//anything you want to happen every time the page loads or after a partial postback
//...
//your javascript here... below an example of using jquery on some asp.net control.
$('#<%= select.ClientID %>').foo('bar');
}
</script>
http://www.asp.net/ajax/documentation/live/overview/AJAXClientEvents.aspx has some more details about this about 1/3 of the way down the page.

If you still need the answer, there's an analog of ClientScript.RegisterStartupScript for UpdatePanel's partial postback. Try ScriptManager.RegisterStartupScript instead.

Related

Overriding VB Code using jquery

I had a problem with a vb.net webpage which I solved by commenting out a .Focus() in the page_load. The customer however, will not receive this amendment until next release.
My question is, is it possible to achieve the same result using jquery through an external js file. ie. I would like to know if I can 'bypass' the '.Focus()' line in the page_load by using some kind of jquery wizardry?
I'm guessing that the answer will be 'no', however I'm still hopeful! :-)
Thank you for your time.
If you have the id of the control (or name) you can set focus to it by calling:
$(document).ready(function(){
$('#elementId').focus();
// or
// $('input[name="elementName"]').focus();
}
This will change WHAT is focused, not un-setting focus
If you know the ID of the focused element you can do:
$(document).ready(function(){
$('#elementId').blur();
// or
// $('input[name="elementName"]').blur();
}
to un-focus it.
you could also do:
$(document).ready(function(){
$('input').blur();
}
if you just wanna unset the focus from all/any input
And in my tests this will override asp.net's attempt to set focus (read: asp.net will focus one thing, your script will afterwards focus another thing, so there might be a race for control here, but at least on my page (asp.net c#) and in chrome this works so that the jquery.focus runs last, thus wins :))
Edit/Update:
Should the problem that the control receives focus rather then having focus, you can overwrite the auto_focus function that asp.net uses when you call .Focus() in your code-behind.
For me this works:
WebForm_AutoFocus = function () { };
However this might cause other things to not work (I do not know if this javascript function is used for other things besides setting the .Focus() from your codebehind, but it might be worth trying.)
You should also set this somewhere "late" in your code, eg: after WebForm_AutoFocus is rendered to your page by the asp.net runtime, and where this is done i do not know.

Call Javascript Function from seperate Classic ASP page

I'm updating a Classic ASP page (login.asp) which includes another Classic ASP Page (logincode.asp -- contains functions for the first page).
Previously, after clicking the login button, it would run several functions on logincode.asp and then open a terms agreement dialog if needed ...
If Not Application("RequireTermsAcceptance") Then
Response.Redirect(redirectURL)
Else
response.Write("<script>$(function () {displayTerms();});</script>")
End If
... and this worked by calling a Javascript function on login.asp
<script>
function displayTerms() {
//open Dialog box here
}
</script>
The Dialog box has two buttons ... one which passes them to the next page upon agreement, or the other which returns them to login.asp.
However, the new setup doesn't want to go to the function properly any longer.
There are several possible reasons for this ...
using a newer version of jquery ui ... jqueryui/1.8.8/jquery-ui.min.js - on the old ... jquery-ui-1.8.16.custom.min.js on the new.
The old one didn't build the jquery UI dialog box until you called the displayTerms function. The new one builds the jquery UI dialog in $(document).ready(function () but is hidden until the displayTerms function is called.
The displayTerms function is in the wrong location. Currently on the new version it's inside the $(document).ready(function () section. But I'm not sure that's the correct location.
I'm not familiar enough with javascript syntax to know how the call to the displayTerms function needs to change, but it still needs to be in a response.Write I believe.
Currently, the code executes all the way through, but when it gets to the response.Write that should call the displayTerms function, it hits it, passes it and then simply reloads the login.asp page.
Any Suggestions on how this should work would be appreciated.
If you need any further detail, please let me know and I'll be happy to provide it.
Try moving <!-- '#include file="../includes/logincode.asp"--> after the $(document).ready(function () { ... });

Server side JavaScript action

I coded a chat script using AJAX.NET. For every button click I am using the following sample of code in which I am using OnClientClick function to scroll down on every button click i.e. update.
<asp:Button ID="btn_msg" runat="server" Text="Submit" OnClick="btn_msg_Click" OnClientClick="scrolldown('div1')" />
This results fine on the page I am working but in the receiver side scroll bar is not getting down on update. I guess changing the option OnClientClick to some server action will help. I tried adding OnClick="btn_msg_Click; scrolldown('div1');" but this is not working. Is there any alternate way to fulfill my action.
At first glance, I believe Anton is correct. The reason you are seeing this behavior is the order in which everythings runs. The client script runs first. Then the server script. The server script causes a postback( or even via an update panel ), causing it to render the html again, losing the scroll bar position.
Anton's code causes the scrolldown function to run once the ajax postback is complete.
A side note:
If I were doing this, I'd remove the AJAX.NET completely and switch to jquery. You have a lot more control over this kind of stuff.
You need to hook on the endCallback event to scrolldown.
The moment you try to scroll down content is not yet delivered.
Try it this way:
<body onload=”load()”>
<script>
function EndRequestHandler()
{
scrolldown('div1');
}
function load()
{
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
</script>

ASP.Net - Javascript inside AJAX UpdatePanel

I am running into an issue with running javascript from an external javascript file inside of an UpdatePanel. I am trying to get a color picker working inside of a ListView. The ListView is inside of an UpdatePanel.
I am using this color picker.
Here is what I have narrowed it down to:
If I use the color picker on a textbox outside of an UpdatePanel, it works perfectly fine through all postbacks.
If I use the color picker on a textbox inside of an UpdatePanel, it works, until I do an async postback(clicking on an "EDIT" button in the ListView). Once the UpdatePanel has done the postback, the textbox will no longer show the color picker when clicked. The same occurs when the textbox is in either the InsertItemTemplate or EditItemTemplate of the ListView.
If you would like to replicate it, simply download the color picker(it's free), then add this to a webpage...
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="panel1" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="textbox" CssClass="color" />
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
When the page loads, the color picker works fine. When you click on the button(which does a postback), the color picker will no longer work.
Any ideas?
After an asynchronous roundtrip, any startup scripts will not be run, which is likely why it doesn't work after the AJAX callback. The color picker likely has functions which need to be executed on page load.
I've run into this so many times that I wrote a small method to register my scripts in the code-behind, which handles both async and non-async round trips. Here's the basic outline:
private void RegisterClientStartupScript(string scriptKey, string scriptText)
{
ScriptManager sManager = ScriptManager.GetCurrent(this.Page);
if (sManager != null && sManager.IsInAsyncPostBack)
{
//if a MS AJAX request, use the Scriptmanager class
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), scriptKey, scriptText, true);
}
else
{
//if a standard postback, use the standard ClientScript method
scriptText = string.Concat("Sys.Application.add_load(function(){", scriptText, "});");
this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), scriptKey, scriptText, true);
}
}
I actually baked the above into a base page class so that any page I'm working with can call this.RegisterClientStartupScript(...). To do that, simply create a base page class and include it there (making sure to mark protected not private or your inheriting page classes won't be able access it).
With the above code, I can confidently register client scripts regardless of whether the page is doing a postback or callback. Realizing you are using external script files, you could probably modify the above method to register external scripts rather than inline. Consult the ScriptManager class for more details, as there are several script registering methods...
After looking at the jscolor source code, I noticed that it initializes everything on window load. So, you will probably need to re-init with something like this (inside the UpdatePanel):
function yourInit(){
/* keep in mind that the jscolor.js file has no way to determine
that the script has already been initialized, and you may end
up initializing it twice, unless you remove jscolor.install();
*/
if (typeof(jscolor) !== 'undefined'){
jscolor.init();
}
}
if (typeof(Sys) !== 'undefined'){
Sys.UI.DomEvent.addHandler(window, "load", yourInit);
}
else{
// no ASP.NET AJAX, use your favorite event
// attachment method here
}
If you decide to put the jscolor script inside the UpdatePanel, you will also need to add something like this to the end of the jscolor.js:
if(Sys && Sys.Application){
Sys.Application.notifyScriptLoaded();
}
Have you tried ScriptManager.RegisterStartupScript which allows you to "adding JavaScript from the server to a page when performing an asynchronous postback" ?
I would guess that the jscolor.js code which runs to setup the color picker is only being called when your page first loads, so when the control is regenerated on the server, you lose the changes jscolor made. Could you register some javascript to be called in your code behind so that it would call the init method on jscolor when your asynch call completed?

Click an ASP.NET Button (locate inside an UpdatePanel) to clear a TextBox (locate outside of the UpdatePanel)

I am new with java script. I searched to find a way to Click a Button which is inside an UpdatePanel to clear a TextBox which is located outside of an UpdatePanel. and find this code which work fine. But I want to know how may I get the The javascript code? Here is the code (VB.NET):
ScriptManager.RegisterStartupScript(Me.Page, Me.Page.[GetType](), "myScript", "document.getElementById('" + TextBox2.ClientID & "').value = '';", True)
The secoud question: I know javascript runs client side but Asp.net is server side. What happens if I use the above code in my page?
For doing this thing using JavaScript on client side you can do something like this-
<script>
function clearText(){
document.getElementById("<%=TextBox2.ClientID%>").value = '';
}
</script>
And on the buttton's ClientClick event call the above function. Hope this will solve your problem.

Categories