how to include/insert HTML file using Javascript - javascript

Using Wordpress, I have the file search-form.php in my child theme's folder.
How do I insert this during a JavaScript routine from a file 404.php in the same folder?
I've tried using: <script type="text/javascript" src="search-form.php"></script> but this does not output the contents of search-form.php at the place I am calling it from.
Help appreciated.

You could use php includes:
<?php include "searchform.php";?>
This runs on server side, wich is good for loading speed.
Or you could use iframes:
<iframe src="searchform.php">Old browser!!</iframe>
Or you could dynamically load it with js/ajax:
<div id="show">loading...</div>
<script>
body.onload=function(){
//see ajax tutorials
document.getElementById("show").innerHTML=ajaxdata;
}
</script>

Related

How to run php interpreter remotely?

I'm trying to run php interpreter remotely in a html file. Basically the html file contains the php code which I want to execute it by using remote php interpreter via reference or something. I did it with other languages and it is working.
Like:
For JAVASCRIPT: (we directly write "javascript")
<script type="text/javascript">
document.write("This is Javascript!")
</script>
For JQuery:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
For ANGULARjs:
(I'm not sure it might be...)
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js">
</script>
Is there way to include the link for php too,
like something:
<script src="php.ini">
or
<script src="<path to php webserver of remote>">
</script>
Can anyone please tell me how it is possible or the way it can be get it done.
If you are using a server and you wish to execute php in an html file, you will need to tell your server to execute .html files as .php with apache2 you need to add the below code snippet to .htaccess in the current working directory or a parent one, this will make all .html files get handeled as if they where a php script
AddType application/x-httpd-php .html
I'm not entirely sure why you don't just use .php file extenstion, but hey there are many valid reasons...
One thing to note, all of the languages you posted are javascript based, javascript is a client side language, whereas php runs on the server. There is a HUGE difference between how they work.

How to import codes in .html file which are placed in a txt file ?

So, what i want is this. I have an HTML File and i want the code to load from a text file. So, the browser should get the code from that text file and read it as a part of the HTML code. Here is an example:
Suppose I have an HTML File whose code is :-
<html>
<head></head>
<body>
<div src="code.txt"></div> [ I made this code. I know this code does not exist.]
</body>
</html>
And i have text file named 'code.text' :
<h2>Welcome</h2>
<img src="sample.jpg">
<p>This is the paragraph.</p>
So, instead of writing code in the actual HTML File, i saved the codes in a text file and want to use them whenever i want. I know the following code does not exist.
<div src="code.text"></div>
I made up this code just to show what i want.
**
Just tell me the way i can achieve this purpose.
**
Thanks,
Waiting for your answer !
You can load the content of this with jQuery ajax. Your div will look like this: <div id="content"></div>
And you call the document using ajax:
$.ajax("code.text").done( html =>{ $('#content').html(html) });
You can view more on http://api.jquery.com/jquery.ajax/
Why not use SHTML?
SHTML is an HTML file that includes server instructions or server side includes and is similar to an ASP file.
It's embedded in a standard XML comment, and looks like this:
<!--#include virtual="../top.shtml" -->
<!--#include virtual="../quote.txt" -->
For example, a .shtml page that includes a resource can be as follows:
<!doctype html>
<html lang="en">
<head>
<title>My SHTML Page</title>
</head>
<body>
<!--#include virtual="content.html" -->
</body>
</html>
You can use to include a common header and footer in your pages, so you don't have to repeat code as much, and changing one included file updates all of your pages at once.
Apache can be configured to parse any file with a particular file extension, such as .shtml, with the following directives in the http.conf file:
AddType text/html .shtml
AddHandler server-parsed .shtml
I got the SOLUTION.
And the solution is to use "php include".
<?php include("code.text"); ?>
OR similarly you can use it for other files.
<?php include("your_html_code.html"); ?>
<?php include("your_html_css.css"); ?>
You can import any code files like this (text,html,css etc.) and the browser will read the codes as a part of the main code.
This way you can use it to create templates so that you don't have to type the same code again and again.
Also, if you intend to make some changes, then the changes will be applied everywhere. This will save you a lot of time if you are creating a blog or if your website has many pages with some same sections.
Get the full guide for using this technique of php 'include' here:
http://www.apaddedcell.com/how-automatically-include-your-header-navigation-and-footer-every-page

How to load a JS file in my HTML doc?

I'm using codecademy to teach myself to code and am trying to load a JS file in an HTML doc. Obviously I cannot find info in google searches to help me understand what I'm doing wrong. This is my current HTML to have the JS file load. Can anyone help me understand what I'm doing wrong so I can have the .js file run when this the HTML file loads? According to the standards at codecademy, the JS file itself is written properly.
<body>
<h4 id="header">...Games...</h4>
<h2 id="list">pick from our unique selection of brand new games...</h2>
<script src="Cards.js"></script>
</body>
That should load fine, as along as your index.html and Cards.js files are in the same folder. If you put your Cards.js file in a /js/ folder, you will need to add /js/Cards.js to your path.
As a side note, I recommend downloading Firefox and the Web Developer and Firebug addons. It will show you if your files are loading and if they're generating any errors, and where the errors are located in the file.
Your script tag is supposed to be in the part of your html document. Make shure the file.js is in the same folder as your file.html or include the folder in the src-attribute as mentioned above.
Your code should loke like this, if you want your script to affect the whole page:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="file.js"></script>
</head>
<body>
#Your page tags
</body>
</html>
Hope this solved your problem! :-)
The html text you posted above should have a name (index.html or games.html) make sure the file type is .html
Make a folder on your computer, give it a name and put your saved html file in that folder. That folder is now your root or directory folder.
Add the javascript file "Cards.js" to the folder next to your html file.
In your text editor open those two files (index.html, Cards.js).
Run the html file in a browser, the "Cards.js" should load. Good luck, hope this helps.

