0

Есть файл welcome с кодом, в нем есть меню в котором при помощи ajax-представления можно переходить на разные страницы. Так же к файлу подключен хедер, в котором такое же меню, но ajax-представление работает неправильно, переходит на другие страницы... Нажимаешь на page1 открывается страница page2...page2 на page3, page3 на page4, page4 так и остается page4, а если сразу на page4 то открывает page1... подскажите что я не учел?

Файл header.php:

<div class="col-xs-2">
  <a href="#"  class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <nobr> menu </nobr>
    <ul class="dropdown-menu">
      <li  class="loadBtn"  value="page1"><a href="#top"> page 1</a></li>
      <li  class="loadBtn"  value="page2"><a href="#top"> page 2</a></li>
      <li  class="loadBtn"  value="page3"><a href="#top"> page 3</a></li>
      <li  class="loadBtn"  value="page4"><a href="#top"> page 4</a></li>
    </ul>
  </a>
</div>

Файл welcome.php:

@include('header')
<ul class="nav navbar-nav centermenu">
  <li  class="loadBtn"  value="page1"><a name="top"> page 1 </a></li>
  <li  class="loadBtn"  value="page2"><a>            page 2 </a></li>
  <li  class="loadBtn"  value="page3"><a>            page 3 </a></li>
  <li  class="loadBtn"  value="page4"><a>            page 4</a></li>                       
</ul>
<script>
  $(document).ready(function(){
      var tpls = ['page1.blade.php', 'page2.blade.php',  'page3.blade.php', 'page4.blade.php'];

    $('.loadBtn').click(function(){

        $('.loadBtn').removeClass('activeEv');
        $(this).addClass('activeEv');

        loadContent($(this).index());
    });
    loadContent(0);

    function loadContent(index) {
        if (!tpls[index]) return;
        $.ajax({
            url: tpls[index],
            cache: false,
            success: function(html){
                $("#content").html(html);
            }
        });
    }

  });
</script>

Добавил пару строк в скрипт, получилось:

$(document).ready(function(){
    var tpls = ['languages-eng.blade.php', 'targets-eng.blade.php',  'bd-eng.blade.php', 'instruction-eng.blade.php', 'cooperation-eng.blade.php'];

    $('.loadBtn').click(function(){

        console.log($(this).attr("value") + ", index=" + $(this).index());

        $('.loadBtn').removeClass('activeEv');
        $(this).addClass('activeEv');

        loadContent($(this).index());
    });
    loadContent(0);

    function loadContent(index) {
        console.log(index + ": " + tpls[index])
        if (!tpls[index]) return;
        $.ajax({
            url: tpls[index],
            cache: false,
            success: function(html){
                $("#content").html(html);
            }
        });
    }

});

апач выдает ошибку:

"GET / HTTP/1.1" 500 185 "-" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:53.0) Gecko/20100101 Firefox/53.0"

В браузере пустой экран

9
  • 1
    а на когда нажимаете на page2, что происходит? а на page3?
    – user176262
    3 мая 2017 в 14:47
  • 1
    хм, давайте разбираться. Добавьте console.log($(this).attr("value") + ", index=" + $(this).index()) в обработчик клик, и console.log(index + ": " + tpls[index]) в начало loadContent
    – user176262
    3 мая 2017 в 15:16
  • 1
    а меня почему то смущает вот эта строчка loadContent($(this).index());. Почему не использовать value у элементов ? А то ведь даже не угадать что при нажатии на кнопки происходит с индексом (который кстати начинается с нуля). А еще он может выдавать забавные результаты если DOM меняется
    – alexoander
    3 мая 2017 в 15:45
  • 1
    @Александр this в обработчике - совершенно определенный DOM-элемент
    – user176262
    3 мая 2017 в 20:08
  • 1
    @Александр Вы вставили console.log в код? Добавьте, пожалуйста, в вопрос, что выводится в консоль при клике на каждый элемент.
    – user176262
    4 мая 2017 в 1:39

1 ответ 1

0

В файле header.php:

<div class="col-xs-2">
  <a href="#"  class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <nobr> menu </nobr>
  </a> <!-- clouse here -->
    <ul class="dropdown-menu">
      <li  class="loadBtn"  value="page1"><a href="#top"> page 1</a></li>
      <li  class="loadBtn"  value="page2"><a href="#top"> page 2</a></li>
      <li  class="loadBtn"  value="page3"><a href="#top"> page 3</a></li>
      <li  class="loadBtn"  value="page4"><a href="#top"> page 4</a></li>
    </ul>
  <!-- </a> - this clouse-tag delete-->
</div>

Закрыть тег /a нужно перед списком меню, а НЕ после него, как было у меня! Получается что когда ПОСЛЕ списка скрипт ajax срабатывал дважды и поэтому переходило на следующую страницу!

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.