Unable to click on element all method. I am getting Object Object has no method filter. While researching I found out that it has to do with some strings. Please advise. Thanks
var sflag = $('a[ng-click="flagPhoto()"]');
browser.wait(EC.elementToBeClickable(sflag), 30000, "not clickable");
$('a[ng-click="flagPhoto()"]').filter(function(elem, index) {
return elem.getText().then(function(text) {
return text === 'flag for abuse';
});
}).then(function(filteredElements) {
expect(filteredElements[0].isPresent()).toBe(true);
filteredElements[0].click();
});
You are not selecting multiple elements with this selector. Only the first found element will be selected:
$('a[ng-click="flagPhoto()"]').filter...
Instead, use this:
$$('a[ng-click="flagPhoto()"]').filter
Related
I'm having trouble changing the selection of a dropdown within a for loop.
Here is my code:
var costbases = $('[id$="cost_basis"]');
costbases.each(function() {
var costoption = $('option:selected', this).attr('value');
if ( costoption == '2' ) {
$('this option[value="0"]').prop('selected', true);
}
});
I'm pretty sure this selector is the problem, but I can't figure out the correct syntax:
$('this option[value="0"]')
You can use find() method to find the children and eq() to get the child with the index:
$(this).find('option[value="0"]').eq(0).prop('selected', true);
I want to change:
<b class="added-points">0</b>
in my website using javascript. I searched and found
document.getElementById("added-points").innerHTML = "9999999999999";
but it is for id and I search for class. How to do it?
If you use
document.getElementsByClassName("added-points")[0].innerHTML = "9999999999999";
<b class="added-points">0</b>
you will set the first ([0]) element in the array of elements with the class added-points to 9999999999999. Note document.getElementsByClassName gives you an array result even if there is just one item found.
Simply use document.querySelector(".added-points").
in chrome
document.querySelector(".added-points").innerHTML = "9999999999999";
in IE
Array.prototype.forEach.call(document.getElementsByTagName('*'), item => {
if (item.className.split(' ').indexOf('added-points') > -1) {
item.innerHTML = '9999999999999'
}
})
I'm in a situation where I want to check if two elements (one is clicked and another one a reference) are the same, what I'm trying to do is:
$("#process li").click(function() {
currentElement = $(this);
referenceElement = $("#process li:first-child");
if (currentElement === referenceElement) {
$(".mark").removeClass("mark");
$(this).addClass("mark");
}
});
So what I want is to check if the clicked <li> is the first child of the ul#process and if so first remove a .mark class from another element and then add it to the clicked one. I don't get any working result - ideas anyone?
UPDATE:
Thanks you very much! This is my solution:
$("#processlist li").click(function() {
currentElement = $(this);
if (currentElement.is('li:first-child')) {
$(this).addClass("mark");
}
});
Now if I click on a , if it is the first child of this list, the class .mark is added - sweet!
Comparing objects in JS is very troublesome. The simplest way is to just pick a few key properties and compare those, eg:
if (currentElement.prop('id') === referenceElement.prop('id') {
// rest of your code...
}
However, given your use case you could use is:
if (currentElement.is('#process li:first-child')) {
// rest of your code...
}
Example fiddle
You need to extract the DOM element from the jQuery object. You can use the get method of jQuery for this.
e.g. if( currentElement.get( 0 ) === referenceElement.get( 0 ) )
Let's say I have an action in my controller like:
actions: {
save: function() {
var self = this;
this.get('model').save().then(function() {
self.transitionToRoute('surveys');
}, $.noop);
}
The model "hasMany" elements of type "element" (another model, with just a field "title"), that I can access from the controller as:
var elements = this.get('elements');
I want to remove the elements with empty title before I save. I've tried iterating over the "elements" with forEach and filter, but none of my approaches have worked so far.
Any suggestions? Thank you! :)
The problem was residing in the way I was deleting the elements.
Instead of calling destroyRecord() on the elements, the solution is to call removeObject() on the elements array, with the element we want to remove as an option.
Such as:
var elements = this.get('elements');
elements.forEach(
function (element) {
if(element && ! element.get('title')){
elements.removeObject(element);
}
});
I found a response in a jquery forum and they made a function to do this but the result is not the same.
Here is an example that I created for an image button:
var buttonField = $('<input type="image" />');
buttonField.attr('id', 'butonFshi' + lastsel);
buttonField.val('Fshi');
buttonField.attr('src', 'images/square-icon.png');
if (disabled)
buttonField.attr("disabled", "disabled");
buttonField.val('Fshi');
if (onblur !== undefined)
buttonField.focusout(function () { onblur(); });
buttonField.mouseover(function () { ndryshoImazhin(1, lastsel.toString()); });
buttonField.mouseout(function () { ndryshoImazhin(0, lastsel.toString()); });
buttonField.click(function () { fshiClicked(lastsel.toString()); });
And I have this situation:
buttonField[0].outerHTML = `<INPUT id=butonFshi1 value=Fshi src="images/square-icon.png" type=image jQuery15205073038169030395="44">`
instead the outer function I found gives buttonField.outer() = <INPUT id=butonFshi1 value=Fshi src="images/square-icon.png" type=image>
The function is:
$.fn.outer = function(val){
if(val){
$(val).insertBefore(this);
$(this).remove();
}
else{ return $("<div>").append($(this).clone()).html(); }
}
so like this I loose the handlers that I inserted.
Is there anyway to get the outerHTML with jquery in order to have it cross-browser without loosing the handlers ?!
You don't need convert it to text first (which is what disconnects it from the handlers, only DOM nodes and other specific JavaScript objects can have events). Just insert the newly created/modified node directly, e.g.
$('#old-button').after(buttonField).remove();`
after returns the previous jQuery collection so the remove gets rid of the existing element, not the new one.
Try this one:
var html_text = `<INPUT id=butonFshi1 value=Fshi src="images/square-icon.png" type=image jQuery15205073038169030395="44">`
buttonField[0].html(html_text);
:)
Check out the jQuery plugin from https://github.com/darlesson/jquery-outerhtml. With this jQuery plugin you can get the outerHTML from the first matched element, replace a set of elements and manipulate the result in a callback function.
Consider the following HTML:
<span>My example</span>
Consider the following call:
var span = $("span").outerHTML();
The variable span is equal <span>My example</span>.
In the link above you can find more example in how to use .outerHTML() plug-in.
This should work fine:
var outer = buttonField.parent().html();