Automatically creating and posting HTML divs with JavaScript - javascript

I am coding a web app in Flask. I need to find a way to load "posts" with text variables (from external Python scripts) into an HTML file, ideally using pure Javascript (Not Jquery). The posts need to be loaded automatically, upon the opening of a page.
As of right now, I use the <body onload="function_name">, but I am not sure how to load more than one post. I know how to use python variables in html, but I also don't know how to use those variables to generate posts.
Any pointers/resources/code snippets would be immensely helpful.

Related

one external JavaScript file combine with multiple html pages

I'm working on a project that needs to have a header in all pages, I decided to use php for that and I have an external one JavaScript file. My problem is when the changed content on the html page page JavaScript start running function on that page, but it should not. I am interested how using one JavaScript file on multiple html pages, but there is no conflict. There is a solution to get around this, but it's not good. Plus I have light and dark mode on html pages, so I do not think it's good to create more JavaScript files with the same code :) thanks

How to bring data from the BDD for a web page with HTML + CSS + JQuery?

I have a website designed with html, css and I am using charts with JavaScript to represent the database results. My question is, what is the best way to extract data and inject it into the graphics made ​​with JavaScript?
I have worked with php before, but I have understood that the JS execute after loading the whole page and php execute before the page loads, so i cant use both at the "same time".
I thought about creating invisible tables and put data there (would be easy with php when loading the view) and, with the JS load those results to the charts (but it sounds highly inefficient).
I also though about using AJAX with Php in order to extract the data dinamically from server and loading it in my charts (would be that OK?).
You are the experts. So, what do you suggest?

How do you hide Javascript? [duplicate]

This question already has answers here:
How do I hide javascript code in a webpage?
(12 answers)
Closed 9 years ago.
I have a site where I display charts using JS data. I don't want other people to copy my source (meaning have them copy paste my html/JS, etc.). I have seen other websites with charts and if you view the source there is no data there. Are they doing something sneaky? How do I do that? Can you run it on the server side? Can you put it in another file and reference that one? I have the JS linked from an external file but you can still see all the a data in that one if you open it. What is the best way to keep the data from appearing in the source file? I'm not talking about obfuscating it.
Please read this related post:
This thread: How do I hide javascript code in a webpage?
Basically, if a web browser can read it, the end user can access it.
If you wanted to really make it more work to view the source, you would do all of the following:
Put it in an external .js file.
Obfuscate the file so that most native variable names are replaced
with short versions, so that all unneeded whitespace is removed, so
it can't be read without further processing, etc...
Dynamically include the .js file by programmatically adding script
tags (like Google Analytics does). This will make it even more
difficult to get to the source code from the View Source command as
there will be no easy link to click on there.
Put as much interesting logic that you want to protect on the server
that you retrieve via ajax calls rather than do local processing.
You can't hide your JavaScript since it has to execute client side. You can move all your js to external files, but that will not really hide it since someone can just reference the same files.
Basically the key point is that nothing done in JavaScript can be kept a secret from a skilled developer. JavaScript is inherently in plain text.

How to setup a dynamic website with javascript only (no serverside)

