web-dev-qa-db-ja.com

AJAX Laravel

_posts.blade.php_に含まれる_home.blade.php_というビューがあります。

_<div id="posts">
    @foreach ($posts as $post)
        <div class="list-item clearfix">
            <div class="content">
                <img src="{{ URL::to($post->thumbnail) }}" alt="" />
                <h1>{{{ $post->title }}}</h1>
            </div>
            <div class="score">{{ $post->rating }}</div>
        </div>
    @endforeach
    <div id="pagination">{{{ $posts->links() }}}</div>
</div>
_

ユーザーが特定の投稿を検索すると、コントローラーのpostSearch()関数がJSON応答を返します。

_function postSearch() 
{
    $posts = $posts->select(...)->where(...)->orderBy(...)->paginate(5); //Search posts

    return Response::json(View::make('includes.posts', ['posts' => $posts])->render());
}
_

そしてjQueryは_#posts_ divにHTMLを追加します：

_$('#search').submit(function(e) {
    e.preventDefault();
    var form = $(this);

    $.post(form.attr('action'), form.serialize(), function(data) {
        $('#posts').html(data);
    });
});
_

これは完璧に動作します。しかし、ページネーションのリンクをクリックすると、ページがリロードされ、検索結果が表示されなくなります（自明です）。これらの投稿にページ番号を付けるにはどうすればよいですか？ this 、 this および this の記事を読みましたが、実装方法がわかりません。

編集

これは、これまでのページネーション用のjQueryです。

_$('#posts').on('click', '.pagination a', function(e) {
    e.preventDefault();
    var url = $(this).attr('href'),
        page = url.split('page=')[1],
        data = $('#search').serializeArray();

    data.Push({page: page}); // Add page variable to post data
    console.log(data);

    $.post($('#search').attr('action'), data, function(data) {
        $('#posts').html(data['posts']);
    });
});
_

これは、ページネーションリンク（ページ2）をクリックするとデータが送信されます。

enter image description here

残念ながら、何も起こりません。ページ1の投稿は引き続き表示されます。

jqueryajaxsearchlaravelpagination
9
JasonK

私はLaravelのページネーションにあまり詳しくありませんが、リストしたリンクから判断するとそれほど難しくはありません。このコードはテストされていません...

$('#pagination a').on('click', function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    $.post(url, $('#search').serialize(), function(data){
        $('#posts').html(data);
    });
});

更新

ページ付けリンクが間違っている場合（OPの場合のように）、自分でURLを作成する必要があります。
必要なURLを取得して追加するだけです?page=#numberに。

// page being the page number stripped from the original link
var url = $('#search').attr('action')+'?page='+page;
9
lukasgeiter

Hrefクリックのデータを取得するために次のjsを使用しています。

// Your Local url 
var Url = 'laraveltestproject/laravelpagination';

$('#ajaxContent').load("Url");

$('.pagination a').on('click', function(event) {

    event.preventDefault();
    if ($(this).attr('href') != '#') {
        $('#ajaxContent').load($(this).attr('href'));
    }
});

完全な例については、 http://www.tutsway.com/laravel-ajax-pagination-example.php にアクセスしてください。

1
Manish

ブログへの投稿の例、削除ボタンでのページネーションのリロードを解決：（単純なforeachですが、パネルとボタンにIDを、ボタンにクラスを指定し、$ post-> idを使用してすべてを定義する必要があります）

最後の秘訣は、pagination（）を使用するビュー/コントローラーを呼び出すことではなく、必要に応じてJavaScriptでビューを変更することです。

      @foreach($posts as $post)
    <div id="panel{{$post->id}}" class="panel panel-default">
      <div class="panel-body">
        {!! $post->content !!}
      </div>
      <div class="panel-footer">
        <span class="label label-default"><span class="glyphicon glyphicon-time"></span> creado {{$post->created_at->diffForHumans()}}</span>
        <span class="label label-default"><span class="glyphicon glyphicon-time"></span> modificado {{$post->updated_at->diffForHumans()}}</span>
        <span class="label label-success">autor: {{ imagica\User::find($post->user_id)->name}}</span>
        @if(Auth::user()->id === $post->user_id)

          <form method="post" style="position:relative; top:-25px;">
            <button class="btn btn-danger btn-sm pull-right destroy" id="{{$post->id}}" type="button" >eliminar</button>
          </form>

          <form action="{{ action('PostsController@edit', $post->id) }}" method="get" style="position:relative; top:-25px;">
            <button class="btn btn-warning btn-sm pull-right" type="submit" >Editar</button>
            {{-- {{ csrf_field() }} --}}
          </form>
        @endif
      </div>
    </div>
  @endforeach

最後にjavascript：

$(function(){
$(".destroy").on("click", function(){
  var vid = $(this).attr("id");
  var v_token = "{{csrf_token()}}";
  var parametros = {_method: 'DELETE', _token: v_token};
  var archivo = "http://imagica.app/posts/" + vid + "";
  $.ajax({
     type: "POST",
     url: archivo,
     data: parametros,
     success: function(data){
       $('#panel'+ data).hide();
       location.reload();
     }
  });
});
});

コントローラの破棄関数では（$ post-> idをデータとしてajaxに送信することに注意してください。これは、削除する投稿のパネルを非表示にするセレクタを定義するために使用されます）：

    public function destroy($id)
{
  $post= Post::find($id);
  $article_id= $post->article_id;
  $article= Article::find($article_id);
  $msg = session()->flash('message', "Post eliminado.");
  $post-> delete();
  $data= $post->id;
  return $data;
}

JavaScriptの最後の関数「location.reload（）」は、フラッシュメッセージを充電するためのものです。

1
Raul Fernandez Marques

私は仕事に最適なツールを持っています。このリポジトリをチェックしてください https://github.com/themightysapien/ajaxtable

非常に使いやすく、特にlaravel用に作成されたドキュメントをお読みください。次の例のように、結果を返すだけです。

return Response::json(array(
              'data'=> View::make('only_table_row_view', compact('collection')->render(),
              'pagination'=>(string) $collection->links()
              ));

必要なファイルが追加されます

<link rel="stylesheet" href="css/ajaxtable.css">
<script src="js/plugins.js"></script>
$(".yourtable").ajaxtable();

テーブルのdata-requestUrl属性を使用してajax urlを初期化します。 id = "paginationWrapper"divを、ページネーションを表示するページに追加します。

問題がある場合は、ローカルサーバーでリポジトリを実行し、htmlマークアップとプラグインオプションのソースを確認してください。

1
themightysapien