jQuery document.ready not firing (have included jq) - javascript

So, after traversing google and stackoverflow for a short while, most resources I found were people incorrectly including jQuery, which I included it correct.
I have this in my header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php wp_head(); ?>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title>
<?php bloginfo('name'); ?>
</title>
<link href="<?php echo home_url(); ?>/css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Hey");
});
}
alert("hello");
And everything else I need in there. When I take out the document ready, it alerts hello, however with the doc ready it doesnt alert either. I have never had this problem before with jQuery.
Any help would be appreciated.

You have a syntax error :) Try this!
$(document).ready(function() {
alert("Hey");
});

I see an extra curly brace in your code. Try:
$(document).ready(function() {
alert("Hey");
});
//} Remove this brace

You have an extra bracket right below your alert("Hey") that is causing an error. Remove that bracket and you should be good to go.

Change the second <script type="text/javascript"> to <script>
Replace $(document).ready(function() with $(function ()
Take out the extra }

$(document).ready(function() {
//code goes here
alert("Hey");
});
It will work so you should place your code inside ready function.

Related

javascript append in Php echo?

I try to append something to a div over a Php echo
Includes
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Php Code
<?php echo "<script type='text/javascript' >$('.notificationsBody').prepend('Hello World');</script>"; ?>
My Div Code
<div class="notificationsBody">TESTING DIV<br></div>
Is this possible and if yes why isnt this working ? My Console is empty too.
If not is there a other way to realize a Div appending over a Php Echo ?
Hint: I need a Php echo if its possible.
This is my complete index.php Page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<?php echo "<script type='text/javascript' >$('.notificationsBody').prepend('Hello World');</script>"; ?>
<div class="notificationsBody">TESTING DIV<br></div>
</body>
</html>
What i want at the end is like you have a Class and call the Function
<?php echo $myclass->theechofunction(); ?>
Then this will echo the Javascript which appending a Div to my Wrapper.
Yes its a bit crazy / difficult but thats what i need.
Thanks for every Answer.
EDIT
The Site Quellcode after calling the site
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type='text/javascript' >$('.notificationsBody').prepend('Hello World');</script>
<div class="notificationsBody">TESTING DIV<br></div>
You have two problems. First, you're loading two versions of jQuery, that will probably cause conflicts. Either load jQuery from ajax.googleapis.com or code.jquery.com, but not both.
Second, the Javascript that tries to append to .notificationBody is running before you add that element to the DOM. There are two ways to solve this: either move the code that echoes the <script> tag to after you echo the .notificationBody DIV, or run your code in the $(document).ready() handler, which runs after the DOM is completely loaded:
<?php echo "<script type='text/javascript' >
$(document).ready(function() {
$('.notificationsBody').prepend('Hello World');
});
</script>";
?>
See JS & jQuery can't detect html elements, and say's they are undefined

Add WordPress jQuery to cutom page template

I have a plugin and it has a below custom page template. This template requires jQuery. I've a variable $link_to_js liked to google library but I want it to link it to the WordPress internal jQuery library?
<?php
/*
Template Name: Checkout Template
*/
// Need to replace below with WordPress library???
//$link_to_js = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="<?php echo $link_to_css; ?>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo $link_to_js; ?>"></script>
</head>
<body>
<div id="authnet_container"><!--CONTAINER START-->
</div><!--FOOTER END-->
</body>
</html>
I've added below code in main plugin file but it does not add?
function my_init() {
if (!is_admin()) {
wp_enqueue_script('jquery');
}
}
add_action('init', 'my_init');
Please advice the best way to add jQuery library to the custom plugin page template? Thanks
You should include <?php wp_head(); ?> and <?php wp_footer(); ?> immediately before </head> and </body> respectively.
These functions are what, among other things, include scripts and styles that have been queued.
References:
http://codex.wordpress.org/Function_Reference/wp_head
http://codex.wordpress.org/Function_Reference/wp_footer
At the very least add <?php do_action("wp_enqueue_scripts"); ?> as that will output all the queued scripts.

How to read local textfile using html/javascript?

I am trying the following to write the contents of a local text file (version.txt) to the screen, but it isn't working.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script charset="utf-8" src = "jquery-1.10.1.min.js"></script>
<script charset="utf-8" src = "cordova-2.7.0.js"></script>
<script>
function test()
{
$.get("version.txt", function(data) {
document.write(data);
});
}
</script>
<body>
<button type="button" onclick="test()">Print version.txt</button>
</body>
</html>
Any idea what I'm doing wrong?
update: this works, I was just mistyping the name of the jquery file I was including.
You're missing a closing brace. The console will clearly tell you about invalid Javascript if you look.
You can't use document.write after the page has loaded. (Well you can, but you won't get the result you want.) Use jQuery append() instead.
I don't know wheater it is typo or not you are missing closing brace for function test
<script>
function test()
{
$.get("version.txt", function(data) {
document.write(data);
});
}
</script>

