SharePoint 2013 JavaScript OnClick event - javascript

On our SharePoint 2013 page we have a button which runs an EXE
I want to generate a JS Alert when the button is clicked so that users know to click RUN
The buttons are being generated by a Content Search Web Part which is reading from a list with a Title and URL field.
For the EXE my url is this: file:///S:/Web/EmailSignature_WPF/EmailSignature_WPF.exe
I tried to embed the JavaScript inline using code such as: javascript:open('file:///S:/Web/EmailSignature_WPF/EmailSignature_WPF.exe') or more basically: JavaScript:alert('TEST');
But SharePoint is giving me an "Invalid URL" message when I try to embed JS in this manner.
I have instead now moved to a Script Editor Web Part and am trying to add the Alert to the OnClick event of my button but this is where I am stuck.
My Script Editor code:
<script style="javascript;">
var img = document.getElementById('ctl00_ctl40_g_a225dbb9_1900_49f2_afe2_ab6f5bf77adf_csr4_pictureOnTop_line1');
img.onclick="javascript:alert('event has been triggered')";</script>
Here is an image of the IE Debug screen which is how I'm pulling the ID. This H2 element is wrapped in an HREF which is wrapped in two DIV tags which make up an LI
With the above snippet IE Debug is giving me this error message:
Unable to set property 'onclick' of undefined or null reference
I am hoping that this is as simple as misplaced quotations, or assigning the OnClick event to the wrong element, but I'm spinning my wheels. Any help appreciated and I'm happy to clarify

You should associate a function to the onclick event on img
<script type="text/javascript">
var img = document.getElementById('ctl00_ctl40_g_a225dbb9_1900_49f2_afe2_ab6f5bf77adf_csr4_pictureOnTop_line1');
img.onclick = function () {
alert('event has been triggered');
};
</script>

Say that your page is in the SitePages library and you use jQuery, you can add it to a folder called "js" in the SiteAssets folder, then go back to your Script Editor WP and do it like this:
<script src="../SiteAssets/js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('input[id*="csr4_pictureOnTop_line1"]').on('click', function() {
alert('event has been triggered');
});
</script>

Related

hooking up button in JS without using the onclick event

