I have an footer.php file that have javascript code and functions. I use this footer.php file for all of my pages. When clicking buttons I use
onclick="MyFunc()"
but in some pages I need to call MyFunc without onclick, just when page loaded. I can not use "body onload" function because the tag is in header.php file that all pages is using it. I have triend to put
<script Language="JavaScript">
window.onload=MyFunc;
</script>
in my php file and
<script Language="JavaScript">
function MyFunc(){
alert('hello');
}
</script>
in the footer.php but with no luck.
"but in some pages I need to call MyFunc without onclick"
What I understand from your question is:
You want to fire MyFunc on a few pages
All pages include footer.php (at the end, I assume).
MyFunc is already present
If that's right, you'll have to trigger this event somehow only on the pages that you want it to fire. This can be done two ways.
Add a small snippet to the automatically firing pages
window.addEventListener('load', MyFunc, false);
This code will add the MyFunc function to the array that will be fired when the page is laded. Remember: window.onload and this will fire after all images have been loaded.
Trigger MyFunc automatically
I don't know what the difference between those pages is, but this could be done by firing the function when the page is loaded, just like the snippet I showed above, and just before this is done you check for a trigger. For example, if your page where it fires has an element with a specific class test, simply check if it exists (document.getElementsByClassName('test').length > 0) and then fire MyFunc.
I hope this helps.
if its in the footer (end of the page) you can simply enter this code where you need
<script>
MyFunc()
</script>
this will call the function
as I know the language attribute is obsolete
try to use <script type="text/javascript"> instead of <script Language="JavaScript">
EDIT: put a sample to here jsFiddle
As stated you could use window.onload or you could attach the event to DOM load
<body onload="MyFunc()"></body>
Related
I have a main (index) page which loads pages dynamically and places them inside it's div but the Javascript within those pages doesn't execute. Specifically this part
<script type="text/javascript">
$(document).ready(function(){
$('#regForm').submit(function(e) {
register();
e.preventDefault();
});
});
</script>
You will have to use getScript like this:
$('#foo').load('bar.html', function(){
$.getScript("js/fileName.js");
// call a function from fileName.js
});
You will have to put your JS code in that file and call that via getScript and then you can call functions from it as shown above.
Write your javascript in the index.php or write at the bottom of loaded page without document.ready
This is in reality a cross-browser issue: When <div>s are dynamically filled with HTML containing <script> tags, these scripts may or may not run - and this behaviour is different not only between browsers, but also between browser versions.
The only workaround I know of is to extract your JS, send it seperately and execute it after the <div> content has been set.
jQuery(document).ready(function(){
jQuery(".test").click(function() {
alert(1);
});
});
When I try not to put :
jQuery(".test").click(function() {
alert(1);
});
inside a jQuery(document).ready() it won't work.
What do you think is the cause of that one? I already loaded the custom script that has that function.
<script type="text/javascript" src="/scripts/js/jquery.js"></script>
<script type="text/javascript" src="/scripts/js/customScript.js"></script>
Any answer would be appreciated and rewarded.
Thanks!
If you're loading it in <head>, then your .test hasn't loaded yet at the time when your code executes. Thus, jQuery(".test") returns [], so the click event gets attached to nothing. If you move your <script> to the last thing in <body>, it should work.
The behaviour you are seeing is normal and correct.
When you say:
jQuery(".test").click(function() {
alert(1);
});
It means "find all elements that exist right now with the class 'test' and assign a click handler to those elements". If you put such code outside the document ready then the browser will not have parsed any HTML that is after that bit of script so it will not find any elements defined further down the page - they don't exist in the DOM yet.
Putting the code inside document.ready (or in an onload event handler) means that it won't be run until the whole page has been parsed, at which point all elements will exist and can be accessed from your code. (It should also work if you put it right at the bottom of the page after all the HTML.)
Consider the following code:
<script src="js/backgroundChanger.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.Themes').click(function(){
$('#dcontent').load('printThumbs.php');
});
});
</script>
The first script is for background changing logic and the second script gives list of thumbnails of the themes. The problem is that the first script doesn't work beacause of the second. If I don't use this AJAX technique everything works fine. Working code:
<script src="js/backgroundChanger.js" type="text/javascript"></script>
<div id="dcontent">
<?php include('printThumbs.php'); printThemesThumbs();?>
</div>
The background changing logic looks like:
$(function() {
$('.themes li a img').click(function() {//code
});
Any help will be greatly appreciated.
in your first snippet of the code you defined a click function on .Theme and in the third snippet of the code .theme, is this correct?, i mean both classes seems to be different try to use the same class name return by your php function.
You're calling $(document).ready() twice, as $() is an alias, and the second definition is overwriting the first. First you are setting the document ready callback to
function() {
$('.themes li a img').click(function() {//code
}
and then overwriting it with
function() {
$('.Themes').click(function(){
$('#dcontent').load('printThumbs.php');
});
}
you have to add your second code in a callback function. you can't bind something if it is not already in the dom. if you want to make changes to the printThumbs output you need to add a callback...
<script>
$(document).ready(function() {//this is also a callback function when document is ready
$('.Themes').click(function(){//this can be understand as a call back too... code is fired after a click
$('#dcontent').load('printThumbs.php',function(){/*your callback code here...this code will be fired after you've loaded printThumbs*/}
});
});
</script>
if you want to do some jquery or other client side stuff on the respons of an ajax call (html,xml, json or whatever) you have to specify a callback function. to make things less complicated you have to look at the callback function just as the on document ready function with the difference that the callback is applied to the respons of your ajax call. if the code is not in a callback function you can't manipulate the respons because it is not injected in the dom/it simply does not exists in your browser when the document is ready.
I have the following code defined in order to hide certain elements of a list:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".done").toggle();
});
});
</script>
Basically, any < button > element being clicked will execute the toggle() function on any element with the "done" class. I know this works, because it works on some of my buttons. I have a page made up of several included files (using PHP include()). Usually, the javascript works in and out of these included files, but for some reason if I put a button inside one of them, it doesn't work - the function only works for buttons placed on the document where the script is defined. Is this always the case, or am I doing something wrong?
try using jQuery live function:
$("button").live('click', function(){
$(".done").toggle();
});
Try changing:
$("button").click(function(){
to:
$("button").live('click', function(){
This will make the event bind to any button, no matter when they are added. If you are using .live, then you don't need it inside a $(document).ready( block, as .live will add the event when the element is added.
For the purpose of testing (and making this question simpler) I have been using xajax to output a random number into a DIV on the page.
$output=rand(20,40);
$ajax_resp->assign('container','innerHTML', $output);
After the DIV container is loaded, I also load 1 line of Javascript to call the xajax function.
<div id="container"></div>
<script type="text/javascript">
xajax_refresh().periodical(2000);
</script>
As you can see, I'm using the MooTools function called periodical() to call the function again after x milleseconds. It calls the function fine at first, but not again.
It doesn't automatically refresh. Why?
You are not assigning a periodical to xajax_refresh function, you are calling that function (with xajax_refresh()). For instance, you're assigning its returned value to periodical (It can be everything, but nothing happens because that returned value is not a function :) ).
Therefore, the solution is this:
<script type="text/javascript">
xajax_refresh.periodical(2000);
</script>