Is it possible to dynamically populate HTML elements with XML data offline? - javascript

I am currently making an offline web app that will dynamically populate drop down menu items using XML data. I am looking for suggestions on how best to approach this, given that local ajax calls are prohibited by most modern browsers. Unfortunately, it absolutely has to be offline. I am not sure if there is a way to do this with appcache, or if I should attempt to do it with XSLT and Xpath, etc. I am using jQuery for the styling, and would prefer to be able to use that, but can work around it if it is not compatible with the solution. Thank you in Advance!

Related

How to render HTML elements on PDF in browser

I need to render a PDF document in web browser (HTML5).
User should be able to make a selection for annotation (text or area).
Render html elements on the annotation (check-boxes, drop-down) received through ajax.
User's choice will be sent to back-end along with the selection/annotation made.
I should be able to render the annotations made again on the PDF.
Which frameworks should I use to create this solution? I'm happy to use open source frameworks as well as licensed SDKs. I can manage handling back-end using Node.js and interactions with ajax calls.
I did some research and found that I can use PDF.js for rendering PDF. Found many solutions to annonate but they cannot be used to render HTML elements on an annotation. I'm happy to get PSPDFKit but no way to create html elements on PDF.
I found two solutions and I'm really happy with them.
Annotate.co
PSPDFKit
Almost everything needed is there.

Any suggestions/examples of editing data in HTML tables with Laravel?

Just wondering if anyone had the need to edit and update data straight in a HTML table using Laravel?
I have built out all the "create" tables for various tasks, but would like the ability to alter the data straight on an "index" page.
There are various JS libraries out there, but I was wondering if anyone knows or has done this within Laravel?
any feedback would be much appreciated.
Since Laravel is a server-side technology, you would probably want some sort of javascript library to achieve that functionality--unless you're willing to use forms that look like tables or tables with form elements inside them. You might also have some luck with contenteditable attributes and events. HTML doesn't have an editable form out of the box that automatically interacts with the backend (Laravel in your case).
It depends on what you want to use the tables for; if your tables have a lot of data, you might later want sorting or pagination and that's something javascript table libraries are useful for.
If your tables are simple or exist mainly for style purposes, you might be able to get away with not using javascript much or at all. It would be fairly unusual to go this route, though, and probably take a little longer to get a working prototype.
I'm using Laravel Datatables for data display on Laravel 5.3.
And thinking of extending it with this paid version of table editor.
There's an extension for Datatables editor integration.
Seems to be the best option for my project so far.

Filtering contentEditable on client and server

I'm developing a Rails web app using the contentEditable feature of HTML 5, in the style of Google Docs and others. This works well for simple typing, but breaks whenever the user tries to paste text from Word or another webpage. The resulting HTML will be littered with style attributes and will look like it was literally cut and pasted from the source.
I need to filter the HTML some way. This can be done client-side, giving a smooth interface for the user where pasted material fits instantly into my app's style.
Of course, the user can override my filtering. So to protect myself fully from tag soup hell, I would need to perform the same filtering again, server-side. This is similar to the form validation problem.
I don't want to duplicate the filtering logic in both jQuery (client-side) and Ruby (server-side) but I don't know if there's any good way to avoid it. So far I have identified two possibilities:
Implement all filtering server-side, access it from the client by AJAX. This will put a heavy load on the server.
Implement filtering fully in JS, run on client and on server through Node.js. I don't know if there is enough similarity between the two platforms to implement a shared filtering routine. Libraries like Cheerio look promising though.
Has anyone solved a similar problem before? I would appreciate any guidance to keep my app as DRY as possible.

How to find height of a HTML element in node.js?

I am stuck with quite a tricky issue for a couple of days now. I have a auto-generated HTML page in a variable as string in node.js. I need to find the height of some HTML elements and do HTML manipulations (like tag creation, deletion, append, css attribute setting etc).
Obviously I need to make a DOM like structure of my HTML page first and then proceed.
While for the HTML manipulations I have many options like cheerio, node.io, jsdom etc but none of these allow me to find the height of the element at the node.
So after wasting quite a lot of time on it, I have decided to look for heavier solutions, something like implementing a headless browser (phantomjs etc.) at the node and drive an elements offsetHeight through plain javascript.
Can anyone tell me if it is possible to reach my objective like this? What headless browser will be best suited for this task?
If i am going in the wrong direction, then can anyone suggest me any other working solution?
At this point I am ready to try anything.
Thnx in advance!!
Note: Using javascript at the client side has many problems in my particular case because the contents of the generated HTML page are supposed to be used by the client to paste in his website. Leaving a running javascript that re-structures the HTML will make it difficult at his end.
Node's server-side HTML libraries (like cheerio and jsdom) are strictly DOM API emulation libraries. They do not attempt to actually render a document, which is necessary to compute element size and position.
If you really need to calculate the size of an element on the server, you need a headless browser like PhantomJS. It is a full WebKit renderer with a JavaScript API. It is entirely separate from node, so you either need to write a utility script using Phantom's API, or use a npm module that lets you control Phantom from node.
After reading the comments under your question, it is pretty clear that you should not be calculating heights on the server. Client-side code is the proper place to do it.

how to access data in a SQL database without post backs

I have an ASP.NET (VB codebehind) intranet site at work. We have Intermec scanners that we have created web apps for. The IE version on the scanners are "PIE" (Pocket Internet Explorer) which doesn't support AJAX or jQuery. The issue is I need to do several SQL calls in our app w/o post backs. My research tells me that javascript is the best way to go. So I need help confirming that this is possible with JavaScript, and if so how can I accomplish this. Or, find another way to do it inside my "PIE" browser? Mostly I will just be checking strings, but there were will be times I need to get a dataset and display it in a grideview (or tbl) all w/o a post back.
Thanks
Josh
UPDATE \ it appears there is evidence that suggests AJAX is available on PIE devices. So i'm willing to try an AJAX solution.
tks.
If JQuery and AJAX really aren't options, you could always drop an IFRAME on your page, and dynamically alter the IFRAME url to query a different page, then read the page contents using javascript. It's hacky and ugly, but I've seen it work before.

Categories

Resources