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
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 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.
I have a ListView on a page that displays a list of widgets. When a user clicks on one of the items in the list, I want to display a ModalPopup that contains controls allowing the user to operate on the item they selected.
I could easily accomplish this by placing a Panel and a ModalPopupExtender in the ListView's ItemTemplate, but this mean one set of hidden controls for each and every widget, which would massively bloat the page size. (There are going to be some rather heavyweight controls in there.) Instead I want to reuse a single ModalPopup for each of the widgets in the list.
I've done some searching but I haven't found anything that applies directly to my situation before. From what I've been able to figure out, however, I have to do something like this:
Place a Panel and a ModalPopupExtender on the page inside an UpdatePanel.
Build a custom WidgetManipulator user control that has a WidgetID property. Put this in the Panel, along with a couple OK/Cancel buttons.
In Javascript on the page, attach a click handler to each widget in the ListView that triggers a postback on the UpdatePanel.
On the UpdatePanel_Load event on the server, display the ModalPopup and then set the WidgetID propety on the WidgetManipulator to the ID of the clicked widget.
On the OKButton_Click event or CancelButton_Click event on the server, hide the ModalPopup. If OKButton was clicked, call WidgetManipulator.SaveChanges() first.
The part I haven't figured out is: How the heck do I know what widget was clicked on, and how do I pass that back to the server when I refresh the UpdatePanel? Is this even the right approach at all?
If you can use jQuery instead you could do something along the lines of these two posts:
Modal Delete Confirmation Version
Two Using jQuery SimpleModal Plugin
Demo
Inserting Content Using
jQuery SimpleModal Plugin Demo
When I need to pass data from client to server in ASP.NET AJAX, I generally use an asp:HiddenField with runat="server". Both can see it freely, but beware potential postback asynchronicity.
Sounds like you need to notify the server the widget was clicked - You may use a Timer to postback; or I'd go with option 5.
I have a page results page (you get there after submitting your search query elsewhere) whit a whole bunch of gridviews for different type of data objects.
Obviously, some of the queries take longer than the others. How can I make each gridview render as soon as it has the data it needs?
This has been tricky for me because it must work on a postback as well as a pageload. Also, the object data sources just fire automatically on page load/postback; I'm not calling any methods programatically to get the data. Will I have to change this?
#Gareth Jenkins
The page will execute all of the queries before returning even the first update panel, so he won't save any time there.
The trick to do this is to move each of your complex gridviews into a user control, in the user control, get rid of the Object DataSource crap, and do your binding in the code behind.
Write your bind code so that it only binds in this situation:
if (this.isPostBack && ScriptManager.IsInAsyncPostback)
Then, in the page, programaticly refresh the update panel using javascript once the page has loaded, and you'll get each individual gridview rendering once its ready.
Could you put the DataGrids inside panels that have their visibility set to false, then call a client-side javascript function from the body's onload event that calls a server side function that sets the visibility of the panels to true?
If you combined this with an asp:updateProgress control and wrapped the whole thing in an UpdatePanel, you should get something close to what you're looking for - especially if you rigged the js function called in onload to only show one panel and call a return function that showed the next etc.