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';
Related
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.
I am developing a Google App Script project that will be used right from within a Google Sheet, with HTML files as dialogs. My project will be a mix of .gs files as well as HTML files for data entry, etc. I am trying to use the methodology explained here:
https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript
to create global JavaScript and CSS modules that I can include in my HTML files rather than cutting and pasting inline code all over the place. This will be mainly useful for the data-saving routines which capture form data, serialize it, then save it to Sheets via the methodology outlined here (and many other places): http://railsrescue.com/blog/2015-05-28-step-by-step-setup-to-send-form-data-to-google-sheets/.
The problem I am having is with trying to call the "include" statement from my HTML files, namely, lines like:
<?!= include('JavaScript'); ?>
It doesn't work when I create a menu on the spreadsheet to display my HTML file as a dialog -- the text of the include line just shows up as literal output on the dialog, and code does not appear to be getting included (not in scope).
I know the Google example is primarily for pages delpoyed via a web app, but I'd like to use my HTML files as dialogs right inside the spreadsheet (e.g. from a menu or sidebar) -- that feels nice and tidy to me. But if I can't get includes to work, my code base is going to be a nightmare and it will be really, really hard to standardize CSS across the whole app. I don't want to be cutting and pasting all the time.
So, what is the secret behind this <?! tag, and why won't it work in my HTML files when they are called as dialogs? It is clear those lines are different from the get-go (maybe not in a bad way, but they don't work), as the Google Scripting console displays those lines oddly, as depicted in the screenshot below:
Please try adding:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
More information can be found in Adding Style Sheets.
Figured it out. I was not properly understanding the way the HTML was being served up as a dialog. I was using this behind a custom menu option:
var html = HtmlService.createHtmlOutputFromFile(htmlFileName);
when I should have been using the more dynamic:
var html = HtmlService.createTemplateFromFile(htmlFileName).evaluate();
The latter generates a user interface object where the server-side script is executed and everything is included properly when I display the object with showModalDialog() (or showSidebar()).
I just had a complete misunderstanding of how the user interface object was being created, so now all scripting works inside my HTML files.
I'm using the Angular Dialog Service to build pop up forms on my website. This services source can be found here: https://github.com/m-e-conroy/angular-dialog-service/blob/master/README.md
Anyway, the actual angular and JavaScript that describes what the modal contains and does goes after the following where the ... is:
.run(['$templateCache',function($templateCache){
$templateCache.put(...)
My problem is the html and js seem to have to all be one after the other with no spacing or indentation allowed between any of it. This causes the code that describes the modal to essentially just be a wall of text that has become borderline unreadable and editable in my complicated modal. An example of this can be found in the JS portion of the code here: http://codepen.io/m-e-conroy/pen/rkIqv
Is there an easy fix which will allow me to have my modals html and JS in non wall of text format and have it build successfully? If there is no fix this seems like a pretty big flaw in using the Angular Dialog Service to handle modals...
Thanks!
There are tools, like html2js, that can build templateCache for you.
It means, that you can store your html code in html files (where it obviously should be), and then gather it into single javascript file with $templateCache.put(/* content of html file */); in it. Just don't forget to include resulting module into your project, so when one of the services requested html file, it could be found in templateCache.
So you shouldn't edit html in .js files. It's wrong on many levels.
I'm pretty new to web development. What is the best practice in keeping the same sidebar and other elements across web pages on one's site? Do you store the sidebar html and call that? If so, how would one go about doing something like that?
There're many options to handle this problem but I've found easy one using jQuery. Use this if it suits your requirements.
Add the jQuery CDN in your HTML file.
Create a JS file as sidebar.js.
Copy all your HTML code of the sidebar and store as a string variable in a function of the JS file. as
function loadNavbarDiv() {
String navbar_code_str = '<nav><div>...</div></nav>
$('body').append(navbar_code_str);
}
Then in the HTML file, you want to add navigation bar, add folowing code in your <head>
<script src="sidebar.js"></script>
<script>
$(document).ready(function(){
loadNavDiv();
});
</script>
It's working fine for me.
Happy coding!
Here's one way to do it: use "include" files. No JavaScript required. The server does the work, instead of requiring the client to add the content.
SSI, or Server Side Includes, were first developed to allow Web
developers to "include" HTML documents inside other pages. If your Web
server supports SSI, it's easy to create templates for your Web site.
Save the HTML for the common elements of your site as separate files.
For example, your navigation section might be saved as navigation.html
or navigation.ssi.
Use the following SSI tag to include that HTML in each page.
<!--#include virtual="path to file/include-file.html" -->
Use that same code on every page that you want to include the file.
That page also describes some other approaches. But if you know this is called using include files, you can search for it more easily. For example, this article describes includes and how to call them from JavaScript if you must.
As long as you're only coding in html, you will need to copy your html into every page. You can store the css for the sidebar in one and the same file and call that on every page though.
Other scripting languages and frameworks might contain templates (php) or master pages (asp.net) for example which make it possible to use the same code in different pages.
I've a couple of extension methods I've been developing for a couple of projects, they currently rely heavily on some AJAX to make bits and pieces work. The problem is that they require copying and pasting JavaScript files to the project you want to use it in.
As this JavaScript file only needs to be used once (all instances of the rendered control use the same file) I'd like to do something like add the script element to the headers collection of the page it's used on via a web-resource (embedding the file as a resource in the assembly). In Web-forms this wasn't a problem - you could add a script block to the headers with a specific ID and simply check for it on page load.
What's the MVC equivalent - is there an equivalent?
I'd like a solution that doesn't require the consumer to copy and paste/ add lines to pages or config...any thoughts?
Stephen Walther has some very good articles on MVC, including Html Helpers.
http://weblogs.asp.net/stephenwalther.
A great place to see Html Helpler code is the MVC source code available at
Codeplex.
There is a tutorial at www.asp.net/mvc on Html Helpers
Here ya go, this guy wrote a custom FormlessScriptManager that will let you register scripts even when there is no <form runat="server"> in your page.
http://developmentalmadness.blogspot.com/2008/04/abstracting-systemwebuiscriptmanager.html