CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uijquery-plugins
spuy767
spuy767

Reputation: 89

jQuery UI datetimepicker bound to wrong input after DOM element removed

Here's something to bake everyone's noodle. I have a form on a website. You can look at it: My Website. Click book me and select a certain number of days at the top right. Manually remove a few of the form lines from the form using the '-' button. Then try to use the first input on the first line. It's linked to the wrong input. All the inputs have unique ID attributes, and I rebind datetimepicker class after a line is removed. Anyone have the foggiest idea why the datetimepicker pointing the the wrong object? Ironically enough, the timepicker portion, which is not from jQuery UI proper, still points to the correct input, it would seem. It seems that when you delete lines of a lower number, the lines of a higher number are moved and renamed, but the date portion f the datetime picker is still pointing the the line number that it was originally bound to, if that makes any sense.

Help is appreciated because this one has me stumped. I've tried manually releasing the datepicker objects before I remove the form lines, but nothing seems to help.

Thanks

Edit: Is there a way to completely destroy the instances of the datepicker that are bound to the input elements before I remove them?

Edit: Alright, I just had a realization. I am destroying the datepickers on the lines I'm removing, but not the lines that remain, so I'm going to work on this for a minute and see if destroying the datepickers completely when i rebuild the form helps.

Upvotes: 1

Views: 834

Answers (3)

Zac
Zac

Reputation: 1635

In setAlts()

try removing var fields = $('.date').get();

and just doing:

$('.date').each(function() {

    $(this).datetimepicker('destroy'); // From Marcell
    $(this).datetimepicker({
            minDate: now,
            timeFormat: "h:mm tt",
            stepMinute: 15,
        });
});

If you remove dateCheck() all should be fine.

I assume below is what you are intending with dateCheck() though. Ok in dateCheck()

change:

target.siblings('.date').datetimepicker('setDate', dateMin);

to:

target.next('.date').datetimepicker('minDate', dateMin);

Upvotes: 1

spuy767
spuy767

Reputation: 89

Alright, so to answer the question: It seems obvious in retrospect, but the datetimepicker addon which is coded in a slightly different, and probably less efficient, manner was throwing me off the trail. At any rate, I'll try to explain what was happening in a clear fashion.

The datepicker object binds to the id of the element when it is created, and it keeps that id until it is destroyed. And apparently, attempting to bind a new datepicker object does nothing if there is already a datepicker object present.

To rememdy the problem, in the setAlts() method, I simply destroyed every single datepicker object, and recreated it. Pretty simple, but it was confusing the hell out of me.

And thanks for setting me on the right path. Otherwise I'd have probably had a chimpout and started smearing my poo on the walls.

Upvotes: 0

marekful
marekful

Reputation: 15351

No time to analyse all that code but could possible help to call $(elem).datetimepicker('destroy') when you remove a control before any rebinding.

Upvotes: 1

Related Questions