Using PHP file via JavaScript/Jquery using an HTML file only - javascript

I'm exploring several types of programming style in web designing. But it suddenly came to my mind. Can a PHP file be read using JQuery/JavaScript on a HTML file. An example. I would open login.php using $.ajax inside the index.html page. Take note about the extensions in the example

Calvin!, your question really is unclear!
And is denoting very few efforts...
Based on the reading of all comments, I can answer this with examples:
In a test.html file:
<span>TEST</span><br>
<?php
echo "PHP works.";
?>
outputs:
TEST
But the exact same code in a test.php file outputs:
TEST
PHP works.
NOW using jQuery in an test2.html file to access a separate PHP file asynchronously.
Assuming this basic ajax-requested-file.php which content is:
<span>Ajax content!</span>
If you call it from a test2.html file like this:
<span>TEST#2 using Ajax</span><br>
<div id="ajaxResult"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script>
$.ajax({
url:"ajax-requested-file.php",
data:"",
method:"post",
success:function(html){
$("#ajaxResult").html(html);
}
});
</script>
It outputs:
TEST#2 using Ajax
Ajax content!
Note that, if you are really attentive...
You will notice a milliseconds delay between the appearance of the first line and the second one.
Like here : https://www.bessetteweb.com/SO/43795339/test2.html

Technically you can send a PHP file to a client, but a browser cannot execute PHP code, so there is no point in serving a php script to the client side.
If you are looking for the right web site architecture you should look into the single page architectural style. With it you just create a single HTML page for your site and load any additional content via ajax requests. For changing the page content you rely on js frameworks that manipulate the html DOM tree dynamically in place.
Note that you don't have to be strict on the single page. You can apply the same style for say a handful of logically different pages in your application as well.
To read more see this article and this answer.

Related

Is there that I can continue my HTML code in another page, while being in the main code?

Is there that I can continue my HTML code in another page, while being in the main code?
For example, in HTML you can make 1000 extra pages of JS and just use something like
<script src="js/example.js"></script>
to make the HTML page look cleaner, and less obstructed by the extra JS code,
is there a way I can do that to continue adding more HTML elements to another page while using the same stuff from my main page?
im writing a lot of HTML and don't want to make the main page too messy
If you rename your file to filename.php, you can use an include function. The code should look like this:
<?php
include 'header.html';
?>
You should probably put the files on the body. Just a warning: PHP is hard to learn at first, especially because you have to host a server and do many other things. To learn more about the subject, visit these sites:
W3schools PHP tutorial
XXAMP
Use jQuery .load()
$('#idofDiv').load('file.html');
You could consider using .php and using php include.

jQuery's replaceWith() method changes PHP code to HTML comment

In a click event handler I would like to change a div element. In this element is also HTML and PHP code.
After the change the PHP code is in a HTML comment. What I can do to fix this?
Here is a short version of my code:
$("#replaceCat1").click(function(){
$("div.boxcontent2").replaceWith("<div class='boxcontent1'> <?php print_string('placehoder1', 'theme_'.$theme->name); ?></div> ");
});
Edit:
i design a theme. In this theme gives it 4 boxes with information from the backend. My php code is at the moment only a placeholder. later I include the backend php code. In my theme, gives a dropdown menu. In this gives 4 categories, when you select one, then I would like that the 3 of the 4 boxes switch die information and the design. That is the plan with the code.
The code comes from the .js file. It is better to load the code from a php file and include it with .load() ?
If you want javascript to be able to dynamically include something that comes from php, then you will need to look into AJAX. Probably jQuery's $.ajax() function will be enough.
If you are simply wanting the text from PHP to appear once in the javascript, you will need to run the javascript through php.
Assuming that you actually have a php server an that your project is running on this server, a quick, ugly hack that will allow you to do this is to rename your .js file into a .php file, and include() it between a pair of script tags.
<script>
Include('filthy_hack.php');
</script>

Display external javascript content as text in html page

I am trying to display javascript code that is linked to the html page using a script tag as text on the same html page (and also syntax highlighted) as a tool for users to see the underlying javascript code.
Eventually I also want to display the html and css file contents as a learning tool so users can see all the components in a user-friendly manner on the same page (at the bottom in a tab control).
The other requirement is that the files are local and not stored on a web server. And last but not least I would like to keep this as simple as possible (no jQuery, no additional javascript if possible).
I have tried a couple of approaches without much success:
using HTML5 import and AJAX, encountered CORS and local file access
errors
embed HTML5 tag, encountered prompt to execute javascript, not good
iframe tag , encountered prompt to execute javascript, not good
I am looking for simple and working solutions, I have searched quite a bit, but it is difficult to find something where you want to "convert" javascript into plain text and display it on an HTML page.
Extracting the src attribute from the script element and loading the file content via a separate HTTP call is probably the most feasible solution.
An example for the lodash source code, using jQuery:
var src = $('#lodash').attr('src');
$.get(src, undefined, function(data) {
$('#content').text(data);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id='lodash' src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.js'></script>
<pre id='content'></pre>

Using one PHP master page with JQuery controls

I currently have a small project which uses PHP pages on Apache, hosted on a Raspberry Pi. However, I feel that using AJAX to send JSON to different PHP pages, then having those pages do something in response is just messy.
I have so many files, remembering all my variable names, functions, and file names just causes a headache.
Why is this the preferred way to code PHP?
I would rather just create one PHP page which has multiple classes/functions. Then use JQuery to Load() static HTML 'forms'. So a web interaction would look like this...
<?php
//some server-side functions
?>
<html>
<head>
<script>
//some Jquery to load your seperate html forms
</script>
</head>
<body>
<div id="html forms get loaded into here">
</div>
</body>
</html>
I am very new to PHP and very partial to ASP/.NET. Obviously this is terrible if you want to create large sites accessed by lots of people... but for a small project, is this still a bad idea?

How to manage JavaScript(.js) files in web page if js files are bigger in numbers?

I have more that 15 (.js) files in my web page. I need to know is there any other and efficient way to manage java script(.js) files in an HTML or jsp page other than putting all .js files in script tag ?
There are a few different ways to do this, First one as mentioned is to combine them.. Another way is to user server side code to combine them during execution time.
SIMPLE PHP EXAMPLE: myscripts.php
<?php
header('Content-Type: application/javascript');
echo file_get_contents("scripts/script1.js");
echo file_get_contents("scripts/script2.js");
echo file_get_contents("scripts/script3.js");
echo file_get_contents("scripts/script4.js");
?>
By using the above method, you can still manage your scripts easily and have them appear as only one script in your site / page.. Simple use the above with something like
<script src="myscripts.php"></script>
If you do not have a server side language (which generally would mean this is not a hosted page), then you are very limited with options. So that would be the first one i would suggest.
Also,, forgot the one that google use.. Use a single script that includes the others by adding a script tag to the body of your page..
There are a few ways to optimize your website if you have too many js files.
Combining scripts into a single file
Minify scripts: this helps reducing file size
Using a script loader like Headjs
Ofcourse there are other approaches to solving this issue based on the specific scenario. I've just named a few which are common.

Categories