skip to Main Content

Good Morning,
I am new to Laravel and work on home project. Here i am trying to show the month name (12 month with year) in card which can be selected and then show the detail table showing the data for that selected month.
I get the month name in array and shown the same in card using for each loop. Now i want to select the card for any month and base on the id of that card (which is month+year) i need to get the data from database and show it in another table.
Here i am not able to get the card id for selected card (error – undefined).
below is the code

 <!--/ Card -->

    <div class="row">

      @foreach ($getmonths as $item )

        <div class="col-4 col-lg-2 mb-4">
          <div class="card maincard h-100 align-items-center getmonthsale">
            <a href="#" id="{{ $item }}" value ="{{ $getmonths[0] }}" name="{{ $item }}">
              <div class="row row-bordered g-0">

                <div class="card-header d-flex align-items-center justify-content-between pb-0 pt-3 mb-0">

                  <div class="card-title text-center d-flex align-items-center mb-0">
                    <h6>{{$item}}</h6>
                  </div>

                </div>

              </div>
            </a>
          </div>
        </div>

      @endforeach

    </div>

  <!--/ Card -->

code where i need to get the monthname and use to ajax for further action

 $(".getmonthsale").on("click", function(e) {
          e.preventDefault()
          var requested_to = $(this).attr("id")
          alert(requested_to);


          //$.ajax....
        })

image for ref.enter image description here

Thanks in advance.

2

Answers


  1. This does not work because the id is on the first child of the element you are selecting using jQuery $(this). you do what Kenneth said or get the first child and it’s id.

    var requested_to = $(this).children().first().attr("id")
    
    Login or Signup to reply.
  2. This should work as expected :

    HTML

    <div class="row">
        @foreach ($getmonths as $item)
            <div class="col-4 col-lg-2 mb-4">
                <div class="card maincard h-100 align-items-center getmonthsale" data-month="{{ $item }}">
                    <div class="row row-bordered g-0">
                        <div class="card-header d-flex align-items-center justify-content-between pb-0 pt-3 mb-0">
                            <div class="card-title text-center d-flex align-items-center mb-0">
                                <h6>{{ $item }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    

    javascript:

    $(".getmonthsale").on("click", function(e) {
        e.preventDefault();
        var requested_to = $(this).data("month");
        alert(requested_to);
        // $.ajax...
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search