JQuery asp.net validator callout plugin updatepanel - asp.net

I am using this plugin:
http://plugins.jquery.com/project/updnValidatorCallout
This controls to be validated are inside an updatepanel. Before posting back everything works fine, after a async postback the callout plugin messes up.
I'm initializing the plugin like so:
$(document).ready(function() {
$.updnValidatorCallout.attachAll();
});
I tried putting this in the pageLoad and endRequest of the UpdatePanel but with no success.
Anyone knows more about this?

This is due to how the UpdatePanel works. When UpdatePanel refreshes, it will replace the content enclosed inside it. This will break your plugin because it will not be able to find the original plugin.
To resolve this, call this 'attachAll' method when the UpdatePanel has finished refreshing to bind it again.

Related

JQuery Date Picker issue inside Update Panel

i am using this Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addDataPicker); for my script to load on every post back for JQuery Datepicker. Because i am using updatepanel. Its working fine in second postback.but its not working the first time of page load. Please Help me out
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addDataPicker) event is raised after an asynchronous postback is finished and control has been returned to the browser.So your addDataPicker is added after postback is done, you need to add this after document is loaded, i.e. if you are using Jquery this can be done by,
$(document).ready(function() {
// put all your datepicker init function here.
});
Hope this will help.

jQueryUI dialog, gridview and updatepanel

