Как сделать правильную подгрузку div'а с данными из БД по клику?

Question

[prosp]

Доброй ночи, хотелось бы сделать правильную подгрузку div'а с данными из БД по клику, а при последующем нажатии - скрыть блок.

Сделал только подрузку div'a с данными из БД по клику, скрытие элемента мне не удалось воплотить в связи с малым знание матчасти. Большая просьба помочь. Идеально, конечно же, было бы - показать на будущее show/hide блока с несколькими элементами через POST.

<script type="text/javascript">
$(function(){
var loaderImg = '<div style="text-align:center"><img src="img/wait.gif" alt="загрузка..." /></div>';
 $('#show').on('click', function(){
    $.ajax({
    url: 'index2.php',
    cache: false,
    beforeSend: function() { $('#showme').html(loaderImg); },
    success: function(res) { $('#showme').html(res);}
    });
    return false;
});
});
</script>

В index2.php подключение к БД и SELECT запрос.
Заранее благодарю, уважаемые.

Answer 1

[Viktor Vsk]

Не очень ясна задача.
Первый раз Вам нужно грузить со скрипта, последующие - просто скрывать\раскрывать?
Тогда поставьте проверку, была ли загружена инфомрация:

...
var loaded = false;
...
$('#show').on('click', function(){
if(loaded){
$('#showme').toggle();
}else{
...
success: function(res) { $('#showme').html(res); loaded = true }
...
}
});

P.S. Зачем оборачивать функцию в jquery?
$(function(){...});

Comments

[prosp]

Спасибо за подсказку, но я новичок в js и я думал $(function(){}); есть тоже самое, что и $document.ready(function(){}); как я понял - проверка на готовность страницы, либо загрузка после загрузки страницы.
В любом случае, попробовал убрать $.ajax и сделать как вы сказали, может я не правильно понял, но всё же..

<script type="text/javascript">
var loaded = false;
var load = '<div class="loader_container"><div class="loader loader-2"></div></div>'
 $('#show').on('click', function(){
 if(loaded){
$('#showme').toggle();
 }else{
    url: 'index2.php',
    cache: false,
    beforeSend: function() { $('#showme').html(load); },
    success: function(res) { $('#showme').html(res); loaded = true }
    }
});
</script>

[Viktor Vsk]

Этот код нужно или вставить после того, как загружены элементы #show и #showme или обернуть в $(document).ready()

<script type="text/javascript">
var loaded = false;
var load = '<div class="loader_container"><div class="loader loader-2"></div></div>'
 $(docoument).readyu(function(){
$('#show').on('click', function(){
 if(loaded){
$('#showme').toggle();
 }else{
    url: 'index2.php',
    cache: false,
    beforeSend: function() { $('#showme').html(load); },
    success: function(res) { $('#showme').html(res); loaded = true }
    }
});
});
</script>

[prosp]

Вы уж простите, но ни то, ни другое не работает..
Я не допустил опечаток и правильно всё написал, как вы и сказали. Странно..

[Viktor Vsk]

jsfiddle.net/S3RBL/1 что-то вроде такого вам нужно?

[Viktor Vsk]

jsfiddle.net/S3RBL/2 Так нагляднее

[prosp]

@victorvsk Спасибо Вам огромное, Ваш пример прекрасно работает, у меня и самого так получается. У меня именно "/здесь аякс" не получается подгрузить. Как его там подгрузить с подгрузкой *.php скрипта?
Пробывал через переменную вначале сделать что-то типа:
var readme = $.get("index2.php")
.success(function(res) { $('#showme').html(res); });

[Viktor Vsk]

Немного не там написал комментарий. Попробуйте вот так: jsfiddle.net/S3RBL/3
Вот документация: https://api.jquery.com/load/

Ваш php скрипт точно отдает то, что нужно ? Если вы в браузере зайдете на domain.com/path/to/script.php - там будет необходимый результат?

[prosp]

Сейчас у меня примерно вот так в JS:
jsfiddle.net/rBka2
index2.php подключается к БД и выводит таблицу, выглядит примерно вот так:
pastebin.com/3D2DV0Yx

Попробую Ваш последний пример сейчас использовать

[prosp]

Прекрасно работает jsfiddle.net/rBka2/2 , я люблю Вас, спасибо огромное. Где ещё можно прочитать действительно хороший вводный курс по js ajax? Если хотите, могу дать ссылку, чтобы Вы посмотрели как выглядит сие действо

[prosp]

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