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.

How to create a jQuery click handler based on a matching pattern?

I have multiple reason codes (For ex: RC1, RC2...). For each of these reason codes, I want to give the user a text box in which they can enter some comments. Also give them the option of adding multiple text boxes for each reason code.
To allow the user to add a dynamic text box, I have a button which allows the user to do so. If there was only one reason code, I can easily just just append a text box to the pre-existing text box using jquery (Using something like this: JQuery adding class to cloned element).
However since I have multiple reason codes(over 200) it doesnt make sense of having button for each reason code in Jquery. Is there a way for me to search by a basic identifier.
I have pasted the contents of the HTML file generated by my JSP file.
<div id="Reasoncode1">
<div id="inputTextBox_Reasoncode1">
<input type="text" placeholder="Add some text"/><button class="button_Reasoncode1">
+</button>
</div>
</div>
<p>
Reason code2
</p>
<div id="Reasoncode2">
<div id="inputTextBox_Reasoncode2">
<input type="text" placeholder="Add some text"/><button class="button_Reasoncode2">
+</button>
</div>
</div>
My Jquery attempt is:
$(".button_Reasoncode1").click(function() {
$('#Reasoncode1').clone().insertAfter('#inputTextBox_Reasoncode1');
});
$(".button_Reasoncode2").click(function() {
$('#Reasoncode2').clone().insertAfter('#inputTextBox_Reasoncode2');
});
I dont want to do this for each and every reason code, i was wondering if there is a better approach to this.
My JSFiddle: https://jsfiddle.net/mvp71L61/

Assuming all buttons are statically added to the DOM,
$("button[class*='button_Reasoncode']").click(function() {
var rCode = $(this).attr('class').match(/\d+/g)[0];
$("div[id='Reasoncode'+rcode]").clone().insertAfter("input[id='inputTextBox_Reasoncode'+rcode]");
});

IE 8 nextSibling Property behaving weirdly

I am using following markup code in my project.
<td>
<A style="FONT-SIZE: small" id=MainContent_RefDataMgr_GridRegion_lblRegionName_8 title="Click to select row" onclick=javascript:OnRowClick(this); href="javascript:__doPostBack('ctl00$MainContent$RefDataMgr$GridRegion$ctl10$lblRegionName','')">test </A>
<INPUT id=MainContent_RefDataMgr_GridRegion_hdnRegionId_8 value=82 type=hidden name=ctl00$MainContent$RefDataMgr$GridRegion$ctl10$hdnRegionId>
</td>
function OnRowClick(objRow) {
var hdnSelectdGridRowRegionId = document.getElementById('<%=hdnGridRowSelectedRegionId.ClientID%>');
hdnSelectdGridRowRegionId.value = objRow.nextSibling.nextSibling.value;
}
So if my Anchor element contains any extra space in his text (test ) then objRow.nextSibling.nextSibling.value is not working , i have to use objRow.nextSibling.value but In chrome it's working fine even if text contains any extra space or not.
Please let me know what could the region for this.
Thanks in advance.

In IE8 the .nextSibling (correctly, IMHO) refers to the text node that is next to the <a>.
However, text nodes don't have a value.
You want .nextElementSibling.

Controlling the preventDefault to select which default to prevent

