TestCafe selector for a textbox with same ID - javascript

I am trying to type text in the textbox using selectors. However the textbox shares the same ID.
How can i index selectors. I was able to do it via xpath. However i need to pass it as selector
textbox id = #input1

Element IDs should be unique within the entire document. I recommend that you avoid using the same ID for several elements.
You might want to enumerate elements by their type (input). Refer to the Enumerate Elements Identified by a Selector topic where this example is illustrated in action.

Related

Select next element of a given type after specified element

I am trying to select an element based on whether another element has a given ID containing certain text. The problem is that there are multiple elements with this same class name on the page and I only want to select the ones that have the element with this ID directly above them. Is this possible? I tried:
if ($(".element[id*='XYZ']").length > 0){
$(".element").nextAll('.elementoselect').text('Change the text');
}
My first instinct was to do it based on them being within the same DIV but the problems is that the DIVs are given classes when the page loads and they are generic, so this is the only other way I could think of.
Use chaining with the selector
$(".element[id*='XYZ']").nextAll('.elementoselect').text('Change the text');
If you use selector chaining , your oissue could be solved
$(".element[id*='XYZ']").nextAll('.elementoselect').text('Ch‌​ange the text')

.Remove() not working in deleting a textbox with id in the form of an collection

I have a hidden textbox with id in the form of a part of a collection. I use the ID in this way so as to have them bind to my model. This is the simplified version of my code.
<input id="Model.Bed[0].Id" name="Model.Bed[0].Id" type="hidden" value="bed1">
I am using Jquery to remove it but while it does not throw any error, it does not get deleted. This is my code.
$('#Model.Bed[0].Id').remove();
Am I missing something?
Your jQuery selector returns 0 items because it is an invalid selector expression( [ has a different meaning)
Try the name selector. This should work
$("[name='Model.Bed[0].Id']").remove();
Keep in mind that it is allowed to have more than one element with same name attribute value. So use based on your DOM.
Also, If you have this input element generated in a loop and you have some button inside this loop for executing your remove code, you should consider using relative selectors. closest() and find() methods are handy in this case.
For example,
// Register click event with element with css class "someDeleteBtn"
$(".someDeleteBtn").click(function(e){
e.preventDefault();
$(this).closest(".containerDiv") //get to outside container
.find(".myHdnBed") // find the hidden input with this css class
.remove(); // remove
});
To escape special characters in an ID selector, you can use \ like so:
$('#Model\\.Bed\\[0\\]\\.Id').remove();
which works: http://codepen.io/anon/pen/XpqJxV
Read more here: https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/
In the end though, you really shouldn't have a value like that as an ID in the first place.

jQuery - Selector for duplicate ID's

I have a page with duplicate ID's for a form element. The catch is I the elements show up separately based on a toggle. So both ID's never show up simultaneously.
However when I do form validation on that element, it always selects the element displayed last in the code (even if its hidden).
Is there a selector to select the visible duplicate ID?
I've tried the following but to no avail:
$('#my_element:visible').val();
As the myriad of other questions about this premise will tell you, you cannot use the ID selector # in this case; you have to use something like $('div[id=foo]') to find it.
Duplicate IDs are invalid HTML and will nearly always cause issues with scripting. Avoid if at all possible.
The reason this is occurring is because of Duplicate IDs. IDs must be unique for the HTML to be considered valid. Whenever you aren't working against valid HTML, your results are often erratic.
In this case, even though you are only showing one of the forms at a time, they're both still present in the mark up which is why the last one in the code is always the one that's getting run.
Since you're using jQuery, I'd highly recommend using classes for this instead.
Avoid duplicates ids on the page. It is not a valid HTML.
as Rwwl said, duplicate IDs are invalid. Assign classes instead of ids to them.
Then you can do
alert($('.my_element:visible').val());
try :hidden
$("#my_element").find(":hidden").val();
Elements can be considered hidden for several reasons:
They have a CSS display value of none.
They are form elements with type="hidden".
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the element is not shown on the page.
NOTE: Elements with visibility: hidden or opacity: 0 are considered to be visible,
Do not use same id for multiple elements, classes are better!
You can not specify using the # id selector only, you need to be more specific. One way is choose the type of element first then id:
For an input element:
$('input#my_element:visible').val();
or for a div element:
$('div#my_element:visible').val();
An alternative solution to select the element with jQuery and then get value from from the element directly:
$('#my_element:visible')[0].value

div addClass only on ONE div

When i do something like :
$('#container').addClass("contract");
It only add class to the first div with id container
When i do something like :
$('.container').addClass("contract");
It adds the class to ALL the divs with class container
WHY ?
Every element ID must be unique. An ID points to one and only one attribute. Jquery or any other framework would not even consider that you might have more than one element with a particular id. All your elements need to have a different id. Javascript and the DOM expect this (document.getElementByID for example will return just one element, and might now work at all if the ID is duplicated). Everything expects this.
Because id attribute has to be unique in HTML document. So there is no need to search for any others eelements with id="abc" when you find a first one.
An element's ID attribute should uniquely identify it. A class attribute may be applied to more than one element. As ID is unique, jQuery will only apply it to the first element that matches that.

JS/DOM selector scoping

Is it possible to have some sort of Id scoping when manipulating DOM with JS?
I use jQuery as my JS framework.
For example:
Is there any mechanism that would allow to select someDiv children of first or someDiv children of second, or do all ids on the page have to be unique?
I know this would be doable using classes (jQuery selector would be .first>.someDiv), but is this doable for the id property as well?
Edit: for clarification, here's a more complete example:
File picture_editor.php:
...
JS script for this editor, that needs to manipulate picture_id
...
File main_view.php:
...
Script that manipulates picture_id
...
include(picture_editor.php);
...
Now in the case where picture_editor is included in a file (like main_view) that has an element with the same id as elements in picture_editor, something somewhere is going to stop working (whether it's some script in picture_editor or main_view, or both).
Question: How do you go around that?
HTML id attribute, Definition and
Usage:
The id attribute specifies a unique id for an HTML element.
The id must be unique within the HTML document.
The id attribute can be used by a JavaScript (via the HTML DOM) or by
CSS to make changes or style the
element with the specified id.
From http://www.w3schools.com/tags/att_standard_id.asp
All ids need to be unique, so I don't think so.
If your ids are not unique, then your page is not valid HTML. Rethink your structure if you have non-unique id.
As for whether jQuery supports it, it's unlikely, as it should never meet that scenario.

Categories

Resources