Here's my problem: I want to build a website, mostly static but with some dynamic parts (a little blog for news, etc..).
My webserver can only do static files (it's actually a public dropbox directory!) but I don't want to repeat the layout in every html page!
Now, I see two possible solutions here: either I create an index.htm page that emulates site navigation with javascript and AJAX or I create all the different html pages and then somehow import the layout bits with javascript..
From you I need ideas and suggestions on how to implement this, which libraries to use, or maybe there exists even something tailored exactly for what I need?
Thanks!!
I would define the site layout in your index.html file, and then use JavaScript and Ajax to load the actual content into a content div on the page. That way your content files (fetched by Ajax) will be more or less plain HTML, with CSS classes defined in index.html. Also, I wouldn't recommend building a blog in pure HTML and JavaScript. It wouldn't be very interactive; no comments, ratings, etc. You could store your blog content in XML and then fetch and display it with Ajax and JavaScript, however.
While on the subject of XML, you could implement all your site content in XML. You should also store the list of pages (for generating navigation) as XML.
Just another one way. You can generate static HTML in your computer and upload result to dropbox. Look at emacs muse.
jQuery allows you to easily load a section of one page into another page. I recommend loading common navigation sections into the different pages, rather than the other way around to avoid back/forward problems. Layout can be done with a separate CSS file rather than with tables to minimize the amount of repeated code. For the blog, you could put each blog entry in a separate file and load each section individually.
However, I would just use something already available. TiddlyWiki, for example, is a self-contained wiki that is all in one file. It's very customizable, and there's already a blog plug-in available for it. You can work on the site on your hard drive or USB drive, and then you can upload it to the web when done. There's nothing more to it.
Have you considered using publishing software on your computer to combine your content with a template, resulting in a set of static pages that you can then upload to the dropbox?
Some options in this regard come to mind:
Movable Type - can output static HTML which can then be uploaded to the server
Adobe Dreamweaver
Apple iWork Pages
To handle comments, you can use Disqus. It inserts a complete comment system into your site using just JavaScript.
You can use the Google Closure templates. It's one of the fastest and most versatile javascript templating solutions around.

Stylesheets for content?

Forgive my ignorance since this seems like its something I should know by now.
I know I could make a stylesheet that will allow me to make changes in my CSS throughout several pages that use the CSS. I also know that you can make an external javascript file that could contain functions you want to reuse. But lets say I had pure HTML content (lets pretend a bunch of buttons or links) that I wanted replicated on several pages. Is there anything similar to a stylesheet in that regard? This would allow you to update the buttons/links all at once.
Try server-side includes.
The most frequent use of SSI is to include the contents of one or more files into a web page on a web server. For example, a web page containing a daily quote could include the quote by placing the following code into the file of the web page:
You could also use PHP, if your host allows it. Just change the name of the page from .html to .php and reference the header:
<?php include "header.php" ?>
Both of these require you to change the file's extension, so you might also want to use mod_rewrite to let users still access it via the .html name. Again, if your host supports it.
The question isn't that stupid, as there in fact is nothing native in HTML to do this.
If supported by your server, Server Side Includes are your best option. If you have PHP, you can also do a <?php include "footer.html"; ?>
All other server side languages have a similar construct.
Depends... I know Dreamweaver has some rather advanced support for templates. You can delve into the manual of your WYSIWYG HTML editor and get acquainted to how it can help you with repeatable content items. Otherwise, as Simon hinted, you should consider learning some server side technology (scripting language such as PHP is an easy choice), write your repeatable HTML and let the scripts output that whenever and wherever you need. Good luck!
It seems you're not using some server side technology like ASP.NET which has user controls on which you could place those.
An alternative would be to use Server Side Includes like:
<!--#include virtual="header.html"-->
Grz, Kris.
You can try using the CSS content property, but the content is inserted after/before the target. http://www.w3schools.com/Css/pr_gen_content.asp
EDIT
You can also try storing your content in XML documents and using JavaScript to load the XML sheets. Each sheet can store your button content, input content, etc. All you have to do is parse the XML and render the content as HTML elements.
While SSI seems like the best idea I believe, if memory serves me well, that if you're using IIS you're going to have to adjust some settings on the server to work get SSI with the html file extention.
While SimpleCoder's idea doesn't seem like the best idea it is an interesting one. Building on that idea maybe json data instead of xml would be best. I'd play around with this just for the fun of it.
If neither SSI or PHP is available, you could do it with javascript only:
Load the page into a hidden IFRAME, then grab it (with innerHTML)
- and move it to where you need it..
Unless you don't care about SEO, I would advise against using javascript for this purpose.
It's possible, but such a technique could prevent search engines from properly indexing your site.

Categories