We Keep Coding

AppleScript cannot click input tag to add file

I am trying to use applescript to add a file to a website's input field.
This is my code so far:
set ClickInput to "var myInput = document.getElementByClassName('jsx-1828163283 upload-btn-input')[0]; myInput.dispatchEvent(new MouseEvent('mousedown')); myInput.dispatchEvent(new MouseEvent('mouseup'));"
set ClickInput2 to "var myInput = document.getElementsByName('upload-btn')[0]; myInput.dispatchEvent(new MouseEvent('mousedown')); myInput.dispatchEvent(new MouseEvent('mouseup'));"
activate application "Safari"
tell application "Safari"
open location "https://www.example.com/upload"
set theTab to tab 1 of window 1
-- wait until page loads
repeat while document 1's source = ""
delay 0.5
end repeat
-- do JavaScript ClickInput in theTab
do JavaScript ClickInput2 in theTab
delay(5)
close theTab
end tell
Here is the HTML around the input element I want to select:
<div class="jsx-3758851661 upload">
<div class="jsx-1828163283 upload-btn">
<div class="jsx-3758851661 card stage-1">
<div class="jsx-3758851661 text-main">Select video to upload</div>
<div class="jsx-3758851661 text-sub text-sub-margin">Or drag and drop a file</div>
<br class="jsx-3758851661">
<ul class="jsx-3758851661 text-sub">
<li class="jsx-3758851661">MP4 or WebM</li>
<li class="jsx-3758851661">720x1280 resolution or higher</li>
<li class="jsx-3758851661">Up to 60 seconds</li>
</ul>
</div>
<input type="file" name="upload-btn" accept="video/mp4,video/x-m4v,video/*" class="jsx-1828163283 upload-btn-input">
</div>
</div>
The way the site works is you click the outermost div <div class="jsx-3758851661 upload"> and the safari file finder pops up and you select what file you want.
I have tried clicking the divs outside of the input tag and I have tried clicking the input tag by itself.
I tried to do this by selecting the classnames of the divs and the input tag
I also tried to do this by selecting the input tag by its name and clicking on that
None of these worked.
Im not sure if it clicked but none of these made the file finder pop up
Do you guys have any ideas? Let me know if you would like some clarification. thanks!

figured out set ClickInput to "document.getElementsByName('upload-btn')[0].click();" works !

getElementsByName isn’t a function that I’m aware exists as standard, so you probably want to use getElementsByClassName or querySelector.
The input element has two class names, of which I’m going to choose ”upload-btn-input” in my example below:
tell application id "com.apple.safari"
open location "https://www.example.com/upload"
tell document 1
repeat while the source = ""
delay 0.5
end repeat
do javascript "document.querySelector('.upload-btn-input').click();"
end tell
end tell
If you can provide the actual URL of the page in question, this would allow me to refine this answer to ensure it’s appropriate for what you’re trying to do.

Are there reasons that Javascript can only access some of the new DOM after Ajax?

I am just learning JS and while implementing AJAX I ran into some strange behavior.
In my code I have the following
<div id="saved_listing_form"></div>
an onchange in a select element runs a script where ajax fills the above div with a preview of the saved listing along with a form populated with fields that can be edited in order to edit the listing if desired.
There is a button in the form that is used to preview the changes to the listing before saving them.
Below is the code that will be populated by the "preview" script that does not respond to JS
<article class="listing" id="listing_preview" style="display:none;" title="">
<a href="" id="preview_url" target="_blank"><img id="preview_picture" src="" alt=""><h3 id="preview_name"></h3>
<span id="preview_phone"></span><address><span id="preview_address_1"></span><br><span id="preview_address_2"></span>
<span id="preview_city_state_zip"></span></address>
</a>
</article>
I tried manipulating the listing through the console in Firefox as a last resort. The console is able to find the article,
document.getElementById('listing_preview')
but cannot produce changes in the DOM
document.getElementById('listing_preview').style.display = 'block';
will not make it appear
I can even
make changes to the object in the console, but that will not show up on the page.
ie document.getElementById('preview_name').innerHTML = 'Hello';
This change will show up in the console, but not in the page.
Here is the strange part. The already-saved listing that is populated by ajax in the saved_listing_form works perfectly and can be manipulated via the console and scripts as expected.
<article class="listing" id="listing" title="Dr. Peter Griffin of Q'Hog, RI"><img id="saved_image" src="images/clients/Peter_Griffin20200827180833.jpg"><h3>Peter Griffin, D.C.</h3>+11234567890<br><address>123 Spooner St<br>Q'Hog, RI 12345</address></article>
Are there any reasons that part of the ajax-populated div works as expected while other DOM objects within the same div would not? I don't appear to have any broken html elements that would throw things off.
The reference to the JS that controls the preview is loaded in at the very end of the code that ajax populates.
Any help would be much appreciated.

JQuery Get Value of Embedded Widget Autocomplete Text

