How to get current active instance of jquery datepicker - javascript

I have multiple datepicker controls on single page binded to input controls.
When I click on any of the input control datepicker control linked to that input gets visible.
Now I want to get input for which the current instance of datepicker is being shown on another JS events.
Is it possible?

You can try using the $.datepicker._getInst(target) method to get any specific datepicker on your page. You just have to pass in a target element, which you can do so by just passing the id using document.getElementById (don't use JQuery or it will return undefined).
So like so:
var id = document.getElementById('someId');
//replace someId with the id of the datepicker currently visible.
var inst = window.$.datepicker._getInst(id);
This is especially helpful if you are trying to get the current instance of a datepicker that's an inline element (not attached to an input).

Related

How to change the date of a hidden element of a Datepicker using setAttribute method and Selenium with Python?

I have been struggling for days to find a way to set a date of a datepicker using Selenium with Python.
I found out that there is a hidden element with the date, so I tried javascript executor to set a value to that hidden element. I tried different ways, and the scripts seem to execute fine, but the date doesn't change.
My script looks like this:
#input date by using hidden date method 1
element = browser.find_element_by_xpath("/html[1]/body[1]/div[1]/form[1]/table[1]/tbody[1]/tr[1]/td[1]/div[1]/table[1]/tbody[1]/tr[2]/td[1]/div[1]/table[1]/tbody[1]/tr[1]/td[1]/table[1]/tbody[1]/tr[2]/td[1]/table[1]/tbody[1]/tr[1]/td[2]/input[1]")
browser.execute_script("arguments[0].setAttribute('value', '{0}')".format("2019-10-31"), element )
element.submit()
and
#input date by using hidden date method 2
date = "2019-10-31"
element= browser.find_element_by_xpath("/html[1]/body[1]/div[1]/form[1]/table[1]/tbody[1]/tr[1]/td[1]/div[1]/table[1]/tbody[1]/tr[2]/td[1]/div[1]/table[1]/tbody[1]/tr[1]/td[1]/table[1]/tbody[1]/tr[2]/td[1]/table[1]/tbody[1]/tr[1]/td[2]/input[1]")
browser.execute_script('arguments[0].setAttribute("value", "%s")' % date, element)
element.submit()
The HTML code and picture of the website looks like this:
HTML of date picker:
Date picker element:
Edit:
Updated HTML with the hidden element visible
The <input> element is having the type attribute set as hidden. You can edit/remove the type attribute and set the value as follows:
element = browser.find_element_by_xpath("/html[1]/body[1]/div[1]/form[1]/table[1]/tbody[1]/tr[1]/td[1]/div[1]/table[1]/tbody[1]/tr[2]/td[1]/div[1]/table[1]/tbody[1]/tr[1]/td[1]/table[1]/tbody[1]/tr[2]/td[1]/table[1]/tbody[1]/tr[1]/td[2]/input[1]")
browser.execute_script("arguments[0].removeAttribute('type')", element)
new_element = browser.find_element_by_xpath("/html[1]/body[1]/div[1]/form[1]/table[1]/tbody[1]/tr[1]/td[1]/div[1]/table[1]/tbody[1]/tr[2]/td[1]/div[1]/table[1]/tbody[1]/tr[1]/td[1]/table[1]/tbody[1]/tr[2]/td[1]/table[1]/tbody[1]/tr[1]/td[2]/input[1]")
browser.execute_script("arguments[0].setAttribute('value','2019-10-31')", new_element)
References
You can find a couple of relevant detailed discussions in:
How to Change a html line code with python
Selenium Datepicker using JavascriptExecutor
Is there a way to add a new attribute with a value to an element using selenium python?

How to remove the placeholder once set value in JavaScript

I'm unable to remove the placeholder after set the user name.
Anyone have idea how to remove place holder once set user name by using console
Link : https://login.microsoftonline.com
document.getElementById("i0116").value = "singapore#mail.com"
The trick is, Microsoft didn't used native HTML placeholder. They have added extra div for placeholder. You just need to hide that div after setting the value. Please see following code
document.getElementById("i0116").value = "singapore#mail.com";
document.getElementsByClassName("phholder")[0].style.display = "none";
Modified:
Microsoft is using Knockout for data binding. That's why you need to fire change event to set the values in ViewModel. Use following code after above two lines.
var event = new Event('change');
document.getElementById("i0116").dispatchEvent(event)

How do I initialize a jQuery datepicker on a dynamically inserted <input> tag?

I have a form as follows:
<form id="my-form"></form>
I am using jQuery to dynamically insert an element into that form and then trying to initialize the Pikaday datepicker on the newly inserted input tag like this:
$('#my-form').html('<input type="text" id="datepicker">');
var departurePicker1 = new Pikaday({
field : $('#datepicker')[0],
format : 'MMM D',
minDate : moment().toDate()
});
I am able to initialize the datepicker if the input tag was available on document load. However, the nature of my app is such that the input tag gets inserted into the DOM after a user interaction. How can initialize pikaday on this dynamically inserted DOM element? Please note that I CANNOT leave this element inserted in a hidden state since it involves user interaction. It has to be initialized when the user presses a button and the input tag gets inserted into the DOM.
Try this. You have to bind the event handler to the body using the on method.
$('body').on('focus',"#datepicker", function(){
$(this).datepicker();
});​

Stop custom datatables search box from loosing focus

I'm trying to customize the datatables search box in order to better integrate it into a bootstrap based UI. I have a table-controlbar 'horicontal_group' that contains other controls where I'd like to put the search box. It works as far as I can generate filtering events, however there is one very annoying problem:
the search box is loosing focus, every time the filter function is called.
This is a stopgap since I'd like typeahead functionality instead of letting the user click a button to search. I'd also implement a delay between keypresses and filter events of course, but first I have to deal with this focus issue.
This is how the dom looks like using the default 'f' option in datatable's sDom:
This is what I'd like to have:
wrapper_div.find('.dataTables_filter input')
.addClass('form-control tableview-search')
.appendTo(horicontal_group) //if this is uncommented, it works fine
.bind('keypress keyup', function(e){
datatable.fnFilter(searchTerm);
});
What I've tried so far (without any effect on the outcome):
use a freshly created input field instead of the field provided by the sDom-parameter 'f' (and delete 'f' from sDom)
use stopPropagation() on the event
unbind the events on the input field before binding the new ones
use .on('input' ..) instead of .bind('keypress keyup' ..)
append the whole dataTables_filter div to horicontal_group instead of just the input field
Ok, while writing this I've thought about it some more and I came to a solution that I'm gonna leave here. Using the built-in wrapper-div and adapting it to bootstrap instead of recreating it from scratch, solved my issues. If you have more insight on why the focus is lost I'd still be glad for your input.
I now initialize the sDom like this:
sDom: '<"row"<"col-lg-12 col-tableview-controls"f>><"row"<"col-lg-12"RlrtiS>>'
After dt is initialized I fixup the dom like this (note that I also used the merged search box from this thread: Add Bootstrap Glyphicon to Input Box:
var horicontal_group = wrapper_div.find('.dataTables_filter');
horicontal_group.addClass('input-group pull-right horicontal-group');
var merged_input = $("<div class='input-group merged'><span class='input-group-addon search-addon glyphicon glyphicon-search'></span></div>")
.appendTo(horicontal_group);
var input = horicontal_group.find('input');
input.addClass('form-control tableview-search')
.appendTo(merged_input)
.on("focus blur", function() {
$(this).prev().toggleClass("focusedInput")
});
var label = horicontal_group.find('label');
label.remove();

How to get value of 'this' inputbox?

I am writing a web application where the user clicks on a div, that is holding a input text box with predefined text in it. When the user clicks on the div the code is then printed in a separate text box. I am trying to write a function that grabs the value of the the clicked on div's text input. I have it working by clicking on the input box itself by using $(this).val(); but I want to click on the div and then it essentially gets the value of (this)('input[type=text].provided_code').val();
is there a way to say the text input inside this div? There are like 20 div's on the page with 20 inputs in each div, and each have the same class name etc.
Yes you can specify the selector context:
By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function
Documentation:
http://api.jquery.com/jQuery/#jQuery1
So you code could look like this:
$('input[type=text].provided_code', this).val()
Performance:
http://jsperf.com/jquery-find-vs-context-sel/38
Yes, you can do:
$(this).find("input[type='text']").val();
Assuming that there is one input of type text inside that div.
Instead of (this)('input[type=text].provided_code').val();
you should use a correct jQuery with the find function.
$(this).find('input[type="text"].provided_code'].val();
You can use find - Although, you cannot target a specific input on click of your div unless that input has a unique class or id.
$('div').on('click',function(){
var value = $(this).find('input[type=text].provided_code').val();
})

Categories