Actually I have Multiple update panels on page, which update different values on server but the problem is that I have textbox to which I attach javascript class for datepicker on Load event.
But There are other updatepanels before that date TextBox, when I update them first calender image with date control which is in updatepanel disappears. or it remove the calender which is next to the textbox.
txtDate.Attributes.Add("class", "show-week w16em dateformat-d-sl-m-sl-Y");
Before using any updatepanel its like this
After we upfdate any updatepanel control its like this.
But the Date controls which are not in any updatepanel are ok and working.
And in these updatepanels I actually saving values in DataTables and save these DataTables in viewState .... no change in HTML.
I guess the datepicker and its textbox both are placed in an updatepanel?
If you do an ajax-postback with UpdatePanels the server will send html back for all UpdatePanels on the page, and refresh all of their contents, so your datepicker will disappear.
If you set UpdateMode=Conditional on the UpdatePanels then only the UpdatePanels that caused the postback will update.
Another option is to recreate the datepicker with ScriptManager.RegisterStartupScript, but this possibly resets its value (depends on which datepicker it is).
Are you changing the INNERHTML of the DIV or TABLE in which the TextBox is present because if you are then its removing the calender control after that DIV or TABLE is being updated.
whatever method you are using to attach the datepicker, you must call again after the updatepanel updates
you can do it on server side with this:
// at some point of the method that updates the panel
ScriptManager.RegisterStartupScript(
this, typeof(object), "someUniqueKey", "theScript();", true);
or on client side with this:
// <body onload='...'> or in the <head>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
function () { theScript() });
Related
I have a modal dialog which contains a form loaded via ajax. In the form is a tim field which is populated using the jquery timepicker. All works well if I open the dialog one time. If I load the dialog a second time without refreshing the page the timepicker not working
here is my code
<asp:TextBox runat="server" ReadOnly="true" CssClass="form-control timepicker" ClientIDMode="Static" ID="txtTime" />
$(document).ready(function () {
$("#txtTime").timepicker({
twentyFour: false, title:'Time', showSeconds: false
});
});
Since your question itself may be rather unclear, I'll try to provide two scenarios that might address your issue.
If you are replacing elements within the DOM...
If your existing element is being either replaced or removed and re-added to the DOM, you'll need to make sure that you re-wire up your timepicker function to target the most recent instance of that element in the DOM
// Open your dialog here and re-write your elements
// This will target the new element that should now be present in the DOM
$("#txtTime").timepicker({ twentyFour: false, title:'Time', showSeconds: false });
Without knowing the exact details of how you are displaying or disposing of the dialog and its contents, it could be difficult to determine the best way to handle this, but explicitly instantiating the picker each time should ensure that it works as expected.
If you are actually posting the page and reloading it...
In instances where you are submitting a form or refreshing the page, it's worth noting that your timepicker will not persist during the process and will need to be re-instantiated when the page initially loads :
$(function(){
// This will ensure that when the page loads, your timepicker works
$('#txtTime').timepicker({ ... });
});
I had a gridview in a webform, with javascript for scrolling the selected item into view; worked fine.
Then I moved the gridview to a user control, got it to work except for the scroll into view.
Here's how the scrollintoview works, or used to work.
On gridview.itemselected, a unique value from the selected row is stored in a hidden field.
$(document).ready on the main page calls a javascript "scrollintoview" function.
The scrollintoview function gets the value from the hidden field, finds that value in the gridview, identifies the vertical location of that value, does a scroll to the appropriate vertical position, and sets the background-color of the gridview row to light yellow.
Again, that worked fine when the gridview was in the main form.
Now, with the gridview in the user control, the javascript executes correctly (I can watch it during debug), but when the gridview appears on the page, it has not scrolled.
So, maybe somewhere in the sequence of events, the gridview is being rendered after the scrollintoview has taken place?
Any suggestions on how to get this to work would be appreciated. Thanks!
This can be tricky. The way I've done it is to place the gridview in a div which looks like this:
Then in function setScrollValue the hiddenfield value is set to divGvMD.scrollTop.
When the page refreshes divGvMD.scrollTop is set to the hiddenfield value.
I was thinking to my self if there is a better implementation to my approach in triggering functions from JavaScript to ASP.Net and viceversa.
Run JS code from ASP.Net
Create asp.net hidden value that will keep information of what
action was done. (Eg. id = hiddenFunctionality)
Behind ASP.NET code, do the functionality than
alter the asp.net hidden value (hiddenFunctionality.value = "AddedUser") to trigger the correct JS function later on.
From the JS aspect create pageLoad() method and within the pageLoad() method
read the asp.net hidden value if(document.getElementById('contentPage_hiddenFunctionality').value=="AddedUser"){...}
Run ASP.Net code from JS
Create a div that hides it's content yet leaves the ASP.Net elements still clickable.
Insert ASP.Net button within the div. (There should be a work around with the __doPostBack(eventTarget, eventArgument), this would remove the hidden div and ASP.Net button)
In JS trigger <li onclick="trigger('#contentPage_btn');">Click me to trigger ASP.Net function</li>) run a method to simply trigger click event on the ASP.Net button. function trigger(x){$(x).click();}
Passing of data from one side to another can be done with ASP.Net hidden values or query strings.
To inject JavaScript from ASP you can do RegisterClientScriptBlock:
Type myType = this.GetType();
if (!ClientScript.IsClientScriptBlockRegistered(someType, "_FROMASP"))
{
string script = "alert('FROM ASP!');";
ClientScript.RegisterClientScriptBlock(someType, "FROMASP", script, true);
}
I think you are on the right track if you want to run ASP code from JS and not use AJAX. I normally use a hidden field with __doPostBack to pass messages rather than a DIV.
I have fields where multiple extra fields can be added after the page loads (think education & work experience fields on job resumes). I am using this.
I can add a datepicker on the first field, but subsequent added fields do not access the datepicker, despite being cloned/essential duplicates of the original. I'm guessing that the datepicker only intializes on page load or for only one class on the page.
So on a page I initialize the datepicker:
$('.input-append.date').datepicker();
for a block of form code encapsulated by this class. OK for initial page load; and also OK if there is an error and the page reloads multiple fields previously input(there is a datepicker for all fields returned with any error). However, with another js function that adds new fields to the form, additional new fields do not have access to the datepicker. I do not see how to do this now, perhaps someone with more experience/wisdom can provide me a hint.
EDIT:
Simple enough: I simply added:
$('.input-append.date').datepicker();
to the code calling the new field. As to being the optimal solution I do not know, anyone who specializes in js can comment on that, and there are many other similar questions here I found once I expanded my search terms. However, good enough for me now in what I'm doing.
For elements which are being added on fly use data-provide="datepicker" attribute. It will be initialized lazily. For example if an input field is coming up in an ajax response and loaded in a container div. So in this case:
<input type="text" data-provide="datepicker" />
so when when you will load this ajax response it in cotainer div like
$('#container-div').html(ajax_response);
this will work.
In the same way if you are creating an element through jquery and appending it to some container (I think this is happening in your case), for example you have a function that creates textbox and append it to some container div and this function is called on click event of some element let's say it's button. Again data-provide attribute is the solution to this problem. For example
function createTextBox(){
var t = $('<input>').attr('data-provide','datepicker');
$('#container-div').append(t);
}
And this function is called on click event of some button like in this way:
$(document).ready(function(){
$('#someBtn).click(createTextBox);
});
In short whether that dynamic element is coming in ajax response as a string or being created through jquery, just use data-provide attribute to set bootstrap datepicker. Because in this case datepicker is initialized lazily in Bootstrap fashion.
I am using ryanfait.com custom form elements to change the appearance of my dropdown lists in my .net web application. Everything works fine except for .net postbacks on dropdown lists. Having looked at the javascript code for custom work elements I have noticed that the onchange event is overwritten:
if(!inputs[a].getAttribute("disabled")) {
inputs[a].onchange = Custom.choose;
} else {
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
}
If I comment out the above code the autopostback works but for other dropdownlists which do not require an autopostback the input value now does not change. Is there a way I can get this working for both scenarios? On ryanfait.com he says:
onChange and other JavaScript events
This script utilizes JavaScript's onChange and other events. Because these events can only be used once, if you want to add more functions to an event, you will need to call them from inside my script.
But I can't work out if I can somehow trigger the autopostback event?
Any help would be very much appreciated!
The easiest way do this is to add a a standard asp:dropdownlist with autopostback, preview your page and then view source, find the list in the HTML source and copy the onChange property. this is what you need to call client side to post the page back.
eg.
onchange="javascript:setTimeout('__doPostBack(\'ddlHolidayType\',\'\')', 0)"