I have embedded a widget into my site provided by a third party site, this widget displays an input box that auto-suggests text to the user on input.
It's the same as the Ask Your Question search on this page.
I embed the widget by including a widget.js file in my document <head>, and calling it in my html with;
<div id="widget-5032"></div>
When I inspect the HTML of the widget I see the following (sample item list);
<div>
<ul id="search-query-5032_list">
<li data-question="Alaska">Alaska</li>
<li data-question="Hawaii">Hawaii</li>
<li data-question="etc.">etc.</li>
</ul>
</div>
The auto-suggestions are being served from the third party website, when one is clicked, the input is populated with the suggested text and the page automatically redirects to the external website (no need to click the search button). I have no control over how the widget functions.
I'm trying to capture the value of the selected text but I'm not sure how to?
The reason I want to do this is so I can send it to Google Tag Manager using dataLayer.push({})
I've tried this but it doesn't work;
$('#search-query-5032_list li').on('click', function() {
alert($(this).text());
});
Any advice is appreciated.

I had a quick look at the code on the page and I think you can use this piece of code on your page. The Try/Catch is important as the hidden input is only created when an item is selected.
springSpace.la.widget_5032_inst.search.autocomplete.input.parentNode.addEventListener('click', function(){
try {
alert(searchform_5032.form.querySelector('input[name=faqid]').value);
}
catch(err) {
console.log("empty");
}
});
Where I have the "alert" message, you would replace with your GTM dataLayer push to get that information into GTM/GA.

Can you try this:
$('#search-query-5032_list').on('click', 'li', function(){
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<ul id="search-query-5032_list">
<li data-question="Alaska">Alaska</li>
<li data-question="Hawaii">Hawaii</li>
<li data-question="etc.">etc.</li>
</ul>
</div>

Using jQuery to link to a page and then jump to a specific header

I have a client site that has a community events page. On that page, events are generated and put out one by one like this:
<div class="event-info">
<h5>This is an event</h5>
<span class="date">December 25, 2013</span>
<p class="details"></p>
</div>
They want a link on the homepage that goes to this one Christmas event, which will eventually start to move down the page. The only way to really find that block is by the contents of the <H5>. A classic anchor link would do the trick, but I can't add them to the <div class="event-info" /> block. The homepage link has to go to this page and then jump down to the necessary <div class="event-info" />.
jQuery or vanilla javascript are all I have to work with. I have one .js file that I can add to, and of course the html/javascript of the link itself on the homepage. I can't manipulate the existing HTML of the pages (content is dynamic - I add new stuff to it), and I have no access to the backend .NET framework.
Thanks.

something like this?
jquery:
var hash = window.location.hash;
if (hash==='#xmas') {
var xmas = $('.date:contains("December 25")').parent('.event-info').offset().top;
$('html,body').animate({scrollTop: xmas}, 500);
}
You just add #xmas to end of the page url, like: http://fiddle.jshell.net/filever10/afK7M/show/light/#xmas
made a fiddle: http://jsfiddle.net/filever10/afK7M/

JS-Linking to an anchor inside the document in the onclick() event

I have a problem on the following code, imagine the rest is okay (html, head, body etc)
What I want to do is, when you click on one of the buttons the hidden text/images in the section show or hide, the code does that just fine. The problem is I also want it to take you to an anchor in that newly appeared section when you click on the button, and I cant seem to do that.
Here's the code on the HTML
<h2 class="especial">TITLE</h2>
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
<p class="normal"><input type=image src="images/img_beta/buttonimage2.png" onclick="show_section2();">Section2</p>
<hr>
<div id="Section1" style="display:none">
<a id="Section1_anchor"><h2 class="especial">Sect1TittleHere</h2></a>
<p class="interior">Blablah this is the content of section1</p>
</div>
<div id="Section2" style="display:none">
<a id="Section2_anchor"><h2 class="especial">Sect2TittleHere</h2></a>
<p class="interior">Blablah content of section2</p>
</div>
And here's the JS function that controls the onclick event, I have one for each section, but they are all the same.
<script language='javascript'>
//Variables
var sect1_guardian=0, sect2_guardian=0, sect3_guardian=0;
function show_sect1(){
if (sect1_guardian == 0) { document.getElementById("Section1").style.display="block";
sect1_guardian=1;
//Close the other sections if opened
document.getElementById("Section2").style.display="none";
document.getElementById("Section3").style.display="none";
//Reset guardians
sect2_guardian=0;
sect3_guardian=0;
}
else {
document.getElementById("Section1").style.display="none";
sect1_guardian=0;
}
}
Where and how should I add the link to the anchor? If i tried adding it to the button tag and the onclick event. I do something like this
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
Because the onclick event is in the image and I don't want the text to be hiperlinked. Clearly I'm loosing something/doing something wrong, probably an humiliating mistake, but I ask for suggestions and corrections.

If it's exactly a copy paste of your code, the onclick handler is called 'show_section1()' and the function is called 'show_sect1()'. Notice sect != section :) .
Should we look further?

You can have the html you proposed and do something like this:
window.location = document.getElementById("Section1").parentNode.href;
Replace 'Section1' with your particular section.

Allright, I found a solution, it was far easier and probably nobody said it because I was presenting the problem in the wrong way, but perhaps this will help somebody.
I wanted to make the button take you to an anchor in the document, right?
The code above worked well, you clicked on the button and it showed hidden text, or hide it.
Now, adding the following to the button code, it does the anchor thingy also.
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
I just added a tag to link the button, and used the HTML id (which I already used for the JS) to function as an anchor. I hope to have explained it clearly, and that it helps somebody!
Key was, use the html id as an anchor