Server side JavaScript action - javascript

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>

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.

Back button needs to redirect to last visited page

In web site I have to add "Back" button or Link URL which will redirects to me previously visited page.
Currently I have added below code, but it doesn't always work.
<i>Back</i>
I observed that it is not working in Google chrome.
<script>
function sample(){
window.location.href = window.history.back(1);
}
</script>
<input type="button" value="trying" onclick="sample()"/>
I have tested here it is working test ... :)
Event this work as same
<i>Back</i>
Try this :
<input action="action" type="button" value="Back" onclick="history.go(-1);" />
The following was an incorrect assumption by me
The value passed to onclick should be a function to call when the link is clicked. You are passing window.history.back() which is the value returned by the back function.
Try the following.
<i>Back</i>
Turns out I assumed, incorrectly, that the value of onClick should be a function to call on click. As Brian North and putvande pointed out in the comments it should be the javascript code to run when the event is triggered.
Suggestion
However one should generally avoid binding events in the way you are doing as it couples presentation, HTML, too tightly with the javascript. Instead one should bind the click listener from an external javascript file using for example addEventListener or jQuery.on.
jQuery example
HTML
Back
Javascript
$(function() {
$("#history-back").on("click", window.history.back);
});

Calling Jquery whilst partial postback on updatepanel

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.

Settimeout() javascript function is ignored

i have a simple button in my aspx page:
<asp:Button ID="a1" runat="server" OnClientClick="test2();" />
and the javascript function is:
function test2() {
setTimeout("alert('hello')", 1250);
}
The SetTimeout is totaly ignored - the alert won't show and the timer won't wait.
i read about 10 posts about this problem on ths site , none of the solutions work.
i tried calling another function instead of the alert function, i tried calling function with parameters using the function(){..}.
i also tried calling the Settimeout straight from the OnclientClick function :
OnClientClick="setTimeout('alert(\'hello\')',1250);"
nothing works, the Settimeout is ignored!
i'm using ie9.
Please try:
window.setTimeout(function () { alert('hello'); }, 1250);
The JavaScript worked fine. The page just looks the same, and the javascript just looks like it didn't work, but everything is working as designed.
Here's what’s happening...
User clicks the button.
The JavaScript is executed. The settimeout is set and starts to time.
The runat="server" now posts to the server (however the timeout was still ticking down)
Code for the objects OnClick event is run at the server (the page is being rebuilt server side).
A new response stream is sent to the client browser.
The client browser catches it and renders the "new" page resetting javascript for the new page (this is the new ASPX page you asked for!).
So even runat="server" on a different form element will stop both settimeout or setinterval methods from finally executing.
IMO a better way to code is to use AJAX on the client side to post up values to your server, catch them on a page at the server, build your html or javascripts and send them back to the client browser to catch and either replace the innerHTML of an element id or eval the javascript... less overhead, faster, better, more graceful and far more control . You can use stringbuilder if your using .NET to build the HTML fragments as this is far faster than multiple string concatenations.
hope this helps.
It's 100% Working Try this..
$(document).ready(function () {
$('#<%= DoesNotwork.ClientID %>').click(function (e) {
e.preventDefault();
setTimeout(function () {
alert("Hello");
$("form").submit();
},
3000);
});
});

How to disable back,forward and Refresh functionality in browser?

Can anyone help me to disable browser back,forward, back button and right click menu functionality using JavaScript or JQuery? I have tried disabling the back button like this:
function disableBackButton() {
window.history.forward();
}
setTimeout("disableBackButton()", 0);
I have called this function in the Body onload event. I have a doubt that where we need to put this code in the Calling page or Called Page.Suppose i have two pages like this FirstPage.aspx and SecondPage.aspx. When I navigate from the First Page to Second Page when I click back button of the browser it should not go to FirstPage.aspx.
Have a look at A Thorough Examination of "Disabling the Back Button."

Categories