logo
down
shadow

Changing aria-label for ascending and descending states on a sortable table with Jquery


Changing aria-label for ascending and descending states on a sortable table with Jquery

By : Ana Rahim
Date : November 22 2020, 02:42 PM
wish helps you Hi I am trying to change the aria-labels on a sortable column. I am using Jquery. I can get the label to change but I don't know how to change it so that the label will change based on whether it is ascending or descending. As of now it changes the label but when you click the the arrows it defaults back to the original label coming from the datatables jquery. ,
SOLUTION
code :
var table = $('#example').DataTable({
   "language": {
        "aria": {
            "sortAscending":  ": Activate to sort column ascending",
            "sortDescending": ": Activate to sort column descending"
        }           
   }
});


Share : facebook icon twitter icon
jQuery Sort both ascending and descending (Not a table)

jQuery Sort both ascending and descending (Not a table)


By : WendyK
Date : March 29 2020, 07:55 AM
I wish did fix the issue. Here's an example. I believe you only wanted the price, not rating. I've created a variable that helps keep track on the current status of the sort. Then it sorts ascending/descending depending on that.
I also moved your event bindings outside the html.
code :
<div class="tab-content">
    <div id="filters">
        <p>
            <a class="sortByRating" href="#" >Sort by Rating</a>
            <br>
            <a class="sortByPrice" href="#">Sort by Price</a>
        </p>
    </div>


    <div id="div_hotel_results" class="tab-pane active">
        <form id="hotel-form">
        ...
        </form>
        <div class="results">
            <div class="results-row">
                <h5>Riders Lodge</h5>
                <span class="label label-info price">$103.64</span>
                <span class="rating" data-rating="3.0">3.0</span>
            </div>

            <div class="results-row">
                <h5>Olina Lodge</h5>
                <span class="label label-info price">$99.64</span>
                <span class="rating" data-rating="2.5">2.5</span>
            </div>
        </div>
    </div>
</div>
var ascending = false;

$('.tab-content').on('click','.sortByPrice',function(){

    var sorted = $('.results-row').sort(function(a,b){
        return (ascending ==
               (convertToNumber($(a).find('.price').html()) < 
                convertToNumber($(b).find('.price').html()))) ? 1 : -1;
    });
    ascending = ascending ? false : true;

    $('.results').html(sorted);
});

var convertToNumber = function(value){
     return parseFloat(value.replace('$',''));
}
aria-label, aria-labelledby and aria-describedby: very unforeseeable behaviour in screenreaders

aria-label, aria-labelledby and aria-describedby: very unforeseeable behaviour in screenreaders


By : Nico
Date : March 29 2020, 07:55 AM
like below fixes the issue ARIA does not define how assistive tech are to expose UI. It does define how browsers are required to expose roles, states and properties via accessibility APIs. It's the same with HTML in general, the HTML spec does not define/require UI, that is left up to the browsers to decide. In the case of aria-label (for example) it is a requirement in ARIA that aria-label is mapped to the accessible name property in accessibility APIs, it is not a requirment that screen readers announce it, or not, on any given element (i.e. expose as part of the aural UI). General observed rule is that screen readers will announce accessible names and accessible descriptions on interactive elements. They will announce accessible names on most grouping elements and sectioning elements. They will announce neither on most text level elements.
Note: the above also applies to any element that has it's default semantics overidden with ARIA roles. For example ARIA widget roles will have both acc name and description announced, like native HTML interactive elements.
Ascending and descending order in table using in jQuery

Ascending and descending order in table using in jQuery


By : Bo Hu
Date : March 29 2020, 07:55 AM
hope this fix your issue Ascending and descending order in table using in jQuery, here is the JavaScript file. The error is: , You should check for null values
code :
return function (a, b) {
            var valA = getCellValue(a, index), valB = getCellValue(b, index)
            if(valA != null && valB!=null)
             {
               return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
             }
             else{
              return 0;
             }
        }
Changing collisionBitMask according to y value ascending or descending