In a page I'm working on I have this HTML (simplified version; the original is a bit more complex).
<a href="alink.php" >
<b>1</b>
<span name="aName" data-editable="text" ></span>
<span class="type">numeric</span>
</a>
Then I have a system that allows an "edit mode".
That edit to mode changes that HTML to this:
<a href="alink.php" >
<b>1</b>
<span name="aName" data-editable="text" ><input name="aName" type="text"></span><img src="ok.png"><img src="x.png"></span>
<span class="type">numeric</span>
</a>
The issue is as follows:
When the user clicks the input how can I have the carret where the user clicked without anything else happening?
For that I tried this:
If I use the preventDefault(), the user is not sent to the link but the carret is also not positioned where the user clicked.
If I use stopPropagation(), nothing is prevented, the link is clicked.
If I use both, same as preventDefault() happens.
One possible solution I thought is to get rid of the <a> and replace it with a different tag, like a <span> tag. I just would prefer not to have to do that due to how this system works. If you think that there's a nice alternative, then please state it.
No examples or answers with libraries please
Edit: My relevant js code, as requested:
this.editableElement = document.createElement('input');
this.editableElement.type = "text";
this.editableElement.onclick = function (e){
e.preventDefault();
e.stopPropagation();
}.bind(this);
this.editableElement.name = this.parent.getAttribute('name');
this.editableElement.value = this.currentText;
Edit2: jsfiddle as requested.
http://jsfiddle.net/brunoais/gZU8C/
Now try to place the caret where you clicked. You'll check that the input becomes selected, the link is not followed but the caret is not placed where you clicked.

jQuery or JavaScript how to highlight selected text in a textarea

I'm trying to figure out how Facebook does it. I know they use textarea's in there comments and status features, but if I tag someone in a post or something, it will highlight that selection of text in the textarea with a light blue background. I know textarea's or last I knew rather at least, that this wasn't possible with this type of element, so how are they doing it? Whats the technique? anyone have any idea? Im banking on some smoke and mirrors as to how its being done, but not sure how?

Although it is using a textarea in some fashion, the bulk of the magic is done with divs and CSS. I pulled this from Safari's Web Inspector:
<div class="inputContainer">
<div class="uiMentionsInput" id="up84fa_5">
<div class="highlighter" style="direction: ltr; text-align: left; ">
<div style="width: 499px; ">
<span class="highlighterContent"><b>Brandan Lennox</b> is the coolest.</span>
</div>
</div>
<div class="uiTypeahead composerTypeahead mentionsTypeahead" id="up84fa_9" style="height: auto; ">
<div class="wrap">
<input type="hidden" autocomplete="off" class="hiddenInput">
<div class="innerWrap">
<textarea class="uiTextareaAutogrow input mentionsTextarea textInput" title="What's on your mind?" name="xhpc_message_text" placeholder="What's on your mind?" onfocus="return wait_for_load(this, event, function() {if (!this._has_control) { new TextAreaControl(this).setAutogrow(true); this._has_control = true; } return wait_for_load(this, event, function() {JSCC.get('j4f3584ff4f90d07867222385').init(JSCC.get('j4f3584ff4f90d07867222386'));;JSCC.get('j4f3584ff4f90d07867222386').init(["buildBestAvailableNames","hoistFriends"]);JSCC.get('j4f3584ff4f90d07867222383').init({"max":10}, null, JSCC.get('j4f3584ff4f90d07867222385'));;;});});" autocomplete="off" style="height: 48px; direction: ltr; ">What's on your mind?</textarea>
</div>
</div>
</div>
<input type="hidden" autocomplete="off" class="mentionsHidden" name="xhpc_message" value="#[815490222:Brandan Lennox] is the coolest.">
</div>
<div class="attachmentMetaArea"></div>
</div>
The important elements:
The div.highlighter and its descendant span.highlighterContent. Notice that it styles a b element as the highlighted content.
The messy onfocus handler for the actual textarea element. Somewhere in there, it creates a TextAreaControl object, which seems to create an object somewhere else in the DOM, since the textarea content itself is not being updated.
The input[type=hidden].mentionsHidden that submits custom data to the server so it knows who you actually mentioned.
This is totally Facebook specific, but maybe it gives you some ideas for what you'd like to do.

It is not done using a classic textarea. I know it is sounds crazy, but as you type, it generates html where it can mark/highlight keywords and moves an input around so you have a place to type. You can have a look with Firebug to see how it happens in real time.

I've worked up an example based on the html5 demo that allows you to do this. Check it out http://jsfiddle.net/KStst/ This is just telling the browser to make the section editable and it understands basic html features. This is probably not how facebook is doing it but given html5 is "the future" it's probably worth playing with.