CODEWITHSUNDEEP
ruby-on-rails
user1899082
user1899082

Reputation:

High level design for updating things on a page with Ajax

I have a side bar currently in ul and li elements seen in the picture below. And I have three charts on the right side of it. Each chart has its own REST web-service to update its data. When I click on the side bar items I want to update those charts. (Through Ajax calls)

enter image description here

What is the high-level design for this? For example do I need link_to on my li elements? What to put in there? How to pass params? How to make the calls? Any gems that makes the life easier?

Some high-level and even lower level design is appreciated so I know where to begin from.

Upvotes: 0

Views: 62

Answers (1)

Stuart Nelson
Stuart Nelson

Reputation: 4202

This is more an AJAX question than a rails question.

You need to add click handlers on the li's (jQuery is probably the easiest way to go) and have those send an AJAX request to your REST endpoints for the charts. Depending on your setup, I would recommend having those endpoints return the data you're looking for in JSON format and then updating the values in the charts (maybe go crazy and use d3js to draw them).

I'm guessing the REST endpoints need a physician_id or something in order for them to return the correct data, and you'll need to get this from somewhere. I usually just add the id as a data attribute on the element.

    <li class="js-physician" data-id="<%= physician.id %>">Physician X</li>

I'm assuming you're iterating over a @physicians collection to get the list.

Then for your js do something like

    $(document).on('click', '.js-physician', function(e) {
      var physician_id = e.target.getAttribute('data-id');
      params = { // this is your AJAX object
        type: 'GET',
        url: '/some_rest_url?physician_id=' + physician_id,
        success: function(data) {
          // update the charts with the returned data
        },
        error: function(jqXHR, textStatus, errorThrown) {
          // handle error
        }
      };
      $.ajax(params);
    });

so all you have to do then is set up your callback handlers and make sure you're sending the right data.

Upvotes: 1

Related Questions