Форум

Reken · #1 (**permalink**) 12.11.2021, 14:31

Подскажите пожалуйста:

Есть html страница: (фрагмент из страницы)

$( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Поиск</a></li>
    <li><a href="#tabs-2">Копирование статей</a></li>

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

Так же есть другой файл. Привожу фрагмент:

</head>
<div id="live_data"></div>

<script>
    $(document).ready(function () {

        function fetch_data()
        {

//Через ajax мы подгружаем в live-data содержание страницы, на которой вкладки...
            $.ajax({
                url: "/wiki-api/index/menu",
               
                method: "POST",
                success: function (data) {                   
                    $('#live_data').html(data);
                    setKeydownmyForm()
                }
            });
        }
        fetch_data();


//Во второй вкладке есть кнопка, при нажатии на которую выполняем код ниже...
        $(document).on('click', '#wiki', function () {

            $.ajax({
                url: "/wiki-api/index/wiki",
                method: "POST",

                data: $('#wiki-form').serialize(),
                dataType: "text",
                success: function (data)
                {
                    alert(data); 
                    fetch_data();                    
                }
            })
        })

После всего этого получается, что на второй вкладке у меня есть кнопка, при нажатии на которую выполняются некие действия...Происходит обновление страницы без перезагрузки страницы, но меня все время после нажатия кнопки выбрасывает на первую вкладку...Подскажите как после нажатия кнопки во второй вкладке, в ней же и остаться?

voraa · #2 (**permalink**) 12.11.2021, 15:00

Приведите текст второй вкладки.
Есть ли там <form>?
Как сделана кнопка?
И как первый файл связан со вторым?

Reken · #3 (**permalink**) 12.11.2021, 16:28

Второй файл показывает первый файл...

//Сюда загружаем содержимое первого файла
<div id="live_data"></div>

Через Ajax и Post показываем что нужно загрузить в live_data

$(document).ready(function () {

        function fetch_data()
        {
            $.ajax({

                //Это адрес первого файла
                url: "/wiki-api/index/menu",
               
                method: "POST",
                success: function (data) {                   
                    $('#live_data').html(data);
                    setKeydownmyForm()
                }
            });
        }
        fetch_data();

Текст второй вкладки:

</ul>
  <div id="tabs-2">
    <form id="wiki-form" method="post">
        <input type="text" name="value" size="20">      
            <input type="button" id="wiki" value="Скопировать">
    </form>

При нажатии на кнопку с id = wiki во втором файле выполняется следующий код

$(document).on('click', '#wiki', function () {

            $.ajax({
                url: "/wiki-api/index/wiki",
                method: "POST",

                data: $('#wiki-form').serialize(),
                dataType: "text",
                success: function (data)
                {
                    alert(data); 
                    fetch_data();                    
                }
            })
        })

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

voraa · #4 (**permalink**) 12.11.2021, 19:36

Ну так получается, что после нажатия на кнопку опять загружается кусок, содержащий эти вкладки в своем исходном состоянии.
И непонятно, почему бы ему снова не показать первую вкладку, как при первой загрузке.

Форум

Справочник

Discord чат

Курсы javascript