Как вывести несколько блоков с контентом?

@ManiKKK · Регистрация: 29.06.2016

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

Здравствуйте, я совсем новичок в php, так что закройте глаза ладошкой и осторожно зрите сквозь пальцы. Собственно вопрос: как можно вывести несколько блоков с контентом из бд?
И еще мне нужно обязательно с помощью Ajax.
Я вот сам что-то накидал.
По клику на элемент списка(.list) выполняется следующий скрипт:

Javascript

$(function(){
    $(".list").click(function(){
        var ID=$(".list").val();
 
        $.ajax({
            type:"POST",
            url: "GetDocs.php",
            data:{ID:ID},
            success:function(data){
                $(".ajaxsuccessdoc").html(data);
               
            }
        });
    });
});

А вот GetDocs.php

PHP

<?php require_once 'connection.php';
?>
 
<?php
 
if (isset($_POST['ID'])&& !empty($_POST['ID']) ){
    $ID=intval($_POST['ID']);
 
 
    $query =$db->query("SELECT  * FROM `docarcitem` WHERE `MainID_Ref`='$ID'");
 
    
    while ($row = $query->fetch()) {
        echo "<div id='doctext' style='display:none';>";
        echo "<span class='spandoc'>Имя документа<p class='docname'>$row->DocName</p></span>";
        echo "<span class='spandoc'>Описание<p class='docdescription'>$row->DocDescription</p></span>";
        echo "<span>";
        echo "<div id='icondiv'>";
        echo "<span class='glyphicon glyphicon-arrow-left'></span> <span class='Iccon'>Вернуться назад</span>";
        echo "</div>";
        echo "</span>";
        echo "</div>";
 
    }
 
 
}
?>

Я понимаю что это выглядит ужасно, и к тому же, "оно" выводит только первый блок div id='doctext'. А мне нужно чтобы выводило столько блоков, сколько записей выбралось по запросу.
Помогите пожалуйста.

@Jodah · 01.12.2017, 21:51

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

Javascript

1	var ID=$(".list").val();

Здесь вы получаете не тот элемент, на который кликнули, а 1-ый найденный в коде.

Когда вы вешаете обработчик на событие, в this лежит элемент, для которого это событие произошло.

Короче, должно быть так:

Javascript

1	var ID = $(this).val();

@ManiKKK · 01.12.2017, 21:55 **[ТС]**

Jodah, Спасибо, это, несомненно, очень здорово, а можете что-нибудь сказать по моему вопросу?

@Jodah · 01.12.2017, 22:05

ManiKKK, это и есть по вашему вопросу. Вы передаёте не тот ID, соответственно и записи получаете не те.

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

"оно" выводит только первый блок div id='doctext'

Проверьте в консоли браузера, какой ID передаётся и сколько записей соответствуют этому ID в БД.

@ManiKKK · 01.12.2017, 22:22 **[ТС]**

Jodah, Извините, я просто маленько глуп. Спасибо большое.

Добавлено через 12 минут
Jodah, Кстати, вы не знаете почему то, что выполняется в GetDocs.php не видится скриптами на основной страничке?
Например

PHP

echo "<span>";
        echo "<div id='icondiv'>";
        echo "<span class='glyphicon glyphicon-arrow-left'></span> <span class='Iccon'>Вернуться назад</span>";
        echo "</div>";
        echo "</span>";

У меня на клик по этому диву должен выполняться скрипт

Javascript

$(function(){
    $("#icondiv").click(function(){
 
        document.getElementById("MainDIV").style.display='block';
        document.getElementById("ajaxsuccessdoc").style.display='none';
       
    });
});

Но он как-будто не видит вообще этот div. Хотя если посмотреть в F12 на разметку, то там он есть.

@Jodah · 01.12.2017, 22:39

ManiKKK, вы повесили обработчик только на те элементы, которые изначально были в HTML коде.

