php中的jquery可折叠主题不'；行不通_Php_Html_Jquery Mobile

php中的jquery可折叠主题不'；行不通

php html jquery-mobile

php中的jquery可折叠主题不'；行不通,php,html,jquery-mobile,Php,Html,Jquery Mobile,我有一个jquery代码，它为我显示了可折叠性，当我将代码放入html5时，它可以工作，但我需要该代码来自php页面并显示在html5的div中，但它不工作，下面是我放入php+sql连接和jquerys文件中的代码 echo"<div data-role='collapsible'>"; while($row=mysqli_fetch_array($result)) { echo " <h4>" .$row['Nom']. "</h4>"; ec

我有一个jquery代码，它为我显示了可折叠性，当我将代码放入html5时，它可以工作，但我需要该代码来自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>";

echo”“；
while（$row=mysqli\u fetch\u数组（$result））
{
回显“$row['Nom']”；
回显“”$row['Nom']。“”；
}
回声“；

但它只是在我的div中显示了两行

添加：

这是我的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>


ré；国际叫嚣
$（函数（）{
$（“#手风琴”）。手风琴（）；
});
函数showUser（str）
{
var x=document.getElementById（'matr'）；
var-str=x.value；
如果（str==“”）
{
document.getElementById（“txtHint”）.innerHTML=“”；
返回；
} 
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“txtHint”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”http://IP/File name/test.php？q=“+str，true）；
xmlhttp.send（）；
}
数据


单击此处显示数据

您试图在一个尚不存在的元素上初始化jQuery插件。我认为了解哪里出了问题是很重要的，这样你以后就可以避免这个问题，因为这是你正在使用的一个非常常见的模式

我们将查看您的代码，从这一点开始

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

…在页面加载时立即执行。由于此时并没有id为

accordion

的元素，所以什么也并没有发生（请检查您的控制台——可能有错误）

然后，在输入元素上有

onchange

代码，它使用非jQuery ajax向php文件发送请求。php文件生成一些html，用id

accordion

封装在一个div中，并将其添加到页面中。该元素从未应用过与手风琴相关的javascript，因此没有任何功能

有些概念你是对的，但时机不对。首先，让我们使用jQueryAjax方法简化代码。此外，由于您已经为在项目中包含jQuery支付了性能/加载时间成本，因此您应该充分利用该功能并使用实用工具元素选择器：

新的javascript

(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);

（函数（$）{
//用于保留对ajax请求对象的引用
var searchQuery=false；
var showUser=函数（str）{
if（searchQuery！=false）//如果有挂起的请求，请取消它
searchQuery.abort（）；
var searchTerm=$（'#matr'）.val（）；
if（searchTerm.trim（）.长度<1）{
$（“#txtHint”）.html（“”）；
返回；
}
//清理旧手风琴
如果（$（“#一致”）。长度>0）
美元（“#手风琴”）。手风琴（‘销毁’）；
$（“#txtHint”）.html（'seaching…'）；
searchQuery=$.ajax({
“url”：”http://IP/file_name/test.php?q="一词,，
“成功”：函数（响应）{
searchQuery=false；
$（'#txtHint'）.html（响应）；
$（'手风琴'）。手风琴（）；
},
“错误”：函数（）{
searchQuery=false；
$（'#txtHint'）.html（'抱歉，出现错误'）；
}
});
};
//加载页面后，将更改事件添加到文本字段
$（文档）.ready（函数（）{
$（'#matr'）.change（showUser）；
});
})（jQuery）；

HTML文件

HTML所需的唯一更改是从输入中删除内联

onClick

事件。也就是说，您正在使用

center

将文本居中，这不是一个好的做法。使用css

文本对齐：居中标记越少越好（一般来说）
PHP
此处无需更改，但请确保正确处理了从$\u GET
获得的用户输入。如果您没有正确使用，单独使用mysqli.*并不能防止SQL注入。我们不在这里看到代码，所以请考虑这是一个标准声明：<强>不信任用户输入<强>！p>
文档

jQuery.ajax
-
jQuery UI协调小部件-
你确定你的PHP页面上包含了必要的javascript和css吗？没有，我把必要的文件放在了html5页面上，我用这种方法处理了很多文件，除了这个，你能给我们看一下你的完整代码吗？在新的javascript中，php文件的xmlhttprequest在哪里？它说未捕获类型错误：Object#没有方法，我已经删除了这些行，它在浏览器中工作，因为我正在开发一个混合的android应用程序，当我在eclipse中测试它时，它在那一行给了我错误：xhr.send（（s.hasContent&&s.data）| null）；在jquery行中！？请注意，这很正常，因为我不明白，它在浏览器中对我有效，但现在我不在浏览器中工作，它给了我origini null错误！！但是我第一次没有看到这些错误！是的，应该是searchTerm.trim（）.length<1
。至于jQuery中的错误。。。。我不能告诉你那里发生了什么。确保您使用的是最新版本，并尝试清除浏览器的应用程序数据/缓存。