Javascript / Ajax: включить php в div с JS / Ajax, без потери предыдущих включений

У меня есть панель навигации с элементами

<ul><li>

элемент

<li>

элементы, указывающие с помощью ajax на отдельный файл функции php

switch ($_GET['menu']){}

с отдельным файлом функций в зависимости от случая (выбор). на самом деле функции разделены в файле php, который не включен в дерево моего сайта. и я теряю свое участие, когда звоню. (func_nav.php)

Я хотел бы, чтобы мой функциональный файл был записан в один и тот же файл (файл php, содержащий HTML и ajax-скрипт) или был включен ранее?

вот html и ajax (navbar.php)

<div id = "header_menu_content_align">
<div id = "header_menu_content_wrapper">
<div id = "menu">


<ul class = "dropdown-menu">
  <li id = "uniqueId01">Home</li>
  <li id = "uniqueId02">User
    <ul>
      <li id = "uniqueId03">Sous-item 1</li>
      <li id = "uniqueId04">Sous-item 2</li>
      <li id = "uniqueId05">Sous-item 3</li>
    </ul>
  </li>
  <li id = "uniqueId06">Admin</li>
</ul>


</div>
</div>  
</div>




<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$('.dropdown-menu li').on('click', function(){
$.get('function/navigation/func_nav.php', { menu: this.id }, function(data){
    $('#wrapper_page_desktop_content').html(data); // inject HTML into above DIV,
});
});

</script>

вот файл php, который я хочу включить или вызвать со всеми моими предыдущими включениями

<?php



switch($_GET['menu']){

    case 'uniqueId01':
        menu1();
        break;
    case 'uniqueId02':
        menu2();
        break;
    case 'uniqueId03':
        menu3();
        break;
    case 'uniqueId04':
        menu4();
        break;
    case 'uniqueId05':
        menu5();
        break;
    case 'uniqueId06':
        menu6();
        break;
    default:
        someDefaultFunction();
        break;
}

function menu1(){
    include '/desktop/content/corporate01/content.php';
}
function menu2(){
    echo 'You clicked Menu USER! ';
}
function menu3(){
    echo 'You clicked Menu 3! ';
}
function menu4(){
    echo 'You clicked Menu 4! ';
}
function menu5(){
    echo 'You clicked Menu 5! ';
}
function menu6(){
    echo 'You clicked Menu 6! ';
}


?>

Я хотел бы сохранить мои include => include => include => include html => include html У меня есть некоторые включения, такие как контроллер SSO.php (настольный мобильный) и т. д.

Я бы хотел, чтобы мой "get" указывал не на файл, а на включенную функцию ..

$.get('function/navigation/func_nav.php', { menu: this.id }, function(data){
    $('#wrapper_page_desktop_content').html(data); // inject HTML into above DIV,
});

Мой друг, работающий со мной, разработал это, чтобы решить проблему, я на самом деле пытаюсь с этим

<div id = "header_menu_content_align">
<div id = "header_menu_content_wrapper">
<div id = "menu">


<ul class = "dropdown-menu">
  <li id = "uniqueId01">Home</li>
  <li id = "uniqueId02">User
    <ul>
      <li id = "uniqueId03">Sub-item 1</li>
      <li id = "uniqueId04">Sub-item 2</li>
      <li id = "uniqueId05">Sub-item 3</li>
    </ul>
  </li>
  <li id = "uniqueId06">Admin</li>
</ul>

</div>
</div>  
</div>




<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$('.dropdown-menu li').on('click', function(event){

    var menu_id = event.currentTarget.id;
    getMenu(menu_id);
});

function getMenu(menu_id) {

    switch(menu_id) {
        case 'uniqueId01':
            menu1();
            break;
        case 'uniqueId02':
            menu2();
            break;
        case 'uniqueId03':
            menu3();
            break;
        case 'uniqueId04':
            menu4();
            break;
        case 'uniqueId05':
            menu5();
            break;
        case 'uniqueId06':
            menu6();
            break;
        default:
            console.info("default case");
            break;
    }
}

function menu1() {
    $('#wrapper_page_desktop_content').html( '<?php include app_dir . 'template/desktop/content/corporate01/test.php'; ?>' );
}

function menu2() {
    $('#wrapper_page_desktop_content').html( '<?php include app_dir . 'template/desktop/content/home/home.php'; ?>' );
}

