I am Currently having trouble change the value of a drop down list. I am currently adding an item to my cart on https://www.reebok.com/us/cart. I am trying to change the quantity.
I am trying to rewrite my java code into javascript. With that being said.
Select select = new Select(driver.findElement(By.xpath("//* [#id=\"app\"]/div/div/div/div/div[2]/div/main/div[1]/div/div/div/div/div/div[2]/div[2]/div[2]/div/div/select")));
select.selectByVisibleText(5);
Currently works for me in java using the Selenium library. But in Javascript, I am having trouble emulating the same step. I have tried everything.
Edit: I have tried
var select= document.evaluate('//*[#id="app"]/div/div/div/div/div[2]/div/main/div[1]/div/div/div/div/div/div[2]/div[2]/div[2]/div/div/select', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
select.selectedIndex=7;
and
document.getElementsByClassName('gl-dropdown-native__select-element')[0].value=7;
This is working function to change the item in the basket. The issue was to found the handler and event type they rely on. It was mouseup and event directly in the window.
function changeItemTo(itermNumber) {
const itemsSelector = '.gl-dropdown-custom__options button';
const itemsElements = document.querySelectorAll(itemsSelector);
if (itemsElements == null) throw new Error(`Selector ${itemsSelector} is wrong, nothing found`);
const buttonForItem = itemsElements[itermNumber];
if (buttonForItem == null) throw new Error(`Item with index: ${itermNumber} not found`);
buttonForItem.dispatchEvent(new Event('mouseup', { bubbles: true, cancelable: true, }));
}
Hope this helps!
Related
I am just stuck on getting everything to work in my todo list. Where I am at the moment is that when a new todo is added I need one button to toggle that it is completed, and the other button to remove the item. It seems as though I am forgetting or not understanding the proper methodology to allow both buttons to be able to target the item. I can only get one to work and not both.
I am still new JavaScript and all this, I am trying to complete this exercise for my coding bootcamp and have been stuck on this todo list for over a week now.
Sorry if I am not formatting this correctly, first time posting here and based on how difficult this is going, I am going to be getting a lot of practice.
todoForm.addEventListener("submit", function(event) {
event.preventDefault();
let newTodos = document.createElement("li")
newTodos.innerText = document.querySelector("#add-el").value
newTodos.classList.add("item")
todoUl.appendChild(newTodos);
let completedBtn = document.createElement("button");
completedBtn.innerText = "✔️"
completedBtn.classList.add("completed-Btn");
completedBtn.type = "button"
newTodos.appendChild(completedBtn)
console.log(completedBtn)
let deleteBtn = document.createElement("button");
deleteBtn.innerText = "🗑️"
deleteBtn.classList.add("delete-Btn");
deleteBtn.type = "button"
newTodos.appendChild(deleteBtn)
console.log(deleteBtn)
newTodos.addEventListener("click", function() {
newTodos.style.textDecoration = "line-through"
})
newTodos.addEventListener("click", function() {
newTodos.removeChild()
})
//can not get the delete button to work
todoForm.reset()
console.log(newTodos)
})
Got some help from my mentor, so with the help of the first answer posted I changed the targets for the event listener after we realized that I was not targeting the parent for the removeChild, nor was I passing in an argument.
deleteBtn.addEventListener("click", function() {
console.log(deleteBtn)
todoUl.removeChild(newTodos)
})
You're just setting the event listeners on the wrong element.
newTodos.addEventListener("click", function() {
newTodos.style.textDecoration = "line-through"
})
newTodos.addEventListener("click", function() {
newTodos.removeChild()
})
You're setting both listeners on the newTodos element instead of the individual buttons, like so:
completedBtn.addEventListener("click", function() {
newTodos.style.textDecoration = "line-through"
})
deleteBtn.addEventListener("click", function() {
newTodos.remove()
})
Also, you need to call newTodos.remove() instead of newTodos.removeChild()
I have looked through all of the similar questions available at the time of this question, and none of the solutions presented worked in the below code. Google was also not helpful except that I did find a few issues with dynamic code where the entire menu was not wrapped, but those issues should be fixed with either the trigger or enhanceWithin methods - which have been tried here.
I am a fairly new with javascript and the jquery library and this is my first app with jquery mobile.
The raw html as generated from the php file:
<div class="cell_container force_org_select">
<label for"force_org[new_555]" class="ui-hidden-accessible">Troop Type</label>
<select name="force_org[new_555]" id="force_org[new_555]" class="roster_cell" data-mini="true">
<option value="hq">HQ</option>
<option value="elite">Elite</option>
<option value="solo">Solitaire</option>
<option value="formation">Std Formation</option>
</select>
The Javascript function that handles the dynamic injection:
$(document).on('click','.add_item', function(event) {
event.preventDefault();
var the_link = $(this).attr('href')
var area = getParameterByName(the_link, 'area');
var type = getParameterByName(the_link, 'type');
var squad_id = getParameterByName(the_link, 'squad_id');
var vehicle = getParameterByName(the_link, 'vehicle');
var divider = getParameterByName(the_link, 'divider');
var preset = $('#preset').val();
$.post(cmd_ajax.ajaxurl,{action: 'cmd_add_item_mobile', type: type, preset: preset, squad_id: squad_id, vehicle: vehicle, divider: divider}, function(data) {
if(type == 'squad' || type == 'divider') {
$('#list').append(data).enhanceWithin();
//$('#list').append(data).trigger("refresh");
//$('#list').append(data).trigger("create");
$('.squad_help_button').tooltipster({
contentCloning: true,
trigger: 'custom',
triggerOpen: {
click: true,
tap: true
},
triggerClose: {
click: true,
tap: true
}
});
}
else {
$('#' + area).append(data).enhanceWithin();
}
//console.log("squad_id:"+this_id);
set_unit_sortable();
});
return false;
});
I also tried adding the .selectmenu("refresh",true) within the function and that seems to do nothing. The custom selects that are not dynamically generated work fine.
If I use the data-native-menu="false" attribute on the generated select menus, the popup does not function and you cannot select anything, if I remove the attribute, the native select works as it should.
I thought about using a selectmenu() refresh at the very end of the function, but I can't seem to catch the element id of the select menu either. My only guess is that it isn't created yet in the DOM when I try to retrieve it.
I have a webgrid that gets populated on page load. In this grid I have an element that has a javascript event handled when it is clicked. Here I simply intend to sent the user to an external site. I also have this tied to a controller. Both are working for the first element. However, when it comes to anything after the first element in the list the javascript does not get called.
WebGrid:
#grid.GetHtml(tableStyle: "table table-striped table-bordered",
headerStyle: "thead-default",
columns: grid.Columns(
grid.Column("post_tran_a", Model.year_a, canSort: false, format: (item) =>
new HtmlString(Html.CheckBox("post_tran_a", (bool)item.post_tran_a.is_reviewed, new { disabled = "disabled" })
+ " " +
Html.ActionLink((string)item.post_tran_a.month, "PostTransmission", Model.controller, new { report_id = item.post_tran_a.report_id, link = item.post_tran_a.link }, new { #id = "external-link", data_url=Url.Action() })
))))
Javascript:
$("#external-link").click(function () {
var url = $("#external-link").attr("data-url");
alert(url);
});
If this approach won't work I'm open to alternative solutions.
Simplest way in your particular case might work like
$("table a").click(function () {
// you need here 'this' it is available by default
// and it points to the object on which click is called
var url = $(this).attr("data-url");
alert(url);
});
But above is too general. It will fail if you have tables having other links a where you do not want to fire the even so better approach is following
Id only works for one element. For a set of elements (e.g. multiple links). You need to use the class and access them by class as well.
I replaced your id with class and accessed it with that name as well.
grid.GetHtml(tableStyle: "table table-striped table-bordered",
headerStyle: "thead-default",
columns: grid.Columns(
grid.Column("post_tran_a", Model.year_a, canSort: false, format: (item) =>
new HtmlString(Html.CheckBox("post_tran_a",
(bool)item.post_tran_a.is_reviewed, new { disabled = "disabled" })
+ " " +
Html.ActionLink((string)item.post_tran_a.month, "PostTransmission",
Model.controller, new { report_id = item.post_tran_a.report_id, link = item.post_tran_a.link },
// See following carefully
new { #class="someuniquecalssname" data_url=Url.Action() })))))
Now the javascript will work fine
$(".someuniquecalssname").click(function () {
var url = $(this).attr("data-url");
alert(url);
});
If you are not willing to add class attribute then, Creating Unique Ids like ex-link1, ex-link2 could be possible in many cases. But they are useless for an event like above
You are using id to select the element, an id must be unique on the page. use either a class or unique ids when setting them in your code #id = "external-link--xxx"
You could also use a different selector in your jquery selector
$("#yourtableid a").click(function () {
var url = $("#external-link").attr("data-url");
alert(url);
});
on a tab panel I create a tab for each year I have in a database (in this case the database contains at the moment only 3 years: 2012, 2013 ans 2014) and finally I set as active tab the current year (2013). In the controller I do the following:
var tp= this.getTpOverview();
this.getPlannedYearsStore().load({
callback: function(records) {
for (i=0; i< records.length; i++){
var year = records[i].data.year;
var tab = tp.add({
title: year,
year: year,
layout:'fit',
listeners: {
activate: function() {
var tbOverview = Ext.getCmp('tabOverview-'+ this.year);
if (!tbOverview) {
var gridOverview = Ext.create('WLPT.view.CPAssMonthActHours', {
id: 'tabOverview-' + this.year,
year: this.year,
xtype: 'cpassmonthacthoursview',
autoScroll: true
});
this.add(gridOverview);
} else {
selectedYear = this.year;
tbOverview.getStore().load({
params : {
wrk_year: selectedYear
}
});
}
}
}
});
if (currentYear == parseInt(records[i].data.year)) {
tab2Activate = tab;
}
}
tp.setActiveTab(tab2Activate);
}
});
When I run the application this seams to work fine.
I forgot to say that each tab contains a grid panel with a check column (Checkbox model) and for each item (row) a cell editor is setted on selected cells.
The active tab (2013) works fine. I can check the checkboxes to perfom a sum of the selected items. Indeed, the cell editor works fine.
The problem appears when I change the tab. The corresponding grid comes with the checkbox column. But on the javascript console appears the following error message:
Uncaught TypeError: Cannot call method 'setWidth' of undefined ext-all-debug.js:95689
Ext.define.onColumnResize ext-all-debug.js:95689
Ext.define.onColumnResize ext-all-debug.js:101362
Ext.util.Event.Ext.extend.fire ext-all-debug.js:8896
Ext.define.continueFireEvent ext-all-debug.js:9102
Ext.define.fireEvent ext-all-debug.js:9080
Ext.override.fireEvent ext-all-debug.js:51104
Ext.define.onHeaderResize ext-all-debug.js:97344
Ext.define.afterComponentLayout ext-all-debug.js:98063
Ext.define.notifyOwner ext-all-debug.js:28381
Ext.define.callLayout ext-all-debug.js:103511
Ext.define.flushLayouts ext-all-debug.js:103680
Ext.define.runComplete ext-all-debug.js:104194
callOverrideParent ext-all-debug.js:54
Base.implement.callParent ext-all-debug.js:3813
Ext.override.runComplete ext-all-debug.js:21234
Ext.define.run ext-all-debug.js:104175
Ext.define.statics.flushLayouts ext-all-debug.js:21238
Ext.define.statics.resumeLayouts ext-all-debug.js:21246
Ext.resumeLayouts ext-all-debug.js:23343
Ext.define.setActiveTab ext-all-debug.js:111589
Ext.define.onClick ext-all-debug.js:111357
(anonymous function)
Ext.apply.createListenerWrap.wrap
Despite that, the grid is shown correctly. But, when I select a item the javascript console shows the following error message:
Uncaught TypeError: Cannot call method 'up' of null ext-all-debug.js:99591
Ext.define.onRowFocus ext-all-debug.js:99591
Ext.util.Event.Ext.extend.fire ext-all-debug.js:8896
Ext.define.continueFireEvent ext-all-debug.js:9102
Ext.define.fireEvent ext-all-debug.js:9080
Ext.override.fireEvent ext-all-debug.js:51104
Ext.define.focusRow ext-all-debug.js:92462
Ext.define.onRowFocus ext-all-debug.js:92423
Ext.define.onLastFocusChanged ext-all-debug.js:109495
Ext.define.setLastFocused ext-all-debug.js:83855
Ext.define.doMultiSelect ext-all-debug.js:83761
Ext.define.doSelect ext-all-debug.js:83721
Ext.define.selectWithEvent ext-all-debug.js:83623
Ext.define.onRowMouseDown ext-all-debug.js:109750
Ext.util.Event.Ext.extend.fire ext-all-debug.js:8896
Ext.define.continueFireEvent ext-all-debug.js:9102
Ext.define.fireEvent ext-all-debug.js:9080
Ext.override.fireEvent ext-all-debug.js:51104
Ext.define.processUIEvent ext-all-debug.js:85315
Ext.define.handleEvent ext-all-debug.js:85227
(anonymous function)
Ext.apply.createListenerWrap.wrap
The selection on the item fires the event 'select' and 'deselect' when I click a second time. But the check symbol on the checkbox doesn't work any time.
I have thougth to put this symbol manually on the events 'select' and 'deselect' as a workaround, but I don't know how to put this style and which one is.
Do you have any ideas? Look forward for your suggestions. Thank you in advance.
Manuel
I think, the errors are not related to the code you posted. In fact, your code does not set the width, nor does it call up.
I find your code convoluted: a callback with a listener inside, that creates a view inside. And I don't understand if your code is inside a controller or another class.
Here is a problem:
var tab = tp.add({
//xtype is missing
title: year,
For debugging, I can giv you the following recommendation:
Use ext-dev.js instead of ext-all-debug.js. This will load all required classes one after the other, and the errors in the backtrace are not all inside ext-all-debug.js, but each line shows the line in the source class with all comments in it.
To get a cleaner programming style, try to follow the MVC pattern strictly:
Folder structure as recommended
Define events in the controller, like
init: function(){
this.listen({
store: {
'#plannedYearsStore': {load: this.onPlannedYearsStoreLoad}
}
})
this.control({
'tab': {activate: this.onTabActivate}
})
},
onPlannedYearsStoreLoad: function (store, records){
for (i=0; i< records.length; i++){
var year = records[i].data.year;
var tab = tp.add({
...
},
onTabActivate: function (){
var tbOverview = Ext.getCmp('tabOverview-'+ this.year);
...
},
If possible, define your tab in a view class in a separate file.
When you adhere striclty to this MVC structure, you will get a much easier maintainable code.
I'm coding a jquery plugin and I need some buttons to have a double state (like edit/save)
I get this info via JSON and insert it in the button as:
node
- current //['primary'/'secondary']
- primary // some info
- secondary // some info
Once I click the button I get here to change the action. So I want to replace the whole link through a template and the info I get from button.data.
As I want to replace not only the innerHtml but the outer, I have to use 'replaceWith'. Then I copy the 'data' to the new button and (ideally) delete the older one.
changeButtonAction : function(button, selector){
var node = button.data('node'),
info;
if(node.current == 'primary'){
info = node.secondary;
node.current = 'secondary';
}else{
info = node.primary;
node.current = 'primary';
}
button.replaceWith(multiReplace(OPERATION_ITEM, info, true));
button.data('node', $.extend( true, {}, node));
... //bit of interaction
}
The thing is: Once out the function I loose the new data as it says it's undefined.
Could somebody help? Using 'replaceWith' it's not a must, so if you come up with another solution it will be ok.
Ok, I solved it.
Thanks to Diode I tried reproducing it in jsfiddle. The click function did not work neither so I changes my code a bit. Instead of replacing with text:
button.replaceWith(multiReplace(OPERATION_ITEM, info, true));
button.data('node', $.extend( true, {}, node));
Do it with an object:
var button2 = $(multiReplace(OPERATION_ITEM, info, true))
.data('node', $.extend( true, {}, node));
button.replaceWith(button2);
You can see it in action:
http://jsfiddle.net/p8vMR/9/