Ajax and external JS scripts

Have the issue here when I dynamically load a php page the external JS file linked into that PHP pages doesn't seem to take effect. There is know JS code in the HTML file to call functions, the JS files does all the work by modifying certain tags.
HTML page will load the PHP file which is linked to the JS script. Relevant code below.
This does work if loaded directly, just not when loaded dynamically I've similar issues like this in the past where the solution was to use the call back feature when loading the content however since all the JS is in a external file not sure of the best method.
HTML code to load PHP file
<script>
$(document).ready (function() {
$('#test').click(function(event) {
$('#content').empty();
$('#content').load('view/search.php');
})
})
</script>
How the JS is linked into the PHP file
<script type="text/javascript" src="edit.js"></script>
Again all the code works when loading the PHP page directly.
Many Thanks
Loading HTML containing script tags is supported. However, keep in mind that load will just insert your content into the DOM. Therefore, if you have a <script src="edit.js"></script> being inserted, the DOM will try to load edit.js from the current directory, not from the directory of the php file you're loading.
make the php file output the content of edit.js in a script tag
e.g.
<script>
<?php
echo file_get_contents('edit.js');
?>
</script>
If i understand your question correctly this has worked for me. Then the js file is loaded when the click is made. The cons of this method is that if it is clicked multiple times, the file will load each time, cluttering your DOM which can result in a slow site.
<script>
$(document).ready (function() {
$('#test').click(function(event) {
$('#content').empty();
$('#content').load('view/search.php', function() {
$.getScript(path+to+script);
});
})
})
</script>

PHP code-igniter

I'm having troubles calling my external js files from my views php pages. The js files are saved in the "resources" folder in the root folder i.e "root/resources/scripts/myfile.js" just like the "root/application" and the "root/system" folder.
so in one of my php files in the views folder i am using this code:
<script type="text/javascript"
src="<?php echo base_url();?>resources/scripts/welcome.js">
and this php file is located in "root/application/views/welcome.php"
and still my page cannot link with the java script so i am stuck big time.
regards
k..
Try this:
<script src="<?= base_url('resources/scripts/myfile.js')?>"></script>
Looking at your question and the comments below your question, it seems you are using "resource" in one example and "resources" in another example.
Once fixed, view the source of the page (I use FireFox, as it makes the links clickable), search for "welcome.js". Once found, click on the link for that file. If you see javascript, it means the file is found, alternatively you will see a 404 error.
First of all check if the resource folder is available,
The java script file is available and the file naming is in the same small or capital case, and server has public permission of the file and folder.
by the way your code has missing end tag
</script>

Categories