So verwenden Sie variable Daten nach Ajax Call Success - Laravel

Question

Ich habe einen kleinen Dateimanager erstellt, um meine Dateien zu verwalten. Auf der einen Seite wird die Ordnerstruktur dank JsTree angezeigt. Auf der rechten Seite möchte ich, dass basierend auf dem Klick auf den linken Ordner die Dateien in diesem Ordner angezeigt wurden. Beim Klicken wird ein Ajax-Aufruf ausgeführt, der die selectFiles-Methode aufruft, um die Routen zu durchlaufen. Jetzt in der Konsole sehe ich die korrekten Daten, aber ich weiß nicht, wie man es in foreach im Blatt benutzt.

AJAX:

// chiamata Ajax per selezionare files in base all'id 
$('#treeview').on("select_node.jstree", function (e, data) { 
    var id = data.node.id; 
    $.ajax({ 
     type: 'POST', 
     url: 'archivio_documenti/+id+/selectFiles', 
     data: {id:id}, 
     success: function(data) { 
      console.log('Succes!',data); 
     }, 
     error : function(err) { 
      console.log('Error!', err); 
     }, 
    }); 
}); 

DocumentiController.php:

/** 
* Selzionare files in base all'id della cartella 
*/ 
public function selectFiles(Request $request){ 
    try{ 
     $id = $request->id; 
     $files = \App\Documento::where('cartella_id',$id)->get(); 

     return response()->json(compact('files')); 

    } 
    catch(\Exception $e){ 
     echo json_encode($e->getMessage()); 
    } 
} 

Route:

Route::post('archivio_documenti/{id}/selectFiles', 'DocumentiController@selectFiles'); 

Update:

    @foreach($files as $key => $file) 
         <div id="myDIV" class="file-box"> 
          <div class="file"> 

           {!! Form::open(['method' => 'DELETE','route' => ['documento.destroy', $file->id]]) !!} 
           <button type="submit" class="#" style="background: none; border: none; color: red;"> 
            <i class='fa fa-trash' aria-hidden='true'></i> 
           </button> 
           {!! Form::close() !!} 

           <a href="/documento/{{ $file->id }}/edit" class="#" role="button" style="text-align: center;"><i class='fa fa-edit' aria-hidden='true'></i></a> 

           <input id="myInput_{{$key}}" type="text" value="{{'project.dev/'.$file->path.'/'.$file->file}}"> 
           <a href="#"><i class="btnFiles fa fa-files-o" aria-hidden="true" data-id="{{$key}}"></i></a> 

           <a href="{{' http://project.dev/'.$file->path.'/'.$file->file}}"> 
            <span class="corner"></span> 

            <div class="icon"> 
             <i class="img-responsive fa fa-{{$file->tipo_file}}" style="color:{{$file->color_file}}"></i> 
            </div> 
            <div class="file-name"> 
             {{$file->file}} 
             <br> 
             <small>Update: {{$file->updated_at}}</small> 
            </div> 
           </a> 
          </div> 
         </div> 
        @endforeach 

Answer 1

OK, die foreach von Ihnen ist ein wenig komplex setzen müssen, aber die Idee selbst ist Einfach: Erstelle die foreach Schleife von deinem Blade in Javascript und füge das Ergebnis an das DOM an.

In Ihrem success Rückruf können Sie z.B. Dazu:

$('#treeview').on("select_node.jstree", function (e, data) { 
    var id = data.node.id; 
    $.ajax({ 
     type: 'POST', 
     url: 'archivio_documenti/+id+/selectFiles', 
     data: {id:id}, 
     success: function(data) { 

      // Build the HTML based on the files data 

      var html = ''; 

      $.each(data, function(i, file) { 
       html += '<div class="file" id="file_' + file.id + '">' + file.updated_at + '</div>'; 
      }); 

      // Append the built HTML to a DOM element of your choice 

      $('#myFilesContainer').empty().append(html); 

     }, 
     error : function(err) { 
      console.log('Error!', err); 
     }, 
    }); 
}); 

Offensichtlich ist dies vereinfacht und müssten Sie die HTML-Struktur verwenden Sie uns in der foreach Schleife oben gezeigt haben, aber die Idee ist die gleiche: (1) Schleife durch Ihre Dateien im data Objekt und erstellen Sie die HTML-Struktur Zeile für Zeile, (2) setzen Sie den gesamten HTML-Block in das DOM, wo immer Sie es anzeigen möchten, nachdem der Benutzer auf einen Ordner geklickt hat.

Alternative:

Wenn Sie die foreach Schleife in Klingen statt von Javascipt halten möchten, können Sie die Schleife in eine separate Klinge bewegen konnte:

folder_contents.blade.php

@foreach($files as $key => $file) 
         <div id="myDIV" class="file-box"> 
          <div class="file"> 

           {!! Form::open(['method' => 'DELETE','route' => ['documento.destroy', $file->id]]) !!} 
           <button type="submit" class="#" style="background: none; border: none; color: red;"> 
            <i class='fa fa-trash' aria-hidden='true'></i> 
           </button> 
           {!! Form::close() !!} 

           <a href="/documento/{{ $file->id }}/edit" class="#" role="button" style="text-align: center;"><i class='fa fa-edit' aria-hidden='true'></i></a> 

           <input id="myInput_{{$key}}" type="text" value="{{'project.dev/'.$file->path.'/'.$file->file}}"> 
           <a href="#"><i class="btnFiles fa fa-files-o" aria-hidden="true" data-id="{{$key}}"></i></a> 

           <a href="{{' http://project.dev/'.$file->path.'/'.$file->file}}"> 
            <span class="corner"></span> 

            <div class="icon"> 
             <i class="img-responsive fa fa-{{$file->tipo_file}}" style="color:{{$file->color_file}}"></i> 
            </div> 
            <div class="file-name"> 
             {{$file->file}} 
             <br> 
             <small>Update: {{$file->updated_at}}</small> 
            </div> 
           </a> 
          </div> 
         </div> 
        @endforeach 

Dann in Ihrem Controller:

public function selectFiles(Request $request){ 
    try{ 
     $id = $request->id; 
     $files = \App\Documento::where('cartella_id',$id)->get(); 

     // Save the view as string 
     $view = view('folder_contents.blade.php', compact('files')))->render(); 

     // Pass the ready HTML back to Javasctipt 
     return response()->json(compact('view')); 

    } 
    catch(\Exception $e){ 
     echo json_encode($e->getMessage()); 
    } 
} 

Answer 2

Sie Header für Ajax

headers: { 
     'X_CSRF_TOKEN':'xxxxxxxxxxxxxxxxxxxx', 
     'Content-Type':'application/json' 
    }, 

und in Controller-

public function selectFiles(Request $request){ 
    try{ 

     $id = $request->id; 

     $files = \App\Documento::where('cartella_id',$id)->get(); 

     return response()->json($files); 

    } 
    catch(\Exception $e){ 
     echo json_encode($e->getMessage()); 
    } 
}