How to more efficiently generate large amounts of HTML - javascript

I have a web app running off google apps script, when a user searched for some data I generate templated HTML on the server and return that to the client which populates a table (Each table row is an accordion that expands down for much more detailed info for each item).
The problem is that the HTML generation takes ~20 seconds if the user does a search that returns all data. It returns ~3.5MB of HTML to the client.
I was trying to utilize JQuery templates, but each row may contain different data and that format of that data may change periodically, I had more templates than I did web page. It's not really maintainable to manage a ton of JQuery templates when 15 lines of code (As a "Scriplet") on the server can create the same HTML.
So my question is, how can you serve a large chunk of data to a client and generate HTML without relying on templates for each data format?
If this is not descriptive enough, please let me know.

The problem is that the HTML generation takes ~20 seconds
Generate HTML on client side. server only return data .
if the user does a search that returns all data. It returns ~3.5MB of HTML to the client.
Do not return all data at a time, just return a smallest information. like how many page , category, etc.
When user select a page , client send a request to get details from server.

Related

Script to open webpage, edit input field and submit form

In our CRM system there was an error that not all values in an Invoice were properly saved in the database.
But, if we open one Invoice, edit anything and 'Save' the invoice, it will correctly be pushed into the database.
As there are hundreds of invoices where we need to do this, I dont want to manually do this but write a script that automates this.
Also I dont want to change the entries in the database directly, because it could lead to issues with calculations.
Our CRM is running on an Ubuntu Server.
What I need now:
How do I write a script which:
1) Queries SQL to get a list of the invoice id's that need to be fixed.
2) calls the webpage:
https://crm.com/index.php?module=Invoice&view=Edit&record=3000
where 3000 at the end is the invoice id.
3) Writes some value to the input field that was created for the Bugfixing
4) Submits the form
How can I persue this?
1) Is a "form" just a http post request that I can maybe give the parameter of the updated input field?
2) Can I do this with PHP/JavaScript that I just put in the root folder of the CRM system on the server and call it.
I need to know how to start with this problem and the general solution.
Thanks.
Here's what I'd do:
Edit the PHP code to add some JS code only if an extra parameter (like &fixInvoice=1) is present in the URL.
That JS code would be executed when the page is fully loaded and would just send the form.
Get the list of the invoices ids that you need to fix, and build a list of URLs with that extra parameter.
Now, to open all those URLs you could build a simple HTML file with an iframe for each URL if the list is not big (under 100 URLs maybe). If the list is bigger you could build a HTML file with one iframe, and feed the list of URLs to a JS that would set the iframe src to the first URL, wait X seconds (it depends on how long the server takes to process the page, you should test it), feed the second one, etc.

Sending HTML Div as a Email File Attachment

OK, I have a Form in my web application used to fill out some shipping details. Certain orders require printing this form, to accomplish this I have a Div on the page with the display style set to none. It contains our company logo, shipping information and a table that is dynamically populated with information from the form once the Print button is selected. I am using the InnerHTML of the Div to print with a JavaScript function to print the form.
My problem is I also need to optionally email this as a file attachment.
The only way I can see this working would be to save this Div to a file in my application and then attach it to the email.
I have had no success trying save the HTML in to a file though.
I am not stuck to this approach, I am looking for a direction to go in.
My only requirements are that the information is sent as an attachment and is visually appealing - including our logo etc.
Thanks for any help - I didn't include any code, didn't seem relevant.. let me know if you want my print function of anything else from the project.
You need to improve the design of your application. First, it should be the server side not the client sending the email or processing the order. So forget about JavaScript here unless you are using node.js on the server side. Your server side serves the HTML for the client to display, ideally it is dynamically generated from bits and pieces or using some sort of template. As soon as you have that you can use the same code that generates the HTML served to the client to generate HTML send via email. It may have differences but most building blocks can be reused. Having done that just use whatever email library is available, set the content type to HTML, provide the dynamically generated HTML as the body and off it goes. None of that is done in the client JavaScript.

Javascript control page and user view page

Currently I'm working on a project where a user enters a lot of data constantly for a hour long window. I'm looking to have one user control all the data via some control panel and then have a link they can distribute to other users that will allow them to view that data without the ability to edit it.
Right now I'm doing some extremely weird methods. I have an XHR request on the control page that fires whenever a field is finished being edited. From there the data is sent to a php file that converts the data into a simple text file. Then the distributed link file will load that file one time and translate it into the necessary format.
Some potential problems I've run into are it seems odd that I'm sending starting as javascript data then going to a php file then to a text file then translating the data all the way back into javascript data again. Another problem I've come into is I'm not sure of a way to force users to reload the page when a field is edited in the control panel after the user has opened the view page.
Have I totally gone overboard here? What are some better concepts I could employ to accomplish this task?
If i understand what you want to do this is how i will do this:
First the data entry
if you have lot of fields you better use a form wizard, i don't have a particular one in mind right now but there is lot of them just search jQuery Form wizard
Here is an example:
http://i.stack.imgur.com/Luk2b.jpg
The concept of the form wizard is to guide user via multiple page and also validate the data. And click save when and the end.
Then save date in database.
Display content
All you need to do is to create a global separate page to display your content.
Let see something like: http://yourserver.com/view/{id}
where id is the identifier of the particular row in your database.
i'm not sure if i totally understand what u about to do. i'm trying to make your work description shorter here:
want to build a website that one person can edit a single page's content in 1 hour, and others can view the content change in that 1 hour.
if this is what u want to build, here's the module:
teacher: the one who can edit the page
student: the one who can only view the page
server: information center
teacher client edits page -> teacher client sends update data to server -> server saves data -> server sends update notice to student client -> student client receives update notice -> student fetches update data from server
to make this module work well, i suggest try socket instead of http reqeust, just like online games or IMs do.
well, try socket.io

request downloading a file basing on criterias from javascript

I've got a web application (php/symfony2 - but it doesn't matter here) with heavy AJAX usage and quite a lot of javascript in the client side layer. The interface enables the user to filter the data he wants to display (periods, checkboxes, selects, etc.) and basing on those choice, a POST request goes to the server side for data and JSON is returned through AJAX.
Now, I want to add a functionality to download the data file basing on the criterias/filters that reside in the javascript layer - and I'm not sure how should I do it.
Let's say I've got a <a href="some_action_url"> tag that - if I click - it downloads the file. I know how to do all the server-side stuff. But I don't know how to pass the criteria parameters from javascript to the server-side controller a using the <a> tag.

How build a list dynamically and pass/save user selected values from an HTML form to server?

I think in this case I need to write a client side script that onpageload/onchange gets options from server & builds a list dynamically. & stores new options to server via some JavaScript script. I will prefer to save user input in a file on server. I will be very thankful for any help.
Here is the stack we use for our web app and that works more or less the way you describe:
the user load an HTML page
the page make an ajax call and get the options as a JSON(either it exists already in the database, or a new option set is generated)
the json is rendered using a JS templating engine (PURE in our case)
the user change something
the same JSON is modified and sent by a POST to the server
the server read that JSON and store it in the database(you would write the data to your file). And then go back to the step 4, to wait for another user change.

Categories