I am building a web application using ColdFusion and traditional web technologies (html, css and javascript).
I have 2 divs:
Div one contains a table that is updated through Ajax and pulls information from sql server (a list of documents that the user can select one by one).As the user is selecting rows, I want them to be shown in the 2nd div (so the user can see what has been selected).
When a user selects a row I pass the data for that selection to a javascript function that updates the 2nd div with ajax. Obviously with this approach I can only send information for a single row (the one selected).
My doubt is, how can I keep track of all the items selected so the 2nd div can show all of them and not the only one that is being selected? Should I use cookies to save them? What other option I may have? Below an image of the application
Application layout:
Thanks in advance for the help
You have multiple options to save data that it is accessible from your client side application, but it depends on your current architecture. A few that come to mind:
Use localStorage if you want to persist the values on the same browser. This will not communicate with the backend: localStorage.setItem('selectedItems', JSON.stringify(selectedItemsArray));
Use a global variable namespaced by your application. For example: window.myApp = {}; window.myApp.selectedItems = [...]
Use indexedDB , a database that lives in your Browser.
Because you are using the ColdFusion framework, you may be limited in the options. This answer describes how to add application scoped variables.
Related
I recently came across a feature that Salesforce Applications have, i.e. when we log out, the tabs opened during the session are preserved and are displayed again when we log back in at a later point of time.
I would like to implement something similar in my web application where I would like to retain the dynamically created DOM elements so that if I refresh the page or logout, those elements still are displayed unless the end user decides to delete/close/destroy those elements.
Has anyone implemented anything that sounds familiar? If yes, what would be the ideal way to go about it?
Appreciate the help!
I have a webapplication that holds users and adresses as well as various different values. I have implemented a review function as a helper if you go through your data on an infrequent basis. It marks each value as reviewed or not. As this feature is only a helper and a review flag or timestamp is not needed and implemented in the DB, I save an array of data as a JSON string locally using localstorage.
This is enough for my case. You could do the same for your datamodell. You can of course also save this data per user on a separate table in the db. Consider something like: id, userid, featurename, etc.. with this generic layout you can save the state for each feature of your app, be it a tab, a modal, a setting or whatever.
Of course, you need a (preferably JS) function that gets these settings and then can recreate the DOM elements or fetch them via AJAX. You need as well a function that sends an AJAX request to save the information that a feature/window/tab has been opened/closed/etc.
A lot of work for a "nice feature". Might not be a top priority on your bucketlist, but definitly enhances your user experience.
I refresh the page or logout, those elements still are displayed
unless the end user decides to delete/close/destroy those elements.
That can only be possible if before refresh/logout those dynamically created elements are stored.
That can be possible by either storing the value in database or using local/session storage.
Values of the dynamically generated elements can be stored in localStorage like
localStorage.set('someKeyName' ,'value of dynamically generated Elements in string format')
Then after refresh retrieve the values and create those elements and append it to dom
We are using a third part web app which does not allow or have an API yet, this third party app is basically a membership registration website and each member belongs to a specific category.
I need to use these category in our internal system and so far I have been manually adding the category in a drop down menu of a form as soon as a new category in created in third party app.
Since there is no access to an api so I am wondering if it is possible to crawl the third party app where the dropdown menu is and copy the entire dropdown menu over to our internal site.
I wish i can show you the efforts I have made so far but I am stuck on how to even begin this. I did however search online but all I could find is how to copy a dropdown on a same page.
Any push to the right direction will really be helpfull, the technologies I am working with is PHP and JS
I don't think CORS is going to help you here, as it's function is to provide a legal/safe way of sharing web resources across different domains (i.e. images/css files/web fonts), not data.
If there is no API for the data you need, you are almost certainly limited to scraping the data out of the web page.
You can do this by first issuing a request for the page to obtain the html, then searching/parsing the html to find the drop-down menu, then finally parsing the menu items to obtain a list that you can use for your own drop-down.
So, some pointers:
Obtain page html - See PHP: how can I load the content of a web page into a variable?
Parse html - See PHP Parse HTML code
Of course how easy this ends up being depends on many factors, e.g.
Can you just request the page containing the drop-down, or does the
web app need authentication? You may need to refine the curl request
as appropriate.
Can you easily identify the html drop-down, e.g.
using a unique id tag. If so, you could use
DOMDocument::getElementById, otherwise you may need more complex
logic to parse the page html and find the menu.
Either way, it should be possible to achieve - just remember that the third-party app is not under your control, and as such may be subject to changes that break your program.
LATEST UPDATE:
Added in retrieval of value, and we hide parse warnings using internal_errors.
Here's a simple PHP script that will print out the text and value of each of the drop-down options:
<?php
libxml_use_internal_errors(true);
$html = file_get_contents('http://example.com/');
$domdoc = new DomDocument;
$domdoc->loadHTML($html);
libxml_clear_errors();
$menu = $domdoc->getElementById('tid');
$options = $menu->childNodes;
foreach ($options as $option) {
echo($option->nodeValue)." - ".$option->getAttribute('value')."<br>";
}
?>
I have been using JQuery and AngularJS. One requirement I had was to show/hide divs and other widgets based on the login user role. I implemented the solution as below:-
On page load, get role of logged in user and store as a global variable in javascript
Show complete page
Hide divs using simple if statements based on security role
Is this the best way? Isn't there some framework or library for this? Doesn't AngularJS have anything to help?
Btw I understand that server side security is a must in spite of controlling what widgets login user can see in browser.
You could look at something like Angular Schema Forms. This takes a JSON object and will render it out using templates as HTML.
Another approach would be to use a template for each widget and then check the role before retrieving the template. If the template isn't retrieved then your custom tags will remain empty and have no content.
if isAuthorized
get template
else
do nothing or remove the element (your call)
The benefit of the first is that your markup is generated from server side data and thus has the extra benefit of being more secure. The second will work as well however.
Do note that you can change ANYTHING in javascript including global variable and javascript code in client side, so your server CANNOT TRUST THE CLIENT.
It's fine if you want to show/hide div based on the global variable, but your server should NEVER use that global variable to determine user permission. And for the div's that are hidden, you should NOT populate them with data from DB, so even when client change the CSS, they can't see data that is not permitted. Not to mention they can always inspect the network to see what is inside the JSON returned.
Usually you don't need to store as global variable, though. If your user does proper authentication, you should verify his identity for every transaction (every ajax request) and return only relevant content. In Angular view you can do ng-if when data exists only.
I am creating a hybrid quiz application with AngularJS. I have below pseudo code,
index.html where user selects the quiz.
2nd page using ui-view Quiz is rendered and user selected options are stored in a global array (Should I use global here ?)
The values in array are compared with values in answer array (should answers array be global? This array is created by querying the database and on each new quiz this array has to change as this will select questions randomly.)
Will both the arrays be carried forward to the score view (when using them as local arrays or I need to to make them global or they will not be carried to next view?)
I am new to single page application and UI-Router so don't know how does it all work.
I don't think you should store user's selected options in Global variable because these aren't common variable to be used throughout the user session. You can save it in database when user redirects to 2nd page and retrieve on score view screen. Also, You may need this information in future to retain the user's records.
EDIT -
In case you can not store data in database and storing data at client side is only option then local storage can be used.
I have a simple (yet somehow convoluted) issue. Basically I'm adding items to make my web app more "desktop-like". For instance, right now I'm trying to get a page to dynamically load info into a DIV based on previously selected items. I'm currently using a cookie to handle saving the data, but I can't for the life of me get my brain to work this problem out.
I have a scenario with the following relationships:
SITE has_many BUILDINGS
BUILDING has_many METERS
METER
All entities can have associated charts. So, in an effort to make it generic, I set up a "has_many" relationship for each to CHARTS and abstracted it like so.
SITE has_many CHARTS, as chartable
BUILDING has_many CHARTS, as chartable
METER has_many CHARTS, as chartable
Once the user selects an item from the menu on the left, I then use a method to determine what item needs charts found and I display the particular item's charts. That all works fine.
My issue now is working with cookies in order to either save data to independent keys (or perhaps Marshal objects) in order to dynamically reload the previously selected item's data whenever the page reloads. The ajax call requires several values in order for the "update" action to find the correct item and display it. I'm having trouble with whether to use Javascript directly, try to trigger an action, or use some kind of combination.
As I said, I'm sure the issue is rather simple or straightforward, but I'm just not seeing it. If this description is a bit vague, I do apologize. Feel free to ask for more info.
Best
When the user selects an item from the menu, save all the necessary information to re-select that item to a cookie. Bind a Javascript method to the page load and check the value of that cookie. If the information is there indicating that an item should be preselected, just call the same Javascript method that is called when the user selects a new item from the menu. If you're using JQuery, for example, you might do something like this to bind to the page load:
$(document).ready(function() { /* check cookie and do stuff */ }
Another thing you could do is pre-render that stuff in your RoR code if that cookie exists so you don't immediately execute an AJAX call on page load (since that is sometimes considered bad form due to the page load performance hit).
This is too big for storing in cookies, you should either:
Store an id cookie client-side and store the data on the server-side which can be accessed with a corresponding id cookie and valid authentication credentials.
Use HTML5 client-side storage such as localStorage or a local database.