CODEWITHSUNDEEP
jqueryhighcharts
eozzy
eozzy

Reputation: 68650

change value and run function on click

function ShowChart() {
    var fromDate = $("#fromdate").val().replace(",", "");
    var toDate = $("#todate").val().replace(",", "");
    var chartType = 'Customers'; // Revenue,Refunds,Customers,Purchases
    var chartURL = "<?php echo base_url() . 'merchant/GetChartData/'; ?>";
    chartURL += chartType + "/" + fromDate + "/" + toDate + "/";
}
// run it
ShowChart();

HTML:

<ul class="tabs">
    <li><a href="#Revenue">Revenue</a></li>
    <li><a href="#Refunds">Refunds</a></li>
    <li><a href="#Customers">Customers</a></li>
    <li><a href="#Purchases">Purchases</a></li>
</ul>

This the chart setup I have where I can show chart by changing the chartType manually, but I want to automate this so clicking on the link will update the chart.

I know href values can be read and stored with var str = this.href.split("#")[1]; but I'm not sure how to "change" the value of chartType and also "run" the function on each click?

Upvotes: 0

Views: 67

Answers (1)

Daniel Imms
Daniel Imms

Reputation: 50149

Try using .click() to attach the ShowChart function to the click event of each of the <a> tags using the .tabs a selector. Then simply set chartType to your split code.

function ShowChart() {
    var fromDate = $("#fromdate").val().replace(",", "");
    var toDate = $("#todate").val().replace(",", "");
    var chartType = this.href.split("#")[1]; // Revenue,Refunds,Customers,Purchases
    var chartURL = "<?php echo base_url() . 'merchant/GetChartData/'; ?>";
    chartURL += chartType + "/" + fromDate + "/" + toDate + "/";
}

// Attach event to every a under .tab    
$('.tabs a').click(ShowChart);

Upvotes: 1

Related Questions