In my project which is a legacy application , the html pages are rendered from xml. i.e the backend with pass the xml to the jsp and using xslt we generate the html content. Applying xslt on xml is done in browser using java script. The output of xslt will be a rich html content which will the view for user. And user can do edit actions like modifying values in form fields, adding dynamic items like new address lines etc. At the time of submit java script will read all the inputs (including dynamic user actions added a new row) and update the xml accordingly. Then this xml will be send back to backend and java code will parse the xml to see that user has modified and act accordingly.
I was thinking of alternate approach to build UI based on the input xml and with the facility to update xml in front end itself.
Any suggesstions on different approach?
At my work some coworkers are using a very similar approach: The whole data is hold in a SQL-Database and got exported as XML. Further the XML got processed to XHTML via XSLT-Stylesheets to static pages. It is not intended that users edit content, so static HTML is absolutely fine.
In my case this make sense, in yours maybe not. Why you are not using the common Web-Application-Framework approach?
If you really want to stay with your "XML->HTML with JS in browser"-solution try Knockout. It should make your life much easier (Model-Binding, Auto-Update, MVC-Pattern/Templating)
Related
I have zero experience in native apps, which might help with this question.
Since service worker caches everything so nicely, then I don't see any reason why I should render the entire webpage again when the page gets switched (link gets clicked.) So I will switch only the content, use history pushstate to change the URL and change the title. I have that part figured out.
Problem is, I cannot find any resources that would support either of the two content load ideas I have:
Load center content via AJAX with HTML.
Load center content as data only and render the HTML on-the-fly in JS.
First method would be fairly straight forward, but would mean that the payload would be bigger.
Second seems much more advanced, but would mean that HTML templates have to be in the JS somehow already? I also have a feeling, that there is a method somewhere in here.. that would allow to open the heavily cached page (lets say the article page) and replace the (text) contents. But as I said, I cannot find any resources to wager the cons and pros or give any reliable information on PWA AJAX page switching.
Any credible information on this matter would be much appreciated.
EDIT
I have kept reading and researching on this matter, but sadly there is no clear indication on how to handle dynamic content over AJAX. Whether I should parse the JSON data from AJAX to HTML in JS or send it already as HTML from the backend.
To add in favour to second option. I have figured out, that my theory had somewhat weight to it. If I use pure.js to pull a HTML template from hidden template tag and generate the HTML on the fly from JSON over AJAX.
you make it so complicated can we take a look at your code please?!
if you mean retrieving data from database by ajaxthen all what when you need is a jquery plugin
$(document).ready(function(){
var contentData1 = document.getElementById('contentData1');
$(function() {
$.post("pathToPHP.php",{contentData1: contentData1},function(data){
$("#container").html(data);
});
});
and the pathToPHP.php file should retrieve the data you want
echo "";
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.
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.
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'm building a user dashboard in Django for a python based web service. This web service creates emails, and the HTML strings of these emails are saved in a file (and could theoretically also be saved in a db table). As part of the dashboard functionality I want to be able to preview the email, essentially rendering the html string of the email within the Django html view. Is it possible to do this? Will I need to work with a Javascript library to achieve this? Which one? Any help would be very appreciated!
EDIT
To clarify, the html string when put into a text editor is about 360+ lines. It has its own styling and it's own <head>, <body>, etcetera, tags. I want to display it like a webpage within a webpage, if that makes sense, so that it looks like a proper preview. I just have no idea how to do this, my experience hasn't really been with js or front end dev.
make the email html available like any other page and display it inside of an iframe.
be warned - email clients don't use the same rendering engines as browsers. its hell. (we use this - https://litmus.com)
Nothing more but:
document.getElementById('IDofDisplayContainer').innerHTML = 'your mail HTML string';