jQuery UI datetimepicker bound to wrong input after DOM element removed - javascript

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.

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

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);

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.

Related

How to get updated DOM after using checkboxes?

I know that the title of asking is quite vague. But let's check this page:
https://www.cleaneye.go.kr/user/gongsiCompare.do
So this is one of public data page in Korea which has a data I need in my research.
As you can see, it has some checkbox in ul, and if you check one of the box in left one, the list of checkbox on its right would come up.
So I made a code to check every combinations, and I'll show you the one which cause the problem.
from selenium import webdriver
driver = webdriver.Chrome(CHROMEDRIVER_LOCATION)
driver.get('https://www.cleaneye.go.kr/user/gongsiCompare.do')
in_type = driver.find_elements_by_xpath("//div[#id='divPcomp']/ul/li")
for in_t in in_type:
in_t.find_element_by_xpath("./label/input").click()
region_type = driver.find_elements_by_xpath("//div[#id='divSido']/ul/li")
for r_t in region_type:
r_t.find_element_by_xpath("./label/input").click()
The problem is, when the code execute
r_t.find_element_by_xpath("./label/input").click()
it gives ElementNotInteractableException error, maybe cuz DOM didn't revised after it clicked the checkbox in
in_t.find_element_by_xpath("./label/input").click()
So I've searched how to solve this problem, and most of answers were about using implicit/explicit wait. Before I do that, I put time.wait(30) between click()s, and still it didn't work. So just waiting might not be the solution for this.
As you can see, if you refresh it, the whole page would be reset so... that is not the answer for this as well.
Is there any great solution, or any walk-around it, please enlighten me.
Otherwise, I'll just use mouseclick and keyboard inputting 'tab' haha...
Thanks for your attention to this problem!
your locator is not unique, it finds element that is not visible on screen use :
region_type = driver.find_elements_by_xpath("//div[#id='divSido']/ul/li[#class='rowon']")

update label with selected date when selecting date in asp calendar

I have a asp calendar (i want to continue to use that calendar. NOT the jquery one)
When a date is selected in the calendar, i want to put that date in a label. I tried to write a piece of javascript, but it doesn't work. Can anyone help me point out what i am doing wrong?
Thanks!
<script type="text/javascript">
$('#Calendar1').change(function() {
var t1 = $('#Calendar1').val();
var result = t1;
$('#lbldate').html(result);
});
</script>
All the calendar is is a table with links. The best way to do this would be attach to a link click by capturing all of the link clicks using JQuery, or in the DayRender event, write out some javascript to call your own function with the current date. Not 100% sure how to do that, but DayRender lets you have access to a lot, so it should be possible.
The calendar control was really never meant to work client-side in this fashion, so you may run into quirks to work around because of that.

jquery selectize error: issue with adding new select fields and combox-ifying them

I am trying to the Selectize library so I can have a comboboxes on my form.
So my form has a way to dynamically add more dropdowns (that i want to be comboboxes), so whenever the user adds a new dropdown, I want to apply Selectize combobox to it. So within my function that adds the new dropdown, after I have appended it, I use the following code:
$('select').each(function() {
if (!$(this).is('selectized')) {
$(this).selectize({
create: true,
sortField: 'text'
});
}
});
I thought that this would only apply it to dropdowns that do not already have Selectized combo box applied to it, but something is going wrong. Basically it is applying it to new comboboxes but something strange is going on with the existing ones. It's adding some kind of blank dropdown each time.
I tried to look around but I cannot find an "official" solution for combobox-ifying a newly added select fields. I don't know if it's an issue with how I am applying it, or if it's some kind of weird conflict with twitter bootstrap or jquery-ui or jquery itself (I included all of those in the fiddle)
Anyways, here is a link where you can see this issue in action:
http://jsfiddle.net/Qz7Ar/2/
Does anybody have experience with this or know what's going on here?
edit:
I also made a fork removing jquery-ui and bootstrap, so it's just jquery (required for Selectize) and Serialze, and the issue is still happening:
http://jsfiddle.net/Wxxub/1/
Okay well I figured out how to fix it..
If I add an id attrib to the new element and target by that instead, it works. Here is another fork demonstrating it:
http://jsfiddle.net/Wg7J6/1/
I can't find anywhere in the Selectize doc that it's necessary (I could be blind though!) that the select field must have an id or if it would work without one but i'm just doing it wrong or what, though.

How to hide / show yui.calendar.DatePicker in wicket

I've run in to a problem I hope you guys can help me with.
I'm using a DateTextField with a DatePicker (from yui.calendar), they are both added to a WebMarkupContainer with OutputMarkupId and OutputMarkupPlaceholderTag set to true.
I want to be able to set the visibility of the container, but when I set it from true to false to true, the datepicker is no longer visible (I'm guessing it has to do with it not beeing mentioned in the HTML(?)) and I have to reload the entire page (and loose the input data) to get the DatePicker visible again. There is no problem with the DateTextField. Is there any good way to work around this?
JAVA:
invoiceDateFromField = new DateTextField("invoiceDateFromField", new PropertyModel(this, "invoiceDateFrom"), new PatternDateConverter("yyyy-MM-dd", true));
invoiceDateFromField.setOutputMarkupPlaceholderTag(true);
invoiceDateFromField.add(new DatePicker());
containsAllContainer.add(invoiceDateFromField);
AjaxLink onClick:
containsAllContainer.setVisible(!containsAllContainer.isVisible());
target.add(containsAllContainer);//Edit
I tried to remove the DatePicker from invoiceDateFromField, and then add a new one when the container is set to visible, but this did not seem to work either.
Thanks!
Olle
YUI will lose its connection to the DOM element when you set it visible=false in Wicket (because the node is removed from the DOM). So when you add it back to the page, your instance of YUI calendar no longer has any associated field in the DOM. You need to be sure to update your reference with a new instance of calendar every time you re-render the DateTextField with Wicket

Dynamically change highlighted dates in Jquery Datepicker

hi
I have a Jquery Datepicker object that is created fine with no highlighted dates and a particular minDate.
I want to add a highlights to this datepicker based on an AJAX call made by the user, but the only way I can see to change the highlights is adding a function to the beforeShowDay event, which is set on setup.
How can I change this function on an existing datepicker and force it to redraw so that I get my new date(s) to be highlighted.
Many thanks everyone.
Dave
Right the only way I could find to do this is to use the destroy method then redraw the picker with the new method attached to it. If anyone knows a better way of doing this please add it and I'll give you the answer.
Thanks
EDIT: Code...
Setup the picker...
var datePickerSettings = {
beforeShowDate: beforeShowDateMethod
};
var alternateDatePickerSettings = {
beforeShowDate: beforeShowDateMethodAlternate
};
$('#mydiv').datepicker(datePickerSettings);
Then once callback is complete
$('#mydiv').datepicker('destroy')
$('#mydiv').datepicker(alternateDatePickerSettings);
In the end I didn't use the date picker as the requirements changed, but this should solve the problem
Dave
There is the setDate method of the datepicker. I cannot link directly but it is here http://jqueryui.com/demos/datepicker/ under methods

Categories