ASP.NET UpdatePanel stopping JQuery from working - asp.net

I have an update panel on my page with some links that have onClick events that trigger a JQuery box to pop up. This works fine unless an AJAX postback has occurred. I saw some code on another post:
Page.ClientScript.RegisterStartupScript(TypeOf(Page), 'ajaxTrigger1', 'Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);', true);
Page.ClientScript.RegisterClientScriptBlock(TypeOf(Page), 'EndRequest1', 'function EndRequestHandler(sender, args){AsyncDone();}', true);
which I have used but it doesn't seem to be working. I keep getting AsyncDone is not defined. Does anyone have any ideas as to what I can do to sort the issue out please?
Details: ASP.NET 2, IIS7
Thanks in advance.

The problem is that when the updatepanel fires, it replaces a chunk of html in the dom, which means it replaces the elements that you have bound the click event to.
To bypass this look at jquery .live() or .delegate() which keeps looking for events matching the selector you provide, or if you want to bind to content every time the update panel refreshes content look that the jQuery updatepanel plug-in.

I sorted this by not using the document.ready in jQuery. Instead I used:
function pageLoad(sender, args) { //code }
I haven't seen any adverse effects yet so hopefully this will sort my issue.

I used update panel just only to stop the whole page refresh in asp.net which even included the jquery.But after using the update panel somewhat the problem was solved but created another problem. jquery script was not working inside the updatepanel.
This issue is now solved.
Example: In case of jquery Date picker, Usual call of Jquery script appears like this :
<script type="text/javascript">
$(function() {
$("#datepickers").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
});
</script>
Even I had used the same code as
Page.ClientScript.RegisterStartupScript(TypeOf(Page), 'ajaxTrigger1',
'Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);', true);
Page.ClientScript.RegisterClientScriptBlock(TypeOf(Page), 'EndRequest1', 'function EndRequestHandler(sender, args){AsyncDone();}', true);
Solution Appears here: http://kopila.com.np/
But it didnt worked for me.Later I came to know that The jquery script wont work after partial postback i.e.our ajax request.If we try to call any JQuery script inside the update panel do whatever script wont work after the first ajax request.
Example: When you are using asp.net update panel call it again as follows:
<script type="text/javascript">
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
$("#datepickers").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
}
}
</script>
For More Details Go to: http://kopila.com.np

Related

Focus method not working on asp.net gridview

I have a web page with gridview. I received a requirement that the first checkbox on the gridview should have the focus when the page loads. I put the following code:
CheckBox chkBox = (CheckBox)grdMenuPublicHealth.Rows[0].FindControl("chkSelect");
//chkBox.Checked = true;
chkBox.Focus();
I put the Checked method in to make sure the checkbox was being found, and it works. However, the Focus() method doesn't appear to be working. Has anyone run into this before?
Thanks in advance for any guidance.
I found that the following JQuery worked:
<script type="text/javascript">
$(document).ready(function () {
$('input[type=checkbox]:first').focus();
});
</script>

scroll position on Ajax's Timer OnTick event

Inside the one of contentPlaceHolder of the masterpage I'm using Iframe. And In Iframe suppose, IfrmPage.aspx I'm using update panel where timer control is updating the page for each certain duration.
So, what I'm trying to do is settng the focus on textbox after OnTick event. I'm using following line:
ScriptManager1.SetFocus(this.txtMessage.ClientID);
This works correctly. However, Main page or I should say masterpage's scrollbar changes their position which is annoying.
Please share your valuable experience.
thanks.
Have you tried using MaintainScrollPositionOnPostback on the page declaration of IfrmPage.aspx?
After seaching on the google I found the answer.
Now I'm setting the focus to txtMessage(textbox) using javascript and remove this code:
ScriptManager1.SetFocus(this.txtMessage.ClientID);
final answer is here:
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);
function pageLoaded(sender, args) {
if (args.get_panelsUpdated().length > 0) {
$get('txtMessage').focus();
}
}
</script>

Update pannel not working

Dear all.
I have an update panel and nested repeaters in it. I have image which when i click shows the other nested repeaters data and so on. The rows are shown and hidden using the client script written on code behind.
The Page is working fine , but it refreshes the page every time i click to show data. If i put page in update panel, the page stops showing rows.
How to register the javascript with update panel.
Best Regards
Imran
This is how to register your javascript with the updatePanel: You place your javascript globally, out side UpdatePanel so your libraries loaded, and then using this code you initialized it on every update panel, if needed.
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) {
}
function EndRequest(sender, args) {
}
</script>

