I am using jQuery validation in my form
http://jqueryvalidation.org/documentation/
I want to add the validation to all my fields but I want to ignore the hidden div's that have the class my_item.
So here is my jQuery:
$("#myform").validate({
ignore: ":hidden"
});
How is it possible to exclude from this ignore case, the divs that have the class my_item. So something like $(":hidden").not(.my_item).
You can use the :not() selector:
ignore: ":hidden:not(.my_item)"
Accepted answer is perfectly fine but when you need some more control than the jQuery selector provides.
You could pass a function that tests each element.
for example:
ignore: function (index, el) {
var $el = $(el);
if ($el.hasClass('always-validate')) {
return false;
}
// Default behavior
return $el.is(':hidden');
},
In case you have no class name on your field, you can ignore it based on its name :
ignore: ['name = "field_name"']
I have a div that has another div inside of it and I want to check the equality of the inner text of the div. I have figured out how to do it using the invoke('text') function, but i am wondering if that is the best way. So my question is: how do you check the equality of the inner text of a element using cypress?
it('the channel name should contain be Anakin Skywaler', () => {
//This works but can we be more specific with our selector
cy.get("[data-test-id='Skywalker,Anakin']").should('contain', 'Skywalker,Anakin');
})
it('the channel name should equal Skywalker,Anakin', () => {
cy.get("[data-test-id='Skywalker,Anakin']").find('.channel-name').invoke('text').then((text) => {
expect(text.trim()).equal('Skywalker,Anakin')
});
});
Please ignore the Star War Reference!
I think you can simplify this.
Assuming you have HTML that looks like this:
<div data-test-id="Skywalker,Anakin">
<div class=".channel-name">Skywalker,Anakin</div>
</div>
You can write your assert like this:
cy.get('[data-test-id="Skywalker,Anakin"]').should(
"have.text",
"Skywalker,Anakin"
);
This passed for me and if I modified the HTML to Skywalker,Anakin 1 it failed as you would expect. Cypress uses the have.text to look at what is rendered out so it will not worry about any markup and just see what the result is.
This did not work for trimming. you would need to add a callback to do the trimming.
cy.get('[data-test-id="Skywalker,Anakin"]').should(($div) => {
expect($div.text().trim()).equal("Skywalker,Anakin");
});
You can check if a string is contained somewhere inside the div:
cy.get("[data-test-id='Skywalker,Anakin']").contains('Skywalker,Anakin');
Or, if you need to make sure the div contains only the specified text and nothing else, you can tag on this extra assertion:
cy.get("[data-test-id='Skywalker,Anakin']").contains('Skywalker,Anakin').should((elem) => {
expect(elem.text()).to.equal('Skywalker,Anakin');
});
Explanation:
// Get the data
cy.get("[data-test-id='Skywalker,Anakin']")
// Get the child or children of the previous command that
// contain the text - this command fails if no child
// element is found containing the given text
.contains('Skywalker,Anakin');
// These two lines are explained above
cy.get("[data-test-id='Skywalker,Anakin']")
.contains('Skywalker,Anakin')
// Like a .then(), except the contents are retried until
// all contained assertions are successful or until the
// command times out
.should((elem) => {
// Expect the element's text to exactly equal the
// string, not just contain it
expect(elem.text()).to.equal('Skywalker,Anakin');
});
I think currently this is the best option, because it does not check for contains. I was hoping for a shorter piece of code to do this.
it('the channel name should equal Skywalker,Anakin', () => {
cy.get("[data-test-id='Skywalker,Anakin']").find('.channel-name').invoke('text').then((text) => {
expect(text.trim()).equal('Skywalker,Anakin')
});
});
Following is how you can check exact or partial match for a string in an element:
//matches exact text of result string
cy.get("[data-test-id='Skywalker,Anakin']").should('have.text', 'Skywalker,Anakin');
//matches partial text of result string
cy.get("[data-test-id='Skywalker,Anakin']")
.text()
.then(value => {
cy.log("Text value is :", value);
expect(value).to.include('Anakin');
});
where text() is defined in command.js file as following:
Cypress.Commands.add("text", { prevSubject: true }, (subject, options) => {
return subject.text();
});
Can't believe I didn't see one of the magical cypress .should matches. Also I use typescript cypress which gives great lookups/intellisense.
using should. However, these are exact text matches and may have a lot of spaces
cy.get("[data-test-id='Skywalker,Anakin']")
.should("have.text", "Skywalker,Anakin")
.should("have.attr", "data-test-id","Skywalker,Anakin'")
adding a new command would be better such as shouldHaveTrimmedText
I got it from https://github.com/cypress-io/cypress/issues/3887#issuecomment-522962482
but below is the setup to get it working also typescript with type
lookup
commands.ts
Cypress.Commands.add(
'shouldHaveTrimmedText',
{
prevSubject: true,
},
(subject, equalTo) => {
if (isNaN(equalTo)) {
expect(subject.text().trim().replace(/ +/g, ' ')).to.eq(equalTo);
} else {
expect(parseInt(subject.text())).to.eq(equalTo);
}
return subject;
},
);
cypress/support/index.d.ts
Cypress.Commands.add(
'shouldHaveTrimmedText',
{
prevSubject: true,
},
(subject, equalTo) => {
if (isNaN(equalTo)) {
// removes double spaces and ending spaces, does not remove special characters such as tabs or \n
expect(subject.text().trim().replace(/ +/g, ' ')).to.eq(equalTo);
} else {
expect(parseInt(subject.text())).to.eq(equalTo);
}
return subject;
},
);
tsconfig
{
"types": ["cypress","./cypress/support"]
// or "typeRoots": ... but not both
}
cy.get("[data-test-id='Skywalker,Anakin']")
.shouldHaveTrimmedText("Skywalker,Anakin")
Simple exact matching
cy.get('[data-test-id=Skywalker,Anakin]')
.invoke('text')
.should('equal', 'Skywalker,Anakin')
The following code is taken from the link:
http://tsamuel.wordpress.com/2007/05/17/direct-web-remoting-a-tutorial/
It is an autocomplete text field that uses DWR.
<script type="text/javascript">
new Autocompleter.DWR('personName', 'personListDiv', updatePersonList,{ valueSelector: function(obj){ return obj.name; },
partialChars: 2, choices: 10 }); </script>
The updatePersonList:
function updatePersonList(autocompleter, token) {
DWRPersonService.getAllPersons(function(data) { autocompleter.setChoices(data); });
}
What I would like to do is to configure the code above in a way that the search only starts when three characters are typed (at least). Tried to change partialChars value but it doesn't seem to work...
I don't know how partialChars works, i would do something like
function updatePersonList(autocompleter, token)
{
if(token.length < 3) return;
DWRPersonService.getAllPersons(function(data)
{
autocompleter.setChoices(data);
});
}
I have found some answers that explain how to remove the Kendo UI kendoDatePicker widget from a textbox here http://www.kendoui.com/forums/ui/general-discussions/method-for-removing-controls.aspx and here http://www.kendoui.com//forums/ui/date-time-pickers/datepicker-becomes-static.aspx
Unfortunately the above examples do not seem to help when i try to remove the property of a NumericTextBox. I ended up with the source below.
var numericTextBox = $(selector).data("kendoNumericTextBox");
var element = numericTextBox.wrapper[0] ? numericTextBox.wrapper
: numericTextBox.element;
// unwrap element
var input = numericTextBox.element.show();
input.removeClass("k-input").css("width", "12.4em");
input.removeClass("numerictextbox");
input.insertBefore(numericTextBox.wrapper);
numericTextBox.wrapper.remove();
input.removeAttr("data-role");
input.removeAttr("role");
I finally end up with a text box that looks like a simple textbox but i am still not allowed to add anything else than just numbers.
Furthermore i tried adding also the line input.removeData("kendoNumericTextBox"); which is close to what is suggested on the links i have posted above, but i could not identify what this line does.
Instead of playing with the widget decoration converting from text to numeric and viceversa it's much easier having both and have always one of them hidden. You just need to add a class / remove a class and get the correct one visible.
Lets say that I have the following CSS definition:
.ob-hide {
display: none;
}
The following HTML:
<div id="combobox"></div>
<div id="number"></div>
<div id="text"></div>
Then my JavaScript would be:
$("#combobox").kendoDropDownList({
dataSource: {
data: [ "string", "number" ]
},
value : "string",
change : function (e) {
console.log("change");
if (this.value() === "string") {
console.log("string");
$("#number").closest(".k-numerictextbox").addClass("ob-hide");
$("#text").closest(".k-autocomplete").removeClass("ob-hide");
} else {
console.log("number");
$("#number").closest(".k-numerictextbox").removeClass("ob-hide");
$("#text").closest(".k-autocomplete").addClass("ob-hide");
}
}
});
$("#number").addClass("ob-hide").kendoNumericTextBox({});
$("#text").kendoAutoComplete({});
Does anyone knows how to create a jQuery plugin that will react to the call to val() method?
Here's the scenario:
Take a set of DIVs using jQuery selector and apply a plugin on them (let's say the plugin is called "mytest".
Using the val() method on the same set of DIVs I'd like to set them some properties.
What's the proper way to do this sort of things?
$.fn.example = function(options) {
return this.each(function() {
var edits = $("<input type='text'/><input type='text' />");
$(this).html(edits);
});
}
$(document).ready(function() {
$("#example").example();
$("#example").val("value1 value2");
window.alert($("#example").val());
});
In this case the first edit should have the value "value1" and the second edit the value "value2". And v.v. by calling the "val()" method I'd like to get the string "value1 value2" back.
Best regards,
Matthias
I've realized that by using additional methods and then calling them using
$("...").pluginname("methodname", ..parameters..);
syntax. It works exactly like other plugins so I guess that's the right way to go.
In the case of the example above the code would look like this:
$.widget("ui.example", {
_init: function() {
}
});
$.extend($.ui.example, {
version: "1.7.1",
defaults: {
value: ""
}
});
And then the usage would be:
$("#example").example("option", "value", "value1 value2");
var value = $("#example").example("option", "value");
window.alert(value);