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
Related
I develop a chat widget using php (chat.php) and want to add it into another php page (blank.php). chat.php requires script that I put in Javascript files outside.
So in blank.php, I included js files that chat.php needed.
<!DOCTYPE html>
<html lang="en">
<head>
<!--code-->
</head>
<body>
<div id='includedContent'></div>
<!--dependency for chat.php-->
<link type="text/css" href="http://localhost/chatbox/gplus/chat.css" rel="stylesheet" />
<link type="text/css" href="http://localhost/chatbox/gplus/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://localhost/chatbox/gplus/bootstrap.min.js"></script>
<script type="text/javascript" src="http://localhost/chatbox/gplus/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/chatbox/gplus/chat.js"></script>
<script type="text/javascript" src="http://localhost/chatbox/gplus/moment.min.js"></script>
<!--end-->
<!--include chat.php-->
<script>
$("#includedContent").load("http://localhost/chatbox/gplus/chat.php");
</script>
<!--end-->
</body>
</html>
chat.php is loaded but the Javascript does not load for chat.php.
I also tried to use this and it works
<!--include chat.php-->
<?php
$chat = file_get_contents('http://localhost/chatbox/gplus/chat.php');
echo $chat;
//or by using - include './chat.php';
?>
<!--end-->
But I wonder if there is a solution using javascript so I can include chat.php into blank.php, and chat.php can execute the js script included in blank.php. I put the script in blank.php to avoid script conflict between widget and hosting page.
Thank you.
I think what you need to use is include statement in PHP. See this LINK.
Basic example on how to use:
For vars.php:
<?php
$color = 'green';
$fruit = 'apple';
?>
Included in test.php:
<?php
echo "A $color $fruit"; // A
include 'vars.php';
echo "A $color $fruit"; // A green apple
?>
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.
i have created a simple jQuery program.i am new to jQuery technology..please provide me where am i wrong?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<script type="text/javascript" src="jquery-1.4.2.min.js">
$(document).ready(function() {
alert("jQuery tutorial for beginners Example");
});
</script>
</head>
<body>
<p> i m here hid me</p>
<!-- Insert your content here -->
</body>
</html>
The script you've written isn't supposed to go inside the jquery script tag. It needs to go in its own one.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("jQuery tutorial for beginners Example");
});
</script>
The first one is to load jquery itself - it's like saying "instead of me writing some javascript here, load it from this file instead", the second one is for your own code since you've put code between the script tags.
A script element can have one script. That script can go between the start tag and the end tag or it can go in another file and be referenced with a src attribute.
If there is a src attribute, then the content of the element will be ignored.
If you want two scripts, then you need two script elements.
<script src="jquery.js"></script>
<script>
// Your code
</script>
Example: Jsdiffle
This is a example with last library of Jquery.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("jQuery tutorial for beginners Example");
});
</script>
</head>
<body>
<p> i m here hid me</p>
<!-- Insert your content here -->
</body>
</html>
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.
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.