php - Dynamic Sliding Panel Using JQuery, based on values from a mySQL database -


I'm in the process of developing an academic toolkit for my university, the problem statement is given to the user, given a list of courses Will go. When one click on that particular name of the course, he should get a dynamic slide panel, in which the purpose of the course and other details of that course should be shown. All these values ​​will be present in a mysql database. Slide panels are a necessary requirement here. Please help me how to get the data dynamically from the MySQL database in the slide panel. Thanks in advance ... :)

http://api.jquery.com/jQuery.ajax/ '> JQuery $. Ajax is your friend!

Something like this should be done (it is not unwanted and is not optimized). Hopefully this will take you in the right direction. You should add a loading message, error handling and data caching too.

& lt; Style & gt; . Course (boundary: solid 1px # 000; margin-bottom: 10px;} .title {display: block; border bottom: solid 1px # 000; background: #eee; fonts thickness: bold;} .details {display: none; } & Lt; / style & gt; & lt; div class = 'course' & gt; & lt; a class = 'title' href = '/ classDetails.php? ClassID = 54321' & gt; Design 101 & lt; / A & gt; & lt; div class = 'description' & gt; & lt; / div & gt; & lt; / div & gt; & lt; div class = 'course' & gt; & lt; a class = 'Title' href = '/ classDetails.php? ClassID = 54322' & gt; Composition 201 & lt; div class = 'description' & gt; & lt; / div & gt; Lt; / div> gt; div class = 'course' & gt; one class = 'title' href = '/ classDetails.php? ClassID = 543 23 '> Composition 301 Div class =' ​​description '& gt; & lt; / div & gt; & lt; / div & gt; & lt; script & gt; $ (Function () {$ ("course.") Each (function () {var self = $ (this); $ ("title", manually). Click (function () {$ .ajax ({ "Url": this.href, "Success": Function (data) {// Remove content you need from the HTML page. Var content = $ (data) .Find ("#Content") Html () // insert description in div and then show it self.find ("Details"). Html (content) .slideDown (1000);}}}; // stop the default job ... return back;});}); }); & Lt; / Script & gt;

Also keep in mind that $ There are some segregations of $ .jax for easy calls like $ ($ #) (like "$ myElement") Load (url), $ .post and $). You can find more information about these methods at


Comments

Popular posts from this blog

oracle - The fastest way to check if some records in a database table? -

php - multilevel menu with multilevel array -

jQuery UI: Datepicker month format -