How to update url params when refreshing the partial.

[ravibhusal]

Hi, I have a page with a couple of divs rendering content asynchronously in the initial page load.

I also have a filter at the top of the page that when clicked is supposed to refresh the contents.

= render 'shared/filter'

= render_async scores_path(filter: "overall"), container_class: "filterable_report" do
     = render partial: 'loader'
     
= render_async metrics_path(filter: "overall"), container_class: "filterable_report" do
     = render partial: 'loader'

When a different filter is selected, I would like to refresh the partial by making call to the url with the updated filter param. I think the best way to go about this is by refreshing the partials perhaps. But I am confused on how to update the params value itself. I am aware, I can pass the params like this as well.

= render_async scores_path, data: { filter: 'overall' } do
   = render partial: 'loader'

So, is there a way to update the data or even the url when dispatching the refresh event? Thanks!

[ravibhusal]

Not sure how to go about this. I gave it a shot in #155. The idea is to set the data attributes before we trigger the refresh event which we will then merge with the existing data attributes.

So refreshing the partial with filters should work like this

<%= render_async comments_path,
                 container_id: 'refresh-me',
                 replace_container: false %>

<button id="refresh-button">Refresh comments</button>

<script>
  var button = document.getElementById('refresh-button')
  var container = document.getElementById('refresh-me');

  button.addEventListener('click', function() {
    var event = new Event('refresh');

    // Set the data attributes on the container
    container.setAttribute('data-filter_name', "happy");

    // Dispatch 'refresh' on the render_async container
    container.dispatchEvent(event)
  })
</script>

[nikolalsvk]

Hey @ravibhusal, thanks for opening the issue and the PR.

I'll check this in the coming weeks and come back to you.

I think that it might be better to pass the data on to the 'refresh' event somehow. I'll check it out.