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.
Related
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.
I have a custom control which is a wrapper around the ASPxGridView. This custom control is nested inside an UpdatePanel. In one of its columns I add a LinkButton, which I register by calling ScriptManager.RegisterPostBackControl.
The grid has paging enabled. Paging is of course done during an AsyncPostBack.
When the grid is showing its first page everything works as expected: the button is clicked causing a PostBack.
However, if the current page is not the first, clicking the button once does not cause a PostBack, and clicking it again (in fact clicking any button inside the column) raises an error.
This same error is thrown if I comment out the line that registers the button with the ScriptManager and click a button while on the first page.
So this leads me to think that the buttons in the first page get registered correctly because this is done during a PostBack, and that registration for the buttons in any other page fails (for some reason) because it is done during an AsyncPostBack.
Any thoughts? A possible solution?
Thanks in advance
I think that you need to re-register your Javascript that control your button after the UpdatePanel. To do that:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) {
}
function EndRequest(sender, args) {
}
Be sure to run this stript after the PageLoad, or after the script manager, to give the time to the page to load Sys object.
I solved it by setting the ASPxGridView's EnableCallbacks property to false.
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 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.
I have a DIV in which I have a asp:repeater which, based on data, puts information in this div. I then use Jquery's UI dialog to display the data to the user via a button click. This all works swimmingly.
So, I want to be able to add records to the data which populates the repeater. I have another part of the screen where people can enter this data, and it is saved to the database using an ajax call. This, too, works swimmingly.
I then want to update the data on my dialog box, without having to do a full postback to the server. So, this is normally pretty easy. I put my div into an UpdatePanel, and from Jquery initiate a __doPostBack. which then refreshes the data, which too, works swimmingly up to a point.
Once the __doPostBack is complete, the div is no longer hidden. It is now displayed on my page (with the updated data mind you), but the javascript i use to show the dialog, now no longer works.
Some investigation shows that:
On initial load of the page, the javascript which tells jquery to create a dialog from a div takes the div from wherever it is on the form, and appends it to the body element.
When the update panel posts back, the div is recreated, but the javascript to turn it into a dialog either isn't executed again (which I can understand... we haven't done a full load of the page, so the javascript doesnt execute again.
This means that the div is no longer a 'dialog' but a simple div on my page, which is not what I want.
So, my questions are is:
Is there a way of injecting javascript aftr the updatepanels postback which will execute and create the dialog properly again?
The solution would be not to use Updatepanel at all and just change the innerHTML of the div with data received through a jquery ajax call.
I found another solution to this. I put the dialog initialization javascript in a separate function called SetupDialog instead of being inside the $(function () { }); block.
Then I used ScriptManager.RegisterStartupScript in Page_Load to register the script so that it runs every time the Update Panel updates:
ScriptManager.RegisterStartupScript(this, GetType(), "SetupDialog", "SetupDialog();", true);
In this case, the dialog will only work after the UpdatePanel has been updated. If you need the dialog before that, then you can call SetupDialog inside the $(function () { }); block as well.