Consume data from XML file in an HTML5 application? - javascript

I have some XML files which are currently used to load data into Adobe Flex applications. I am trying to make an HTML5 version of the application, and I need to load this same data into the html "app" so I can use and manipulate like I would in Flex. I have searched and can't find any information or examples on how to do this, or even if it can be done.
For example, if my application is a quiz, I have the questions, choices, and correct answers in an XML file. I would like the HTML file to load this data so it can display my quiz and I can use JS and jQuery to show one question at a time. I just don't know how to "get" the xml file. I suppose I could also convert the xml to json if need be, but it would be easier to use the xml as is.

You can do that by using Ajax and a Javascript XML parser. The best way to do that is with a JS library, like jQuery.
Check out jQuery ajax to grab your XML: http://api.jquery.com/jQuery.ajax/
jParse is a pretty decent xml parser: http://jparse.kylerush.net/
Ajax is for accessing pages in the same domain. If you need to grab a file on a different domain you'll have to find a different solution.

Related

Server-side template parsing

I'm currently exploring how to use HandlebarsJS via a server-side parser.
Unfortunately we are limited to using RhinoJS server.
I've searched high and low to find out how to use HandlebarsJS via the server side. I can see how to register a helper and various other things, but I'm curious to know if it's possible to parse a JS or HTML file and have the various portions of the file replaced with the server generated content?
I'm hoping this is possible without using something like node and optimistic that it's possible to parse the file just like you would do using PHP or CFML but using JS under RhinoJS instead.
Any suggestions greatly appreciated.

Loading data into static html form page or XML and using javascript

I have a text data (CSV) file that needs to be converted into a static HTML page for user viewing. In the HTML page, the user needs to be able to filter the data into views. Each HTML file will be archived.
I plan to use JavaScript for the user filtering functions. I plan to use a Perl script to convert the CSV file into an HTML file and include a form on the top of it for the user filter options. The HTML file will reference the JavaScript file.
My questions are:
I'm considering converting the data into an XML instead. Is this better practice?
If so, is it possible to have web forms in XML and run javascript functions?
I have a CSS for the HTML file. Do I have to use XSLT for XML?
Is there a way of combining XML and HTML into single file? Any benefit in this?
You can use XML as SOURCE instead of CSV, since XML defines cleaner handling of data (commas, semicolons, ' and " in the values).
If the content is static, and you will store it, then I suggest you use a format that is most close to the end result. That would be HTML+JS+CSS files. (JS and CSS help you keep some repetitive info out of the HTML).
Now a little background. XML is not viewable by default, you should use it with an XSLT file. What happens is that the browser "opens" the XML by transforming it with the XSLT into HTML. In this case you need the extra XSLT file, and a client capable of running it (most browsers are quite good at that nowadays). But you would only use this solution for three reasons. 1) If you have so many XML files (already at hand) that you do not want to process them with XSLT and save the resulting HTML instead of them, and leave this (wastly repetitive) computation burden to the clients. 2) You have other uses for the XML files. 3) The generated HTML is so much bigger than the source XML that it poses storage problems (although CSS and JS files should be enough to avoid that).

How to load static resources from server-side javascript in CouchDB

For CouchDB, I know that show function can generate HTMLs / Images / XML feed on the fly.
While in that case they have to be in the script itself and encoded (e.g. base 64 for image), as in here
What is the best way to load static resources which are attachments of design documents
e.g. As simple as JSON, or Images and process with server-side javascript?
The script file itself is an attachment in the design doc. The variable doc is not available.
Are there any way similar to node.js for it? or we use trick in context like _show or _list to show the document with id: _design/ddoc ?
doing REST request inside that environment I believe is also not possible as XMLHttpRequest is also not available. Establishing DB connection is also not possible?
This supposed to be a simple question, I wonder I am missing something in couchDB?
In order to serve a website directly, you need to use url rewrites. You'd rewrite / to got to one of your show functions. to bootstrap your site with basic HTML and JS (embedded probably).
A lot of this work has been done already by CouchApps (basic tutorial here). This is by far the easiest way to get started. This seems to be the way http://npmjs.org is served.
This isn't the place for a walkthrough, so hopefully this gives you enough information to get started.
If your site needs server-side logic (websockets for example), this solution won't work for you. All you get with a couch app is a database, HTML, CSS and Javascript.

Accessing Local Files with jQuery

I believe that this question has been asked in a few different forms, but I've read quite a few different responses.
At first, I had a web-application written with mostly jQuery that would make use of servlets to retrieve information from various locations JavaScript could not access (ie. Feeds, images from a server, etc.). Now, however, I've been told to do away with the servlets and application configuration classes so that this project of mine contains only HTML, CSS, and JavaScript/jQuery. Rather than pulling the images off of the server, I need to retrieve them from a local file on the computer. I know that allowing this might seem like terrible design, but it's what I've been asked to do. At any rate, what I really need to do is count the number of image files in a directory and then perhaps compile an array of the filenames themselves. I could do this fine in Java when using the servlets, but without them, I'm not sure how or even if this can be done.
I'm basically trying to use the jQuery Cycle plug-in to cycle through these images like a slideshow. I inject (or $("#div").append()) these images into the div by using a loop based on the number of images present.
So, is there a way I can do this with using JavaScript, HTML, jQuery plug-in, etc? I'd like to avoid using PHP and Java at this point...
You can't just read a directory with JavaScript; however, there appears to be a way to "exploit" how browsers function using http://www.irt.org/articles/js014/. It may not be pretty, but the demo works in the latest Chrome and IE7-9 for me. I'm sure some of the techniques could be updated to use cleaner code if you'd like to improve upon it.
EDIT:
Another technique you could use can be found in Javascript read files in folder
It definitely looks to be a cleaner solution. What I'd recommend is extracting the body contents to inject into a hidden div or using the path for an iframe that you can read from.

Loading text file from web, and parsing it with a script?

My .html has some associated data in a .txt file that I need to load when the page is loaded. I then need a script to be able to parse that data and do stuff with it in the page. Is there a quick-n-dirty way to do this? I was thinking I could just have a hidden and then run through its innerHTML, but DIVs don't seem to support that.
Thanks in advance...new to web stuff!
EDIT: here's another catch: I want this to work, ideally, if the .html is loaded either from an actual website or from a local machine. To my knowledge, AJAX and XMLHttpRequest won't work in this situation(?)
Do you have flexibility in the format of the text file? If so I would store the data in the text file in JSON format and just include it in the HTML head of the page using script tags. Then you can use some JavaScript when the page is ready to parse the information stored in the text/JSON file and manipulate the HTML page as needed.
The nice thing about this approach is that it is simple and does not require server side code. You didn't mention whether or not the text file was dynamically generated but it doesn't matter with this approach.
You should use AJAX to load the text and a callback function to parse it according to your requirements and perform whatever actions are necessary. If you're using a framework like jQuery, look into the jQuery AJAX functions: http://docs.jquery.com/Ajax
If you're not using a framework and are instead coding straight JavaScript, look at using the XMLHttpRequest object: https://developer.mozilla.org/en/XmlHttpRequest
That should be done server side using a programming language like PHP or Perl or such. If you have to do it with JavaScript for some odd reason, the only way is to do AJAX call to the file and insert it into the DOM. There's plenty of tutorials for that.
And yes, innerHTML works on div elements, as well as with everything else.

Categories

Resources