Add WordPress jQuery to cutom page template - javascript

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.

Related

404 error linking css file in php header

I'm building a Wordpress site and for some reason I'm getting a 404 error for the style.css, although I've referenced the file in the header.php.
I'm not sure what I've done wrong and I'm struggling to figure it out. Any explanation or suggestions would be appreciated.
Below is the console error
EDIT - This is a picture my style.css which is in the directory of the theme
And here is how I've referenced the css file in the header.php -
<?php
/**
* The template for displaying the header
*
* #subpackage the-bespoke-harvest
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<link rel="stylesheet" href="bespokeharvest/website/wp-content/themes/the-bespoke-harvest/patterns/public/css/style.css?ver=4.8.2" type="text/css">
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
<![endif]-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCo3e_2xea4jd7wMQ2c0IkQKRQ3NH3aZmY&libraries=geometry"></script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<section class="section-scroller">
<?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>
</section>
Note - The other linked files in the head such as the google maps script & pingback are working fine.
You have not specify a valid path for css.
Replace this line with this wp code structure.
<link rel="stylesheet" href="bespokeharvest/website/wp-content/themes/the-bespoke-harvest/patterns/public/css/style.css?ver=4.8.2" type="text/css">
to
<link href="<?php echo get_template_directory_uri();?>/patterns/public/css/style.css" rel="stylesheet" type="text/css" />
I would recommend enqueueing your scrips and styles. https://developer.wordpress.org/reference/functions/wp_enqueue_style/
This best illustrates how you would do it:
https://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way--cms-20402
You can still prioritise styles/scripts as well as version them.
(I’ll write the code once I get to a computer)
I've seen your problem and I suggest you go with this.
First, open that file in your browser.
Then check what path does this code return.
<?php
echo get_template_directory_uri();
?>
Then merge that together.
Suppose this code return.
localhost/wordpress
And your path style path is
C:/xampp/htdocs/wordpress/wp-content/theme/mytheme/something/style.css
Then remove c:/xampp/htdocs/wordpress
And create something like this
<?php
echo get_template_directory_uri();?>/wp-content/theme/mytheme/something/style.css
?>
This is the solution whenever you got some errors like this.
Thanks.

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

Javascript not loaded when loading php file which need other javascript file

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
?>

Multiple jQuery plugins on multiple pages

My question may be very simple to most people on here. But i am very new to jQuery, and i am having a sort of difficulty with repetitiveness.
I have a custom script on a page which has a lot of text, that allows that text to be collapsed. This script is in jQuery. The page is in php.
I have multiple pages like this. I find myself having to place the code for the script documents on every page like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/readmore.min.js"></script>
<script src="javascripts/main_func.js"></script>
Is there a way that i can place it only on the index.php file and call the script function which is:
<script type="text/javascript">
$(document).ready(function(){
$('.article').readmore({maxHeight: 640});
});
</script>
I am not sure how your page loads but this is what you would have to do essentially:
index.php
<?php
require('header.php');
require('content.php');
require('footer.php');
?>
header.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US" >
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="viewport" content="width=device-width">
<title>Page Title</title>
<link rel="stylesheet" href="/css/default.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/readmore.min.js"></script>
<script src="javascripts/main_func.js"></script>
</head>
<body>
content.php
<div id="content">
<!-- Do display code here -->
</div>
footer.php
<div id="footer">Footer Content</div>
</body>
</html>
If you have a new page, it would look something like this:
newpage.php
<?php
// Keep same header
require('header.php');
// New content page
require('newcontent.php');
// Same footer
require('footer.php');
?>

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.

Categories