Accessing Session Variables in Single Page Applications - javascript

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.

Related

Load a template page via GET request with data from the previous page?

I want to load a new template page with data inserted via the previous call.
I have a list of items generated and they link to the general item page but without php all is lost.
I was thinking about using a href="page.html#itemid" then finding the item by querying the url.
Is this overthinking it? Any easier ways to do it?
I am assuming that on the current page, you have used AJAX to load all the data you need to display on the new template page, correct?
I can think of multiple ways to do this. It just depends on the nature of your data:
Have a popup instead:
You could have the new template page be a popup (instead of a real, separate page). Grey out the main page's content (via a darker, half transparent overlay) and then have this new popup div display the data you want. This is typically used on sites that want you to sign up for their newsletter, etc.
Pass the data via URL:
If you have very small amounts of data and it isn't sensitive data, you can just pass it through the parameters. Let's say page.html is the new page template you want to populate the data with. Then just have the link on the current page be page.html?itemid=123&param2=Hi or something like that. Then, on page.html, make sure you have JS to read the parameters from the URL and display the data.
Pass the data via cookie:
Otherwise, you might just want to use JS cookies. Especially if you have a medium or larger amount of data. Store the data loaded from AJAX into cookies. If you are expecting the user to open multiple page.html templates at the same time, you might want to use an identifier and pass it to each one, such as page.html?itemid=1 and page.html?itemid=2 etc. Then have that page.html's JS look up the appropriate cookie based on the URL's parameter id.
Do be careful and use best practices if handling sensitive data.

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.

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

Javascript or jQuery method to parse ASP.NET MVC Route URL

I'm building an ASP.NET MVC 4 website that needs to be available offline (HTML 5 manifests/caching), so I will be unable to take advantage of server side HTML generation.
Right now, I just have generic/cacheable HTML on the View (.cshtml) and I'm making jQuery AJAX calls on document ready to load the data from the server and using mustache.js to generate the HTML.
Being constrained to doing HTML generation only in the client side, I'm unable to use Url.RouteUrl to generate links and also constrained to having to parse the current URL manually when navigating to a details page, and using the Id (or whatever the parameter is) to make the AJAX call to retrieve the information for the specific record that I need.
Since I'm still using MVC URL Routing (and would like to keep using it) to return the corresponding View (as in, http://localhost:27954/Route/Test2/7?mytext=hellow), I'll need a javascript or jQuery function to both be able to parse URL's and retrieve the value for a given querystring parameter, and ideally another method to generate URLs.
Since I'm obviously not the first person in this situation, I was wondering if anyone had any proven methods already that they could share, or any recommendations.
Thanks!

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