DatePicker shows up only once

raspi

I am having a form including a date using the jQuery UI datapicker.

The DatePicker shows up the first after the page has refreshed or newly loaded only.
But when I confirm or cancel the lightbox and want to edit another field the DatePicker does not show up again until the page refreshes.

I guess there is any issue with the JS and DOM.

Do you have me an idea where to look for?

Ralf

allan

Hi Ralf,

Can you link me to an example page that shows the problem so it can be debugged please? Looking at the demo page it appears to work as expected (minus the missing images...).

Allan

raspi

at this time I did not yet uploaded the application. I will try to provide an example soon.

But I figured out one more fact about this issue:

In your examples you did not have a datepicker with inlide editing. You always use the "mark a line and click edit".
Using this - it works with me as well.

But I do have inline edit - I tested both: click and dblclick event - and here you might find the issue too.

The first time I get the picker, but then no more.
And - additionally it looks like the field saves the last entry and does not use the current field value.

allan

Sounds odd - are you using static events or delegated (i.e. how are you listening for the click event?).

Allan

raspi

Here is the initialization code.
I did use click as well as event with the same result

editor = new $.fn.dataTable.Editor( {
           ajax: "./veranstaltungen_edit.php",
           table: "#example",
           fields: [ {
                   label: "Anmeldeschluss:",
                   name: "3",
                   type: "date",
                   dateImage: "./images/calender.png", 
                   def:        function () { return new Date(); },
                   dateFormat: $.datepicker.ISO_8601
               }
           ]
       } );          
       // Activate the bubble editor on dblclick of a table cell
       $("#example").on( "dblclick", "tbody td", function (e) {
           var index = $(this).index();
           if ( index === 3 ){
               editor.bubble( this, {
                   title: "Anmeldeschluss",
                   message: "Ab diesem Datum wird diese Veranstaltung nicht mehr in der Online-Anmeldung angezeigt.<hr/>"
               });
       } );
   ');

Why is this code formatting not working? sorry for that.

allan

Not sure why the formatting didn't work there - I typed in basically the same formatting as you had and it looks like it has worked... odd...

However, I don't see anything wrong with that code - I would have expected that to work. I think I'd need to see a test case showing the problem as we discussed earlier.

Allan

raspi

OK - I managed it to upload.
Here the link: http://www.test.skischule-sinzheim.de/index.php?q=3

And here you are able to follow the same issue as on my local machine.
You can open the line edit button as often as you like - nothing changes. But when you use the inline bubble editing it works only once. And after that also the date picker at the line edit is no longer available.

Do you need anything else to watch over?

Ralf

allan

Hi Ralf,

Got it now - thanks very much for the upload!

In the dataTables.editor.js file you will find the line pair.remove(); in the bubble method (there is only one line in the whole file that matches that, so you can just search for pair.remove();). Replace it with:

pair.detach();

and everything will work as expected.

The fix will be in the Editor 1.3.2 release which I'll be packaging up in the next few days.

Regards,
Allan

rs

I did it - now it works !!

Thanks Allan,
great.