0

コードをhtml5に配置すると、折りたたみ可能であることを示すjqueryコードがありますが、そのコードをphpページから取得し、html5のdivに表示する必要がありますが、動作しません。私がphp + sql接続とjquerysのファイルに入れたコードです.....

echo"<div data-role='collapsible'>";

while($row=mysqli_fetch_array($result))
{

  echo " <h4>" .$row['Nom']. "</h4>";
  echo " <p>" .$row['Nom']. "</p>";

}
echo"</div>";

しかし、それは私のdivに2行の行を表示するだけです...

追加:

これは私のphpファイルです：

<?php
$host     = "localhost";
$port     = number;
$socket   = "";
$user     = "root";
$password = "";
$dbname   = "database name";
$value =$_GET['value'];

$con = new mysqli($host, $user, $password, $dbname, $port, $socket);
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }

mysqli_select_db($con,"ajax_demo");
$sql="request";


$result = mysqli_query($con,$sql);

  echo'<div id="accordion">';

while($row=mysqli_fetch_array($result))
{

echo"  <h3>test</h3>
  <div>
    <p>test </p>
  </div>";

}
 echo" </div>";

echo"</div>";
mysqli_close($con);

?>

html5ファイルは次のとおりです。

<!DOCTYPE html>

<head> 
   <LINK rel="stylesheet" type="text/css" href="style.css">

   <script src="log.js" charset="ISO-8859-1"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title> r&eacute;clamation Interne </title>
  <script>

  $(function() {
    $( "#accordion" ).accordion();
  });


function showUser(str)
{
var x=document.getElementById('matr');
var str = x.value;
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","http://IP/File name/test.php?q="+str,true);
xmlhttp.send();
}
</script>      
</head>
<body>
</div>
  <div class="login">

   <center><h1>Datas  </h1></center>

   <div id="landmark-1" data-landmark-id="1">   
  <div> 

 <center> 
 <form name="data" >

<input type="text"  id="matr" onchange="showUser()" >
</form></center>
</div>
<br>
<center>
<div id="txtHint"><b>Click here to show data</b></div></center>
  </div>

  <div class="login-help">
  </div>
</body>
</html>
4

1 に答える 1

0

まだ存在しない要素で jQuery プラグインを初期化しようとしています。何がうまくいかないのかを理解することが重要だと思います。これにより、将来この問題を回避できます。これは、使用している非常に一般的なパターンであるためです。

このビットから始めて、コードを見ていきます...

  $(function() {
    $( "#accordion" ).accordion();
  });

...ページが読み込まれるとすぐに実行されます。accordionその時点でid を持つ要素がないため、何も起こりません (コンソールを確認してください。おそらくエラーがあります)。

次に、onchange入力要素にコードがあり、jQuery 以外の ajax を使用して、php ファイルにリクエストを送信します。php ファイルは、 id の div でラップされた html を生成し、accordionそれをページに追加します。その要素には、アコーディオン関連の JavaScript が適用されていないため、機能を持たずにそこに置かれています。

いくつかの概念は正しいですが、タイミングが間違っています。まず、jQuery ajax メソッドを使用してそのコードを単純化しましょう。また、プロジェクトに jQuery を含めるためにパフォーマンス/ロード時間のコストを既に支払っているため、機能を最大限に活用し、ユーティリティ要素セレクターも使用する必要があります。

新しいジャバスクリプト

(function ($) {
    // used to keep a reference to the ajax request object
    var searchQuery = false;

    var showUser = function (str) {
        if (searchQuery != false) // if there is a pending request, cancel it
            searchQuery.abort();

        var searchTerm = $('#matr').val();
        if (searchTerm .trim().length < 1) {
            $("#txtHint").html('');
            return;
        }

        // clean up the old accordion
        if ($("#accordion").length > 0)
            $("#accordion").accordion('destroy');
        $("#txtHint").html('seaching...');

        searchQuery = $.ajax({
            'url':'http://IP/file_name/test.php?q='+searchTerm,
            'success':function (response) {
                searchQuery = false;
                $('#txtHint').html(response);
                $('#accordion').accordion();
            },
            'error': function () {
                searchQuery = false;
                $('#txtHint').html('Sorry, there was an error');
            }
        });
    };

    // add the change event to the text field, once the page loads
    $(document).ready(function () {
        $('#matr').change(showUser);
    });
})(jQuery);

HTML

HTML に必要な唯一の変更はonClick、入力からインライン イベントを削除することです。centerとはいえ、テキストを中央に配置することはお勧めできません。代わりにcssを使用してくださいtext-align:center;-- タグが少ないほど良いです (一般的に言えば)。

PHP

ここで何も変更する必要はありませんが、取得しているユーザー入力を正しく処理していることを確認してください$_GET。単独で使用mysqli_*しても、正しく使用しないと SQL インジェクションを防ぐことはできません。ここにはそのコードが表示されないため、これは標準的な免責事項と考えてください:ユーザー入力は絶対に信用しないでください。

ドキュメンテーション

于 2013-09-09T18:29:54.440 に答える