Instantsearch.js: Sort By Dropdown Widget - Ability to change value programatically

[jvreeken]

I've configured separate replica indexes to sort by:
Date ascending
Date decending
Type ascending
Type decending
etc etc...

The dropdown UI shows up on the page and I am able to use it just fine.
however, when I try to change it programatically using jQuery it does not trigger a change.

What do I need to do to trigger the select widget to update the view?

Here is what I have tried:

search.addWidget(
    instantsearch.widgets.sortBySelector({
      container: '#sort-by-container',
      indices: [
        {name: 'templates', label: 'Sort By'},
        {name: 'templates_name_decending', label: 'Name Decending'},
        {name: 'templates_name_ascending', label: 'Name Ascending'},
        {name: 'templates_desc_decending', label: 'Description Decending'},
        {name: 'templates_desc_ascending', label: 'Description Ascending'},
        {name: 'templates_type_decending', label: 'Type Decending'},
        {name: 'templates_type_ascending', label: 'Type Ascending'},
        {name: 'templates_created_decending', label: 'Created Decending'},
        {name: 'templates_created_ascending', label: 'Created Ascending'},
        {name: 'templates_author_decending', label: 'Author Decending'},
        {name: 'templates_author_ascending', label: 'Author Ascending'}
      ]
    })
  );

and the jQuery to trigger my table header UI to update the select box:

//Sorting
search.on('render', function(){
function sortClick() {
        $('.half-visible').unbind('click');
        $('.half-visible:not(.active)').click(function() {
          $('.half-visible.active').removeClass('active');
          $(this).addClass('active');
          var sortBy = $(this).attr('data-sort-by');
          $('select.ais-sort-by-selector option[value='+sortBy+']').prop('selected', true);
          $('select.ais-sort-by-selector').val(sortBy).change();
          sortClick();
        });
      }
      sortClick();
});

Doing this does change the value of the select but doesn't update my view...
Is there something I need to do to tell algolia to re-render?

Please help :)

Here is the demo page I am working on so you can see it in action:
https://www.ui-demo.tazworks.com/admin/manage-templates/all

I'll try to put together a jsfiddle in a few to simplify my issue.

Maybe I'm just going about this the wrong way? Is this how sorting is supposed to function? is there an easier way that I am missing?

[jvreeken]

based on reading this:
https://github.com/algolia/instantsearch.js/issues/1431

It looks like I can't trigger the change event using jQuery?
I got it working by following the advice of the thread i mentioned above, although very complicated, it works:

//Sorting

      function sortClick() {
        $('.half-visible').unbind('click');
        $('select.ais-sort-by-selector option').unbind('input');
        $('.half-visible:not(.active)').click(function() {

          $('.half-visible.active').removeClass('active');
          $(this).addClass('active');

          var sortBy = $(this).attr('data-sort-by');
          var sortOption = $('select.ais-sort-by-selector option[value='+sortBy+']');

          var event; // The custom event that will be created
          sortOption.on('input', function(){
              if(document.createEvent){
                  event = document.createEvent("Event");
                  event.initEvent("change", true, true);
              }else{
                  event = document.createEventObject();
                  event.eventType = "change";
              }
              event.eventName = "change";

              if(document.createEvent){
                  document
                      .querySelectorAll('select.ais-sort-by-selector')[0]
                      .dispatchEvent(event);
              }else{
                  document
                      .querySelectorAll('select.ais-sort-by-selector')[0]
                      .fireEvent("on" + event.eventType, event);
              }
          });
          sortOption.prop('selected', true).trigger('input');

          sortClick();
        });
      }
      sortClick();

      function changeSort() {
        var sortSelect = $('select.ais-sort-by-selector');
        sortSelect.unbind('change');
        sortSelect.change(function() {
          var sortByVal = $(this).val();
          console.log('Changed to '+ sortByVal);
          $('.half-visible.active').removeClass('active');
          $('[data-sort-by='+sortByVal+']').addClass('active');
        });
      }
      changeSort();

[bobylito]

Hey there, thanks for opening this issue. There is a much simpler solution to that :) I'm not quite sure to understand what you're trying to achieve with the jQuery code, but I can help with how to programmatically update the index:

The search parameters are handled by a specific library called the Helper. One of this parameter is the index. In order to change the index, you just need to access the instance of the helper, modify the current index and trigger a new search. The best way to access the Helper is to create a new custom widget. In the widget you can do the rendering and DOM manipulation operations you need (like adding a new onClick handler to a specific element).

search.addWidget({
  init: function({helper}) {
    $('#someElement').click(function() {
      helper.setIndex('someIndex').search();
    });
  }
});

[jvreeken]

@bobylito thanks! that is a much much simpler solution! I found out about helper yesterday and was looking into using that. thank you for your help!