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

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>

Related

Not able to move my inline JavaScript to an external file

I finished developing and testing my HTML intake form and it is working nicely with ajax, json, and validation, and mailing. To finalize the form for production, I attempted to move the JavaScript from the HTML page to an external file and provide a link to the file in the HTML page. The js file is called formjs.js, and the link to it was placed at the bottom of the HTML page as <script src="../js/formjs.js"></script>.
The way I moved the JavaScript is cutting the scripts and pasting to the new js page and same the page and linked to it in the HTML page as mentioned above.
Upon doing so, I received tons of error messages on the js page because many of the functions are looking for information that exists on the HTML and had no idea how to get it. For example, a document. For example, this following script:
var Server_response_value_failure = document.getElementById("server_response_value_failure");
gets the following error:this variable is assigned and value but was never used.
Another example:
end of function};
at the end of each function get the error message that unnecessary semicolon.
I am not sure how to link the formjs.js file back to the HTML. Otherwise, the form works perfectly fine if I leave the script on the HTML page.
its fine, its just eslint that gives these warnings. for example, it will complain if you declare a variable and assign a value but you dont use the variable later on.
or if you call a function that you declare "later down" in the file.
I don't know if this will help, but sometimes you want to put the entire body of your javascript file in round parenthesis like this
(function(...) {
...
})();
in the end, you put another round parenthesis. This basically acts like $.ready() in jQuery.
I don't know if this will help you. You might want to rewrite your code.

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.

How do I use same html code on various php files?

I'm doing statistics web-app with Highcharts and PHP that retrieving data from MySQL and encoding it in JSON. For now, I have various php-data files for each stat, and it's OK.
The problem is that I also did various pages for each stat, which I think is not correct way to solve problems. On pages I have same HTML code, the differences only in JS piece of Highcharts and title of the page.
Question - can I have just one page for everything, just changing JS and title on menu-click?
UPDATE: Thanks for answers, require and include are good! But what about my second question? Can I change JS piece of code if I click on some button?
So then my site would have just 1 page and various php-data. On include variant I'm anyway would have a lot of pages, cause Highcharts settings JS is unique for every stat.
I would suggest using require.
Your html can then go into a seperate file which you can include in all your other pages.
For the title you just use a variable:
<title><?= $site_title ?></title>
Of course you can have.
For the repeating code, copy your repeating code to yoursript.php and use:
include 'yourscript.php'
on all pages you want you script to appear
You can use 'include' statement in PHP to include file with the HTML code.
include 'filename.php';

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

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.

best option for inserting javascript into multiple existing pages

The website I'm working on has hundreds of existing pages, and I want to insert an Autocomplete feature into every page. I don't want to have to put the Javascript <script src=> call into the hundred of pages. The field using the JS is contained in the Nav which is called on every page from a php include, so getting the HTML in is no problem.
There are a few places I think I could put the Javascript in -
1. Either add the Javascript functions to an existing Javascript Script that is called in the header,
2. or even put in the <script> call in an existing php include that calls the $_SESSION and mysql data to everypage, but that is called even before the <!DOCTYPE> declaration, so I don't think I would want to put it there.
3. But, because I would like to keep it in it's own file (In case it needs replacing, tidiness, etc) I want to keep the autocomplete Javascript in it's own file. Would it be ok to put a <script> call inside of an existing <script call>? I hope that is clear.
4. OR, put the <script src> inside the nav.php (which is called on everypage). But I'm not sure how well putting a PHP include inside of a Javascript file would work out.
If anyone has any opinions or advice as to which would work the best, please let me know. Thanks!
Best option is to create jquery plugin and use it where ever required. Dont forget to make proper use of $ or jquery, because it may crash between plugin and script file in which plugin is placed.

Categories