CODEWITHSUNDEEP
laravel
Rahul W
Rahul W

Reputation: 195

Changing the text value after ajax success with with ajax data

Good Morning. I am self leaner and working on home project. I stuck and need help for how to change the text values with ajax success data per values selected from drop down menu.

Code for Text

<div class="card-title mb-0">
    <h5 class="card-title m-0 me-2">Milk Sell Statistics</h5>
    <small id="filter" class="text-muted">For : &nbsp;{{$yesterday}}</small>
</div>

<div class="dropdown">
   <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" 
                  id="growthReportId" data-bs-toggle="dropdown" aria-haspopup="true" aria- 
                   expanded="false"> Yesterday
   </button>
   <div  id="milkstatementdropdown" name="milkstatementdropdown"class="dropdown-menu dropdown- 
          menu- end" aria-labelledby="milkstatementdropdown">
       <li><a class="dropdown-item" href="#Yesterday" id={{$yesterdaydate}} data- 
            order="a">Yesterday</a></li>
       <li><a class="dropdown-item" href="#Last7Days" id={{$last7daysdate}}>Last 7 Days</a> 
       </li>
       <li><a class="dropdown-item" href="#currentmonth" id={{$currentmonthstartdate}}>Current 
       Month</a></li>
   </div>
 </div>

here need to change "{{$yesterday}}" as per ajax data duration like " for 7 days / for 15 days "

ajax code

$(function($) {
        $('.dropdown li a').click(function() {
            var element = $(this);

            var selectedperiod = element.attr("id");
            //alert (selectedperiod)


            $.ajaxSetup({
              headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')} });

                $.ajax({

                          type: 'post',
                          url: '/milksalereportchangevalues',
                          data: {
                                  inputdate : selectedperiod,
                                },

                          success: function(data) {

                                    alert (document.getElementById(["filter"]))



                                    $('#filter label').text('my text');

                                  }
                        })
            });

        });

data showing in network preview is

["2022-12-19", "2022-12-25", "215.00", "168.00", "91.50", "474.50"]

0 : "2022-12-19" 1 : "2022-12-25" 2 : "215.00" 3 : "168.00" 4 : "91.50" 5 : "474.50"

Thanks in advancefor your help

Upvotes: 0

Views: 90

Answers (1)

Senthil
Senthil

Reputation: 2246

Suggestion:

When sending response from server, send it as key value

{"2022-12-19" : "somevalue",  "2022-12-25": "some value"}

code snippet to read and render

const today = new Date() ; ;
const yesterday = new Date(today)

yesterday.setDate(yesterday.getDate() - 1)
yesterday.toDateString();  
let yestStr = yesterday.getFullYear() +'-' + (yesterday.getMonth() + 1) + '-' +  yesterday.getDate() ;

console.log(yestStr);

$('#filter').text(data[yestStr]);

Upvotes: 1

Related Questions