I have an html page with an a tag in it, and I want to know how can I make a Javascript code that executes it when the page loads (do the same action as if an user had made click on it)
Here's the code of my a tag
<div class="social-login">
<div class="btn btn-facebook">Facebook</div>
</div>
What I want is to automatically register, if possible without the user seeing the original html. (I want this because a user can get to this html from different ways, and in one of them I want to automate the registeration)
automatically register without the user seeing the original html, add code at the beginning of html
location.href="{% url socialauth_begin "facebook" %}"
Try triggering a click on the document.ready() function when using JQuery:
$(document).ready(function()
{
$(".social-login a").trigger("click");
});
Related
I have the following code on my webpage:
<span id="my-id">Button</span>
<script type="text/javascript">document.getElementById("my-id").onclick = function(event) { alert("Clicked Button!"); };</script>
On my webpage, the actual code is like this:
<html>Lot of markup</html>
<button>My button</button>
<script>My one line script shown in the above snippet.</script>
<iframe>Two iframes</iframe>
<html>More HTML</html>
Since the script tag comes just after the button, it should be detecting the click but it doesn't. The click is detected only after the page has loaded. Why is that?
Is there anything that I can do to detect the click as soon as possible.
You could put the onclick event directly on the span tag. That would make it so that it works as soon as that part of the DOM has loaded, rather than waiting until the whole page has loaded to execute the script.
<span onclick="myFunction()">Button</span>
Caution:
Note that if your myFunction() is part of a script that will be loaded at the end, it still won't work. You could do something simple here, however, including the whole functionality right in the markup. For example:
<span onclick="alert('You clicked me')">Button</span>
Or something else simple.
I work in advertising. I have a client who has a tracking tag implemented on page load on their advertiser's site. The tracking tag is just a script that calls the JavaScript contained within.
The client is running into a dilemma because they want to trigger another tag when a specific button on the page is clicked on. I don't know the reasoning, but the advertiser's web developers said that it would take them weeks to make the change and the client is aiming to get the tracking set up as soon as possible.
The client's only means of access to the advertiser's page is through the tracking tag called on page load. The client wants to call some JavaScript from the tag that fires on page load that executes a certain function with the button is clicked on. I guess this would involve writing some JavaScript to the document so that it is usable when the button is clicked on.
Questions:
1) Is this possible? In other words, can I take some JavaScript that executes on page load and use it to modify elements on the page?
2) If the button already has another onclick function attached, can we add a second one? The button has a 'class' attribute attached, so could I develop some JavaScript to search for that class attribute and append a second onclick to it? Or would that override the first one?
Note: I cannot use document.write. Would document.appendchild work? Any tips would be appreciated.
To clarify what I want to do again:
1) Trigger JavaScript file on page load.
2) From within that JavaScript file, send a function to the document/page, and attach the reference to that function to a button with a specific class attribute on the page via an onclick attribute.
3) I do not want to override any existing onclick function on the button.
Thanks,
Update:
Here's what I have so far.
<html>
<head>
<script>
function myFunction (){
//do something
}
document.getElementsByClassName('test').onclick = myFunction();
</script>
</head>
<body>
<button class="test"> Submit Request </button>
</body>
</html>
I want to make it so that when the script in the header loads, myFunction is called from the button with class "test". Am I on the right track?
Update 2: Would using setAttribute work?
<html>
<body>
<script>
function myFunction (){
//do something
}
document.getElementsByClassName('test')[0].setAttribute("onclick", "myFunction()");
</script>
<button class="test"> Submit Request </button>
</body>
</html>
How can i add this JS into a link:
Im in page1.php;
I need click in some link Link
And when i go to page2.php some code load this JS:
javascript:void(lz_chat_change_state(true,false));
Any help?
It seems to be simple but not for me......
Solved !
If page1 has ?chat i execute the javascript in page2;
Link in page1.php?chat
In page2.php
if (isset($_GET['chat'])) {
include_once("js-externo.php");
}else{
// Fallback behaviour goes here
}
In file js-externo.php i put:
window.onload = function() {
void(lz_chat_change_state(true,false));
}
Do you mean you want to call that function when you click on the link?
If yes
Make javascript file seperate.
Inside the link you put a "onclick" event and call the javascript function as:
<a href="page2.php" onclick = "lz_chat_change_state('true','false')">
If you want things to change after going to page2.php particularly then you need to use sessions. Pass a value from page1 to page2. But looking at your function (which I assume is being used as a toggle) it's not necessary.
I want my jQuery Mobile application to load an external page when a button is clicked, but i am not sure of which event to use.
<a href="html/rarely_Used_Page.html" id="my_page"
data-role="button" data-inline="true"
data-theme="c" data-icon="search" data-transition="none">
List Members
</a>
Source for rarely_Used_Page.html:
<div data-role="page" id="some_id">
This is my rarely used page.
It is rarely used, so I don't want to include \
it in the main index.html page
</div>
// on load of rarely_Used_Page.html,
// a script would run to perform a specific
// task, but only for this page
<script>
$('[data-role=page #some_id]').live('pageshow', function () {
alert("!");
});
</script>
** edit **
Revised script. I am getting closer to answer.
Try using the jquery load() function.
$(document).load(function() {
//code to perform tasks goes here
});
You can just put this at the bottom of rarely_Used_Page.html
If you're using Ajax, which you will be unless you explicitly ask not to, then only scripts inside the page div will fire when you load the page. So, I can see two options
Put a script inside the page div
<script>alert("!");</script>
Include the following in a script which loads with the main document
$("#some_id").live("pageshow", function() { alert("!"); });
The first option will run the code before the page shows, the second will run it after.
Why can't the piece of code which you've written there work? The a href="x.html" is the standard way to switch to an external page.
Can we use 2 different url on same for javascript disabled and enabled condition
If javascript is enabled then link should be <a href="link1">
and If javascript is disabled then link should be <a href="link2">
You could set the JS disabled URL in the markup, then on page load use JS to replace the url with the enabled URL.
HTML:
<a id="id" href="js_disabled_url" />Link</a>
jQuery example:
$(function() {
$('#id').attr('href','js_enabled_url');
});
This should degrade gracefully.
Yes, just write a JavaScript which finds the element you want to change the href of when the page has loaded.
Example using JQuery:
$(function () {
$('a.changeable').each(function () {
$(this).attr('href', 'http://google.com/lol');
});
});
(Untested, but you get the idea.)
So basically, if the user has disabled JavaScript, the default link is used, otherwise the new URL given by the script is used. So your HTML should contain the link that should be used when JavaScript is disabled.
If I understand you correctly, you can have one url on the html page, and if javascript is working, have the javascript change the url on the anchor.
That way you can ensure that the second url only works if javascript is enabled.
The problem is that if javascript was enabled when the page was loaded, and later disabled then you won't know.
But, if you just have an onclick on the anchor, then you can change the url when it is clicked on, then it will always work correctly, as, if they disable javascript after the page is loaded it will still go to the non-javascript url, and if the onclick works then it will go to the other url.