Jump to content

datepicker is not displayed even when field value is date


techie

Recommended Posts


Trying to make the original post concise. A javascript function named ‘calShow’ below needs to be modified. The application that uses it allows users to create an adHoc report query by selecting data fields. When a new query is created using this application, the above function displays the calendaricon in front of the text boxes (4 of them) if date fields are selected. Otherwise, the calendar icon (datepicker) is hidden. The issue is that when a saved query is retrieved, the date value is pulled into the text box but the calendar icon is not display (datepicker is unavailable to change date).
There is a c# method 'FillSavedReportQueryFields’' which calls ‘calShow' function (see 'calShow' code below). This function does display the datepicker, but it also erases the date value from the text boxes. I am okay with modifying 'calShowl' function to work correctly but I am also open to adding another javascript function, which will simply display the datepicker if the value is date (defined as "D"). I would appreciate any help with this
	
Edited by techie
Link to comment
Share on other sites

Thank you so much for your response. I tried commenting the line. It is not clearing the value but it is not displaying the datepicker either! May be I am not calling the js function during my c# event method correctly:

These are the two lines I have added to 'FillReportCriteriaValues' method on the .aspx.cs page:

string.script = "javascript:showCal ("+ddl.ClientID+ "," + index + "); return false;";this.ClientScript.RegisterStartupScript (UpdatePanel1.GetType(), "showCal" + index.ToString(), script);

When I change the field selection in the drop-down field showing date field to something else and back to 'date' field the datepicker shows up on the page next to the text box. I would like it to show when the query fields are populated. Any further help would be appreciated. Thanks

Link to comment
Share on other sites

Is the showCal function the one that is supposed to add the datepicker? If that function isn't doing what you expect then I would add some debugging to it to have it print various values to the browser console so that you can see what it's doing, and why it isn't adding the datepicker when the page loads.

Link to comment
Share on other sites

Strangely, I am not seeing calShow function being called any where else in the code. So I am not sure if it is adding the datepicker. Since I am a new developer, it is a bit challenging for me to find out what this function is doing. Before the original developer left he said that he had fixed this issue by adding a new javascript function 'calShow2' and added a couple of lines of code to the 'FillReportCriteriaValues' method to call it there. He wasn't able to implement it. So now I am thinking that I need to do exactly the same. I need a javascript function which will use the 'showCal' function logic to determine if the text box field value is a date, if yes, then display the calendar icon ID img#dp0, img#dp1, img#dpl2, img#dp3 and img#dp4 in front of text boxes (#txtValue0, #txtValue1,#txtValue2,#txtValue3,#txtValue4). I am not sure how those are linked to the datepicker! I can check if needed.

 

The line 741 in showCal function that clears the date value may be required as users might change the field selection and enter new values.

 

Isn't adding a new javascript function as described above the easiest solution? I may be wrong.

 

Thanks

Edited by techie
Link to comment
Share on other sites

It's probably not necessary to add a completely different function if you're only changing a couple things about the code. To make it easier to maintain it would be better to add another parameter to the existing function to indicate whether it is running on startup or not, and do things a little differently based on that. Then you don't need to duplicate all of the code.

Link to comment
Share on other sites

I reviewed the code very closely. I found that the logic in 'showCal' is used to display the datepicker when a date field is selected while building a query. So, it makes sense to use the same function to display the datepicker when date field is populated from the saved query. However, I am at loss to figure out how to modify 'showCal' function to do that and how to call it when query data is being populated.

 

I would appreciate further help to achieve this.

Link to comment
Share on other sites

I would add some debugging statements to help you figure out what the function is doing. You can use the console.log method to send anything to the browser's developer console, you can send individual values or entire objects so that you can see what the function is working with. Start with that, add console.log statements to send all of the information to the console about what variables and objects it is working with, so that you can tell if it is going inside if statements or loops or whatever. The first step is to understand exactly what that function is doing whenever you call it. If you want to call the function you can just output a script block to execute it, although I'm not sure what it expects to have passed to it. The id variable that gets passed is an object, it looks like index is an integer. It looks like the id object is a select element, because it is accessing properties for value and selectedIndex. So you could call the function like this:

 

<script type="text/javascript">

showCal(document.getElementById('some_select_element'), 0);

</script>

Link to comment
Share on other sites

Thank you so much for your guidance. I spent 3 hours this morning and took the JavaScript tutorials which I found very useful. I found the below code in Page_Load method. It seems that the scripts is being run and it works when you create and save the query:

lstAllFields0.Attributes["onChange"] = "javascript:showCal(" + lstAllFields0.ClientID + ",0); return false;";                    lstAllFields1.Attributes["onChange"] = "javascript:showCal(" + lstAllFields1.ClientID + ",1); return false;";                    lstAllFields2.Attributes["onChange"] = "javascript:showCal(" + lstAllFields2.ClientID + ",2); return false;";                    lstAllFields3.Attributes["onChange"] = "javascript:showCal(" + lstAllFields3.ClientID + ",3); return false;";                    lstAllFields4.Attributes["onChange"] = "javascript:showCal(" + lstAllFields4.ClientID + ",4); return false;";

One of my coworker also told me that the lines below I have added to the FillReportCriteriaValues method is registering the script but not running it because of some .NET issue. He suggested me to Google the problems to see how to run the script during that event of populating the data into the fields:

string.script = "javascript:showCal ("+ddl.ClientID+ "," + index + "); return false;";this.ClientScript.RegisterStartupScript (UpdatePanel1.GetType(), "showCal" + index.ToString(), script);

I will also try console.log method to see what the 'showCal' function is doing. I will update later. Thanks

Link to comment
Share on other sites

I would like to delete this post as I have decided not to pursue this any longer. I would be implementing a totally different feature.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...