Disable a button on click

I have a button control. Once the user clicks on it, the click event should fire and then the button should get disabled. How can I do this? I have the option to use JQuery or JavaScript or both.
Here is my button declaration:
<asp:Button
ID="Button1"
runat="server"
Text="Click Me"
onclick="Button1_Click"
/>
On the button click code behind, I have added a Response.Write(). That should get executed and then the button should be disabled
For whatever reason, the HTML spec dictates that disabled elements should not be included in POST requests. So, if you use JavaScript to disable the HTML element in the client-side onclick event, the input element will be disabled when the browser assembles the POST request, the server won't be properly notified which element raised the postback, and it won't fire server-side click event handlers.
When you set the UseSubmitBehavior property to false, ASP.NET renders an input element of type button instead of the regular input of type submit that the ASP.NET Button control normally generates. This is important because clicking a button element does not trigger the browser's form submit event.
Instead of relying on a browser form submission, ASP.NET will render a client-side call to __doPostBack() within that button element's onclick handler. __doPostBack will raise the postback explicitly, regardless of what POST data comes through in the request.
With the postback being raised independent of the browser submit event, you're freed of the previously mentioned HTML quirk. Then, you can set an OnClientClick of "this.disabled = true;", which will render as "this.disabled = true; __doPostBack('Button1', '');", and things will work as intended.
add an OnClientClick="this.disabled = true;" to your button.
If you are using Asp.net Ajax you might want to look at using PostBack Ritalin.
Have you tried this?
Add an OnClientClick="MyFunction();" to your .NET button.
Then in the .aspx page script tags you add the following JS function:
<script type="text/javascript">
function MyFunction()
{
window.setTimeout(function ()
{
// get the button/control to disable using your favourite clientside ...
// ... control grabbing code snippet ...
// ... eg. JQUERY $('Button1'), getElementById, etc.)
document.getElementsByName('Button1').Button1.disabled = true;
// I've used "getElementsByName" because .NET will render a button with
// ... a "name" attribute, and not an "id" attribute, by default
}, 1);
}
</script>
This gives the browser a chance to post back, followed by a quick button disable.
You need to be careful that the postback occurs before you disable the button through client script. This is a common gotcha with ajax and input boxes. Disabling an input box prevents the data from being sent from the browser, even if you can see text within it while it is disabled. The answer is that you need to use jquery for this to ensure the server-side code runs first before it is disabled.
-Oisin
// to disable
this.setAttribute('disabled', true);
// to enable
this.removeAttribute('disabled');
this is a cross browser solution
There is really cool event for body tag "<"body onBeforeunload="buttonId.disabled = true;" ">"
This event triggers right before form submits, in other words your data will be submitted correctly.
When using the "this.disabled = true" method make sure you check if the page is valid before disabling the control if you have validators on the page. If validation fails you won't be able to re-enable the control without reloading the page.
if (Page_IsValid) this.disabled = true;
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function BeginRequestHandler(sender, args) {
document.getElementById('<%= lblMessage.ClientID %>').innerText = "Processing...";
document.getElementById('<%= btnSubmit.ClientID %>').innerText = "Processing";
args.get_postBackElement().disabled = true;
}
</script>
Add Script Tag in source page . change Id of button in code . You can disable the button till the process completes execution .
you can disable it server side
Button1.Enabled = false;

JQuery ajaxStart event not being captured in ASP.net AJAX

I have an asp.net page with a save button within an updatepanel and contenttemplate. The save works nicely, but I am trying to add a "wait" gif while the save is happening using JQuery, but the ajaxStart event is not firing. I put a simple catch shown below:
$(document).ajaxStart(function () {
alert('starting');
}).ajaxStop(function () {
alert('done');
});
No alerts show when I click the save. Is there a problem when trying to capture ASP.net Ajax events, is asp doing some funky type of Ajax calls that can't be captured by Jquery?
Thanks, let me know if you have any ideas about this,
Mark.
The ASP.NET update panels seem to do their own thing... Tap into the PageReuqestManager and setup your own calls here...
EDIT
I simplified the functions a bit below to match your sample a little more...
<script type="text/javascript">
function pageLoad() {
if (!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(AjaxEnd);
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(AjaxBegin);
}
}
function AjaxEnd(sender, args) {
alert("I am done...");
}
function AjaxBegin(sender, args) {
alert("I am about to start...");
}
</script>

Resources