Question 1: Does the form action go on the bulk actions drop down or the entire page?
Depends. You can use both techniques but them you should take care of the consequences. If you assume it is a global (entire page), all the information will be available for all the rest of the page.
The usual practice so far is to figure out a way to keep your functionalities as separated and independent as possible. This is more about re-usability, maintenance, safety, etc. It is also a much better control of the effect of a change in a value: if global, many functionalities that depend on a single global value will be vulnerable to errors when that value change.
However the usual cycle of production is to start creating something that works, at least for the demo stages.
But eventually separating that functionality would be the most advised solution. This would ask you to have a better understanding of callback functions though, as well as some intuition about JS design patterns.
I am not using jQuery (not much experience with front end, really). I am learning A2. But I have found similarities between jQuery and (advanced) D3.js in many ways, so I guess you should keep in mind the following when working on your front end using jQuery:
If the variables are not global then you need ways to pass values between independent modules. You should also implement a solution that take in consideration the DOM hierarchy: value propagation, global sees all, methods inside global see local scope; nested functions see functions that come from functions above in the hierarchy plus local. Etc etc etc.
For passing values between functions that are not nested but are sibling modules which could be the case of having a menu separated from the list, you need to bind them using a technique similar to dispatching: taking the values of one of the modules to be presented to other modules that will respond to it. You control behaviour by using event handlers: if the dispatched value changes given an event, then trigger an action. This is of value if several sibling modules should respond to a change of a value in one of those modules.
This could show you a possible example using the “on” and “trigger” methods:
http://api.jquery.com/trigger/
You could also try to find a package.
Question 2: How can I pass the unique id of this to mongoose from the front end. I only want the items I selected to be reflected on this action.
First of all, you need to have those ids linked to your listed elements in the front end. So by the time you get the data used in the front end you also have the corresponding ids available somewhere.
Already in the front end, you need to create methods that collects the ids of those elements that are selected and then an API that update data accordingly. I would suggest event handlers in the front end to notify that the data has been selected. A simple mechanism that comes quickly to my head could be a loop that triggers after a “select” change is detected and find those that are selected in your list.
Once the data is collected, send the information through an AJAX post method to the server where an API will be receiving the data to store.
Be aware that you need to implement many actions on the collector so you can manage situations like deselecting elements.
I think the best think you can start investigating is SERVICES and RESTful design with jQuery. Here an example of a service package using jQuery:
For this, you will need to get into PROMISES. But it is likely that you can find older libraries focusing on callbacks although they are now competing against more modern approaches (eg. promises, Rx).
You can use simple jQuery calls too, eg.:
http://api.jquery.com/jquery.getjson/; http://api.jquery.com/jQuery.post/
You need on the server side to create API’s where the exchange of data will occur, and connect your front end and your back end through those points.
Hope I undestood your question and that this post helped you a bit?
