I'm working with jQuery.validate. One of its options is "success" where a function can be called upon valid user entry on a form. The only argument that can be passed is "label" which (as I understand) is a dynamically added label field to the right of the input element.
I need to perform a series of actions on a sibling "div" but I'm having enormous trouble trying to traverse to the div I want. I can't even find where the label is. Are there tricks to finding it?
I've used things such as alert (label.parents('.formrow').html()); and alert (label.parent().parent().parent().html()); and they all return "null" ... alert (label.html()); returns ""
Similar methods have worked for me in the past. Once I find something I then employ next() or find() and all is well. Is there another way?
PS. Example code:
success: function(label) {
errorspotholder = label.parents('.formrow').find('.rederrorx');
errorspotholder.removeClass('rederrorx').addClass('norederrorx').qtip('destroy');
},
This question is a bit case-specific and therefore probably not very useful to anyone else...
but what I did instead of using "label" was to declare a global variable based on another dynamic selector from jQuery.validate (in this case I used "element" from jQuery.validate's "errorPlacement").
It worked.
Marko also suggested in the comments finding lost elements by looking at the generated code from Firebug (getfirebug.com) console. Great idea! I didn't find my lost label but it should have worked and would probably work for someone else.
Related
I have written a custom command for selecting the checkbox based upon the contact name what i provide(Refer the image ) for example I provide Test10 Test10, it does not get selected, However the test case gets passed without selecting, I tried debugging cname variable is empty attaching the debugger screen shot as well
Cypress.Commands.add("SelecttheContact", (contactName) => {
cy.get('tr td:nth-child(2)').each(($el, index, $list) => {
const cname=$el.find(contactName).text()
if(cname.includes(contactName))
{
// cy.get("tr td:nth-child(1)").eq(index).click()
// cy.get("input[type='checkbox']").eq(index).click()
debugger
$e1.find('checkbox').click()
}
}) })
I may be wrong here, but it looks like you are relying on jquery to do the selection work instead of Cypress. I would have used Cypress selection to find the checkbox.
Did you know about the Cypress Selector Playground?
The Selector Playground is an interactive feature that helps you:
Determine a unique selector for an element.
See what elements match a given selector.
See what element matches a string of text.
https://docs.cypress.io/guides/core-concepts/test-runner.html#Selector-Playground
There is also an API option to change the priorities of the selector
The Selector Playground exposes APIs that enable you to:
Change the default selector strategy
Override the selectors that are returned per element
https://docs.cypress.io/api/cypress-api/selector-playground-api.html#Syntax
.find() accepts a selector, according to the docu: https://api.jquery.com/find/
So passing a text content will not work.
text() returns an empty string because if a selector is not found in JQuery you always get an object. And functions called onto that object will return default values I think.
Why the tests passes can not be determined from what we see :-)
I suggest you to adjust the selector for your checkbox.
Btw I am not sure, if you can call cy.get() within each() (the line you have commented out in your code).
Currently I am not at my Laptop, so I can not provide an example for clicking a checkbox. But please try to fix the selector and if it does not work, I can try it for myself.
Hopefully I explain this to where it makes sense, the most I could find by searching terms like I used in the title gave plenty of autocomplete examples, but nothing quite what I'm looking for. I have a list of buttons (they're coded as inputs right now) and I want to add a search field that will narrow down the buttons as the user types in a search field.
Say for example, I have 30 buttons with popular websites. If a person wanted to pull Google, they'd start typing it out which would start by including everything with the letter "G" in it, then "O", etc. Everything else would "disappear" from the page.
I can sort of think of a way to do this manually, but I think my code wouldn't be DRY. Possibly set an "on" and "off" ID, and use CSS to display:none or something to that effect.
I think the best way to do this would be via AJAX, but there may be some javascript voodoo more applicable.
To easy. At first, its unneccessary to filter the answers serverside, if all the data is already at the users. Also, you shouldnt write html and filter it with js, you should write it in js and generate an html output. Lets start with the structure:
var links=[
{
name:"google",
url:"http://google.com"
},
{nextone}
];
Now generate the links in html:
window.onload=function(){
var container=document.body;//change this to your needs
for(i=0;i<links.length;i++){
var link=links[i];
link.html=document.createElement("a");
link.html.innerHTML=link.name;
link.html.src=link.url;
container.appendChild(link.html);
}
};
If sth is inputed, hide the the unmatched ones:
function filter(string){
//loop trough links
for(i=0;i<links.length;i++){
var link=links[i];
//if string doesnt match name
if(!link.name.split(string)[1]){
link.html.style.display="none";
}else{
link.html.style.display="block";
}
}
}
Use like this:
filter("goo");
You could bind that to an input:
yourinput.addEventListener("onchange",function(){filter(this.value)},false);
I am using the real simple wysiwyg editor SCEditor for my website.
I am wandering how exactly I can get the current amount of characters in it's textarea and then output them below it?
I asked on the github but it seems not many people use it and the answer didn't make much sense to me, can someone clear it up for me?
The person replied with this:
var numOfCharacters = $textArea.data("sceditor").val().length;
Where: "$textArea" is a variable with a reference for the textarea DOM
element wrapped in a jQuery object.
I have no idea what that means but I'm sure some of you will.
I want to output the length just to some text below the textarea.
you need learn something about jQuery.data .
jQuery.data Store arbitrary data associated with the specified element. read more
jQuery plugins like SCeditor write their associated datas in jQuery.data of element.
for accessing this datas and management, they set their name (like 'sceditor') to it.
when you call $textArea.data("sceditor") jQuery return datas that sceditior stored in element for you.
when you call $textArea.data("sceditor").val().length you are requesting to get val(). it is text of current editor page for $textArea element and length return length of it's text.
I will first explain what I'm trying to do then I will explain why just in case you get bored of reading the whole scenario.
Basically I have some HTML markup stored in a variable I now need to a wait to access the different elements within the variable. For example:
var markUp = "<h3>h3 tag</h3><p>paragraph tag</p>";
What I need to know is if there is a way for me to query the variable to retrieve say the h3 tag, in a similar way you would use the query function ? I have seen some other practices where people append the var to a hidden div then query the div. I would prefer to avoid this but if that is the only way I will proceed.
I have come across this problem whilst developing a drag and drop application, on drop i use a custom creator function to change the items structure once it is dropped.
If further explanation is needed please say, thanks advance Jonathan
You can use dojo._toDom to create a DOM fragment from your string.
var markup = "<h3>h3 tag</h3><p>paragraph tag</p><p>another paragraph</p>";
var domFragment = dojo._toDom(markup);
dojo.query("p", domFragment).forEach(function(element,i) {
console.debug(element.innerHTML);
});
The underscore prefix in _toDom means that it's a "private" member method of dojo. Normally, it's bad practice to use these as if they were public (like I do here). However, in the case of _toDom I believe it's generally considered acceptable, and according to this trac entry, it sounds like it'll be made public in the next version.
I am trying to make a page work for my website using the mootools framework. I have looked everywhere I can think of for answers as to why this isn't working, but have come up empty.
I want to populate several arrays with different data types from the html, and then, by calling elements from each array by index number, dynamically link and control those elements within functions. I was testing the simple snippet of code below in mootools jsfiddle utility. Trying to call an element from array "region" directly returns "undefined" and trying to return the index number of an element returns the null value of "-1".
I cannot get useful data out of this array. I can think of three possible reasons why, but cannot figure out how to identify what is really happening here:
1. Perhaps this array is not being populated with any data at all.
2. Perhaps it is being populated, but I am misunderstanding what sort of data is gotten by "document.getElementBytag()" and therefore, the data cannot be displayed with the "document.writeln()" statement. (Or am I forced to slavishly create all my arrays?)
3. Perhaps the problem is that an array created in this way is not indexed. (Or is there something I could do to index this array?)
html:
<div>Florida Virginia</div>
<div>California Nevada</div>
<div>Ohio Indiana</div>
<div>New York Massachussetts</div>
<div>Oregon Washington</div>
js:
var region = $$('div');
document.writeln(region[2]);
document.writeln(region.indexOf('Ohio Indiana'));
Thanks for helping a js newbie figure out what is going on in the guts of this array.
$$ will return a list of DOM elements. If you are only interested in the text of those DOM nodes, then extract that bit out first. As #Dimitar pointed out in the comments, calling get on an object of Elements will return an array possibly by iterating over each element in the collection and getting the property in question.
var region = $$('div').get('text');
console.log(region[2]); // Ohio Indiana
console.log(region.indexOf('Ohio Indiana')); // 2
Also use, console.log instead of document.writeln or document.write, reason being that calling this function will clear the entire document and replace it with whatever string was passed in.
See an example.