button.click() does not work under IE11 - javascript

I have created a jqx menu with the following script:
<ul style='width: 200px;'>
<li onclick="logOffButton.click();">Sign off</li>
</ul>
So I'd like to trigger a click event on the "logOffButton" once the user clicked to the menu item. The code for the button:
<form id="logOff" action="www.example.com" method="get">
<input type="button" id="logOffButton" placeholder="Are you sure you want to log off?" onclick="UserConfirm(this)" style="display: none;" />
</form>
So once the button click is triggered, it creates an JS alert message and if the user press OK it submits the form.
The problem is that while this works fine under Chrome and Firefox, it doesn't work under IE11.
The full code can be found here: http://jsfiddle.net/82xhy/1/

try this:-
replace <li onclick="logOffButton.click();">Sign off</li> with
<li onclick="$('#logOffButton').click();">Sign off</li>
Demo

Basically your code is wrong, and it works on chrome and other browsers because they try to understand what you mean. logOffButton.click() points to nothing, so ie being so bad and all does not understand what you mean. $('#logOffButton').click(); or document.getElementById('logOffButton'); will fix this problem because they both point exactly to where you need to, and don't require the browser to 'guess'
Both $('#logOffButton') and document.getElementById('logOffButton'); are element selectors, first is jquery and second one is javascript.

Related

Add popup based on class (most likely)

I'm trying to use Tampermonkey to add a popup on pages in the Canvas LMS. It's a forum, and after each post there is a "Reply" option, which is what I want to add the popup to. But when I click the "Reply" link, no popup appears. It opens the Reply box, as normal, but my popup is nowhere to be seen.
The code looks roughly like this:
<div class="entry-controls hide-if-collapsed hide-if-replying">
<div class="notification" data-bind="notification"></div>
<a role="button" class="discussion-reply-action entry-control" data-event="addReply" href="#">
<i class="icon-replied"></i>
<span aria-hidden="true">Reply</span>
<span class="screenreader-only">Reply to Comment</span>
</a>
</div>
The JS code I'm trying to add is:
document.querySelectorAll('.discussion-reply-action').forEach(item => {
item.addEventListener('click', event => {
alert("Popup text here");
})
})
In addition to .discussion-reply-action, I've tried using .entry-controls, .notification, .entry-control, even stuff like span[aria-hidden="true"]. Nothing seems to work.
I know the Tampermonkey script itself is applying correctly, because it has other functionality that is showing up as usual.
Any idea why this bit isn't working for me? I'm a complete JS noob, for what that's worth.
This got answered in the replies, but just wanted to formally note that it came down to delaying my code injection. I was trying to attach to elements that loaded after the doc. Once I got behind them, it worked fine.

How do I find the JavaScript referenced by this button?

Here is the "submit" button in the form with no onclick attribute.
<div id="243c0bb6-584e-4d48-a8fa-4308cd632028" class="nike-unite-submit-button joinSubmit nike-unite-component blurred">
<input id="d7e56d05-36e1-42f7-922b-d2979375007a" type="button" value="CREATE ACCOUNT">
</div>
I am more confused about the <form> tags from the Nike website source:
<form id="nike-unite-joinForm" class="nike-unite-form" method="post"
action="javascript:;" onsubmit="return false;">
...
</form>
How do I find out what is happening when I actually click the button on the page?
Using mouse-click breakpoints in chrome dev tools gives me a plethora of JavaScript functions takes too long for me to parse through.
If there are attributes or listeners added to the ID (such as a link to a script), I could not find them after using "Command-F" on the different attributes of the form.
The only other clue which I am not sure how to purse is that method="post".
I understand that all websites are different, but my question is a general one:
How do I figure out what the script that is being run when I click on the form?
Thanks in advance.
Try this:
document.getElementById('nike-unite-joinForm').submit();
This is from w3schools.com:
https://www.w3schools.com/jsref/met_form_submit.asp
EDIT:
Ok, I tried it myself on the registration website and it didn't work. Experimenting a bit with it I noticed an apparently random id is assigned to the DOM-Elements.
But I've found a solution:
document.getElementsByClassName("nike-unite-submit-button joinSubmit nike-unite-component")[0].children[0].click();
This works because the div in which the submit button is has a unique set of classes. So I get the first (and only) Element with this classes, and apply .click() to the first child element
Perhaps you could try to change submit with click:
document.getElementById('nike-unite-joinForm').click()

