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.
Related
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.
I have an ASP.net repeater on my page which creates a load of listitems. I'm also using the JQuery UI Slider plugin to generate a slider from a div thats contained in some of the list items. So I have a javascript function called initSliders() that runs when the page has loaded which creates the sliders. This works fine.
The Repeater is inside an Ajax UpdatePanel which updates every 10 seconds. The repeater is rebound on every iteration. This is where the problem happens, on the reresh the sliders dissapear. I believe this is because the repeater is being re-generated so I think I need a way of calling the javascript initSliders() function after each time the repeater has loaded.
Any ideas how I would do that?
You're right. On partial postback your slider is removed and you have to recreate it on every refresh.
A way of doing this could be adding a snippet like this on Page_Load
string script = //SCRIPT THAT CREATES THE SLIDER
ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(),
"SLIDER", script, true);
EDIT
The partial update response is set to the innerHTML of a div control and because of that no inline javascript code within the update panel will work on refresh.
That's why you need to register the script using ScriptManager
A more detailed explanation here
I have a web page that initially loads a drop down list. When an item is selected from the list, a web form is dynamically created during an update panel async postback.
I added watermark extenders to some of the textboxes, but the watermark does not display when the page is first updated. If I focus in and then out of one of the textboxes, the watermark then appears and seems to work fine. From examining the source, I saw that the client side creation of the watermark was being attached to the init event of Sys.Application on the client.
Here's where I'm getting confused.
1. I added a handler to the client side page Sys.Application.initialize event to see if it was called during the life cycle of an async postback. It didn't appear to fire the event.
2. I tried to raise the initialize event by adding a handler to the PageRequestManager End Request method, but the flags that check if the page was already initialized were set, so none of the individual handlers were fired.
3. After 1 & 2, I thought maybe the watermark extender was somehow being lazy loaded when I applied focus to it. So I put the $create statement that is supposed to be executed in the initialize event in the End Request event of the PageRequestManager. The client script threw an error because the watermark extender was apparantly already created.
I'm not sure what the resolution here is, outside of writing my own watermark code. Is this a limitation (will the extender only function correctly if created in the initial request for the page)? And what about the init event? I can't see it firing, but if the extender was already created, it must have???
Any help would be appreciated. Thanks.
The watermark extension gives headaches to others too. I'd suggest taking a look at a jquery watermark plugin http://jquery-watermark.googlecode.com/
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.
Short version
All I need is that, in a ModalPopUp, when the DoubleClick event of a ListItem fires, the click event of my OK button should be executed.
Detail
I have a ModalPopUpExtender, which hosts a user control. The user control has an OK and a Cancel button. Along with that, it has a dynamic ListBox added to it. So far, I've considered the following possible solutions:
Use Ajax.Net. But, I cannot afford to have a WebMethod.
Use a ClientScriptCallBack. This will need a lot of JavaScript, since I have made almost every control dynamic.
Is there any other way apart from using an UpdatePanel?
Have a look at this way using __doPostback
calling a VB.net function from javascript