To give you more context, my file structure look like: includes/overall/footer.php and in this file I am referencing js/nav-header.js note that both includes and js folders are in the base folder. Am I doing this correctly?
includes/overall/footer.php:
<?php include 'includes/footer.php'; ?>
<script type="text/javascript" src="libs/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="libs/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" scr="js/nav-header.js"></script>
</body>
</html>
This file itself is included in another file, does it have something to do with the order in which things are being loaded perhaps? Reason being is that I cannot seem to get anything in the javascript file to fire. Any help would be appreciated.
What dose you nav-header.js contain?
Assets are requested from the server in the order they appear in the html. So nav-header.js will be called after jquery however that doesn't mean it will finish loading before it.
Also to load files use absolute paths:
/js/nav-header.js instead of js/nav-header.js
that way you know the js/nav-header.js will be loaded from the root folder.
if u have code in js/nav-header.js that fires on load(not on document ready) i would sugest moving it to document ready.
I recommend against using hardcoded absolute paths, as that will make the application less portable.
Instead, set a $base_url variable that you can echo in your html
<?php $base_url = "/"; ?>
In your html
<script type="text/javascript" scr="<?php echo $base_url; ?>js/nav-header.js"></script>
You can use this throughout your site for js, css, anchors, etc.
Use the BASE tag in HTML with all relative paths :D
Phil Sturgeon wrote a blog post about its use in CodeIgniter, but essentially you don't need to use a framework to make use of the same principle.
You should store the document root in a variable somewhere in your application and have a function that references it, then echo that out into the base tag. This way when you move your application to a different environment you only have to change the root in one place and you are good to go.
Also, read this before using the base tag.
Related
I'm recently doing a website for a school project. In order to organize my work, I create a tree folder that keeps all the work organized. It is similar like this:
Back-Office
Pages
Home
home_test1.php
home_test2.php
home_test3.php
Login
Folder_Login
login.php
logout.php
Resources
CSS
style_home.css
style_navbar.css
style_footer.css
JS
script_home.css
script_navbar.css
Sections
navbar.php
footer.php
After all, with the require() method available in PHP, I want to call the "navbar.php" file to the "home_test1.php", "home_test2.php" and "home_test3.php", but the CSS style that is connected with the file "navbar.php" ("style_navbar.php"), doesn't display.
I've tried to change the path of the CSS style in the file "navbar.php" when I require() to the other file ("home_test1.php") and the CSS style shows up, but wont display in other file with a different path. How can I make this work dynamically? Sorry for long post and bad English grammar.
Thank you in advance.
You need to set your css and js files with absolute path instead of relative path
$dir = realpath($_SERVER["DOCUMENT_ROOT"]);
<link rel="stylesheet" href="<?php echo $dir.'/resources/css/style_home.css'; ?>" >
Without physically seeing you code it is quite hard to debug however there is an "obvious" answer that I'll suggest as a starting point.
The important thing to remember is that PHP and HTML are processed in completely different places. PHP executes on the server and should be used to build a full HTML "document" which it gives to the client/browser. The client/browser then reads the document provided and renders it according to HTML standards.
Calling require() will tell PHP to get the file and slot its contents directly where it was called and as it is a CSS file it will need to sit within the style tags. With a lot of modern browsers, if you use require on a file outside of the html tags, the content will be dumped at the top of the screen or simply ignored due to invalid syntax.
Alternatively if you would like to simply use tell the browser to include the CSS file, you could use the good old method of using <link rel="stylesheet" href="/path/to/file">. It's good to know when and when not to use PHP.
PS: You have .css files in your JS directory.
In PHP, there is a global variable containing various details related to the server. It's called $_SERVER. It contains also the root:-
$_SERVER['DOCUMENT_ROOT']
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
<link rel="stylesheet" href="<?php echo $path.= '/Resources/CSS/style_navbar.css';?>" />
?>
I will have multiple folders/modules to access common files. But accessing them seems to be big deal for me!
I did gone through this link to understand the relative positioning and managed to solve some . But not all. Reference: Relative URL's/paths in php
My folder structure is as below:
Website runs on root folder:
/(index|ajax).php
and then the subfolders:
/css/style.css
/img/*.(jpg|png|gif)
/inc/(header|footer).php
/js/*.js
/registration/(ajax|getsubjects|response|success).php
Now, this is how I included files in the index.php page(this displays correctly, meaning, style,css,js,config all accessible)
<?php
include('inc/header.php');
?>
content here
<?php
include('inc/footer.php');
?>
This index page will have to fetch getsubjects.php, response.php and then finally land in success.php.
The success.php need some styling whereas the previous two were only for processing.
So now in the success.php I access header and footer as below:
include('../inc/header.php');
include('../inc/footer.php');
But this doesn't apply any styling!
inside header.php and footer I include files like this:
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js"></script>
How should I include the files here please?
./css/style.css means from current directory and would achieve the same result as css/style.css. The easiest answer is to determine what the base path of your application is and use that. For instance, if your application is running as http://myapp.com, then you could set all your front-end paths to /css/style.css. If your app runs in a subdirectory, such as http://example.com/myapp, then your paths would be /myapp/css/style.css.
This does not apply the same on the PHP side. For them, you should really use document-relative paths. Having a PHP file that you include in multiple places in your app, the contents of which having something like include('../myDoc.php');, can lead to complications as the path isn't based on the included document's path, but rather the including. So using document-relative paths, you get around this include(__DIR__ . '/../myDoc.php');. Just something to consider if your app grows.
Your PHP-includes seem to be correct. But in your HTML you need to change the linking to the CSS and JS Files (maybe even to your images).
You could use absolute paths:
<link rel="stylesheet" href="/css/style.css">
<script src="/js/script.js"></script>
the leading dot makes your paths relative to the HTML-Document, so if they are linked from a document in a subfolder, they point to a wrong location.
Including files with
<?php
include("page1.php")
?>
put the code (or content) from page1 into the caller page.
So you may have to detect from where your pages are called, or try absolute links (beginning by /)
I hope I answer you question correctly.
Actually i am writting a php script to link some javascript files in my multiple sites.
Example : site_dir1/js/jquery.1.4.2.js and
site_dir2/js/jquery.1.4.2.js
In this case, in the document_root location i have a file called "jquery/jquery.inc.php which has the follwing code
$jq_142 = "<script type='text/javascript' language='JavaScript' src='jquery-1.4.2.min.js'></script>";
I will use this code to make require my php file anywhere i want
<?php require $_SERVER['DOCUMENT_ROOT'].'/jquery/jquery.inc.php' ?>
And the reputation of jquery file keeps only one copy in my following location.
$_SERVER['DOCUMENT_ROOT'].'/jquery'
My doubt is still my javascript files are not loaded where ever i call the files.
I am little messed. how to fix it? any better solution?
If you're going to do this you need to give the script an absolute path rather than a relative one.
When you include it in index.php, the browser will look at /jquery.js for the file. When you include it in /folder/page.php, the browser will look check /folder/jquery.js.
See how it changes depending on where you are in the website? You need to tell it to look at a specific place, like:
$jq_142 = "<script type='text/javascript' language='JavaScript' src='http://example.com/scripts/jquery-1.4.2.min.js'></script>";
This means that no matter where you are in your site, the browser will check http://example.com/scripts/jquery-1.4.2.min.js for jQuery.
Finally, I found my page.php script have loaded my jquery.inc.php file. But the jquery file linking script has been coded inside quotes as follow :
$jq_142 = "<script type='text/javascript' language='JavaScript' src='jquery-1.4.2.min.js'></script>";
So it's couldn't be displayed. And i found this jquery.inc.php is not called by .html files. Only for .php files. I couldn't find any alternative solution for this problem.
I have linked by using the absolute path of my unreplicated jquery library files from jquery/jquery-xxx.js directly.
I've been developing my site with the site directory structure as
www
img
javascript
include
index.php
Now I want to change it to
www
index.php
dir1
dir2
...
themes
theme1
img
javascript
include
index.php
At the theme level index.php, earlier I've my paths to javscript files as javascript/file1.js or so.
Now I've changed the paths to <?php echo THEME_PATH . "javascript/file1.js"?>
This includes the js files, however my problem is when I reached inside the js file.
For example, in one script.js file, I've a jquery method called as
$('#pop-con').html('<p><img src="img/ajax-loader.gif" width="220" height="19" /></p>');
I can't use php inside the js file. So how do I change the paths similar to the php implementation above??
Relative paths
Probably one of the easiest ways to solve it is using relative paths.
In your case you will need to be one directory up (../), so it would be:
$('#pop-con').html('<p><img src="../img/ajax-loader.gif" width="220" height="19" /></p>');
You can have a small <script> on your pages that creates a global variable to store the "THEME_PATH" value:
<script>
window['THEME_PATH'] = '<?php echo THEME_PATH?>';
</script>
Then your JavaScript files can just look for the global variable and use it to construct paths. I keep such code in a global template header that's used for all the pages in my application. There really are only a very small number of things like that to worry about; in my application I think there are like 4 or 5 items of information like that to communicate with included .js files.
Solution, in case anyone else need it.
I put the following code in my theme level index.php file
<script>
window.themePath = "<?php echo $site_info[theme_style_path]; ?>";
</script>
And use the javascript global variable to append the path.
The source of the Javascript is irrelevant for the purposes of HTML being embedded within the page. What matters is the location of the page the HTML is embedded within.
For instance, if you load a page from example.com/index.php, and some Javascript loaded from example.com/js/script.js inserts some HTML into the main page, then image path references are going to be relative to /, as that's where the page was loaded from, not from /js.
As for embedding PHP in JS, you're right - but you can have PHP emit a .js file trivially:
<?php
header('Content-type: text/javascript');
?>
var settings = <?php echo json_encode($SETTINGS_ARRAY); ?>;
would generate perfectly valid Javascript, even thought it came from a PHP file.
Where and how do I include .js files in Views in CodeIgniter?
I have tried this:
<script type="text/javascript" src="system/application/libraries/jquery.js"></script>
As I figured that the index.php is the one that is loading the views, so I'm guessing that every time a page is loaded the current dir path is at root because index.php is located at root. Is this true?
The above line doesn't so I am doing something wrong. I have a CodeIgniter project. The path is like this:
localhost/CodeIgniter/system/application
so which path should I use to include my jquery.js file which is located in
localhost/CodeIgniter/system/application/libraries
when I want to load the jquery.js file in a View located here:
localhost/codeIgniter/system/application/views/till_view.php
There is a lesser-known solution that works really well with clean syntax and much more portability than hard-coding URL's or relative files.
<base href="<?=base_url();?>">
<img src="images/logo.gif" alt="Logo" />
Read more about how, what, why on my article "Asset handling in CodeIgniter with the BASE tag".
It's not the "index.php" file that is the view. The view is whatever is loaded in your controller when you do a
$this->load->view("viewname");
The file "viewname.php" can then include the .js files, just as a normal .html (or .php) file would:
<script src="/url/to/javascript.js" />
You may want to create a default view or a "header" view that includes some or all of the (common) .js files for your project.
-CF
First question:
It depends if you use absolute or relative urls.
Absolute urls go from the root of your domain. Relative urls are loaded relative from the current directory (including the url segments).
Second question:
It's best to use an absolute URL. Because of the pretty urls, it's not recommended to use relative urls.
The easiest way is to use the url helper and then use the site url function like this:
$this->load->helper('url');
echo site_url('system/application/libraries/jquery.js');
Ps. I recommend to put things like javascript and images outside of the CodeIgniter directory.
base_url() always works fine for me
Here is a solution specifically relevant to the OP which I didn't think anyone else provided.
<script type="text/javascript" src="<?= base_url() ?>libraries/jquery.js"></script>
So, base_url() will provide a path direct to the root of your site.
<script type="text/javascript" src="<?php base_url() ?>libraries/jquery.js"></script>
base_url() will provide the url of the site
The easiest way you can directly access the file:
<img src="http://localhost/ci/you_dir/your_img/your_image.png" />
where ci is for codeigniter.