Trigger onload, inline javascript event - javascript

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

Related

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.

SharePoint 2013 JavaScript OnClick event

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>

How do I make text slide to the right upon page load?

I'm not fluent in javascript and I'm trying to edit this example at w3schools to make a simple headline within a div slide to the right smoothly (from out of view) upon page load. I just KNOW it has something to do with the code that is already here, but I'm having two problems.
When I turn the box they are moving into a text headline and change the "div" selector into '.headline' (or whatever I've named it), clicking the button won't move it.
If I figure that out, I still don't know how to make it work without the button.
Right now that code is invoked with a click handler, just remove the wrapper for that and execute it on page load:
$(document).ready(function() {
$(".header").animate({ //be sure to change the class of your element to "header"
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
Demo: http://jsfiddle.net/tymeJV/ZWtQw/1/
if you want to make it when body loads just try these
100% working
The html content and coding are as follows:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var function1 = function(){
$(document).ready(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
};
</script>
</head>
<body onload="function1();">
<p> in the body tag i have added onload event which tells that when body is fully loaded then do this function which has a name of function1 or you can name something else but remember <b>in script tag the name after var should be same as the name in onload event </b></p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Is there a way to use onclick without really onclick event?

I am having this code:
Add
is there any way to make an alert whenever the user will press this button without changing the code or adding onclick event?
You can simple overwrite the attribute with JavaScript:
// Select the targeted element(s), in this case the first <a> element
// Note: You will need to replace this by a code that works
// for your actual markup!
document.getElementsByTagName("a")[0].onclick = function() {
alert("hi");
return false;
}​​​;
Demo: http://jsfiddle.net/WNZAP/
As the OP states that they are not allowed to change the HTML, and that jquery is not available to them.
Not having an 'id' on the link makes life very difficult. So the following code presumes the link is the very first one on the page...
Place this javascript into the <head></head> section of your page...
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function() {
alert("Hello World");
return false;
}
}
</script>
See Live JSFiddle Demo
It's not possible to trigger an action without an event. But if I get your question right you want to trigger an alert without changing the HTML.
The easiest way would be by using a JavaScript library like jQuery. So load the library either by downloading it and placing it in your project or through the Google CDN:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And then do something like this:
<script type="text/javascript">
$(document).ready(function(){
$(".submitme").click(function(){
alert("hello world");
});
});
</script>

How to make a div onload function?

I want to load an HTML page as a div inside my webpage by removing its HTML and body tags. But the HTML page has a <body onload=" ... " > , I need this function to continue working. Seems <div onload=" ... " > is not working. How can I insert this onload function into my website's body (on this page only) without directly editing my original website code (php)?
Have you used jQuery before? If so, just get the id of your div (let's say "SomeDiv") and then use the "ready" method like this:
$("#SomeDiv").ready(
function(){
//do stuff
});
you can use jQuery.load to load the contents of the page into your div
$(document).ready(function() {
$("#containing-div").load("[url of page with onload function]");
});
the code above goes in the page that contains the div. the page with the onload function doesn't get changed.
You can add an additional Javascript tag at the end of the loaded page (once inserted inside the div) which will executing as soon as it's loaded. Like this:
<div>
Insert the inner html content of that pages here and add this script at the bottom and add the onload function of the original html to this script.
<script type="javascript">
alert("hello world");
</script>
</div>
Just remember to have the javascript available to your page. What I mean is that if the javascript function called which is called inside onload="..." is defined in the <head> of the loading html document and you're throwing the <head> out then this won't work.
Not the best but one way is to check the div periodically if it's loaded:
var myInterval = setInterval(function () {
if ($('.mydiv') && $('.mydiv').width() > 0) {
// write your logic here
clearInterval(myInterval);
}
}, 3000);
If you want to add the onload event on a div, you cannot, but you can add onkeydown and trigger the onkeydown event on document load.
<div onkeydown="setCss();"></div>
$(function () {
$(".ccsdvCotentPS").trigger("onkeydown");
});

Categories

Resources