jQuery UI datepicker icon is not clickable anymore after navigating to another page
posted 11 years ago
-
-
Number of slices to send:Optional 'thank-you' note:
-
-
Hello guys, I have 1 jsp file with 3 tabpages in it. The content of each tabpage is in another jsp file using ajax. I done this by invoking first the page servlet associated with the tabpage's jsp then use forward it from doGet() method.
One of my tabpage has jquery datepicker which loads the calendar when the icon is clicked. At first load, the icon is clickable (calendar appears). However when I select another tab(let's say tab2) then return back to tab1, the datepicker icon is present but the calendar does not display. Moreover, if I did this twice (click tab2 return tab1 click tab2 click tab1), the datepicker icon dissapears, and becomes like a normal input text box.
Here is my main jsp file:
and here's my code under tabpage 1:
Could someone please tell me what did I miss? I've spent a lot of time trying to find it.
Thanks!
One of my tabpage has jquery datepicker which loads the calendar when the icon is clicked. At first load, the icon is clickable (calendar appears). However when I select another tab(let's say tab2) then return back to tab1, the datepicker icon is present but the calendar does not display. Moreover, if I did this twice (click tab2 return tab1 click tab2 click tab1), the datepicker icon dissapears, and becomes like a normal input text box.
Here is my main jsp file:
and here's my code under tabpage 1:
Could someone please tell me what did I miss? I've spent a lot of time trying to find it.
Thanks!
posted 11 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
I tried to test this, but I don't know anything about that tag library. ditchnet.org redirects to fakeapp.com which doesn't seem to have anything to do with tabs or JavaScript. . Since you are already using jQueryUI, why don't you use their tabs? It's more likely to work.
One thing I can see that may explain why your button is disappearing is that your "buttonImage" needs to be a local file, not a URL. Without being able to test this I'm at a loss to explain why it's losing the "on click" binding when you change tabs. Bear will be hear in two or three hours. He'll probably spot the problem in about 3 seconds. I think he dreams in JavaScript.
One thing I can see that may explain why your button is disappearing is that your "buttonImage" needs to be a local file, not a URL. Without being able to test this I'm at a loss to explain why it's losing the "on click" binding when you change tabs. Bear will be hear in two or three hours. He'll probably spot the problem in about 3 seconds. I think he dreams in JavaScript.
"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson
posted 11 years ago 
-
- Number of slices to send:Optional 'thank-you' note:
-
-
That's way too much code to wade through, but I suspect that your datepicker setup may not be executing when you think it will. Have you set a breakpoint on the setup code to make sure it is executing?
Why is your script so fragmented throughout the page?
Why is your script so fragmented throughout the page?
posted 11 years ago
Some of my worst nightmares have been when I dreamt I was code.
-
- Number of slices to send:Optional 'thank-you' note:
-
-
J. Kevin Robbins wrote:I think he dreams in JavaScript.
Some of my worst nightmares have been when I dreamt I was code.
posted 11 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
I've actually fixed some difficult problems that way. I'll work on something for hours and leave the office frustrated. Then I'll dream about it and when I wake up I know exactly what needs to be done to fix it. When I get to the office in about 15 minutes I have it fixed and working. It's weird when that happens.
"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson
Winston Liek
Ranch Hand
Posts: 197
posted 11 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
@J. Kevin Robbins
Thanks for your help. I am using a URL for datepicker because I read that it's recommended to use CDN to be more efficient? But I'll try to download the images to my local and locate it there. I'll update this later.
@Bear
Thanks for helping. I put a sysem.out.println both inside the datepicker javascrpt function and after the html tag for datefrom. They are both invoked when I switch from different tabs but on the page they are not working anymore.
Thanks for your help. I am using a URL for datepicker because I read that it's recommended to use CDN to be more efficient? But I'll try to download the images to my local and locate it there. I'll update this later.
@Bear
Thanks for helping. I put a sysem.out.println both inside the datepicker javascrpt function and after the html tag for datefrom. They are both invoked when I switch from different tabs but on the page they are not working anymore.
Winston Liek
Ranch Hand
Posts: 197
posted 11 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
I would like to update this.
I think I know the reason why does it happen but still could not figure out how to fix it.
I think the reason is because when I navigate from one tab to another, the tab page/whole page does not "refresh" or re-load. Since the tabpage with datepicker associated is in seperate jsp, the javascript is not being applied.
Is it possible to re-apply the javascript on selected components?
BTW, I am not using codes from ditchnet.. I just imported the library. I am using the jquery tabs.
I think I know the reason why does it happen but still could not figure out how to fix it.
I think the reason is because when I navigate from one tab to another, the tab page/whole page does not "refresh" or re-load. Since the tabpage with datepicker associated is in seperate jsp, the javascript is not being applied.
Is it possible to re-apply the javascript on selected components?
BTW, I am not using codes from ditchnet.. I just imported the library. I am using the jquery tabs.
posted 11 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
The DatePicker is apparently losing it's binding when you change tabs. I'm not sure if the document ready function runs every time you change tabs. Your code is very confusing with all that embedded JavaScript and multiple document ready functions. There should only be one document ready function. Some console.out messages should tell you when and if those ready functions are running.
I would start by moving all that JS code to an external file that's wrapped withing one document ready function. Also checked out this link that talks about using the tab load event to bind the datepicker.
I would start by moving all that JS code to an external file that's wrapped withing one document ready function. Also checked out this link that talks about using the tab load event to bind the datepicker.
"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson
posted 11 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
Okay, I've created a small, self-contained app that I hope will point you in the right direction. This is good example of why you should be constantly testing your code every few lines. I suspect that this program just got away from you and you didn't realize you had a problem until you had written so much code that you didn't know where to look.
This is the tabtest.js file
This is just a simple html file, no jsp, no server required. Notice that no matter how many times you change tabs, the DatePicker still works. Now use this example to fix your code, starting like I said, by moving all that random JavaScript into an external file wrapped in a single document.ready function.
This is the tabtest.js file
This is just a simple html file, no jsp, no server required. Notice that no matter how many times you change tabs, the DatePicker still works. Now use this example to fix your code, starting like I said, by moving all that random JavaScript into an external file wrapped in a single document.ready function.
"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson
posted 11 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
A little testing shows me that there is no need to wrap those calls in functions. The JavaScript can be reduced to this:
Bear, is there any functional difference?
Bear, is there any functional difference?
"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson
posted 11 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
The wrapping is redundant as the code is already in a ready handler.
Winston Liek
Ranch Hand
Posts: 197
posted 11 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
thanks for your replies.
Actually, I initially make the tabs under one jsp.. I encountered some problems:
1. I need to display a dropdown where it's values are inside a servlet/list. The values came from the database. Since
2. And also, there's a table in that page. When the user navigates back to that tabpage, I have to reset it's value. I've accomplished it by setting the table state of my bean to null.
But if I'll put all tabpages under 1 jsp, I can't find a way to do this.
Actually, I initially make the tabs under one jsp.. I encountered some problems:
1. I need to display a dropdown where it's values are inside a servlet/list. The values came from the database. Since
2. And also, there's a table in that page. When the user navigates back to that tabpage, I have to reset it's value. I've accomplished it by setting the table state of my bean to null.
But if I'll put all tabpages under 1 jsp, I can't find a way to do this.
posted 11 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
1. I do not understand what you are trying to say here.
2. Why does anything need resetting? When the tab pane is revealed it should still have whatever values it originally had.
2. Why does anything need resetting? When the tab pane is revealed it should still have whatever values it originally had.
posted 11 years ago
-
1 -
- Number of slices to send:Optional 'thank-you' note:
-
-
I think you are going to have to throw away a lot of code and start over very small. Test and add more code, then test again. Stop thinking of the tabs as separate pages. A tab is nothing but a list item with a related div. When you click a tab, it's just revealing it's div and hiding the others. No data on those tabs goes away or should need refreshing.
Start with the code I gave you until you get the first tab working and tested. Then slowly start adding the second tab, testing as you go. When you get unexpected behavior, STOP, come here with your code and let's work on it again. At this point you've worked yourself into a corner and you're going to go crazy trying to fix your existing code.
And once again, stop doing embedded JavaScript. One external file wrapped in a document.ready() function is where all your JS should be.
Start with the code I gave you until you get the first tab working and tested. Then slowly start adding the second tab, testing as you go. When you get unexpected behavior, STOP, come here with your code and let's work on it again. At this point you've worked yourself into a corner and you're going to go crazy trying to fix your existing code.
And once again, stop doing embedded JavaScript. One external file wrapped in a document.ready() function is where all your JS should be.
"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson
| What does a metric clock look like? I bet it is nothing like this tiny ad: The new gardening playing cards kickstarter is now live! https://www.kickstarter.com/projects/paulwheaton/garden-cards |
