jQuery + mongoDB: Selected Items POST to route; RESTful solution for frontend + backend?

​I have a dropdown with actions.

<form action="">
    <span class="checkbox d-inline-flex flex-items-md-middle"><input type="checkbox" id="checkAll"> <span>Select All</span></span>
    <div class="btn-group pl-1">
        <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Bulk Actions
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#"><i class="fa fa-check" aria-hidden="true"></i> Accept</a>
            <a class="dropdown-item" href="#"><i class="fa fa-ban" aria-hidden="true"></i> Decline</a>
            <a class="dropdown-item" href="#"><i class="fa fa-calendar-times-o" aria-hidden="true"></i> Expired</a>
            <a class="dropdown-item" href="#"><i class="fa fa-cart-arrow-down" aria-hidden="true"></i> Paid</a>
            <a class="dropdown-item" href="#"><i class="fa fa-file-excel-o" aria-hidden="true"></i> Export to Excel</a>
            <a class="dropdown-item" href="#"><i class="fa fa-trash-o" aria-hidden="true"></i> Delete</a>
        </div>
        <button type="button" class="ml-2 btn btn-sm btn-outline-primary">GO</button>
    </div>
</form>

On my route I have a list of items with a checkbox.

<% gifts.forEach((gift) => { %>
   <tr>
       <td><input type="checkbox" class="check"></td>
       <td>...</td>
   </tr>
<% } %>

The objective I want is if I have an item ‘selected’ with the checkbox, but how to I get the id from the frontend and PASS the data it needs on the post? When I do a Check All

  /* Select All */
  $('#checkAll').click(function () {
    $('.check').prop('checked',
      $(this).prop('checked'));
  });

thats my jQuery. Does the whole page need to be in the form or just the action dropdown?

Hi @imcodingideas,

Are those 2 questions or just one? Can you please clarify a bit more?

1 Like

Hey, sure. Thanks for taking the time to look at my post. Sure, let me clarify. So my index route has a list of all the items there. So say I select 2 of the items from this list. In my ‘bulk actions’ I have for the sake of simplicity: delete

Question 1: Does the form action go on the bulk actions drop down or the entire page?
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.

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?

1 Like

Hello, what an amazing post. There is a lot of information here to digest, and I need to consider my options as currently I’m not using an api. I’m just doing a res.render() for the ejs and not a res.send(allUsers)

What I also am going to do is just wrap the page content in the form tag because the action button i.e. (go) needs to be in the form with the page content with the data that I’m sending. There is a lot here…but what I can do is maybe build an array of those ids and pass it on the post.