Changing collisionBitMask according to y value ascending or descending


By : btogus
Date : March 29 2020, 07:55 AM
I wish this helpful for you Basically, what you want to do is to compare the current value to the value in the previous frame.
The easiest way to do this is to make a variable where you can store the previous value, and use that to do the comparison. Once you have done the comparison you store the current value in that variable to be used next frame.
code :
var lastY: CGFloat?

// in your function
if let lastY = lastY {
  if player.y > lastY {
    // player.y is increasing
  } else {
    // player.y is decreasing
  }
}
lastY = player.y
How to sort an hash Reference in perl by descending/ascending values and ascending/descending keys?

How to sort an hash Reference in perl by descending/ascending values and ascending/descending keys?


By : Valarie Mance
Date : October 14 2020, 09:38 AM
help you fix your problem Sort is using an expression to work out what order to sort things in, so it's not limited to just comparing one thing. In your case you want something like this...
code :
my @sorted_values = map $hey{$_}, sort {$hey{$b} cmp $hey{$a} or $a <=> $b} keys %hey;
Related Posts Related Posts :
  • Matched set results relative to another selector
  • How to increase jqgrid header checkbox size
  • Compile directive within controller and return html to DataTable's render function
  • how to change each consecutive div order?
  • Replace submit button value with ASCII character
  • Make mmenu expand to the current url
  • Uncaught TypeError: "#submitRates".click is not a functio
  • ACF Tag It Field and createTag
  • Original filename in case of error in jQuery File Upload
  • Cycle through an HTML list with jinja and jQuery?
  • jQuery Ajax triggering 2 events together from single click
  • jQuery UI draggable and sortable not working
  • jquery access dynamically generated form
  • Typeahead - Unable to use dynamically created array as source of data
  • Toggle other specific classes off when toggling one on
  • Sending var with load jquery
  • How to wrap all siblings in one class after a class? (jQuery)
  • Appending an object to serialized form data
  • how to replace jquery to jquery mobile
  • jquery show/hide buttons on same row not showing pretty - causing half hight during animation?
  • <select> change event doesn't work
  • jQuery hover/click on desktop and mobile devices
  • Use Jquery and FormData to submit form fields and uploaded File to Spring MVC Controller in Spring Boot App
  • Is there a smart way to simplify these jquery codes?
  • JQuery File Upload middleware - Image versions not creating
  • How to increase cookies storage limit(4096) in chrome
  • div on translating increases page width
  • How do I set shipping value depending on select & checkbox
  • jQuery change active state of multiple elements on page when different categories are selected
  • rails jquery script does not work when clicking link
  • Array of JQuery Selectors
  • how can I target with jquery this element?
  • Display default date based on time in jquery datepicker
  • Changing date format before binding JSON data to a jquery template
  • How to use load and open in same div
  • How to make position fixed div scroll horizontally?
  • save state the list on page refresh
  • Change the value of many Divs on select of drop-down
  • Background-image transition not working
  • http request inside another http request success response not working in jquery
  • jQuery hover is not working when I use display:none property of my input
  • Limit jQuery toggle to only affect one accordion
  • Changing div values when dropdown is selected
  • How to replace a list of images with jQuery?
  • jQuery Clone / Copy Style attributes of first td of Table to another Tables's first td
  • Why my select only get the last value?
  • fullpage.js multiple onLeave and afterLoad events
  • Insightly CRM Ajax API proxy
  • Highlighting the Menu Item for the Current Page Wordpress
  • Value change event is not firing in jquery
  • Add text after first element
  • My generic click event for anchors doesn't work
  • jQuery append - what am I doing wrong?
  • how to align jqgrid 4.10 column headers and data
  • Make image stay where it is
  • Rails jQuery-autocomplete client-side
  • Create array from xml nodes using jquery
  • Simple jQuery Each Function
  • multiple selectors with .removeAttr
  • How to automatically input a value in a text box based on another and vice versa?
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co