Can't access javascript from partial view Laravel

Question

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'));
}

[SOLVED] Use $('#results').off('click').on('click','.btn-vote', function(e) {}); instead above — user 1928333
– user 1928333, Commented Jul 22, 2018 at 9:43
We don't do the "solved" thing here. Just accept the answer that solves the problem and the page will mark it as answered — apokryfos
– apokryfos, Commented Jul 22, 2018 at 10:10
Please read How does accepting an answer work?. Don't edit the word SOLVED into the question. — Quentin
– Quentin, Commented Jul 22, 2018 at 11:04

Brian Lee · Accepted Answer · 2018-07-22 09:42:51Z

2

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()
});

answered Jul 22, 2018 at 9:42

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

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

1 Comment

user 1928333 Over a year ago

Thanks @DigitalDrifter! i will try to use your solution too. [SOLVED]

Ahmed Numaan · Accepted Answer · 2018-07-22 11:00:21Z

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.

Collectives™ on Stack Overflow

Can't access javascript from partial view Laravel

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related