<button id=trainingbutton document.getElementById("trainingbutton").addEventListener("click",
}); ></button>
function(){
trainingbuttonclicked=()=>document.getElementById("trainingbtn").innerHTML = "Hello World";
Completely new to JavaScript and am trying to hook up a button to show an alert. Above is my HTML first and my app.js is below. I would like to try to hook up the event without using a simple onclick event handler. My preferred method would be either the event handler or the inner HTML method. Any advice appreciated. I know it's something simple but maybe Ive been staring at it too long, because I can't see the answer
You need your script tag in order to insert an eventlistener, like so
<script>
const button = document.querySelector('#trainingButton"); // # id's and . for selecting a
class in the dom (document object model)
button.addEventListener('click', function(event) {
const string = 'some string';
alert(string);
});
</script>
Your Button id should only contain a string like trainingButton so that it becomes <button id="trainingButton">
> the script tag should be placed in the bottom of your body tag, in order for the DOM to load properly before any javascript runs
for more info
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
You need to separate your HTML from your javascript. You can either have them in separate files or in the same.
If you'd like them in the same file you can do the following. (Note: the script has to be after the button because we want it to run after the button has been created)
<button id="trainingbutton">Training Button</button>
<script>
var trainingbutton = document.getElementById("trainingbutton");
trainingbutton.addEventListener('click', function(event) {
trainingbutton.innerHTML = "Hello World";
});
</script>
You can also define the script above between the script tags in a seperate file (*.js) and link it to your HTML file using <script src='*.js'></script>. As you add more to your HTML and JS it can help to organize.

Alternative to hide/show content with JS?

is there a better way to replace this kind of js function by simply collapse/toggle a div and show/hide its content?
$(function() {
$('#destselect').change(function(){
$('.dest').hide();
$('#' + $(this).val()).show();
});
});
The reason this is happening is because your js file is called on the head of your page.
Because of this, when you document.getElementsByClassName('collapsible');, colls result in an empty array, as your elements in body are not yet created.
You could either create a separate js file and add it at the end of your body (in that way you make sure your colls are created when your javascript is executed), or just wrap your code on a DOMContentLoaded event listener that will trigger your code once the document has completely loaded.
My guess would be that you are loading your script before browser finishes loading dom conetent and so when it runs the elements it is trying to add event listeners to, don't yet exist.
Try wrapping all you javascript in that file in this:
document.addEventListener("DOMContentLoaded", function(event) {
// all your code goes here
});
The above makes sure that your script is run after loading all elements on the page.
You could add a script tag to the header of your HTML file, this will import the JS file into your current page as follows
<script src="File1.js" type="text/javascript"></script>
Then call the function either in onclick in a button or in another script (usually at the bottom) of your page. Something like this:
<body>
...
<script type="text/javascript">
functionFromFile1()
</script>
</body>
Seems like your script is not executing properly due to a missing variable.
In this script https://www.argentina-fly.com/js/scripts.js
Naves variable in function UpdateDetailsDestination() is not defined.
I think you should resolve this first and then check your further code is working on not.
Please take a look into Console when running page. You'll see all JavaScript related errors there.

Javascript. How click on link in Javascript block?

I'm new to Javascript. I have a script that clicks on the ad unit on the site. But now I need to achieve the same in Javascript.I already have same script for Python+selenium, but now need on JS.
The object specified in the index.html javascript code
When the page loads the code is transformed into an ad unit, consisting of 3 images with links.
But it is necessary to click to start to get a reference At least one of the three blocks.
In Google Chrome, the function "View code" gives the following:
How to find and click on one of the three elements on the page with JS?
Find by xpath or ID or tagname?
Help me please! Thanks in advance!
Maybe this way helps m?...
<script type="text/javascript">
window.onload = function () {
var links = document.find_element_by_xpath("//a[contains(#href,'.xyz')]");
window.location = links;
}
</script>
If you want to trigger a click on a element using Javascript, you can try the following:
document.getElementById('element').onclick();
Here's the working fiddle:
https://jsfiddle.net/tbjbbt5a/

Trigger onload, inline javascript event

I've a pop-up that can be called trough a link. The problem is that i need to call it onload, an I can't find a way to do this.
This is the code of the pop-up
<a href="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/"
target="_blank">Click Here to Subscribe</a>
<script data-leadbox="14169a873f72a2:14f192411746dc"
data-url="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/"
data-config="%7B%7D" type="text/javascript"
src="https://sloways.leadpages.co/leadbox-1483020619.js">
</script>
I've tried to trigger the "Click Here to Subcribe" in different ways, like the following, without success:
Jquery how to trigger click event on href element
jQuery(document).ready(function(){
jQuery("#add_redirect").trigger('click');
});
Window.location.href (this open the link but in another page, not as a pop-up)
UPDATE N.1
I've bypassed the problem loading the pop-up URL through the <object> tag.
I've put the <object> inside a Bootstrap modal so it still works like some kind of pop-up.
<html>
<head>
<script data-leadbox="14169a873f72a2:14f192411746dc"
data-url="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/"
data-config="%7B%7D" type="text/javascript"
src="https://sloways.leadpages.co/leadbox-1483020619.js"></script>
<script>
var displayPopup = function(){
var element = document.getElementById('popUp');
element.click();
}
</script>
</head>
<body onload="displayPopup();">
<a href="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/" id="popUp"
target="_blank">Click Here to Subscribe</a>
</body>
</html>
I am using plan JS. When body JS object is completely formed or in other words when body's content is completely loaded then onLoad event is fired . I wired a displayPopup function to this event.
In displayPopup function i retrieve the anchor tag and manually click it .
Use this following code
jQuery=jQuery.noConflict();
jQuery(document).ready(function(e){
e.preventDefault();
jQuery("#add_redirect").click();
});
The solution by #Prashanth Reddy should work if you have jQuery loaded on your page.
For a simple implementation using plain javascript, you'll need to change the target attribute on your tag to '_self' from '_blank'. This will open the popup in your existing page instead of a new page.
then add the following at the end of the body section of your html:
<script>
(function() {
document.getElementById('add_redirect').click();
})();
</script>
see here for a working example: jsfiddle
If you want to avoid inline script tags, you'll need to add an event listener to your javascript code. Here is a good starting point for how to do that:
plain js equivalent to jquery $.ready

Catch22 - HTML waiting for JS, JS waiting for HTML

I'm a newbie trying to write a JS/HTML report generator based on criteria which I submit in an HTML form. The plan eventually is to use PHP/mySQL to manipulate a database and return results but for now I'm just trying to build the HTML/CSS/JS and I've got stuck. I have attributed a JS function to a button in the <body> like so:
<input type="button" id="reportButton" value="Generate Report" onclick="showCriteria()">
I included a script in the <head> as follows:
<script>var showCriteria = function(){ My JS code...}</script>.
This function simply does some date manipulation and displays the result in a div on the same page like so:
document.getElementById("endDate").innerHTML = "to "+endDay+" "+endMonthName+" "+endYear;
But I get Uncaught TypeError: Cannot set property 'innerHTML' of null. So I searched the forum and discovered that this can sometimes be caused by not waiting for the window to load. So I wrapped the script as follows:
<script>
window.onload = function()
var showCriteria = function(){ My JS code...}
That solved the initial error but I then get Uncaught ReferenceError: showCriteria is not defined
It seems like I'm in a Catch22. I get the first error because the script is running before the window has loaded. I fix that by waiting for the window to load only to find that the HTML is waiting for my script to define my JS function.
Any advice gratefully received.
Report Generator screenshot
Window.load script
You've almost got the solution. At least you've got all the right elements.
window.onload = function() {
document.getElementById('reportButton').addEventListener('click', showCriteria);
};
This will make it so the button does not function until the page is ready.
You also need to remove the onclick from the button.
When you put the showCriteria function inside window.onload, please make sure it is accessible by the DOM, i.e. window.showCriteria.
<script>
window.onload = function()
window.showCriteria = function(){ My JS code...}
...
Beside using onclick on html, you can use add listener to listen the click event on that element.
window.onload = function() {
document.getElementById('reportButton').addEventListener('click', showCriteria);
};

Categories

Resources