Подключить таблицу при нажатии кнопки методом ajax

@Дмитрий Дмитрий · Регистрация: 17.09.2016

Студворк — интернет-сервис помощи студентам

День добрый, подскажите с решением.
Есть БД и две таблицы table1 и table2, при нажатии кнопки1 выводиться table1, при нажатии кнопки2 table2

HTML5
1
2
<button id="rol_but"><a href="/index.php?tkani=table1">Рулонки</a></button>
    <button id="vertical_but"><a href="/index.php?tkani=table2">Вертикалки</a></button>

PHP
1
2
$a = $_GET['tkani'];
    include ("tkani/".$a."_tkani.php");

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

И ещё вопрос, нужно что бы при загрузки страницы сразу подключалась таблица table1?

@atanov · 19.05.2018, 13:14

Дмитрий Дмитрий, возможно. 1-й костыльный, если таблицы не очень большие, вывести их сразу с display:none, а при нажатии на кнопку показывать ту или иную таблицу. 2-й вариант, ajax - серверный скрипт при запросе возвращает json, на клиенте распарсиваете как нужно.

@Дмитрий Дмитрий · 19.05.2018, 13:55 **[ТС]**

Первый не подходит, таблицы большие объем страницы будит огромный, нужно подгружать.
По 2 му варианту пример можно если не сложно?

@tarasalk · 19.05.2018, 15:06

Сообщение от Дмитрий Дмитрий

По 2 му варианту пример можно если не сложно?

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

@Дмитрий Дмитрий · 19.05.2018, 16:11 **[ТС]**

Это понятно что куча) только под мою задачу подогнать не выходит

@atanov · 19.05.2018, 16:43

Дмитрий Дмитрий, вот так попробуйте:

CSS
1
td{border: solid black 1px;}

HTML5
1
2
3
4
5
6
<link rel = "stylesheet" type = "text/css" href = "54.css">
<head><meta charset="UTF-8"></head>
<button id = "rol_but">Рулонки</button>
<button id = "vertical_but">Вертикалки</button>
<div id = "whereToPasteTable"></div>
<script src = "54.js"></script>

JavaScript
1
2
3
4
5
6
7
8
9
10
document.getElementById('rol_but').onclick = sendRequest;
document.getElementById('vertical_but').onclick = sendRequest;
function sendRequest(e){
    var targetId = e.target.id;
    var request = new XMLHttpRequest();
    request.open('POST', '54.php',false);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.send('tableToShow='+targetId);
    document.getElementById('whereToPasteTable').innerHTML = request.responseText;
}

PHP
1
2
3
4
5
<?php
if ($_POST['tableToShow'] == 'rol_but')
{echo '<table><tbody><tr><td>Рулонки</td></tr></tbody></table>';}
else{echo '<table><tbody><tr><td>Вертикалки</td></tr></tbody></table>';}
?>

@Дмитрий Дмитрий · 19.05.2018, 17:14 **[ТС]**

54.php тут что должно быть?

Добавлено через 11 минут
Что то я понять не могу))
Мне нужно вывести таблицу из БД на сервере в зависимости от нажатия кнопки, у вас этот код

PHP
1
2
3
if ($_POST['tableToShow'] == 'rol_but')
{echo '<table><tbody><tr><td>Рулонки</td></tr></tbody></table>';}
else{echo '<table><tbody><tr><td>Вертикалки</td></tr></tbody></table>';}

выводит

HTML5
1
<table><tbody><tr><td>Рулонки</td></tr></tbody></table>

при условии, что значение переменной tableToShow равно rol_but, если нет то выводит

HTML5
1
<table><tbody><tr><td>Вертикалки</td></tr></tbody></table>

А как вывести то таблицы БД?

