use ajax response data in another javascript

Question

I want to use ajax response data in another javascript.

AJAX In view (sell_report.php)

    <script src="<?php echo base_url(); ?>public/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
                  $('.select_year_product').on('change',function () {
                         var select_year_product = $('.select_year_product').val();

                         $.ajax({

                            method : "POST",
                            url : '<?php echo site_url('sell_report/select_data_yearwise'); ?>',
                            data: { select_year_product:select_year_product },
                                success : function (data){
                                        alert(data);            
                                }

                         });                           
                    });
    </script>

Above is the ajax call here in i have to select product yearwise from database it's working fine. i got response in alert(data) in ajax response. Below is the my controller Code from here i got result.

Sell_report.php (Controller)

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Sell_report extends CI_Controller {
    public function select_data_yearwise()
    {
        $select_year_product = $this->input->post('select_year_product');
        $res_yearwise = $this->db->query("select * from product where year='$select_year_product'");
        $row_yearwise = $res_yearwise->result();
        print_r($row_yearwise);         
        exit();
    }
}

Now,

I want to use this reponse in another javascript which is in the same view where i write the ajax script.

The script in which i want the ajax response is explained below. This script is for dynamic graph i have to pass the values which i got in array of ajax response through for each loop.

<script type="text/javascript">
    var Script = function () {
    //morris chart

    $(function () {
      // data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type


      Morris.Bar({
        element: 'hero-bar',
        data: [
          {device: 'iPhone', geekbench: 136},
          {device: 'iPhone 3G', geekbench: 137},
          {device: 'iPhone 3GS', geekbench: 275},
          {device: 'iPhone 4', geekbench: 380},
          {device: 'iPhone 4S', geekbench: 655},
          {device: 'iPhone 5', geekbench: 1571}
        ],
        xkey: 'device',
        ykeys: ['geekbench'],
        labels: ['Geekbench'],
        barRatio: 0.4,
        xLabelAngle: 35,
        hideHover: 'auto',
        barColors: ['#6883a3']
      });



      $('.code-example').each(function (index, el) {
        eval($(el).text());
      });
    });
}();
</script>

EDIT with AJAX Response:

Array
(
    [0] => stdClass Object
        (
            [id] => 25
            [name] => Product 1 
            [handle] => Handle1
            [description] => <p>This is for Testing..!</p>
            [total_order_income] => 1420
            [type_id] => 19
            [brand_id] => 5
            [supplier_id] => 5
            [final_price] => 147
            [user_id] => 2
            [supplier_code] => 123456
            [sales_account_code] => 123456
            [purchase_account_code] => 123456
            [supply_price] => 100
            [markup] => 5
            [retail_price] => 105
            [tax_amount] => 42
            [quantity] => 50
            [status] => 1
            [dt_added] => 1472551929
            [dt_updated] => 1472551929
        )

    [1] => stdClass Object
        (
            [id] => 29
            [name] => Samsung 4G
            [handle] => Samsung 4G
            [description] => <p>It is very good phone</p>
            [total_order_income] => 1420
            [type_id] => 18
            [brand_id] => 6
            [supplier_id] => 1
            [final_price] => 121
            [user_id] => 2
            [supplier_code] => 100
            [sales_account_code] => 200
            [purchase_account_code] => 300
            [supply_price] => 100
            [markup] => 10
            [retail_price] => 110
            [tax_amount] => 11
            [quantity] => 0
            [status] => 1
            [dt_added] => 1472627773
            [dt_updated] => 1472627773
        )

    [2] => stdClass Object
        (
            [id] => 30
            [name] => Product 12
            [handle] => Handle
            [description] => Description
            [total_order_income] => 1420
            [type_id] => 0
            [brand_id] => 0
            [supplier_id] => 0
            [final_price] => 150
            [user_id] => 2
            [supplier_code] => Description
            [sales_account_code] => 123
            [purchase_account_code] => Description
            [supply_price] => 
            [markup] => 
            [retail_price] => 
            [tax_amount] => 
            [quantity] => 20
            [status] => 1
            [dt_added] => 1472628990
            [dt_updated] => 1472628990
        )

)

Here is x-axis i want product names and in y-axis i want total_order_income.

JWT · Accepted Answer · 2016-08-31 13:39:18Z

1

Create the bar chart. Morris.Bar(options) returns the bar chart object for future use so make sure to save a reference to it. (to update the data)
Hook up the year change event so that you do your AJAX request. If you do this after you create the bar chart and within the same scope, you can use the chart without creating a global variable for it. (yay for closures)
In the AJAX success callback, process the data to convert it into the correct format.

Still in the AJAX callback, call chart.setData(data) to update the chart.

/* Step 1 */
var bar_chart = Morris.Bar({
  element: 'hero-bar',
  data: [],
  xkey: 'device',
  ykeys: ['geekbench'],
  labels: ['Geekbench'],
  barRatio: 0.4,
  xLabelAngle: 35,
  hideHover: 'auto',
  barColors: ['#6883a3']
});

/* Step 2 */
$('.select_year_product').on('change',function () {
  var select_year_product = $('.select_year_product').val();
  $.ajax({
    method : "POST",
    url : '<?php echo site_url('sell_report/select_data_yearwise'); ?>',
    data: { select_year_product:select_year_product },
    success : function (data){
      /* Step 3: format data here */
      /* Step 4 */
      bar_chart.setData(data);
    }
  });                           
});

If you needed help with step 3 then I'll happily give some pointers but it would be helpful to provide some sample responses from the AJAX request.

Edit: JSON encoding the data before sending it makes more sense than parsing the print_r output:

public function select_data_yearwise()
{
    $select_year_product = $this->input->post('select_year_product');
    $res_yearwise = $this->db->query("select * from product where year='$select_year_product'");
    $row_yearwise = $res_yearwise->result();
    echo json_encode($row_yearwise);         
    exit();
}

Client side:

success : function (data){
  JSON.parse(data).map(d => /* extract the details you want here */ )
  /* Step 4 */
  bar_chart.setData(data);
}

edited Aug 31, 2016 at 13:39

answered Aug 31, 2016 at 10:59

JWT

4075 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bhavin Over a year ago

Ohk thank you so..much brother ... great i'm trying your logic. i'm editing my question with response of ajax. But i must say it's very nicely explained.

JWT Over a year ago

Now that you have edited your question to include the data which is being presented, I realise that you can just json_encode() the data before you send it (docs). That would probably be a cleaner solution than decoding the print_r'd lines using JS.

Collectives™ on Stack Overflow

use ajax response data in another javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related