如何使用jQuery UI手风琴进行循环

时间:2022-12-01 14:48:43

This is jquery accordion code for effect:

这是jquery手风琴代码:

 $(function() {
            $( "#accordion" ).accordion({
            header: "h3"
            });
       });

This is the output of database (mysql) which is loop (uncertain loop):

这是数据库(mysql)的输出,它是循环(不确定循环):

 while($showE = mysqli_fetch_array($show))
            {

            echo $showE['un_name'];  /* this should be accordion head */
            echo $showE['un_name_dec']; /* this should be accordion description */
            } 

So my question is, how to show them in accordion effect, everything is working( i can fetch records from database), but accordion effect is not forming, (accordion effect is not working) and how to show them with loop?

所以我的问题是,如何在手风琴效果中显示它们,一切都运行(我可以从数据库中获取记录),但是手风琴效果没有形成(手风琴效果无效),以及如何用循环来显示它们?

2 个解决方案

#1


2  

So, you have two files: index.html and load_entries.php

你有两个文件:索引。html和load_entries.php

index.html:

index . html:

<html>
   <head>
       <!-- Make the imports of your stylesheets and scripts here -->
       <script type="text/javascript">
           $(function() {
              $("#accordion").accordion({header: "h3"});
           });
           function load_entries() {
              $.ajax({
                  url: "load_entries.php",
                  complete: function(data) {
                      $("#accordion").html(data.responseText);
                  }
              });
           }
       </script>
   </head>
   <body>
       <button onclick="load_entries();">Load</button> <!-- Button to load the entries -->
       <div id="accordion">

       </div>
   </body>
</html>

load_entries.php:

load_entries.php:

<?php
   //connect to your database here
   $sql = "SELECT * FROM entries"; //replace entries by your own table name
   $result = mysqli_query($sql);
   while($row = mysqli_fetch_array($result)) {
      echo '<h3>'.$row['un_name'].'</h3>';
      echo '<div>'.$row['un_name_dec'].'</div>';
   }
?>

#2


2  

jquery Script

jquery脚本

$.post('server.php', function(data) {

$("#accordion").html(data);

$("#accordion").accordion();

});

Server.php

Server.php

$html='';
while($showE = mysqli_fetch_array($show)) {
$html.= '<h3>'.$showE['un_name'].'</h3>';
$html.= '<div>'.$showE['un_name_dec'].'</div>';
}
echo $html;

HTML MARKUP

HTML标记

<div id='accordion'></div>

#1


2  

So, you have two files: index.html and load_entries.php

你有两个文件:索引。html和load_entries.php

index.html:

index . html:

<html>
   <head>
       <!-- Make the imports of your stylesheets and scripts here -->
       <script type="text/javascript">
           $(function() {
              $("#accordion").accordion({header: "h3"});
           });
           function load_entries() {
              $.ajax({
                  url: "load_entries.php",
                  complete: function(data) {
                      $("#accordion").html(data.responseText);
                  }
              });
           }
       </script>
   </head>
   <body>
       <button onclick="load_entries();">Load</button> <!-- Button to load the entries -->
       <div id="accordion">

       </div>
   </body>
</html>

load_entries.php:

load_entries.php:

<?php
   //connect to your database here
   $sql = "SELECT * FROM entries"; //replace entries by your own table name
   $result = mysqli_query($sql);
   while($row = mysqli_fetch_array($result)) {
      echo '<h3>'.$row['un_name'].'</h3>';
      echo '<div>'.$row['un_name_dec'].'</div>';
   }
?>

#2


2  

jquery Script

jquery脚本

$.post('server.php', function(data) {

$("#accordion").html(data);

$("#accordion").accordion();

});

Server.php

Server.php

$html='';
while($showE = mysqli_fetch_array($show)) {
$html.= '<h3>'.$showE['un_name'].'</h3>';
$html.= '<div>'.$showE['un_name_dec'].'</div>';
}
echo $html;

HTML MARKUP

HTML标记

<div id='accordion'></div>