I am trying to write an applescript application that logs into a website upon launching. So far I can successfully open Chrome, load the web page into the active tab, select and input the password, but I cannot click the submit button.
Below is the element on the page:
<button type="submit" class="btn btn--ac" alt="Login"
title="Login" tabindex="6"><i aria-hidden="true"
class="lush lush-locked"></i> Login</button>
My skill level in javascript is little to none, yet I cannot find a way to successfully select this item and click it. I have tried already using the TagName and ClassName but it does not work, perhaps my syntax is incorrect. Is there a way to do this without a ID type?
I have tried:
execute front window's active tab javascript
"document.getElementByClassName('btn, btn--ac').click()"
execute front window's active tab javascript
"document.getElementByTagName('button').click()"
I should note this script runs in Google Chrome.
Thanks for any help in advance.
First of all you're using a wrong function. It should be
document.getElementsByClassName
Try using: (Assuming the Submit button is the only button with class btn)
document.getElementsByClassName('btn')[0].click();
Here's basic definition of the function from Mozilla:
document.getElementsByClassName():
Returns an array-like object of all child elements which have all of
the given class names.
Hence, you get a list of elements. Hence, you select the first element in it (using the 0 as index), and then click on it.
The correct syntax in plain js to select an element by his class is:
document.getElementsByClassName('btn--ac');
With this you'll get an array with all elements with the class 'btw--ac'. In your case try this:
document.getElementsByClassName('btn--ac')[0].click();
Related
The code im working on first makes a call to the database. Through this call, it is determined wether there are available workstations in the office or not.
If there are available workstations, "option" elements are added to a "select" element. This is achieved via jquery:
$('#idofselectelement').html(data)
Where "data" represents the markup to be inserted into the "select" element.
Now, my problem is that I'm trying to implement some code which checks wether your "favorite workstation" is available in the selected timeframe and then automatically preselects the respective workstation from the dropdownmenu in the "select" element. Everything is working so far, except for the selection of the workstation from the dropdown menu :/
The part of
I'm rather new to programming with javascript and the HTML DOM, so I'm not sure whether the fact that the options im trying to chose from are added during the runtime?
The code I've tried to manipulate the dropdown menu with is like this:
$('#idofselectelement').val(favoriteworkstation);
However, as I said, this doesn't work.
I've also already tried to output (console.log) the select element's length property right after the code which adds the markup with the available options has run.
But according to the output Im getting, the length is zero Oo
However, the dropdownmenu is definitely being created AND I can indeed manipulate it, but unfortunately not in the way I want to.
If I add an onclick event which sets the value of the respective select element, then the value in the select field indeed changes to the value specified in the event handler.
So I wonder why I can't have the favorite workstation preselected after the timeframe was chosen...
EDIT:
For further insight into the problem, I'm adding a bit more code here.
This is what the HTML Select element looks like BEFORE anything is added during the runtime:
<label for="#sitz">Sitz Nr.</label>
<select type="text" class="form-control" id="sitz" name="sitz" value="">
the markup which is added during the runtime
<option>workstationvalue</option>
<option>workstationvalue</option>
//and so on, depending on the situation...
This is a timing issue.
The js trying to find the element is faster than the actual add of the element to DOM.
Can you describe what you want to do? You might be able to do that before adding the element to DOM.
Editing before adding to DOM is possible if you convert your String to an jQuery object
var $jqueryObject = $(data);
$jqueryObject.find('.classYouSearch').val(value);
$('.whereToAd').html($jqueryObject);
I have web page with two textboxes on it. Upon clicking on the first, I have a bootstrap modal that displays with a searchable treeview. You click an item in the treeview, the modal closes, and the selection appears in the textbox. Works perfectly!
Now I have decided that for the other textbox I want to do the same thing. The only difference is the modal has a different title, and the source data for the modal treeview comes from a different endpoint. All the other javascript to support searching and highlighting within a treeview, opening and closing a modal, etc, is the same.
To get it to work, I duplicated all html for the modals and the js code and just changed the ID's to avoid clashes between the two. I cannot live with myself for doing this!
So in the end, I have some js and html that work together as a component that I want to reuse on a page among several textboxes or whatever type of widget I may create. How can I design my app so I can share this code and not duplicate it all over the page?
I think webcomponents is the way to go. You could create a component that receives the id and other needed data as parameters and then create instances of it...
There is a lot to unpack in this question. High level, to achieve what you're asking with JS…
You could:
Build a method that accepts an event object (or jQuery event object) as its argument; and handles extracting extracting data from the attributes of that element, setting the title, AJAXing the treeview, and returning the selection/setting the text box value
embed the unique data in data-attributes on each text box
set the click event listener to pass the event.target element, with its unique data- attributes to the method
Markup:
<input type="text" id="foo" data-endpoint="/path/to/endpoint_1" data-title="Modal Foo" value="" />
JS
function on_click_modal_spawning_textbox( event ) {
// get the salient data from the `data-` attributes on the `event.target`
// do modal stuff, programmatically replace the modal title, AJAX treeview, et cetera…
}
// assuming you're using jQuery, otherwise this would be a vanilla `.addEventListener()`
$( document ).on( 'click', 'input[ data-endpoint ]', on_click_modal_spawning_textbox );
I am working on a form (which comes from the Laserfiche Forms application) and I am trying to change the text on a button that currently reads "Auto Fill" which is very non-descriptive since I have 5 of those buttons.
A little backstory: My code used to work and then all of a sudden one day it doesn't and creates an error where the user can only see the "Submit" button and the title of the form, but as soon as I comment out the below code the form works again but then I have those non-descriptive buttons again.
Is something wrong with my code?
document.getElementById("lookup1573").innerHTML = "Fill Section";
On button inspection, I see something a little odd:
<button id="lookup1573" class="autofill" type="button vo="d">Auto fill</button>
You had a typo in the html:
type="button vo="d"
This is the correct way:
<button id="lookup1573" class="autofill" type="button">Auto fill</button>
Here is the full example:
https://jsfiddle.net/o2er21v0/
That is not a typo but a customer parameter of Forms.
So here is the easy way to use these kind of things with forms:
Firstly, give all of your elements classes. Whilst outside of using Forms it is recommended to use ID's to reference your elements, doing that with Forms will give you more work, tenfold.
To note about Autofill buttons: they only appear on lookups that you have enabled them on (unless you are using an old version of Forms) and will appear next to the last element in your lookup (if that makes sense).
To change the name of your autofill buttons you are going to have to do so after the page has loaded.
Below is example code to do just that, assuming that the element that has the Autofill button you have given it a class of "vendorName".
The "vo" is actually very useful as you can use it to easily interact with your field content in conjunction with your classes. In the below example I am changing what is in the field without having to go into the code and work out what the number of the id is. This makes any code you make more portable as you can then implement it in other projects, projects where you ID numbers will be different. This is so flexible that it does not matter if the "vendorName" element is a normal text input, multi-line text area or a drop down menu as that same piece of code will work the same.
4:
$(function() {
$( ".vendorName .autofill").text( "Fill Section" );
});
5:
$( ".vendorName [vo]").val( "A New Vendor Name" );
Forms already uses the jQuery library so this will work just fine. Remember to give all of your elements a class (I usually name it the same as the variable). You can also give them multiple classes by separating the classes with a space.
I'm inspecting the DOM on an Angular application and trying to figure out how I can reproduce one of the events that's bound to a button via the console. The button looks like this:
<button class="button tiny text player-add-button" ng-class="{ 'player-add-button': !player.inLineup, 'player-remove-button': player.inLineup }" ng-click="player.inLineup ? draft.rosterRemove(player) : draft.rosterAdd(player)">
What I'm trying to access here is draft.rosterAdd(). The problem is, this is a table, and there's multiple buttons and player is changing for every button. I'm not entirely sure how to define player here, even if I get into the scope of of the draft object, to pass it in as an argument to rosterAdd()
What's the best way to figure out how I can define player so that I can invoke draft.rosterAdd(player) for all of the players I want to add via the console?
Try this (in Chrome):
Right-click the desired button and select Inspect element;
Open the console tab (make sure the button markup remains selected);
Type draft = angular.element($0).scope().draft;
Type player = angular.element($0).scope().player.
Now you should be able to see how player is structured and call draft.roasterAdd() passing whatever you want.
Some useful references about the code above:
angular.element
Chrome's command line API
I have a C#/.NET web application I am working on. On one of the pages I have a table of values generated from a database. I need each value to be clickable so that when you click a value it filters data in a separate table next to it.
So what I decided to do was to make each value into a button:
<input type="button" id="exampleID" class="exampleClass" value="#Model.Data.Value1" />
In my Javascript I have this:
$(".exampleClass").click(function () {...
The code inside the function isn't relevant to the question because it isn't getting called when I click the button. Each button has a unique ID that I am using in my function and I gave them each the same class so that I can catch when any of them are called and then use their unique ID to determine which was clicked. I have set a breakpoint inside the function using Firebug but it's not getting tripped when I click the button. I am stumped as to why this isn't working.
Could be any number of things: are you attaching the click event in the ready method? Is jQuery even loaded on the page? Have you tried refining the selector? For example, $('input.exampleClass').click(). It has to be some dumb mistake.