I am building a bigger application in React, JavaScript and HTMLusing Visual Studio Code.
I am using a third party router to log-in inside a small robot I built. This robot will turn on using a relay which is triggered by a combobox and a related button which will apply the combobox choice. Also I am new to JavaScript and HTML and for this reason I learned how to deploy a website and I prepared a minimal verifiable example which can be found here https://comboboxtest.netlify.com/ and here you can also get the source code if needed.
The goal of the application after I launch Visual Studio will be:
1) log-in inside the router,
2) automatically trigger the combobox and
3) automatically apply the combobox choice using the Apply button.
For better showing this see print screen below:
The problem: In order to access to the router there is an external interface that I didn't write because is from the router. I navigated through the interface and arrived to the Apply button as shown below in the HTML code:
So the operations are the following:
1) I trigger the relays using the combobox
2) using the mouse I have to hover on the Apply button
3) After the mouse is on the button (button hovered) I can click and apply the choice
4) The choice should be confirmed by the statement to become green.
What is not working: I can trigger the combobox, but I am not able to atomatically hover and click on the apply button.
Below the most important part of the code I am using:
property string get_relay_comboBox: "
var comboBox = document.getElementsByName('859-2-2')[0];
// find a target element.
if (comboBox) {
// Add event listener for combobox
comboBox.addEventListener('change', function (e) {
console.log('Change event detected:', e);
});
// Get new option index by flipping the current selected index
var newIdx = (comboBox.selectedIndex + 1) % 2;
// set the new index
comboBox.selectedIndex = newIdx;
// fire change event
comboBox.dispatchEvent(new Event('change'));
}
else {
console.error('comboBox not found!');
}
";
property string applyBtn: "
function fun('btnb btnhov') {
document.getElementById('btn_Apply').click();
}
";
What I tried so far
1) I research for a while the problem and I found this and also the following post which helped to understand how to trigger the combobox.
2) I right clicked on the router interface right on the Apply button and opened the Inspect Element menu and went to the Show DOM properties I found that maybe the following sreen-shot could be useful:
3) This I used to understand the HTML part and in fact I understood that it is important the way components should be called but still could't figure out how to accept the choice of the combobox using the button.
4) Following this source which is the basic way to call a clicked event I simply applied it as it is possible to show it below:
function fun('btnb btnhov') {
document.getElementById('btn_Apply').click();
}
But I didn't work and I think that at this point the most important problem as explained would be how to detect a mousover event and after that, push the button.
How to do that?
EDITS
I also tried to rewrite the function in the following way:
property string applyBtn: "
var btnApply = document.getElementById('btn_Apply');
if(btnApply) {
// Try add event listener for button
btnApply.addEventListener('change', function(e) {
console.log('Change event detected:', e);
});
// Push button
// Here the button should be pushed (or hovered first????)
}
else {
console.error('btnApply not found!');
}
";
Thanks to anyone who could please guide to the right direction to solving this problem.
Related
Depending on certain conditions, I have to hide a button in the header of my app. The coding in the controller is as follows:
if (condition === true) {
this.byId(buttonId).setVisible(false); //works fine
} else {
this.byId(buttonId).setVisible(true); //also works fine
}
//Code edit: Button is created on the go to check if Adapt UI can still find it.
//However, it does not work still as expected. Button is visible to Adpat UI.
if (condition === true) {
var oButton = new sap.m.Button
({
text : "Save",
type :sap.m.ButtonType.Accept
});
oButton.placeAt('content');
}
Moreover, the inital visiblilty of the button is set to false in the view definition.
<Button id="buttonId" text="Button1" press="onPress" visible="false"/>
In my app, this works as intended; button is hidden. However, if user goes to Adapt UI settings, it shows list of all the available buttons in the header. It also shows button1, even if it is not required in header atm.
What I want to do?
I want to hide button in adapt UI settings also. Button's visibility should be handled only via controller file.
Does anyone know how to achieve this?
Thank you.
You could inject the button with code at run-time when you want to provide user access to it - this way the button does not form part of the View at the outset.
I suspect the Adapt UI will allow access to anything in the Static View as it stands.
I'm using the ChromeWebDriver together with Selenium. The application is partically controlled automatically. Now I want the user to navigate to a page, where he has to choose a link from some list like
<ul>
<li>Google</li>
<li>Ecosia</li>
<li>Yahoo</li>
</ul>
I want to get the link automatically, where the user clicked on. As example, when he clicks on Google, I need some kind of event, that gave me http://google.de in C#. There exist a WebDriverEventListener, his ElementClicked event is exactly what I need:
private void EventDriver_ElementClicked(object sender, WebElementEventArgs e) {
if(e.Element.TagName == "a") {
string link = e.Element.GetAttribute("href");
MessageBox.Show($"User has clicked on link {link}");
}
}
But the big problem here: ElementClicked is only fired on clicks triggered by Selenium using C#. All events have this issue. For example, Navigated got fired after calling driver.Navigate().GoToUrl("http://stackoverflow.com"), but not after manually clicking on a link in the browser.
To solve this, I think its necessary to forward client-side JS events. Like this pseudocode:
$('a').click(function() {
SeleniumBackend.NotifyAboutClickEvent('a', $(this));
});
I know there is a method called ExecuteScript which allows to run JS in the browser. It seems possible to catch a direct return like
string jsReturnValue = driver.ExecuteScript("return 'test';");
For this case, that's not enough, since some sort of callback would be needed to be async.
object clickedLink = sharedWebDriver.ExecuteAsyncScript(#"
var callback = arguments[arguments.length - 1];
clickedLink('http://google.de');
");
That works, issue here: Only once. I can't bind an eventhandler, which notify me about later clicks...
It looks like you are creating the initial menu page. If that's true, you can just set a JS global variable using an onlick event and then use JavascriptExecutor to grab the variable setting and then use that to determine what link they clicked.
...or better yet, you can just detect the browser URL after they click and know where they went.
Let's imagine we have those Django models:
class Band(models.Model):
name = models.CharField(max_length=256, default="Eagles of Death Metal")
class Song(models.Model):
band = models.ForeignKey(Band)
When using the admin to manage those models, the band field is associated to a Widget rendered by Django as a select html element.
Django's admin also adds a green plus icon next to the select, clicking it opens a pop-up window where the user is presented with the Form to add a new band. When clicking the save button in this pop-up window, the new band name is saved in the DB, and automatically assigned to the select value.
We rely on some javascript to be run each time a select value changes. It is currently listening to the change event of said element, which works fine when the user clicks a value directly in the menu proposed by the select.
Sadly, when this select is populated through the Admin Popup functionality, it seems the change event is not fired for the select, as our callback is not executed, even though the element's value is actually changed.
Is there another event we can listen to to get the same behaviour than when the user clicks a value directly from the list ?
Here is a Javascript snippet with the hackery we use to trigger a change event when the Django admin's add/change popup window is dismissed.
We use this with Django 1.7, so it works for this version at least.
Monkey-patching the Django admin's JS methods to achieve this isn't a very elegant way to do the job, but it was the least intrusive option we found. If anyone knows of a better way, let us all know.
/*
* Trigger change events when Django admin's popup window is dismissed
*/
(function($) {
$(document).ready(function() {
// HACK to override `dismissRelatedLookupPopup()` and
// `dismissAddAnotherPopup()` in Django's RelatedObjectLookups.js to
// trigger change event when an ID is selected or added via popup.
function triggerChangeOnField(win, chosenId) {
var name = windowname_to_id(win.name);
var elem = document.getElementById(name);
$(elem).change();
}
window.ORIGINAL_dismissRelatedLookupPopup = window.dismissRelatedLookupPopup
window.dismissRelatedLookupPopup = function(win, chosenId) {
ORIGINAL_dismissRelatedLookupPopup(win, chosenId);
triggerChangeOnField(win, chosenId);
}
window.ORIGINAL_dismissAddAnotherPopup = window.dismissAddAnotherPopup
window.dismissAddAnotherPopup = function(win, chosenId) {
ORIGINAL_dismissAddAnotherPopup(win, chosenId);
triggerChangeOnField(win, chosenId);
}
});
})(jQuery);
I'm in the process of developing a Chrome extension, with the intention of providing "paste" functionality from Excel into a form/table in our ERP system (Sage ERP X3 V7).
I've got everything working reasonably swell, but I've run into issues getting the default events that fire when you manually input text, to fire when putting it in programmatically.
I've used 'Visual Event' to see what events listeners are assigned to the inputs, and tried manually triggering them using the jQuery .trigger method.
I'm not sure if it's just a timing issue or what? Normally when you manually enter lines, you'll hit tab to move to the next field, and it'll take a bit to validate your data before moving on. It's that validation I need to trigger here.
This is the code snippet I'm using to try and trigger the focusin and focusout events -
function pasteLineData(lineData, data_s_article){
console.log($(".s-list-core[data-s-article='" + data_s_article + "'] tbody>tr:last").length);
var fieldData = lineData.split("\t");
var f=0;
$(".s-list-core[data-s-article='" + data_s_article + "'] tbody>tr:last").each(function (){
var $fields = $(this).find("input[readonly!='readonly']:not(.s-readonly):visible");
$fields.each(function(){
console.log($(this).attr("id"));
console.log(fieldData[f]);
$(this).trigger("focusin");
$(this).val(fieldData[f]);
$(this).trigger("focusout");
f++;
});
});
}
(the selectors in use are just there to grab the specific table and only the active fields, a some are display only)
Any suggestions on how I can get my extension to simulate the entry process?
I have a need to have a multi-page html, with each page containing an identical toggle. When the user changes a toggle on one page, all the toggles on the other pages should change (or at least change on loading the other pages).
I've created a Fiddle to illustrate a simple scenario, with a two page example and identical toggles on each page. I'd LIKE to be able to change the toggle on page 2 by toggling the toggle on page 1
http://jsfiddle.net/vSr99/
I've tried a number of methods, and yes have included a refresh after attempting to manipulate with javascript, but have not even come close, no doubt due to my programatically challenged nature :-/
If anyone can suggest a simple solution I'd much appreciate it!
Thx
try setting a global attribute when the button is clicked and store this on $('html') like so:
$('html'). attr('toggleIs',true);
then you can check for this on pagebforeshow and add the toggled state to the buttons on all new pages being pulled into view depending on the button state.
EDIT
Here is a jsfiddle (ignore the first alert);
Here is the html:
$(document).on('change', '.your_select', function(){
// set
if( $(this).find('option:selected').val() == "on" ){
$('html').data('toggle', 'on');
} else {
$('html').data('toggle', 'off');
}
});
$(document).on('pagebeforeshow', '.ui-page', function(){
var that = $(this).find('.your_select');
// clear
that.find('option').removeAttr('selected');
// reset
if($('html').data('toggle') == "on" ){
alert("should be on")
that.find('select option[value="on"]').attr('selected', 'selected')
} else {
alert("should be off")
that.find('option[value="off"]').attr('selected', 'selected')
}
// refresh slider
...
});
please note:
took me a while to see you where using jquery 1.6.4, so my on-bindings didn't work. If you want to keep, you need to use live for the bindings to also capture pages being pulled in.
I gave a class to all sliders, to set them together
I cannot get the JQM slider('refresh') to work on the slider or any parent element... you will have to figure that out by yourself, but the synchronizing is working :-)