Laravel 5.1 - Ajax Navigation не работает с API истории Javascript

В настоящее время я работаю над приложением, которое должно загружать мои представления с помощью ajax из меню навигации.

Мое меню:

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="logo menu-link" data-route="index" href="{{ url('/') }}"><img src="{{ asset('img/logo.png') }}" alt="my-app-logo"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li><a class="menu-link" href="" data-route="studio">Studio</a></li>
        <li><a class="menu-link" href="" data-route="customers">Customers</a></li>
        <li><a class="menu-link" href="" data-route="bio">Bio</a></li>
        <li><a class="menu-link" href="" data-route="contacts">Contacts</a></li>
    </ul>
</div>

Мои маршруты:

Route::get('/', 'PagesController@index');
Route::get('/{page}', 'PagesController@loadPage');

Мой контроллер:

class PagesController extends Controller {

    // Index
    public function index(){
        return view('pages.index');
    }

    // load page
    public function loadPage($page){
        return view('ajax.'.$page)->render();
    }

}

Пример представления (здесь я передаю чистый html без расширения шаблона блейда):

<div class="content">
    <div class="studio">
        <div class="custom-area">
            <div class="page-title-box">
                <h3 class="page-number">N. 67</h3>
                <h1 class="page-title">Area Test</h1>
            </div>
        </div>
    </div>
</div>

Мой Javascript:

// in my document.ready    

// get url page name and load my view at refresh page
var urlFull = window.location.href,
    pageName = urlFull.split('/').pop();

// currently only my index has blade functions, other pages content is pure html
if(pageName != ''){
    loadContentPage(pageName);
}

// get view from browser's navigation
window.onpopstate = function(event) {
    loadContentPage(pageName);
}

// Laravel setup for ajax calls
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content-wrapper')
    }
});

var route;
$('.menu-link').on('click', function(){

    // active link
    $('.menu-link').removeClass('active');
    $(this).addClass('active');

    // load content
    route = $(this).data('route');

    // If i pass an empty string to simply call my index, in console i have an error(*)
    if(route == 'index'){ route = ''; }
    loadContentPage(route);

    // history
    history.pushState(route, null, route);

    return false;
});

// end document.ready

function loadContentPage(page){
    $('#content-wrapper').children().fadeOut(150, function(){
        $('#content-wrapper').load("{{ url('/') }}/" + page, function(data){
            $(this).html(data);
        });
    });
}

(*) Первая проблема в консоли, я получаю это:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

Если я обновляю страницу, когда у меня есть, например, http://localhost:8888/app-test/public/studio, я получаю только html, мне интересно:

  1. Как это решить
  2. Как передать второй параметр в моем маршруте, если мне нужна такая информация о странице:

    (Route::get('/{page}/{detail}', 'PagesController@loadPage'));

EDIT: добавление переменных в функцию, история теперь может работать:

window.onpopstate = function(event) {
    var urlFull = window.location.href,
        pageName = urlFull.split('/').pop();
    loadContentPage(pageName);
}

Но я все еще застреваю, когда обновляю страницу по URL-адресу, отличному от моего индекса, my-app/studio возвращает только содержимое моего представления, чистый html. Я думаю, что это может быть вопрос маршрутов, но я до сих пор понятия не имею об этом


person Luca Mormile    schedule 27.10.2015    source источник
comment
Вы рассматривали возможность использования фреймворка SPA?   -  person madalinivascu    schedule 27.10.2015
comment
Конечно, я думал создать это приложение с помощью AngularJS, но мне было интересно, будет ли хорошим выбором иметь 2 фреймворка (Laravel 5.1 и Angular) с одинаковыми правилами (MVC). На самом деле я работаю только с Laravel 5.1 и jQuery.   -  person Luca Mormile    schedule 27.10.2015
comment
Зачем заново изобретать навигационное колесо ajax? См.: github.com/defunkt/jquery-pjax.   -  person Mysteryos    schedule 27.10.2015
comment
Спасибо, это выглядит круто, но если вы видите, я обновил свой вопрос, и теперь моя проблема сосредоточена на маршруте Laravel, потому что мне нужна вся страница, если я обновлю браузер. На самом деле мой маршрут возвращает содержимое представления, а не всю страницу, мне нужно настроить свои маршруты чистым способом, чтобы получить полные представления при обновлении.   -  person Luca Mormile    schedule 27.10.2015


Ответы (1)


пытаться:

function loadContentPage(page){
var url = "{{ url('/') }}/";
    $('#content-wrapper').children().fadeOut(150, function(){
     if(page != 'index') { 
       url += page;
      } //end if you have other params update the url based on your routes
        $('#content-wrapper').load(url, function(data){
            $(this).html(data);
        });
    });
}
person madalinivascu    schedule 27.10.2015
comment
функции loadContentPage нужен только один параметр: route (это то, что я получаю от data-route), что вы имеете в виду под параметрами page? - person Luca Mormile; 27.10.2015
comment
тот же результат, что и у моего друга, я получаю только содержимое просмотра (html) :( - person Luca Mormile; 27.10.2015
comment
вы можете скрыть содержимое индексной страницы, и когда пользователь нажимает на домашнюю ссылку, вы просто показываете ее, не выполняя ajax, вы сохраняете http-запрос и полосу пропускания. - person madalinivascu; 27.10.2015