Если такие элементы добавляются динамически, надо вешать обработчик на родителя. В HTML надо добавить элементу <span> какой-нибудь класс, пусть будет some-class, тогда в JQuery это будет примерно так:

Javascript

$(function(){
    $('.some-class').on('click', '#icondiv', function() {
        document.getElementById("MainDIV").style.display='block';
        document.getElementById("ajaxsuccessdoc").style.display='none';
    });
});

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

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

Javascript

1	document.getElementById("MainDIV").style.display='block';

И если есть JQuery, можно сократить:

Javascript

1	$('#MainDIV').css('display', 'block');

@ManiKKK · 01.12.2017, 22:53 **[ТС]**

Jodah, что-то я видимо не то сделал и у меня не получается.
Вот GetDocs.php
В нем добавил span'у класс

PHP

<?php require_once 'connection.php';
?>
 
<?php
 
if (isset($_POST['ID'])&& !empty($_POST['ID']) ){
    $ID=intval($_POST['ID']);
 
 
    $query =$db->query("SELECT  * FROM `docarcitem` WHERE `MainID_Ref`='$ID'");
 
    
    while ($row = $query->fetch()) {
        echo "<div id='doctext' >";
        echo "<span class='spandoc'>Имя документа</span><p class='docname'>$row->DocName</p>";
        echo "<hr/>";
        echo "<span class='spandoc'>Описание</span><p class='docdescription'>$row->DocDescription</p>";
          echo "<hr/>";
        echo "<span class='some-class'>";
        echo "<div id='icondiv'>";
        echo "<span class='glyphicon glyphicon-arrow-left'></span> <span class='Iccon'>Вернуться назад</span>";
        echo "</div>";
        echo "</span>";
        echo "</div>";
 
    }
 
 
}
?>

Вот скрипт:

Javascript

$(function(){
    $('.some-class').on('click', '#icondiv', function() {
 
        $('#MainDIV').css('display', 'block');
        $('#ajaxsuccessdoc').css('display', 'none');
       
    });
});

Но скрипт по прежнему не выполняется

@Jodah · 01.12.2017, 23:05

ManiKKK, а, это уже я затупил. <span> тоже создаётся динамически, на него бесполезно вешать события по той же причине.

Вместо some-class должен быть предок, который есть в коде изначально. Судя по вашему коду, это .ajaxsuccessdoc, попробуйте подставить его.

@ManiKKK · 01.12.2017, 23:09 **[ТС]**

Jodah, Работает, большое вам спасибо!

Как вывести несколько блоков с контентом?

Решение

Решение

@ManiKKK 2 / 2 / 0 Регистрация: 29.06.2016 Сообщений: 179
	01.12.2017, 21:55 [ТС]	3
	Jodah, Спасибо, это, несомненно, очень здорово, а можете что-нибудь сказать по моему вопросу? 0

@Jodah 3877 / 3218 / 1350 Регистрация: 01.08.2012 Сообщений: 10,859
	01.12.2017, 22:05	4
	Сообщение было отмечено ManiKKK как решение Решение ManiKKK, это и есть по вашему вопросу. Вы передаёте не тот ID, соответственно и записи получаете не те. Сообщение от ManiKKK "оно" выводит только первый блок div id='doctext' Проверьте в консоли браузера, какой ID передаётся и сколько записей соответствуют этому ID в БД. 1

@Jodah 3877 / 3218 / 1350 Регистрация: 01.08.2012 Сообщений: 10,859
	01.12.2017, 23:05	8
	Сообщение было отмечено ManiKKK как решение Решение ManiKKK, а, это уже я затупил. <span> тоже создаётся динамически, на него бесполезно вешать события по той же причине. Вместо some-class должен быть предок, который есть в коде изначально. Судя по вашему коду, это `.ajaxsuccessdoc`, попробуйте подставить его. 1

@ManiKKK 2 / 2 / 0 Регистрация: 29.06.2016 Сообщений: 179
	01.12.2017, 23:09 [ТС]	9
	Jodah, Работает, большое вам спасибо! 0