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.
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 was hoping for a little help. I am currently using some of the jQueryUI widgets in an ASP.Net Web App. I have successfully got everything working. Basically, I have a GridView on a page which contains some hidden fields in each row containing data. I also have a dialog div containing an update panel and a few Labels.
When a user clicks on an Image Button on the GridView, the jQuery is fired to show the jQueryUI dialog and code behind is used to fill the labels from the selected GridView row. Unfortunately, the AJAX communication takes quite a bit longer to update versus showing the dialog div.
The same question actually applies to the loading of an ASP page into a jQuery popup window also as I will need to eventually do this.
So my questions are:
How can I make jQuery wait to execute until after the partial postback has returned with the AJAX information for the popup?
Is the above method the right way to go?
Is there a better way?
Is there a way to speed up AJAX
communications to make it more
instantaneous?
Thanks in advance for your input.
without knowing exactly what you're doing (code wise), the best I can understand is that you want to trigger some behavior after the ajax call has completed, which is actually supported like so:
$.ajax({
url: 'myurl.aspx',
success: function(data) {
//everything you want to happen after the ajax completes.
//this can either be code, or a call to another function that loads your div
}
});
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'm building an ASP.NET website and I'm puzzled with the behavior of one page, I've got a long form and a submit button, I've got the piece of javascript below in the page to handle scrolling the page back up upon submiting the form, the first time I click the submit button it works all the sequent clicks don't work at all, any idea why?
<script type="text/javascript">
$(".thebutton").click(function(){
$("html, body").animate({scrollTop: 200}, 1000);
});
</script>
Cheers,
Thi
Ahh,
Using an Ajax post makes this different that my post above.
Does your ajax call change the buttons on the page? I assume you are using an UpdatePanel with the buttons in qustion in it.
Since when you make the Ajax call, the controls in the UpdatePanel are being rebuilt, the DOM is seeing them as different objects and these new objects are no longer bound to the jQuery click function. You will need to re-bind these buttons click event after the ajax post to re-enable the functionality you are looking for.
Using jQuerys new "Live" Handlers should do the trick for you:
$(".thebutton").live("click", function() {
$("html, body").animate({scrollTop: 200}, 1000);
});
Hope it helps.
If your Submit button performs a full postback, I would view source on the second web page instance, and make sure that the script is still there.
Your script will run BEFORE the Post.
Imagine if you will:
Initial Page Load
Bind Click event with jQuery
Click Button
jQuery Click is raised
html and body scrollTop are set to 200
during the "animate" the form is submitted
asp.net back end click event code is run
page is reloaded.
string script = "$(function() { $('html, body').scrollTop(200); });";
ClientScript.RegisterStartupScript(this.GetType(), "scrollTop", script, true);
That should take care of what you want to accomplish.
Hope it helps.