Ändern Sie eine Seite ohne Aktualisierung - Laravel/Ajax

Ich habe für eine Weile gesucht, um nicht die Antwort auf meine Frage, aber ohne Glück zu bekommen.Ändern Sie eine Seite ohne Aktualisierung - Laravel/Ajax

Ich versuche effektiv, die Navigationsstruktur von Soundcloud zu replizieren, wie Sie auf einen Link klicken können, und es leitet die Seite um, ohne Ajax/jQuery zu aktualisieren, aber Inhalt wird nicht dupliziert und wenn der Benutzer aktualisiert Die Seite sieht immer noch normal aus.

Das Problem, das ich habe, ist, habe ich eine Master-Vorlage, die auf alle Ansichten erweitert wird, so wenn ich einen Anruf durch die Seite zu ziehen, repliziert die Seite innerhalb der div ich drücke es auch. Dies führt dazu, dass zwei Header/Seitenleisten usw. von der Master-Vorlage gezogen werden.

Eine andere Sache, die ich versuche, dies zu arbeiten ist, dass, wenn ich die Master-Vorlage aus der Ansicht entfernen, wird es keinen Inhalt zeigen - aber sagen, es tat, hätte es nicht Styling so wenn ich gehen sollte, um direkt zu dieser Seite wird es laden, ohne Styling usw.

Dies ist die Arbeit jQuery, die ordnungsgemäß durch die Seite zieht:

$(".main-nav li a").click(function(e) { 
    e.preventDefault(); 
    var href = $(this).attr("href"); 
    $(".content-container").load(href); 
});

Ich hoffe, das macht Sinn, wenn Weitere Informationen werden benötigt Ich werde mein Bestes geben, um es zu liefern!

Danke eine Million!

Matt

EDIT--

Dies ist immer noch aktiv. Ich habe ein wenig mehr gegraben und an eine andere Art gedacht, wie die Leute vielleicht noch mehr Licht auf sie werfen können. Wenn ich das erweiterten Master-Template auf Ansichten mit so etwas wie wickeln:

if(!$request->ajax()) 
@extends('master') 
@endif

Das würde dann zeigen nur das Master-Template für diese Ansicht, wenn die Seite über Ajax angefordert wird, nicht wahr? Ich bin mir nicht sicher, ob das der richtige Weg ist, aber es ist einen Versuch wert.

Wie immer wird jede Hilfe sehr geschätzt!

Quelle

2016-05-08 Matty Clarke

Für das, was Sie erreichen möchten, benötigen Sie ein wenig mehr als nur jQuery und Ajax. Sie benötigen ein richtiges JavaScript-Framework in Kombination mit einigen Vorlagen.

Quelle

2016-05-08 16:10:55 Pascal

Versuchen Sie, jQuery-Plugin pjax zu verwenden. Mit diesem Plugin können Sie jede Site mit Ajax-Navigation erstellen.

Quelle

2016-05-08 18:46:35

Ich kann Ihnen einige Ideen geben.

Angenommen, Ihr Master-Layout ist wie die Suche:

<html> 
    <head> 
     <title>My website</title> 
    </head> 
    <body> 
     <header> 
      header 
     </header> 

     <main id="page-main"> 
      @yield('content') 
     </main> 

     <footer> 
      footer 
     </footer> 
    </body> 
</html>

Für jede Seite zwei Ansichten zu bauen, eine, die die Dinge enthält, die in dem „Inhalt“ Abschnitt, und die andere gehen sollen, dass enthält die vorherigen das Masterlayout, wie die Verlängerung:

@extends(layouts.master) 

@section('content') 
    include partial here 
@endsection

Dann im Controller Rückkehr nur die teilweise, wenn die Anforderung von Ajax kommt, während die vollständige Seite senden, wenn die Anfrage normal ist.

Class MyController extends Controller{ 
    public function action1(Request $request){ 
     // code here 

     return ($request->ajax() ? view('partial') : view('fullpage')); 

    } 

}

Unter der Annahme, dass nur mit Klasse „Schnipsel“ Links sollte die Seite nicht aktualisieren, können Sie die jQuery-Funktion ‚$ .get‘ verwenden, um die neue HTML zurückzukehren.

$("body").on('click','.ajax',function(){ 
    var url = this.href; 
    $.get(url, function(data){ 
     $("#page-main").html(data); 

     //history manipulation here 
    }); 
    return false; 
});

Natürlich müssen Sie History API verwenden, um die URL zu aktualisieren.

Hoffe es hilft ein bisschen.

Quelle

2016-05-08 21:27:01

Hallo Dank für die Antwort und Entschuldigung für die späte Antwort. Ist es nicht ineffizient, zwei Ansichten für jede einzelne Seite zu haben? In Anbetracht meiner Web-App wird relativ groß sein. Wäre es einfacher zu spezifizieren, ob die Seite über AJAX/JQ über Laravel angefragt wird und dann den entsprechenden Inhalt anzeigt? Nicht sicher, wie das funktionieren würde, aber es scheint logisch in meinem Kopf, haha. Danke noch einmal! –

Ja, oder Sie können nur Teiler und eine "allgemeine" Ansicht erstellen, wo Sie dynamisch alle partiellen enthalten. –

Ich habe dies behoben mit @if(!Request::ajax()) auf Abschnitt, die nicht angezeigt werden musste, wenn die Seite über Ajax geladen wurde.

Quelle

2016-05-11 20:35:20

Ändern Sie eine Seite ohne Aktualisierung - Laravel/Ajax

Antwort

Verwandte Themen