This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make onclick automatically through onload function
So I have the following function which is being called when I click a button.
Here is the code:
<a href="#" role="button" onClick="myFunction('parameter')">
How can I call this function as soon as page is loaded?
I tried onLoad function but doesn't seem to work.
There are multiple options for onload event.
In HTML
<body onload="myFunction('parameter')">
In Javascript
window.onload=function(){
myFunction('parameter');
};
In JQuery
$(document).ready(function(){
myFunction('parameter');
});
Put this anywhere on your page, preferably in the <head>
<script type="text/javascript">
$(function() {
myFunction('parameter');
});
</script>
See https://stackoverflow.com/a/7911809/584192 for more ways of doing it via jQuery.
Have you tried this:
window.onload = function(){
myFunction('parameter');
}
See more at: https://developer.mozilla.org/en-US/docs/DOM/window.onload
You call in myFunction document.ready or just before closing of body tag.
Within document.ready
Live Demo
<script type="text/javascript">
$(document).ready(function(){
myFunction('parameter');
});
</script>
Before closing body tag
<script type="text/javascript">
myFunction('parameter');
</script>
You can use the following code.
<script>
onload = function(){
myFunction('parameter');
}
</script>
Related
I am building the theme in word press and i want my modal to link to the menu links. I am trying to add data-toggle in Li using j query but no result is occurring.
<script type="text/JavaScript">
j Query("#menu-item-135").add("data-toggle", modal);
});
</script>
Use this code it will add attributes in your menu
<script type="text/JavaScript">
$(document).ready(function(){
$("#menu-item-69").attr("data-toggle",'modal');
});
</script>
I need to have a stylesheet link removed from my HTML head when the user clicks a link. I found the following, but I need a MooTools equivalent.
To remove a stylesheet simply give it an id
<link href="cssFolder/sheet2.css" rel="stylesheet" type="text/css" id="sheet2">
And insert the following script just before tag
<script type="text/javascript">
$(document).ready(function () {
jQuery('#sheet2').remove();
});
</script>
window.addEvent('domready', function() {
$('sheet2').destroy();
});
Information:
domready event
$
Element.destroy()
Try this:
sheet = document.getElementById(sheet2)
sheet.parentNode.removeChild(sheet)
I have a parent page that calls an iframe modal window as follows:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
When the iframe is closed, I want the parent page to refresh.
What code do I need to add to the iframe? Do I need to create a callback function on the parent page first?
I did it via callback:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto(
{
modal: true, /*So it can be closed only with the button*/
callback: function(){
document.location.reload(true);
}
})
});
</script>
if you look closely at the source, prettyphoto wraps the iframe in a div that contains all the buttons. the only part that is iframed is the actual content. The close button is contained in the parent page. You will need to add an event handler to .pp_close click event.
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
$(".pp_close").click(function () {
document.location.reload(true);
});
});
</script>
<script>
$(document).ready(function(){
window.parent.refreshPage();
window.parent.$.prettyPhoto.close();
});
</script>
the on the page you opened the iframe have this there
window.refreshPage = function(){
setTimeout(function() {
window.location.reload();
}, 500);
};
When using 'Google maps v3 plugin for jQuery and jQuery Mobile', how to retrieve the latitude and longitude values under the mouse pointer when clicked on the map?
Even though the click event listener is already added to the map inside the plugin, the event object returned, does not give the latLng value.
Adding the click event listener to the map object from my code, worked for me (found the solution by referring this answer).
var map = $('#map_canvas').gmap('get', 'map');
$(map).addEventListener('click', function(event) {
alert(event.latLng);
});
johansalllarsson's solution works great for me, so here is my sample of code:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="js/jquery.ui.map.full.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#map').gmap();
$($('#map').gmap('get', 'map')).dblclick(function(event) {
alert(event.latLng);
});
});
</script>
$($('#map_canvas').gmap('get', 'map')).click(function(event) {
console.log(event.latLng);
});
see http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-geocoding.html
I have an html image, and I am trying to figure out if it is possible to do a partial page refresh when someone clicks on the image. I was thinking I would use a javascript. I am using aspx, and mvc model
Here is my thought
<img id = "Img1" , alt = "Click me" src = /content/img1.gif/>
my script would look something like
<script type = "text/javascript" src ="../../Scripts/jquery-1.5.1.js" >
$(function()
{
$("#Img1").click(function()
{
$('#updatePartialView'). load('#Url.Action("myAction", "myController")');
});
});
</script>
but it doesn't seem to want to work, I don't even know if it is possible .
--Update per Comment
I have a series of images on the top, and when the user click on the images the bottom half of the page refreshes with information about that picture.
---update so I wanted to try something different but it doesn't work see below
<script type = "text/javascript" src ="../../Scripts/jquery-1.5.1.js" >
$(function()
{
$("#Img1").click(function()
{
alert("I clicked this");
});
});
</script>
Just remove closing ");" in your end of javascript myFunction(). It would be working.
But I would suggest to add the onclick handler as below.
<img id = "Img1" alt = "Click me" src="">
Script:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script type = "text/javascript">
$(function(){
$("#Img1").click(function(){
$('#updatePartialView').load('#Url.Action("myAction", "myController")');
});
});
</script>