I'm using jQuery to convert a column of hyperlinks within a gridview into UI dialogs.
This gridview is in an updatepanel, and for one of the dialog's buttons I perform a __dopostback on this updatepanel, which refreshes the changes I've made within the dialog.
It all works rather nicely, apart from one small issue.... that is when the updatepanel posts back and recreates the gridview table with new data.. I lose the dialog functionality!
Previously, I simply had the following:
$('a.createdialog').click(function(e) { <iframe code here>.dialog( { <buttons and other options> } )
and it made sense that, once the gridview was updated, the above will essentially be wiped.
So I put that code into a function, and as well as running this function on the page load I also placed the function into the dialog's button code. This however does not fix the issue... I tried moving where I call this function around from the button to the updatepanel's loading events with registerstartupscript().. again no luck.
any ideas?
Cheers :D
Try the live method, description from JQuery Docs: Attach a handler to the event for all elements which match the current selector, now and in the future. The async postback/refresh is killing the handler; live can help in this situation persist the handler.
http://api.jquery.com/live/
$('.clickme').live('click', function() {
// Live handler called.
});
HTH.

ASP.NET control event handler not firing on postback?

I have a control which has an ImageButton which is tied to an OnClick event... Upon clicking this control, a postback is performed and the event handler is not called. AutoEventWireup is set to true, and I've double checked spelling etc.... We haven't touched this control in over a year and it has been working fine until a couple of weeks ago.
We have made changes to controls which load this control... so I'm wondering, what kind of changes could we have made to stop this event handler from being called? There is quite a bit of Javascript going on, so this could be the culprit too...
Edit: Some clarification... we are dynamically loading the parent control of the ImageButton in the OnLoad event of the page... if that makes sense.
AutoEventWireup is irrelevant. Is your ImageButton loaded dynamically, i.e. not written out in mark up? If it is loaded onto the page late in the Page lifecycle e.g. in PreRender then the event will not fire.
If there is a JavaScript issue your page will not even PostBack. Is that happening?
Did you give the ImageButton an ID?
I def agree with what BritishDeveloper said. I had a similar problem where I was dynamically loading controls, but I couldn't get a reference to the control using Page.FindControl("controlName") Someone pointed out that I needed to keep the page lifecycle in mind. I found out I needed to make sure to load the control in the PageInit because after doing an async postback the control was still there, but not loaded in the postback so there was no way to find it. This was all in csharp codebehind and ajax though, but I'm guessing the control isn't getting reloaded.
So, as it turns out we set the PostbackUrl property on one of our buttons in control A... this caused the event handlers for control B not to fire when a button in control B was pressed.
If you create a control dynamically. Any time you fire a postback using the new created control, you need to recreated it. Just think that your application are running at a server. How can the server hold information on controls created dynamically? Don't use Page.IsPostBack to create postback. PostbackUrl is bad solution. Workarround will be need.
I can go into a little more detail ... I just lost several hours fixing my own issue similar to the issue described here. In the course of creating some search controls, I added a pair of ImageButtons and set the PostbackUrl properties on them. A few days later while testing new code, I noticed that none of my other buttons on the webform were posting back properly. They would fire a postback, but the code-behind was behaving as if every postback was an initial page request and none of the event handlers were firing.
After several hours of troubleshooting, I came across this post. When I went back and removed the PostbackUrl from those two ImageButtons, everything went back to normal. I don't know why it was causing this issue, but the fix mentioned here worked for me. I want to add that my ImageButtons were not dynamically added ... they were in the markup and this issue still cropped up. Search your markup for any controls with PostbackUrl set ... remove that (program around it if needed) ... see if your event handlers will fire properly.

how to get javascript to execute in update panel

I have an update panel which contains a table, to which I add rows of controls on a button click. One of the controls that is added, is a user control and it is a datepicker. Inside of that user control I have a textbox, and I have JQuery which applies the JQuery UI DatePicker plugin to it thereby turning it into a datepicker. It's not a problem if that user control is loaded onto a page dynamically, however, if it is done on async postbacks inside an update panel, the javascript doesn't fire and therefore the textbox is render but without all the jquery datepicker functionality. Here's some code that's inside the DatePicker.ascx:
$(function() {
//reset the localization
$.datepicker.setDefaults($.extend($.datepicker.regional['']));
$("#<%=txtDate.ClientID%>").datepicker({ dateFormat: 'mm/dd/yy', showOn: 'button', buttonImage: '/images/calendar.gif', buttonImageOnly: true, altField: '#<%=txtDate.ClientID%>' });
}
So this jquery isn't fired when the control is loaded in dynamically on an async postback. So how can I make this work?
Check this Page
look for the session on DatePicker
it says that ASP.NET AJAX UpdatePanel's wipes the DOM, so the load doesn't fire.
the post says you can either, use the EndRequest handler, or the pageLoad shortcut, however I'm thinking if you just couldn't register the javascript with ScriptManager.
Hope this helps.
When you render a script in a response, it does just that: render the script. It is during the rendering of the page that the script is first rendered, and that has already happened by the time that this code is being executed.
Microsoft has come up with a solution for this, which is to register the script block via ScriptManager.RegisterClientScriptBlock, and the ScriptManager will then see to it that the script is executed after page load.
Depending on your situation, that may or may not be helpful. Or, in the intermediate: it may be helpful only with a bit of workarounds. From your comment, I can think of one workaround I might have considered using:
Add a GetClientScript method to your UserControl, where the JavaScript is returned. If the UserControl is loaded on a regular page load, you invoke that method at the point where you are currently rendering your script. If the control is loaded in a UpdatePanel postback, you get the scriptbody from the control using that method, and register it in the ScriptManager at hand. You should, in this case, also pass a parameter back to the UserControl not to register the script once more, where it usually does.
Is the the DatePicker.ascx inserting that javascript at the top of the page during the initial load? And then that function fails since the datepicker is not loaded yet. And then you load the datepicker on async into the update panel, but the function is not called.

postback not raised problem

I have next situation:
I load dynamic controls during on init, and I do correct initialization.
I add dynamic control before postback
I don't add anything later in load
control is loaded and diplayed correctly
I press postback and nothing happens
Why I really don't know.. I tried everything. So control IS properly initialised. __EVENTTARGET shows the same path as the UniqueId of linkbutton that is firing it. All controls in tree have viewstate=true. So, I really don't know what this is not working.
Any idea? I am desperate.. I don't know.. if anyone could suggest me, if not solution, then just things I should check would be very good.
Is this problem just for this page or do you have other pages on the same site with the same problem?
I am assuming that you have the same problem on all pages.
It could be relate do javascript not being allowed. You could try to add the site to local intranet security are, then refresh the page.
Dynamic controls have to be added back to the control tree on each postback for the events to fire.
Dynamically created controls are not part of their container's viewstate, so setting it to TRUE wouldn't have any effect on the situation and are not evaluated until after the on_init call completes anyways.
I would wrap the logic that is populating these dynamic controls in with a conditional check for a postback if(!IsPostBack)
{ //Insert logic here }
If your dynamic controls take input from the user, or need access to their view state, then you would need to move this call to the Page_Load method as this is the point in the page's lifecycle where viewstate is first evaluated.

Resources