Redraw chart on click on a mobile browser using jquery

Question

I built two charts using dc.js here . For the second chart in the title you can see a dropdown with two options. After choosing either the chart redraws with the new data. Works fine on desktop. However, on mobile nothing happens. I use the following method:

HTML:

<div id='Line_chart_rate'>
      <strong>Daily Price of a Dollar in </strong>
      <select class = 'line-drop'>
        <option id = 'RUB'>Rubles</option>
        <option id = 'CAD'>Canadian Dollars</option>
      </select>    
</div>

JS :

// Events for the rate line chart dropdown menu
$('#CAD').on("click", function() {

    ... Update chart...

    return false;
})

$('#RUB').on("click", function() {

    ...Update Chart...

    return false;
    })

I looked around for a solution. After trying several methods including different hacks and variations of Jquery mobile, using html tags with reference to a javascript function, etc. I was not able to make anything work.

As I understand, the problem is that on mobile there are no mouse click events, but tap and slide events. As a result, I am looking for a way to register/catch that mouse click event, so that the graph updates on mobile. Here are the full html file and js file in case you want to look at the code. The jquery click functions are at the bottom of the js file. Thanks for your help.

Answer 1

I completely overlooked the type of handler you were using. If you're on mobile, clicking on an option won't trigger its click event, and it looks like this is also the case for desktop browsers. The only way I managed to to make the graph change with your existing code was by manually triggering the click events in the console, meaning that the listeners were set up correctly, but the browser doesn't trigger that event when you click on an option. Try changing your HTML and JavaScript to the following. These two snippets should hopefully work on all browsers.

HTML:

<select class="line-drop">
    <option value="RUB">Rubles</option>
    <option value="CAD">Canadian Dollars</option>
</select>  

JavaScript:

$('.line-drop').on("change", function() {
    if (this.value == "RUB") {
        //Update chart to show Rubles
    } else if (this.value == "CAD"){
        //Update chart to show Canadian Dollars
    }
});