如何使用js更新刀片laravel中的foreach变量 [英] How to update variable on a foreach in blade laravel with js

查看:58
本文介绍了如何使用js更新刀片laravel中的foreach变量的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个页面,可加载数据库中可用的文件夹和文件:

I have a page which loads both folders and files available on my database :

就像您在图片中看到的那样,第一次加载的文件会使用以下代码加载所有文件夹中的所有可用文件:

Like you can see in the picture, files loaded on a first time load all the files availables on all folders with the following code :

public function index(){
        $folders = Folder::where('user_id', '=', auth()->id())->get();
        $data = collect();
        $filator = collect();

        // loop around the folders
        foreach ($folders as $f){
            $files = DB::table('files')
                ->where("folder_id",'=',$f->id)->count();
            // loop around the files in all folders
            foreach ($f->file as $filatov){
                $filator->push([
                    'fname' => $filatov->path,
                    'id_file' => $filatov->id
                ]);
            }

            $data->push([
                'id' => $f->id,
                'name' => $f->name,
                'count' => $files,
            ]);
        }

        return view('pages.folders',['data'=>$data,'filatov'=>$filator]);
    }

一切正常,但现在我想在每个示例中单击眼睛"按钮.按钮,我显示存储在特定文件夹中的文件,在以下代码中,我可以使用以下代码获取文件:

Everything is working fine, but now I want per example on clicking on the "eye" button I show the files that are stored on a specific folder, on the following code I can get the files with the following code :

public function getFiles(Request $request){
        $folder = Folder::find($request->id);
        $filator = collect();

        foreach ($folder->file as $filatov){
            $filator->push([
                'fname' => $filatov->path,
                'id_file' => $filatov->id
            ]);
        }

        return response()->json($filator);
    }

我可以像这样用Ajax Request来操纵它:

and I can manipulate it with Ajax Request like that :

$("#getfolder").click(function(e){
            $.ajax({
                url: "{{route('get.files')}}",
                method: "get",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data: {id:$('#getfolder').val()},
                success: function (data) {
                    alert(data[0].fname)
                }
            })
        });

我可以得到结果:

现在,我想知道现在是否可以仅使用JS更新变量$ filatov,因为我可以从该代码中的请求中获取数据,因此可以在单击时显示特定文件夹中的文件:

Now, I wanna know if I can update the variable $filatov only with JS now that I can get the data from my request in that code so I can display files from specific folders on click :

<div class="row">
                @foreach($filatov as $d)
                    <div class="col-md-6">
                        <div class="card mt-1">
                            <div class="card-content py-50 px-1 folder-info">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span><i class="feather icon-file-text font-medium-5"></i></span>
                                </div>
                                <div class="row align-items-center">
                                    <div class="col-md-10">
                                        <h6 class="font-medium-2 mb-0">{{$d['fname']}}</h6>
                                    </div>
                                    <div class="col-md-2">
                                        <button value="{{$d['id_file']}}" type="button" id="download" class="btn btn-sm btn-icon btn-success waves-effect waves-light"><i class="feather icon-download"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

在此先感谢您的帮助!

推荐答案

由于@Swati,我终于找到了无需使用Ajax而仅使用jquery的方法,所以您必须使用类和ID:

I finally find the way to do that without using Ajax but only jquery thanks to @Swati, so you have to work with classes and ids :

@foreach($filatov as $d)
    <div class="col-md-6 folder" id="test{{$d['id_folder']}}" style="display: none">
        <div class="card mt-1">
            <div class="card-content py-50 px-1 folder-info">
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <span><i class="feather icon-file-text font-medium-5"></i></span>
                </div>
                <div class="row align-items-center">
                    <div class="col-md-10">
                        <h6 class="font-medium-2 mb-0">{{$d['fname']}}</h6>
                    </div>
                    <div class="col-md-2">
                        <button value="{{$d['id_file']}}" type="button" class="download btn btn-sm btn-icon btn-success waves-effect waves-light"><i class="feather icon-download"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

JS代码:

$(".getfolder").click(function(e){
   var id = $(this).val();
   var target = '.folder';
   $(target + '#test' + id).css('display', 'block');
   $(target).not('#test' + id).css('display', 'none');
});

这篇关于如何使用js更新刀片laravel中的foreach变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