CODEWITHSUNDEEP
javascriptphpajaxlaravel
dionajie
dionajie

Reputation: 404

Can't access javascript from partial view Laravel

I can't access javascript from partial view Laravel using AJAX load more paginate. View which created from load more ajax in partial view can't access btn-vote click function.

here's my simple's code :

index.blade.php 

@extends('layout')

@section('content')
  <div class="list-group" id="result"> 
    @include('dataview')
  </div>
@endsection

@section('js')
<script type="text/javascript">
$(document).ready(function() {
  function loadmore() {
    // doing load more data if end of page/page++
    // ajax to load data
    // return partial view 'dataview' with data from API
    // append to div id="result"
  }
  $('.btn-vote').off('click').on('click', function(e) {
      // button click and do ajax thing
      // return data
  });
});  
@endsection

my dataview.blade.php

@foreach($datas as $data)
<a href="#" class="list-group-item list-group-item-action">
  <div style="float: right;">
    <button type="button" class="btn btn-sm btn-vote" data-id={{$data->id}}>
      Vote | {{$data->count}}
    </button>
  </div>
</a>
@endforeach

And here's my ajax controller to load more data and create partial dataview 

public function load(Request $request) {
  $datas = Post::paginate(15);
   if ($request->ajax()) {
        $view = view('data',compact('datas'))->render();
        return response()->json(['html'=>$view]);
    }
  return view('index', compact('datas'));
}

Upvotes: 2

Views: 1798

Answers (2)

Ahmed Numaan
Ahmed Numaan

Reputation: 1062

Everything that resides inside document ready block below binds HTML elements on the web page with their respective event handlers. Newly added or dynamically generated HTML elements are not automatically bind by themselves to the event handlers that first executed in document ready block when the web page loaded for the first time.

$(document).ready(function() {

   //event bindings 

)}

To cope with this situation, we use event bindings in a slightly different style in JQuery as mentioned below:

$(document).on('click', '.btn-vote', function(e){

   //event handling goes here

});

In this way, newly added or dynamically generated HTML elements are automatically bind by themselves to their respective event handlers.

Upvotes: 0

Brian Lee
Brian Lee

Reputation: 18197

That's because your script which binds the click event is already loaded on the page, it doesn't know of new buttons with the btn-vote class. You need to bind the buttons after they are in the DOM. Wrap the click event code in a function that is called on the initial page load and after each loadmore:

$(document).ready(function() {
  function loadmore() {
    // doing load more data if end of page/page++
    // ajax to load data
    // return partial view 'dataview' with data from API
    // append to div id="result"
    bindButtons()
  }

  function bindButtons () {
      $('.btn-vote').off('click').on('click', function(e) {
          // button click and do ajax thing
          // return data
      });
  }

  bindButtons()
});

Upvotes: 2

Related Questions