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

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

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 not loading after PHP header() redirect

I have a page where a user can sign in by submitting a basic form, the data is sent to a separate PHP script (for validation, etc). The PHP script ends with the header() function to direct the user to a welcome page:
// form validation above
header(Location: ../welcome.php);
exit();
I would like to be able to run some JavaScript on the welcome page, however I am noticing that even this basic code won't fire:
$(document).ready(function() {
console.log("ready!");
});
I have split the welcome page using PHP include to separate the header, body, and footer:
The Header:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<!-- HOSTED ONLINE -->
<!-- Google Fonts: Lato & Pacifio -->
<link href="https://fonts.googleapis.com/css?family=Lato|Pacifico" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/3d58889dd8.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Bootstrap jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- jQuery UI -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- LOCAL -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="resources/style.css">
<!-- JavaScript -->
<script type="text/javascript" src="resources/script.js"></script>
<!-- Animate.css -->
<link rel="stylesheet" href="resources/animate.css">
<title>Website Title</title>
</head>
<body class="userBody">
<!-- title card -->
<div class="container-fluid titleCard">
<h1 class="pacificoFont mainTitle">Website Title</h1>
</div>
The Body:
<?php
include_once "user_header.php";
?>
<div>
<?php
echo "welcome " . $_SESSION["username"] . "!<br>";
echo "Your email is " . $_SESSION["email"];
echo '<form action="includes/logout_inc.php" method="POST">
<button type="submit" name="submit">Logout</button></form>';
?>
</div>
<div class="test" id="test">
Test
</div>
<?php
include_once "user_footer.php";
?>
The Footer:
</body>
</html>
I do believe the local JavaScript is properly linked, where it's in the same directory as the CSS and the styling is linked and working. I am also running this locally using MAMP (if that info helps).
It's probably quite noticeable that I am very new at PHP/JavaScript. Any help would be deeply appreciated! Thank you for taking the time :)
the javascript reference should be at the bottom of the HTML page before the closing body tag. Just cut the reference of the javascript to the the page bottom below:
<script type="text/javascript" src="resources/script.js"></script>
</body>
</html>
The problem is that jquery got rendered before your page load.

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.

Linking multiple pages to single index.php page using PHP 'Include'

Im just practicing some things in PHP and have come across a problem.
I am linking multiple pages to single index.php page using PHP 'Include' function ( as i have read it makes a large site much more manageable and easily up-dateable'.
I have created external CSS files (3 in total, one for the navigation, page styling and wrapper content) and have a few external JS files which have all been linked to a PHP document named head.php. (below is the head.php contents)
The main page which the server will show first will be 'index.php' so for this page i am linking all the other segments which will all fit together to create the single page. (below is the index.php contents)
My problem is that in-between both the head and footer php include lines i have created a div named 'wrapper' (styles are already applied to an external CSS sheet named 'style.css' which is linked in head.php) (please see bottom for style.css contents) I would presume that when i view index.php in my browser (i am using XAMPP) that is should show the wrapper on the page, however i can not see the wrapper and i just continue to see the navigation bar only, i find this strange as i can use <h1> and <p> tags in index.php which are externally styled by the php included head.php page.
Please take a look at my code below for all the pages mentioned, I'm not sure what i am doing wrong here. Thank you
BELOW IS HEAD.PHP:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="css/navigation.css">
<link rel="stylesheet" type="text/css" href="css/sitestyle.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
<script type="text/javascript" src="responsee.js"></script>
<link rel="stylesheet" type="text/css" href="engine1//style.css" media="screen" />
<script type="text/javascript" src="engine1//jquery.js"></script>
<script type="text/javascript" src="drop.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<title>MC SMM | Home</title>
</HEAD>
BELOW IS STYLE.CSS:
#wrapepr {
background-color:black;
width:1000px;
height:1000px;
margin:0 auto;
}
BELOW IS INDEX.PHP:
<?php include('segments/head.php'); ?>
<?php include('segments/facebookjs.php'); ?>
<?php include('segments/homenav.php'); ?>
<div id="wrapper"></div>
<?php include('segments/headbottom.php'); ?>
You have miss spelt your wrapper ID name in your stylesheet:
"#wrapepr"
Should become:
#wrapper

Categories