Добавлено через 3 минуты
У меня таблица table1 подключается к БД в файле tkani/table1_tkani.php, вот его код

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$result = mysql_query("SELECT * FROM table1",$link); 
if (mysql_num_rows($result) > 0)//проверка, если значение больше 0, то ошибка не выводиться
{
 $row = mysql_fetch_array($result); 
 do 
 {
 if  ($row["image"] != "" && file_exists("./images/rol_images/".$row["image"]))
{
$img_path = './images/rol_images/'.$row["image"];
$max_width = 150; 
$max_height = 150; 
 list($width, $height) = getimagesize($img_path); 
$ratioh = $max_height/$height; 
$ratiow = $max_width/$width; 
$ratio = min($ratioh, $ratiow); 
$width = intval($ratio*$width); 
$height = intval($ratio*$height);    
}else
{
$img_path = "/images/no-image.png"; //выводим фото при отсутствии фото в images
$width = 100;
$height = 150;
} 
 
 echo '
  <div class="block-images-grid" >
  <p class="style-title-grid" >'.$row["name"].'</p>
  <img src="'.$img_path.'" width="'.$width.'" height="'.$height.'" />
  </div>  
 ';
 }
 while ($row = mysql_fetch_array($result));//вывод цыклом
}

Таблица table2 подключается в файле tkani/table2_tkani.php аналогично первой.

Добавлено через 3 минуты
Возможно выводить переменные которые передают ссылку в include()? Ну или другой способ для подключения таблиц тоже рассмотрю.

@atanov · 19.05.2018, 17:29

Дмитрий Дмитрий, ну и подключайте в обработчике:

PHP
1
2
3
if ($_POST['tableToShow'] == 'rol_but')
{include ("tkani/table1_tkani.php");}
else{include ("tkani/table2_tkani.php");}

На клиент вернётся тот html, который выведётся echo'ом в обработчике.

@Дмитрий Дмитрий · 19.05.2018, 17:37 **[ТС]**

Ошибку выдает Uncaught TypeError: Cannot set property 'onclick' of null
тут

JavaScript
1
document.getElementById('rol_but').onclick = sendRequest;

@tarasalk · 19.05.2018, 17:43

Сообщение от Дмитрий Дмитрий

Это понятно что куча) только под мою задачу подогнать не выходит

В смысле не выходит? Они все подходят, т.к. решают одну и ту же задачу. Это запрос на сервер без перезагрузки страницы.
То как именно сервер обработает страницу это уже совсем другая задача.

То что вам написал atanov это ajax на чистом js, описание и примеры есть в документации.

Сообщение от Дмитрий Дмитрий

А как вывести то таблицы БД?

Точно также как и без ajax. Вы явно не понимаете как оно работает. Уберите пока базу и выведете просто hello world через ajax.
Алгоритм такой:
1) Через js делаете ajax запрос на сервер,
2) Сервер возвращает вам hello world.
3) В js вы получаете строку hello world и выводите на экран.

А вот дальше у вас 2 варианта:
1) вместо hello world вернуть данные из БД, а на js сформировать html разметку.
2) либо сразу на сервере сформировать html разметку и вернуть его клиенту. В js остается только вставить эту разметку где-нибудь на странице.

У вас щас в коде вариант 2.

@Дмитрий Дмитрий · 19.05.2018, 17:52 **[ТС]**

tarasalk я понимаю, что у меня вариант 2) и hello world я уже делал)), то что написано на js, а не на jq я то же молясь понимаю, с php только разбираюсь, как видите с get запросом понятно, не понятно как сделать то же на ajax но конкретно с моей ситуацией.
Код который дал atanov выводит ошибку.

Добавлено через 2 минуты
А можно js в jq переделать, а то совсем не понятно)

@atanov · 19.05.2018, 18:35

Сообщение от Дмитрий Дмитрий

Ошибку выдает Uncaught TypeError: Cannot set property 'onclick' of null
тут

document.getElementById('rol_but').oncli ck = sendRequest;

А у кнопки id = 'rol_but'?

@Дмитрий Дмитрий · 19.05.2018, 18:40 **[ТС]**

Сделал так но не работает

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    $(document).ready(function() {
    $('#rol_but').click( function() {
        $.ajax({
      type: 'POST',
          url: 'index.php',
          data: 'name=rol_but',
        });
});
    });
