Динамическая скользящая панель с использованием JQuery на основе значений из базы данных mySQL

Question

Я нахожусь в процессе разработки академического инструментария для моего университета. Проблема в том, что пользователю будет предоставлен список курсов. Когда кто-то нажимает на это название курса, он должен получить динамическую слайд-панель, показывающую цель курса и другие детали этого курса. Все эти значения будут присутствовать в базе данных mySQL. Слайд-панель является обязательным требованием здесь. Поэтому, пожалуйста, помогите мне, как получить данные динамически на слайд-панели из базы данных MySQL. Заранее спасибо ...:)

Answer 1

http://api.jquery.com/jQuery.ajax/'>jQuery's $ .ajax - твой друг!

Должно работать что-то вроде следующего (это не проверено и не оптимизировано). Надеюсь, это приведет вас в правильном направлении. Вы должны также добавить загрузочное сообщение, обработку ошибок и кеширование данных.

<style>
    .course{
        border:solid 1px #000;
        margin-bottom:10px;
    }
    .title{
        display:block;
        border-bottom:solid 1px #000;
        background:#eee;
        font-weight:bold;
    }
    .details{
        display:none;
    }
</style>
<div class='course'>
    <a class='title' href='/classDetails.php?classID=54321'>Composition 101</a>
    <div class='details'></div>
</div>
<div class='course'>
    <a class='title' href='/classDetails.php?classID=54322'>Composition 201</a>
    <div class='details'></div>
</div>
<div class='course'>
    <a class='title' href='/classDetails.php?classID=54323'>Composition 301</a>
    <div class='details'></div>
</div>
<script>
    $(function(){
         $(".course").each(function(){
             var self = $(this);
             $(".title",self).click(function(){
                 $.ajax({
                     "url":this.href,
                     "success":function(data){
                          // extract the content you need from the HTML page.
                          var content= $(data).find("#content").html()
                          // insert into the details div and then show it.
                          self.find(".details").html(content).slideDown(1000);
                     }
                 });
                 // prevent default action...
                 return false;
             });
        });
    });
</script>

Также обратите внимание, что есть некоторые абстракции $ .ajax для упрощения таких вызовов (например, $ ("# myElement"). Load (url), $ .post и $ .get). Вы можете найти больше информации об этих методах на http://api.jquery.com/category/ajax/