I'm trying to find a code in Javascript to make one header for multiple pages in HTML put i culdn't find can you please advise ?
Javascript is a client-side language, executed in a single-page-environment by the client (normally a browser).
If you want your site to take advantage of templating across multiple pages
eg. including the same header on multiple pages
then you are better off using a server-side language executed by the server.
Server-side languages include:
PHP
ASP
Ruby on Rails
Node.js
and others.
You could use a html preprocessor (for example Jade). There's something called mixins. Mixins allow you to create reusable blocks of code.
Create the common header and place in its own file. Then in all other pages, create an empty element with an id of something like "header". Then have each page make an AJAX call upon page load to fetch that file and place the result of the AJAX call in the empty div.
You could also do this with an iframe and just set its source to the header file.
Related
So I am currently trying to implement AJAX functionality to my webapp.
I currently have all the Tag Library, Tag Handlers, set up properly, so that if I call the Tags when the page is fully refreshing. All these custom tags work.
However, I have actually never implemented ajax in my life and is currently stuck on how to proceed to call these tags dynamically based on the changes in the webpage.
E.X:
Custom Tag library under -->/WEB-INF/tld
Tag Handlers --> classes/ClassHandlers/Tag1...TagXXX
With the above calling the following tag in the JSP file works perfectly:
<tagLib:tagName Attribute1="" Attribute2="">
However, how can I get this to be dynamically inserted by Ajax?
Please let me know if I can provide any more details.
Well, I would said that it is impossible. AJAX and JSP are two incompatible technologies. JSP tags can be used only on server side (during generating HTML) while AJAX is a client side technology (it runs in user browser). You can read more about client-server model here.
I have a website and want to have links to a page which has a filter function. I would like to create a link in such a way that when followed I do not simply get the destination page, but rather the page with a filter already applied.
To be more specific I am looking at the website for NetCDF CF standard names. From my page I would like to have link that would already filter e.g. for 'longitude' on the destination page.
The destination page is using javascript to apply the filter function.
Any ideas how to achieve that?
It's impossible to control a JS on a site from an external URL.
But you can do a something else: Download the data from the external site to your server via a server-side script (like php), and recreate the filters on your site in JS. But this way you should care about copyrights and you have to maintain your script if they changed the table structure they used.
I have a piece of content that I was tired of editing on every page of my website, so I put it in a separate HTML file and have been loading the markup into its place on all my pages:
<div id="header-house">
<script type="text/javascript">
$("#header-house").load("reusableMarkup/header.html");
</script>
</div>
The problem is that my page stutters when it loads. It seems to load everything and then display it and then move it around after injecting the header. Is there any simple fix to this? I haven't yet learned synch/asynch stuff.
Immediate asynchronous calls to retrieve bits and bobs of HTML isn't the correct way to go about what you are trying to do - a separate HTTP request must be made for each additional HTML file you want to include, slowing your site down significantly and creating a weird user experience like you've described.
The route you've taken here is better suited to on-demand HTML generation (e.g. when the user performs an action that results in a popup modal containing some dynamic data).
What you're trying to do is exactly what a server-side language is used for, where your HTML files are combined / repeated on the server to generate a single HTML document, which is then sent to the client as a whole (one HTTP request).
In PHP for example, you could go about solving your problem using the include function:
<div id="header-house">
<?php include "reusableMarkup/header.html"; ?>
</div>
This is for a new application, there's going to be several servers handling different parts (one for htmls, one as a proxy to handle https requests, and a full java backend with a database). The view server is supposed to be as simple as possible (an apache server delivering the htmls and that's it)
The idea is to use the pure htmls (with JS) that the UI designed created. Now, I thought of making the entire application using Jquery, by pulling all the dynamic data and append js files with logic on how to handle the ajax response.
My problem comes when I want to reuse htmls (the header, the footer and the menu are exactly the same for all pages). I can call, for example, /contact.html, and through ajax, call header.html, footer.html and menu.html. But that would mean 4 GET requests only for the main page (plus, rendering could be really off until all requests are finished).
I also don't want to have single full pages, because if I want to change the menu, I have to make that change in every html.
Is there some other alternative I'm missing ? If not, what is the best approach here (performance AND maintenance are equally important here)
Try http://mixer2.org/ .
Mixer2 can load html templates and convert them to java bean instance.
All the html tag and org.mixer2.xhtml.* java class are mapped one by one automatically.
So, You can load several templates such as "header.html", "footer.html", and re-use the tag snippet copy.
I have a javascript file that other people use on their site. It creates a button and loads a css file that is hosted on our server:
style.setAttribute('href', 'http://mysite.com/assets/some.css');
The user can call it in their site like so:
<script type="text/javascript" src="http://mysite.com/global.js"></script>
I want to give the user the ability to upload their own CSS file on my web app that will replace the one that I am setting in global.js.
Currently, I added a custom_css:binary column in the Users table that will hold the CSS file, but this requires the user to stay signed in on the site. I'm not sure if this is the right way to approach this or if there is a better way to do it. Also, what are some security risks to this approach?
I'm using RoR for the backend.
Any help would be great!
UPDATE 1
I'm able to store the uploaded JS file and load the custom CSS, but it's currently checking the current_user - this means the stylesheet will not be rendered for the users. How can I work around this?
I was able to find the solution myself.
There are several ways to approach this:
Add a query string to the JS src
Scrape the page for a certain element that gets generated by your script
I opted for option 1. When I detect a dynamically generated query string, I send that over to the controller in the params hash and load the css file accordingly.