I am having trouble with one thing in my app. After my teacher logs in, he should be able to offer some reservation times for offering classes. After he clicks on the date under date-picker is rendered my custom time component with a checkbox. Then he should decide if he wants to have the class in that particular time and if not he will uncheck this box and save it(send new information to the server, with updated time that he is able to have classes). But I don't really know how to find out which checkboxes are really checked and how can I send the only array with checked times. Added pictures will describe it better. In the picture, I want only send those checked times to the server.
I suggest you to store the checkboxes inside an other div element.
Programatically you could get that div element, and can get trough its childs.
For every child check if it is checked, if checked send it to the server, if not checked do not send it. If you want to send it to the server only once, store the data in an array, then send the array to the server.
Related
Right now I'm building a team based project with Node.js/MySQL/React and have been stuck at a ToDo list part. I would like to know what is the recommended or fastest way how to save data or options to database automatically and without any submit button on each row.
Todo item
You could do a single POST when adding a new row, and whenever you change the options you could do a PUT request, but as a general design rule I'd advise against it : you want to be able to review all your changes before committing them to the database, plus this requires a lot more requests, hence more controllers rather than just having one.
Looking at your screenshot why don't you have a single submit button at the bottom of the table ?
I have multiple checkboxes e.g. 50 in my SPA that I show on one of the views. The user can select/unselect any number of checkboxes and then click on save.
Send http request on every change on checkbox
Send all the data bound to checkboxes on save regardless of whether user changed something or not
Send only the changed data bound to checkboxes (dirty checking? diffing on save?)
This is my question. I have a login for a user. Many users can log in with same credentials. When user/s log in, they see a set of radio buttons. Lets say User A, User B and User C log in at the same time. When User A selects some of the radio buttons, User B and User C should also see them selected in their pages. (and vice-versa) If User B changes a selected radio button again, User A and User C should get that updated value in their pages. Like this most recent selections should be visible in all pages. Please help me solve this.
I've done a similar setup awhile back, when user switches department view, all open pages of the application prompt him about the change and switch to the active department view.
I did it as follows.
Stored desired variables in user session. In your case, since you need this available across multiple users, session won't do - store it in a database or flat file. These variables are updated on radio onChange event in your case.
Make the following JS available to relevant pages. Note, I used onFocus since that was I needed, you may need to use setInterval()
window.onfocus = function(e) {
var_check();
};
function var_check(){
$.ajax({
url: 'home/check_vars_ajax',
type:'POST',
dataType: 'text',
data : {[YOUR DATA]}
}).done(function(data){
// ...
// handle selecting releavant radio buttons here
});
}
To summarize:
Write your radio selection to DB or flat file (via AJAX)
Setup a heartbeat call to check current status on the server (AJAX)
Update radio selection accordingly
Well another way to do it would be to go for WebRTC which basically allows you to screen share the users page and show the results on the other users or vice versa. It has very neat API and there are lot of samples that you can check out. Tutorials are available and their homepage itself is a good starting point
But with regard to your particular problem, I cannot give you a clear answers as the question itself is little broad(in my opinion). So check it out and hope it helps.
You can do it with a simple database query. How it works is, when someone logs into a page, it grabs a variable from a database row. At a set time, the page queries the database. if the value has changed in the database, update that row by one. the other pages will query at your set interval, and update the page with AJAX. It is a nifty way to update all pages at once. Here is a tutorial in this.
AJAX auto refresh
You can see a modified example on my request box on this page
AutoRoxx Radio
It is easily modified. Basics are there.
I want to know what is the best way to store and retrieve datas only after clicking the back button Browser ?
In my case, you have a list of items (different for each categories I have on my website) that appends in angularJS with the ng-repeat directive, and you can filter these items by clicking on the checkbox inputs. Obviously, each checkbox has a specific value corresponding to a filter.
When the user click on an item, it redirects you to an article (such as a blog post).
May be the user doesn't like this blog post so he clicks on the back button of his browser to go back to the item list.
But for now, I don't store checkbox tags that have been checked before and the items filtered.
I try with localStorage and sessionStorage in JS but datas are too persistants with this method.
I could make a trick like retrieving the datas if the REFERER matches with a specific url pattern, but it seems to be too tricky..
So any of you has a better idea ?
Thanks in advance.
You can use the state object for this purpose. This one is accessible via history.state and will change when a user navigates to somewhere. It will also be restored when using back button etc. It is can be seen as a storage object that is linked directly to the url.
Say I have a website which shows the user ten images and asks them to categorise each image by clicking on buttons. A button for "funny", a button for "scary", a button for "pretty" and so on. These buttons aren't exclusive. A picture can be both funny and scary.
The user clicks the "funny" button. An AJAX request is sent off to the database to mark that image as funny. The "funny" button lights up, by assigning a class in the DOM to mark it as "on".
But the user made a mistake. They meant to hit the next button over. They should click "funny" again to turn it off, right?
At this point I'm not sure whats the most efficient way to proceed.
The database knows that the "funny" flag is set, but it's inefficient to query the database every time a button is clicked to say, is this flag set or not, then go on with a second database call to toggle it.
Should I infer the state of the database flag from the DOM, i.e. if that button has the class "on" then the flag must be set, and branch at that point?
Or would it be better to have a data structure in Javascript in the page which duplicates the state of each image in the database, so that every time I set the database flag to true, I also set the value in the Javascript data to true and so on?
I would keep the state of the element in the js on the page and just issue state-change requests via Ajax. On the server side it is reasonable to either process directly or introduce a state validation check.
This depends on various aspects of your system architecture, however. If the rating is shared between users or other similar scenarios you may need to enforce the round-trip to check what the current status is (or if you have additive nominal flags)...
The page state should be plenty. After all, the page state is what the user sees and manipulates; and they expect the result of their manipulations to reflect what they see.