How to only select this textarea on click?

I need some help, I am stuck at this problem.
I have an api that I am calling, it brings in a list of information, I output the data into a textarea, on click I only want to select THIS textarea (not the others), and copy the content into my clipboard.
This is what I wrote:
function copyText() {
$(this).find('.api-text').select();
document.execCommand('copy');
}
But this is not working, when I replace this with '.api-text' and remove the find(), it selects ALL results with that class.
All the help is appreciated!
UPDATE:
Here is a jsFiddle with a rough example of what I am seeing.
https://jsfiddle.net/ax6na18u/
I found the solution after googling a suggestion from Rajesh on event.target or "(this)".
Rajesh's original code worked, just had to tie it in correctly in the HTML with $event.target:
<button class="btn btn-primary" (click)="copyText($event.target)">Copy to Clipboard</button>
The $event.target was the route of all evil!
As suspected, issue is in navigating to textarea.
First, your this is not pointing to button. Second, even if it was, you do not have an element with class api-txt in it.
You should try one of these approaches:
Go to nearest parent(li) that encapsulates both button and textarea and find textarea.
$(el).closest('li').find('.api-txt').select();
If the structure is going to remain like this where textarea and button will be on same level, you can search at this level.
$(el).siblings('.api-txt').select();
Sample
function copyText(el) {
//$(el).closest('li').find('.api-txt').select();
// or
$(el).siblings('.api-txt').select();
document.execCommand('copy');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul *ngIf="results">
<li *ngFor="let result of results | slice:0:9">
<a href="{{ result.latest }}" target="_blank">
{{ result.name }}
</a>
<textarea name="apiurl" class="api-txt">{{ result.latest }}</textarea>
<br>
<button class="btn btn-primary" onclick="copyText(this)">Copy to Clipboard</button>
</li>
</ul>

Clicking a button on a webpage using JQuery or Javascript

I've been rummaging through the web to how to click buttons for a project I'm working on with Javascript+JQuery(Still not very good). Luckily I was able to find my answer and figured out how to click basic HTML buttons that looked like this(Cut off some of the code just to get the point across).
<div class="ui-block-a">
<input type="submit" value="Buy Now" data-theme="d">
</div>
But now I've come across a button like this.
<div id="BuyWithRobux">
<div data-expected-currency="1" data-asset-type="T-Shirt" class="btn-primary btn-medium PurchaseButton " data-se="item-buyforrobux" data-item-name="Donations" data-item-id="170938328" data-expected-price="2" data-product-id="20832770" data-expected-seller-id="180359" data-bc-requirement="0" data-seller-name="Clone3102">
Buy with R$
<span class="btn-text">Buy with R$</span>
</div>
</div>
Just based off of what I know I don't think I can use what I used to click the last button which was...
$("input[type='submit']").click();
So my question is how can I click this "button"? I've tried using my old code on it to no avail. I rather not use Selenium, or anything if at all possible. Could anyone help me out with this? If you need anymore information just say what and I'll do my best to provide it, fairly new to this so don't know what to include sadly.
Thank you in advance.
By "clicking this button" If you meant to trigger a click on div#BuyWithRobux , You can do so like
$("#BuyWithRobux").click();
or
$("#BuyWithRobux").trigger("click");
The syntax for triggering a click remains the same, all you've to do is to use the right selector to target the element on which you need to trigger the event.
You can learn more about jQuery selectors here

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

Categories