Javascript control page and user view page - javascript

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

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.

Retrieving data from browser to JavaScript

I have just started out working with JS and I've managed to post data from a MySQL db to the website using node.js, jade and plain JS.
Now I'm trying to do the other way around, i.e. getting data from the website, to the JS code and then inserting it into the db.
What I'm thinking is simply making a textfield with a button. When I fill the textfield and press the button it is collected by the JS script and the inserted to the DB.
I am however having problems with Jade and the listener and I'm unable to even do a console.log using the listener.
This is what I've got so far in my .jade file.
extends layout
script.
var something = function() {
console.log('something')
}
block content
button(onclick='something()') Click
The website renders nicely, but nothing is printed when I click the button.
If someone could give a hint on how to fetch the data in my .js file that would also be appreciated.
In the context of the WWW there are two places that JavaScript can run.
On the server, e.g. with node.js
On the browser, embedded in a <script> element
Since you want to put the data into a database on the server, you want to go with option 1. So don't use a <script> element.
Use a <form> (you could use client side JS to read the data from the form and send it to the server (Ajax) but that seems overcomplicated for your needs and should be layered on top of a plain HTML solution if you were to go down that route).
form(action="/myendpoint" method="post")
label
| Data
textarea(name="foo")
button Submit
Then you just need to write server side code to retrieve that. The specifics of that will depend on how you are implementing the HTTP server in Node.
The question How do you extract POST data in Node.js? provides some starting points.

Save the client HTML content back to the Server as a HTML file

I want to create an HTML form on the Server. When the client completes the form and clicks submit, I want to be able to save HTML form and data in a single HTML file on the server.
The best suggestion I have seen is using JavaScript. Use a client side script that on click will save the document.InnerHTML to a var that can then be submitted back to the server.
Is this the best approach, or is there an easier way?
Even though I have no idea why you want to save the whole html code because I'm sure there will be parts that are the same for every user and you will be wasting memory, but ok.
So there are two ways to do this:
1. is javascript as you said
2. would be to put all the generated html code into a hidden form input (already on server side)
the first one seems more comprehensive and this is what I would do but the second one would also work for users with js disabled.
I wouldn't really recommend this way, because I'm still a huge fan of saving data in a database, but here's a general outline of what to do:
User fills out the form and submits.
Server-side code executes a method:
a. String holding the template for your HTML page with placeholders for the fields.
b. Use String.Format to put all the user input into the correct places.
c. Create a file, write the string to the file, and save.
d. Return file name to user.
HTML files are not that large, but still you risk using up your hard drive space. Also, you need write permissions which introduces security risks.
Going the database route:
1. User fills out the form and submits.
2. Server-side code saves the data to a database, and returns a link (with querystring string of ID and possibly a user id to help with security) to the user.
3. Whenever the user goes to the link, the server-side code repopulates the form with the ID passed.

Accessing Session Variables in Single Page Applications

I'm developing a simple(!) 2 page application.
Page1: Takes basic details from the user about the program is creating for his trip - name of the trip, dates etc.
After clicking Save, a entry is created on MongoDB using controllers in Lithium PHP for the program. A id is generated and passed on to page 2 as a parameter in URL like so:
$this->redirect('/iplans/save/' . $program_id . '/' . $program_name);
Page 2: is a single page application using many Backbone scripts (hosted in individual js files) and allows the user to add datewise details of his program. No js script is in-line.
I want the backbone collection to be saved on the server side when Finish is pressed but need to send in the program_id with this collection so that the right program is updated in MongoDB.
Questions:
How does one ensure that the program_id from lithium/php server side is picked up by backbone javascripts that are in their own js files (not inline)
What other options are available besides Controller::redirect to forward the control from page1 to page2?
What other options can be used to pass-on the program_id and any other values that may be needed to backbone/JS layer. Is there a standard-way of passing such items?
There are a couple of options:
Parse out program_id from window.location.href
Dynamicly create a bit of javascript in your lithium view. it could be as simple as:
"<script> myvars = " . json_encode(array(...)) . "<script>"
and then you can read the variables from the javascript.
Create the onDomRady function dynamically from lithium
That is a good way. That is, one page show form and receive data from the form, and one page that show some data. They are not related to each other, and it will make the code easy to understand.
You could use AJAX/JSON to send/receive data to/from the server. Also see answer 1b,1c
If it's just a variable being written to the session that you need to access in a single-page app, just make a controller (i.e. SessionsController) that returns the current session information, and turn content negotiation on.
Then you can get whatever keys you need any time.

ASCX and ASPX Mayhem.

BACKSTORY
I am building a module that extends a .NET web app that I did not develop. All I know is that if I create a "view.ascx" file, populate it with the appropriate vb .net html and javascript code and put that file in the right place, that some good stuff is going to happen. Im having issues though.
My Goal, enable a web based TWAIN scanning utility.(I'm using a scanner to get a picture of the sole of the foot of a patient.) The scanning plugin (DynamicWebTwain) has the ability to set some http form fields and call a post method to an action page (aspx) file. The action page should then use those fields to store the file and make write a record in SQL with a pointer to the uplaoaded file destination and associated that with the patient chart id. The uploaded file name, storage path etc are all composed of data that sits in variables in the application mentioned above.
ISSUES
The view.ascx file (which encodes the reading of the application variable instances, the plugin embedding and the JS triggers) is loaded one time when the application loads. Therefore, the patient specific information, captured in a form is not actually available unless I reload the page. This of course is because you cant specify the patient demographics before the application is opened.
As a result of item 1. I am unable to set form fields with meaningful information and as such cannot pass it to the actionpage.aspx and upload and save everything properly in the filesystem and DB in the first pass.
WORKFLOW SUMMARY
Patient enters, dr loads web app. at this time the variables pertaining to the Patient are empty. the control is not reloaded at any point and those variables remain unchanged (blank) in my module as the Dr. navigates through the app. Dr. puts in PT name and DOB and clicks next which goes to the Scanner form.
Scanner module has not refreshed variable data. Dr. Takes scan via plugin, triggers JS to set and drive scanner, is presented with a Save button, Save button sets form fields and calls the action page.
ATTEMPTED WORKAROUNDS
Point the action page to the ascx file, in other words call myself - FAIL - Would love a good explanation of why this is not OK.
Re-evaluate tha variables within the actionpage.aspx file. ( well to do that i tried using the same references in the headers as found in my view.ascx file
"<%# Control Language="vb" AutoEventWireup="false"
Inherits="DriveWorks.Live.Parts.Modules.LiveModuleControl" %>
<%# Import Namespace="DriveWorks.Live.Parts.Theme" %>"
And of course this did not fly - FAIL - If I could somehow talk to the application again from the actionpage.aspx file, i.e. call another ASCX page that would revaluate the variables and give me back the results, then that might solve my problems. Would love a good explanation on feasibility and approach with code samples.
Still green please be kind and Mind you the web app that I am building the module for is a black box to me..

Categories