function menu3() {
    $('#wrapper_page_desktop_content').html( '<?php echo app_dir . 'template/desktop/content/corporate01/toto.php'; ?>' );
}

function menu4() {
    $('#wrapper_page_desktop_content').html( '<?php include app_dir . 'template/desktop/content/corporate01/test.php'; ?>' );
}

function menu5() {
    $('#wrapper_page_desktop_content').html( '<?php include app_dir . 'template/desktop/content/corporate01/test.php'; ?>' );
}

function menu6() {
    $('#wrapper_page_desktop_content').html( '<?php include app_dir . 'template/desktop/content/corporate01/test.php'; ?>' );
}

</script>

но на самом деле функция не работает с элементами подменю ..

Я пробовал использовать свойство класса для li, но не работает, вместо подэлемента отображается родительский элемент.

<div id = "header_menu_content_align">
<div id = "header_menu_content_wrapper">
<div id = "menu">


<ul class = "dropdown-menu">
  <li id = "uniqueId01" class = "toto">Home</li>
  <li id = "uniqueId02" class = "toto">User
    <ul>
      <li id = "uniqueId03" class = "toto">Sub item 1</li>
      <li id = "uniqueId04" class = "toto">Sub item 2</li>
      <li id = "uniqueId05" class = "toto">Sub item 3</li>
    </ul>
  </li>
  <li id = "uniqueId06" class = "toto">Admin</li>
</ul>

</div>
</div>  
</div>




<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$('.toto').on('click', function(event){

    var menu_id = event.currentTarget.id;
    getMenu(menu_id);
});

function getMenu(menu_id) {

    switch(menu_id) {
        case 'uniqueId01':
            menu1();
            break;
        case 'uniqueId02':
            menu2();
            break;
        case 'uniqueId03':
            menu3();
            break;
        case 'uniqueId04':
            menu4();
            break;
        case 'uniqueId05':
            menu5();
            break;
        case 'uniqueId06':
            menu6();
            break;
        default:
            console.info("default case");
            break;
    }
}

function menu1() {
    $('#wrapper_page_desktop_content').html( '<?php include app_dir . 'template/desktop/content/corporate01/test.php'; ?>' );
}

function menu2() {
    $('#wrapper_page_desktop_content').html( '<?php include app_dir . 'template/desktop/content/home/home.php'; ?>' );
}

function menu3() {
    $('#wrapper_page_desktop_content').html( '<?php echo app_dir . 'template/desktop/content/corporate01/totosub1.php'; ?>' );
}

function menu4() {
    $('#wrapper_page_desktop_content').html( '<?php echo app_dir . 'template/desktop/content/corporate01/totosub2.php'; ?>' );
}

function menu5() {
    $('#wrapper_page_desktop_content').html( '<?php echo app_dir . 'template/desktop/content/corporate01/totosub3.php'; ?>' );
}

function menu6() {
    $('#wrapper_page_desktop_content').html( '<?php echo app_dir . 'template/desktop/content/corporate01/totoadmin.php'; ?>' );
}

</script>

Я тоже пробовал с этим (я недалеко от хорошего результата)

<?php

if ($_GET['menu']!= '') {


    switch($_GET['menu']){

        case 'uniqueId01':
            menu1();
            break;
        case 'uniqueId02':
            menu2();
            break;
        case 'uniqueId03':
            menu3();
            break;
        case 'uniqueId04':
            menu4();
            break;
        case 'uniqueId05':
            menu5();
            break;
        case 'uniqueId06':
            menu6();
            break;
        default:
            someDefaultFunction();
            break;
    }
}


function menu1(){
    include '/var/www/html/myeternal/app/template/desktop/content/corporate01/content.php';
}
function menu2(){
    echo 'You clicked Menu USER! ';
}
function menu3(){
    echo 'You clicked Menu 3! ';
}
function menu4(){
    echo 'You clicked Menu 4! ';
}
function menu5(){
    echo 'You clicked Menu 5! ';
}
function menu6(){
    echo 'You clicked Menu 6! ';
}


?>



<div id = "header_menu_content_align">
<div id = "header_menu_content_wrapper">
<div id = "menu">


<ul class = "dropdown-menu">
  <li id = "uniqueId01">Home</li>
  <li id = "uniqueId02">User
    <ul>
      <li id = "uniqueId03">Sous-item 1</li>
      <li id = "uniqueId04">Sous-item 2</li>
      <li id = "uniqueId05">Sous-item 3</li>
    </ul>
  </li>
  <li id = "uniqueId06">Admin</li>