JQuery .blur not triggered

I am trying to (server-)validate an input field when it loses its focus. But nothing happens when the input field loses its focus, alert is not triggered.
My code, php-file:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php header('Content-Type: text/html; charset=ISO-8859-1');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Origin: *');?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script language='javascript' type='text/javascript' src="jquery-1.6.2.min.js"></script>
<script language='javascript' type='text/javascript' src="smicadminjavascripts.js"></script>
<title>Service Management In the Cloud - Administration</title>
</head>
<body>
<div id="adminmenu">
<a id="agents" class="adminmenu_items">Agenter</a></br>
<a id="customer" class="adminmenu_items">Kunder</a></br>
<a id="misc" class="adminmenu_items">Övrigt</a></br>
</div>
<div id="adminarea">
</div>
</body>
</html>
Upon loading the side, I will add the form to the div id="adminarea"
Javascript file:
$(document).ready(function() {
$("#username_ID").blur(function(data){
alert("BLUR");
});
$.get("registeraccount.php", function(data){
$("#adminarea").html(data);
});
$("#registerform").live("submit", function(e){
e.preventDefault();
$.post("registeraccount.php",$(this).serialize(),function(msg){
alert(msg);
});
});
});
Other scripts in the .ready function works properly.
What is the problem and how can I fix it?
It works for me
http://sandbox.phpcode.eu/g/ca2bb.php
Click on username
Get back to my post
Alert fired!
For your problem:
Include jquery :)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
You can use .focusout() and don't forget to include jquery library.

Fancybox troubles

I am trying to implement a fancybox. http://fancybox.net/howto
I want to call this function on an an element. Full JS file. http://fancybox.net/js/fancybox/jquery.fancybox-1.2.1.js
$.fn.fancybox = function(settings) {
I have done this:
$(document).ready(function() {
$("a#inline").fn.fancybox();
});
However, I keep getting this error (through firebug):
$("a#inline").fn is undefined
[Break on this error] $("a#inline").fn.fancybox();
What does this mean? I am basically having instantiating problems.
Please help.
EDIT
The HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Technologies</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="fancy/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancy/jquery.fancybox-1.2.1.js"></script>
<link rel="stylesheet" href="fancy/fancybox.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#inline").fancybox();
});
</script>
</head>
<body>
<?php
include_once ("header.php");
?>
<div id="channel_calc">
How many Channels do I need?
<span id="yellow"><a id="inline" href="#ddm">Channel Calculator</a></span>
</div>
$('#inline').fancybox();
.fn refers to the prototype.
Di you find the error? Had the same problem. Solution was that i had included twice a javascript file, rather i included the jquery.js file twice.
I was also having this problem and found that I had included jquery.js twice. Removing the second reference fixed the error I was getting from the fancybox call
$("a#inline").fn.fancybox(); should be $("a#inline").fancybox();
You have to make sure to load fancybox AFTER jquery, otherwise you will get a "fancybox is not a function" error and your other javascript will break as well:
BROKEN:
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="/js/jquery-1.6.1.js"></script>
GOOD:
<script type="text/javascript" src="/js/jquery-1.6.1.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.js"></script>
I have copied a fragment of your HTML and JS inside jsfiddle.
When I downgraded to jquery 1.3.2, [see left sidebar under framework in JSFiddle example] your code won't work.
When I upgrade to 1.4.4 or later versions, it worked.
Solution
Try upgrading your jquery to 1.4.4 or later versions and test again.
Also I noticed you are including an external header.php, so make sure there are no other jquery scripts being included in this file or your js codes will break.
See this link for the working example of your own code using jquery version 1.4.4: http://jsfiddle.net/Ca6N5/
I think you forgot to also include jquery itself. Fancybox depends on jquery.
<script type="text/javascript" src="path-to-file/jquery.js"></script>
As Ben said, make sure jQuery is not being included twice by accident.
$("a#inline").fn.fancybox();
use newest jquery & fancybox
$("a#inline").fancybox(); -> this is correct
Here is examples: http://softm.org.ua/google-map-jquery-plugins/

Categories