</head>
<body>
<div id="tkani">
    <p><strong>Выбираем ткани</strong></p>
    <button id="rol_but">Рулонки</button>
    <button id="vertical_but">Вертикалки</button>
</div>
 <div id="block-tovar-grid">

PHP
1
2
3
4
 if ($_POST['name'] == 'rol_but')
 {include ("tkani/role_tkani.php");}
else
 {include ("tkani/vertical_tkani.php");}

HTML5
1
2
3
4
 </div>
 
 </body>
</html>

Добавлено через 3 минуты

Сообщение от atanov

А у кнопки id = 'rol_but'?

да такой

@atanov · 19.05.2018, 18:48

Дмитрий Дмитрий, а обработчик index.php? И что консоль показывает?

Чёрт, а зачем в include'ах скобки

, вот так правильно:

PHP
1
2
3
4
if ($_POST['name'] == 'rol_but')
 {include "tkani/role_tkani.php";}
else
 {include "tkani/vertical_tkani.php";}

@Дмитрий Дмитрий · 19.05.2018, 18:55 **[ТС]**

Обработчик index.php, консоль молчит. Код который выше он весь в index.php

Добавлено через 3 минуты
Убрал скобки, всё также), нажимаю на кнопку Рулонки тишина, Вертикалки тишина)

Добавлено через 37 секунд
Консоль молчит

@atanov · 19.05.2018, 18:59

Дмитрий Дмитрий, для эксперимента замените include на echo. Что теперь выводит?

@Дмитрий Дмитрий · 19.05.2018, 19:05 **[ТС]**

PHP
1
2
3
4
if ($_POST['name'] == 'rol_but')
 {echo '"tkani/role_tkani.php"';}
else
 {echo '"tkani/vertical_tkani.php"';}

Тишина

@atanov · 19.05.2018, 19:14

Дмитрий Дмитрий, а Вы мой код использовали или свой jquery? В Вашем нет ответа сервера и размещения ответа в DOM.

@Дмитрий Дмитрий · 19.05.2018, 19:18 **[ТС]**

Свой

JavaScript
1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
    $('#rol_but').click( function() {
 
        $.ajax({
          type: 'POST',
          url: 'index.php',
          data: 'name=rol_but',
        });
});
    });

@atanov · 19.05.2018, 19:27

Дмитрий Дмитрий, ну и где ответ от сервера?

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	19.05.2018, 13:14
	Дмитрий Дмитрий, возможно. 1-й костыльный, если таблицы не очень большие, вывести их сразу с display:none, а при нажатии на кнопку показывать ту или иную таблицу. 2-й вариант, ajax - серверный скрипт при запросе возвращает json, на клиенте распарсиваете как нужно. 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	19.05.2018, 13:55 [ТС]
	Первый не подходит, таблицы большие объем страницы будит огромный, нужно подгружать. По 2 му варианту пример можно если не сложно? 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	19.05.2018, 16:11 [ТС]
	Это понятно что куча) только под мою задачу подогнать не выходит 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	19.05.2018, 17:52 [ТС]
	tarasalk я понимаю, что у меня вариант 2) и hello world я уже делал)), то что написано на js, а не на jq я то же молясь понимаю, с php только разбираюсь, как видите с get запросом понятно, не понятно как сделать то же на ajax но конкретно с моей ситуацией. Код который дал atanov выводит ошибку. Добавлено через 2 минуты А можно js в jq переделать, а то совсем не понятно) 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	19.05.2018, 18:55 [ТС]
	Обработчик index.php, консоль молчит. Код который выше он весь в index.php Добавлено через 3 минуты Убрал скобки, всё также), нажимаю на кнопку Рулонки тишина, Вертикалки тишина) Добавлено через 37 секунд Консоль молчит 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	19.05.2018, 18:59
	Дмитрий Дмитрий, для эксперимента замените include на echo. Что теперь выводит? 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	19.05.2018, 19:14
	Дмитрий Дмитрий, а Вы мой код использовали или свой jquery? В Вашем нет ответа сервера и размещения ответа в DOM. 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	19.05.2018, 19:27
	Дмитрий Дмитрий, ну и где ответ от сервера? 0