Q: How to toggle data-order ?

[vhanahrni]

With the following html :

<select id="select1" class="jplist-select" data-control-type="sort-select" data-control-name="sort1" data-control-action="sort">
   <option data-path="default">Sort by</option>
   <option data-path=".weight" data-order="desc" data-type="number">Weight</option>
   <option data-path=".price" data-order="desc" data-type="number">Price</option>
</select>

<button id="order1"></button>

How can you toggle the sorting order ? The goal is to use the select for selecting data-path only and a separate button to toggle the sorting order.

[1rosehip]

Unfortunately it's not possible out of the box. As a workaround you may create a hidden select control with the ASC options (or any other that you need). Then create a toggle button and once it's clicked you may trigger a needed option with jquery.

[vhanahrni]

I'm not so far from having this done but having issue. Hope you can help. Ok, Using this select I trigger some sort buttons

<!-- sort selector 1 -->
<select id="selectsort1" class="jplist-select">
        <option value="">Sort by</option>
        <option id="price" value="price-desc-1">Price</option>
        <option id="set" value="set-desc-1">Set</option>
</select>

$('#selectsort1').change(function(){

    $childchange=$('#order1').children('i');

    var selectedItem = $(this).val();
    if (selectedItem) {
        $('#sortgroup1').find('button[id="' + selectedItem + '"]').trigger('click');
            $childchange.removeClass("fa-angle-up");
            $childchange.addClass("fa-angle-down");
    }

});

<!-- sort toggle 1 -->
<button id="order1"><i class="fa"></i></button>

<!-- sort buttons group 1 -->
<div id="sortgroup1" class="jplist-box" data-control-type="sort-buttons-group" data-control-name="sort-buttons-group-1" data-control-action="sort" data-mode="single">

    <button id="set-asc-1" name="set" class="jplist-drop-down" data-path=".set" data-group="group1" data-type="text" data-order="asc" data-selected="false">
        <i class="fa fa-sort-alpha-asc"></i>
        Sort by Set AZ
    </button>

    <button id="set-desc-1" name="set" class="jplist-drop-down" data-path=".set" data-group="group1" data-type="text" data-order="desc" data-selected="false">
        <i class="fa fa-sort-alpha-desc"></i>
        Sort by Set ZA
    </button>

    <button id="price-asc-1" name="price" class="jplist-drop-down" data-path=".price" data-group="group1" data-type="number" data-order="asc" data-selected="false">
        <i class="fa fa-sort-alpha-asc"></i>
        Sort by Price ASC
    </button>

    <button id="price-desc-1" name="price" class="jplist-drop-down" data-path=".price" data-group="group1" data-type="number" data-order="desc" data-selected="false">
        <i class="fa fa-sort-alpha-desc"></i>
        Sort by Price DESC
    </button>

</div>

But having issue with multiple data-attribute selector. To trigger I need to select the element by multiple attribute like data-path, data-order and I don't know why : I can't trigger using a selector with multiple attributes. The console doesn't show any error. This just doesn't work --'

$('#order1').click(function() {

    $child=$(this).children('i');

    // current sort button selected in sort group 1 -- return data-path
    var sortpath1 = $('#sortgroup1 .jplist-selected').attr('data-path');

    // current sort button selected in sort group 1 -- return data-order
    var sortorder1 = $('#sortgroup1 .jplist-selected').attr('data-order');

    if (sortorder1 == 'asc') {
        $child.removeClass("fa-angle-up");
        $child.addClass("fa-angle-down");

        // This doesn't click any button
        $('button[data-path="' + sortpath1 + '"] [data-order="desc"]').trigger('click');

        // This work but click all buttons that have data-path equals to sortpath1
        $('button[data-path="' + sortpath1 + '"]').trigger('click');

    }
    else if (sortorder1 == 'desc') {
        $child.removeClass("fa-angle-down");
        $child.addClass("fa-angle-up");

        // This doesn't click any button
        $('button[data-path="' + sortpath1 + '"] [data-order="asc"]').trigger('click');

        // This work but click all buttons that have data-path equals to sortpath1
        $('button[data-path="' + sortpath1 + '"]').trigger('click');
    }

});

To retrieve state on page load I use this

$(window).load(function() {

    // toggle button 1
    $childload=$('#order1').children('i');

    // current sort button selected in sort group 1 -- return data-order to add coresponding class to the toggle button
    $sortorder1 = $('#sortgroup1 .jplist-selected').attr('data-order');

    if ($sortorder1 == 'asc') {
        $childload.addClass("fa-angle-up");
    }
    else {
        $childload.addClass("fa-angle-down");
    }

    // get the name of the current sort button selected in sort group 1
    $name = $('#sortgroup1 .jplist-selected').attr('name');

    // select the option which have id = $name
    $('#selectsort1 option[id="' + $name + '"]').prop('selected', true);

});

[vhanahrni]

Well I got an answer at stackoverflow. I forgot to remove the space between the attributes.

[1rosehip]

I'm glad that this issue is solved. Please close the issue.