my problem is quite annoying and weird. I have created a custom Wordpress theme and in the header.php I was loading jquery like this (can't remember why right now):
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1"); </script>
Last night I replaced the code above with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and then my site collapsed. I changed it immediately back again, but the problem persisted. I placed some Jquery in the HTML and it works just fine. Then I disabled my plugins by commenting out code in my functions.php file as below:
<?php
if (!is_admin()) {
wp_register_script('custom', get_stylesheet_directory_uri().'/js/custom.js');
wp_enqueue_script('custom');
wp_register_script('blockui',get_stylesheet_directory_uri().'/js/jquery.blockUI.js');
wp_enqueue_script('blockui');
wp_register_script('fancy',get_stylesheet_directory_uri().'/js/jquery.fancybox.js');
wp_enqueue_script('fancy');
wp_register_script('jeasing',get_stylesheet_directory_uri().'/js/jquery.easing.js');
wp_enqueue_script('jeasing');
wp_register_script('friendchooser',get_stylesheet_directory_uri().'/js/jquery.friendChooser.js');
wp_enqueue_script('friendchooser');
wp_register_script('zclip', get_stylesheet_directory_uri().'/js/jquery.zclip.min.js');
wp_enqueue_script('zclip');
}
?>
Still the problem occurs. Any ideas?
There is syntax error in custom.js file in line 30. Just remove } from there.
And learn some about firebug, it's very helpful :)
Related
i am calling a Header.php in main.php using
<head> </head>
<body>
<?php
include 'common/header.php';
?>
</body>
In the Head i am calling all the CSS and JS.
The CSS are being called in header.php properly.
In Header.php i have 2 tags. I would like to implement tooltip on one of them.
<li><a class="english" data-toggle="tooltip" title="Hooray!" href="">English</a></li>
also i added the JS for tooltip
<script type="text/javascript">
$(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
I tried to add this above code in header.php , bottom of index.php and also in head of index.php.
If i try to create a tooltip in the main.php file , it works absolutely fine.
there are no errors in console. I dont know what is the error.
Help ! TIA.
Try adding the code (script tag) at the bottom of header.php file, after all the html elements.
I would like to reference JavaScript files from my root folder in a WordPress PHP file, however when I load the page, the JavaScript is being ignored. Is there a WordPress restriction on referencing .js files? Am I not correctly referencing JavaScript for PHP?
This is what I wrote (which does not work):
<?php wp_footer(); ?>
<script src="/files/js/jquery.js" type="text/javascript"></script>
<script src="/files/js/jquery.cycle.js" type="text/javascript"></script>
</body>
</html>
For jQuery I use this technique Loading The Latest Version of jQuery in WordPress
Basically you use wp_enqueue_script function in functions.php.
For scripts where I want to simply add them in the template files and don't want to bother with wp_enqueue_script, I put them in scripts folder that was created in the theme folder. I add All custom added .js scripts there.
Then in the template file I use the code like this:
<script type="text/javascript" src="<?=get_template_directory_uri();?>/scripts/markers.js"></script>
Wordpress has its own method to add js or css files.
<?php
function my_scripts_loader() {
wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_loader' );
?>
Put your files folder to your wordpress theme which you are curently useing after that just need to
include the path on header.php file like
<script src="<?php bloginfo('template_directory'); ?>/files/js/jquery-min.js" type="text/javascript"></script>
hope this will help you ....
WordPress got a various number of ways to include file, I myself have worked with WordPress in the early days, back then I had to call the path with a WordPress function.
Example: <script src="<?php echo bloginfo('template_directory'); ?>/files/js/jquery.js" type="text/javascript"></script> //add echo
You might want to var_dump the bloginfo('template_directory') and work your way from there.
I want use a jQuery plugin in category.tpl. Put files in javascript/jquery directory. Now, how can use this plugin?
/* one can load JS like that: */
if(file_exists('catalog/view/javascript/'.$this->config->get('config_template').'/script.js')) {
$this->document->addScript('catalog/view/javascript/'.$this->config->get('config_template').'/script.js');
}
It is rather "the proper way" to use existing functions, than to add scripts manually into header.tpl.
As a hint, based upon the answer below - one could loop an array of filenames, in order to keep control over the loading order, which is often relevant while they might depend on each other.
I've never used OpenCart, but a quick google session tells me that you should include the plugin scripts (just like any other js) in a file called header.tpl.
Here is a part of an sample header.tpl-file I found:
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>
Just add a the following line below the jQuery include so it looks like this:
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/[PLUGIN FILE NAME].js"></script>
and you should be good to go.
First paste your jquery files, css files and images in catalog/view/javascript/yourplugin folder.
Then call the jquery plug in files in catalog/view/theme/yourtheme(default)/template/product/category.tpl file.
For ex,
YOur php code;..
...
....
<script src="catalog/view/javascript/jquery/jquery-ui-min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.anythingslider.js"></script>
<link rel="stylesheet" href="catalog/view/theme/default/stylesheet/anythingslider.css">
<script>
// DOM Ready
$(function(){
$('#slider').anythingSlider();
$('#slider1').anythingSlider();
$('#slider2').anythingSlider();
});
</script>
its for slider.. you can do your action in php (above the script).
You'll need to include JS and CSS sources in Header View (/catalog/view/theme/[your theme]/template/common/header.tpl)
in config.php
define('DIR_JAVASCRIPT', 'D:\wamp\www\opencart/view/javascript/your_dir/');
in header.tpl
<?php
if (is_dir(DIR_JAVASCRIPT)):
if ($handle = opendir(DIR_JAVASCRIPT)):
while (false !== ($file = readdir($handle))):
if (preg_match('#\.js$#', $file)):
?>
<script type="text/javascript" src="<?php echo 'view/javascript/your_dir/'.$file; ?>"></script>
<?php
endif;
endwhile;
closedir($handle);
endif;
endif;
?>
i designed a html page with the Accordion and it worked well, but when i changed the extension to PHP, the accordion wasnt working well again, below is my code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#accordion").accordion();
});
</script>
Better create a new file on .php and copy there all the code, then close it. I have similar problems sometimes with images.
I've set document.ready in the middle of a page.
It was working fine on local server, on an online production beta server, but failed on the final server.
Any suggestions?
thx
Code:
$(document).ready(function() {
And yes. JQuery is loading and it's working propely
UPDATE: These days I've found the same issue and for futher reference the script tag that includes the jQuery must be propely closed. If not the $(document).ready() is never called.
Wrong:
<script type='text/javascript' src='js/jquery-1.6.2.min.js'/>
Also wrong:
<script type='text/javascript' src='js/jquery-1.6.2.min.js'>
Right:
<script type='text/javascript' src='js/jquery-1.6.2.min.js'></script>
Nowadays using hmtl5 <!DOCTYPE html>
Get Firebug and check:
is jQuery loading or is it missing. And is it loaded before the document.ready ?
is the script throwing any JavaScript-errors?
The most likely problem is the production server doesn't have a copy of jquery. Switching to having google provide jquery for you is a good practice.