</ul>

</div>
</div>  
</div>




<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$('.dropdown-menu li').on('click', function(){

$.get(' ', { menu: this.id }, function(data){

    $('#wrapper_page_desktop_content').html(data); // inject HTML into above DIV,
});

});

</script>

<div id = "wrapper_page_desktop_content"> </div>

но с этим контейнер для этого html / php отображается в wrapper_page_desktop_content

Почему вы хотите, чтобы они были в одном файле? Я бы посоветовал вам включить без функций, поэтому вместо menu1 () используйте include ('...')

— 11.03.2018 14:59

Я хотел бы, чтобы мои функции были «включены» не обязательно в один и тот же файл, но в дерево моего сайта, чтобы не потерять мои предварительные требования для «включения», я не хочу на данном этапе использовать переменные сеанса, если это возможно! друг сказал мне написать функции javascript в том же файле, чтобы не потерять мои предыдущие включения, пожалуйста, помогите :) (я очень новичок в javascript;))

— 12.03.2018 11:15

javascript php jquery html ajax

11.03.2018 14:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

друг разработал это, чтобы решить проблему

<div id = "header_menu_content_align">
<div id = "header_menu_content_wrapper">
<div id = "menu">


<ul class = "dropdown-menu">
  <li id = "uniqueId01" class = "displayPage">Home</li>
  <li id = "uniqueId02">User
    <ul style = "display:none">
      <li id = "uniqueId03" class = "displayPage">Sub-item 1</li>
      <li id = "uniqueId04" class = "displayPage">Sub-item 2</li>
      <li id = "uniqueId05" class = "displayPage">Sub-item 3</li>
    </ul>
  </li>
  <li id = "uniqueId06" class = "displayPage">Admin</li>
</ul>

</div>
</div>  
</div>


<div id = "wrapper_page_desktop_content"></div>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$('.dropdown-menu li').on('click', function(event){
    var menu_id = event.currentTarget.id;
    if ($(this).hasClass('displayPage')) {

        getMenu(menu_id);
        event.stopPropagation(); //Stop les event JS qui suivent
    } else {
        $(this).find('ul').toggle();
        getMenu(menu_id);
    }

});

function getMenu(menu_id) {
    console.info(menu_id);
    switch(menu_id) {
        case 'uniqueId01':
            menu1();
            break;
        case 'uniqueId02':
            menu2();
            break;
        case 'uniqueId03':
            menu3();
            break;
        case 'uniqueId04':
            menu4();
            break;
        case 'uniqueId05':
            menu5();
            break;
        case 'uniqueId06':
            menu6();
            break;
        default:
            console.info("default case");
            break;
    }
}

function menu1() {
    console.info('menu 1 ');
    $('#wrapper_page_desktop_content').html( '<p>ok 1</p>' );
}

function menu2() {
    console.info('menu 2 ');
    $('#wrapper_page_desktop_content').html( '<p>ok 2</p>' );
}

function menu3() {
    console.info('menu 3 ');
    $('#wrapper_page_desktop_content').html( '<p>ok 3</p>' );
}

function menu4() {
    $('#wrapper_page_desktop_content').html( '<?php include app_dir . 'template/desktop/content/corporate01/test.php'; ?>' );
}

function menu5() {
    $('#wrapper_page_desktop_content').html( '<?php include app_dir . 'template/desktop/content/corporate01/test.php'; ?>' );
}

function menu6() {
    $('#wrapper_page_desktop_content').html( '<?php include app_dir . 'template/desktop/content/corporate01/test.php'; ?>' );
}

</script>

12.03.2018 14:57

Другие вопросы по теме

Нарезать массив в php

Таблица HTML - добавление переключателя для каждой строки

Напомнить первую строку после получения всех данных - PHP PDO

Получить идентификатор объекта в Datastore PHP API

Первая буква имени пользователя ассоциативного массива php

Удалить повторяющиеся элементы из объекта php

Папка установки Magento 2

Была дана строка подключения MSSQL к PHP PDO; Ошибка: не удалось найти драйвер

PHP Regex сопоставляет предложение со словом в любое время, когда за ним не следует другое слово

Yii2: заменить сообщение подтверждения по умолчанию, используемое Gridview, на Sweet alert

Javascript / Ajax: включить php в div с JS / Ajax, без потери предыдущих включений

Ответы 1

Другие вопросы по теме

Похожие вопросы