PHP/AAJAX阻止jquery工作
PHP/AJAX stoping jquery from working?
这里有一个问题,当我将jquery作为一个单独的页面查看时,它可以正常工作,但当我尝试使用PHP-include或ajax将该PHP文件包含在另一个页面中时,jquery似乎无法加载。
我对这一切都很陌生,所以我很可能在做一些愚蠢的事情,任何帮助都将不胜感激!
HTML代码
<html>
<head>
<script>
function showUser(str)
{
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","getuser.php?q="+str,true);
//xmlhttp.open("GET","jquery.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" ID="option" onChange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">ID One</option>
<option value="2">ID Two</option>
<option value="3">ID Three</option>
<option value="4">ID Four</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
PHP/Jquery
<html>
<head>
<link href="../../Styles/tablestyles.css" rel="stylesheet" type="text/css" />
<?php include "db.php" ?>
<script type="text/javascript" src="../../JS/tablesorter/jquery-latest.js"></script>
<script type="text/javascript" src="../../JS/tablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript" src="../../JS/sorter.js"></script>
<script>
$(document).ready(function() {
// call the tablesorter plugin
$("table").tablesorter({
// sort on the first column and third column, order asc
sortList: [[0,0],[2,0]]
});
});
</script>
<?php
$q = intval($_GET['q']);
$result = mysqli_query($db_connection, "SELECT * FROM student WHERE Student_Id = '".$q."' or Student_Id = 7");
echo "<table id='"myTable'" class='"tablesorter'">
<thead>
<tr>
<th>Student ID</th>
<th>B-Code</th>
<th>First Name</th>
<th>Second Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['Student_Id'] . "</td>";
echo "<td>" . $row['B-code'] . "</td>";
echo "<td>" . $row['Student_Forename'] . "</td>";
echo "<td>" . $row['Student_Surename'] . "</td>";
echo "<td>" . $row['Student_Email'] . "</td>";
echo "</tr>";
}
echo"</tbody>
</table> ";
mysqli_close($con);
?>
您的AJAX请求将转到getuser.php,我假设您的第二个代码块代表的是什么?基本上,您实际上不是调用一些PHP代码来处理并向您发送响应,而是调用一个PHP脚本和一个HTML页面来启动,然后将其嵌入到现有页面中。
我建议做以下操作:
首先,从getuser.php中删除HTML,这样您只剩下php代码。
然后,在进行AJAX调用的页面中,作为"成功"函数的一部分,包括分类器函数,以便在您得到响应并写出新的HTML之后进行调用。效果如下:
getuser.php:
<?php include "db.php";
$q = intval($_GET['q']);
$result = mysqli_query($db_connection, "SELECT * FROM student WHERE Student_Id = '".$q."' or Student_Id = 7");
echo "<table id='"myTable'" class='"tablesorter'">
<thead>
<tr>
<th>Student ID</th>
<th>B-Code</th>
<th>First Name</th>
<th>Second Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['Student_Id'] . "</td>";
echo "<td>" . $row['B-code'] . "</td>";
echo "<td>" . $row['Student_Forename'] . "</td>";
echo "<td>" . $row['Student_Surename'] . "</td>";
echo "<td>" . $row['Student_Email'] . "</td>";
echo "</tr>";
}
echo"</tbody>
</table> ";
mysqli_close($con);
然后,在您的呼叫页面成功代码:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
$("table").tablesorter({
// sort on the first column and third column, order asc
sortList: [[0,0],[2,0]]
});
}
}
此外,还可以将必要的CSS和JavaScript包含移到调用页,这样您就可以使用jQuery对象等。我还建议更改该代码,使用jQuery控件和函数,而不是原始JavaScript。它将有助于保持代码的清洁、一致性和易读性:)
注意:我很快就把这个打出来了,所以任何人都可以随时打电话给我,纠正我的错误。
问题是,当jQuery脚本启动时,选择器语句的默认功能是select,并在该选择器的当前实例上执行此操作。
所以,如果你这样做:
$(document).ready(function() {
// call the tablesorter plugin
$("table").tablesorter({
// sort on the first column and third column, order asc
sortList: [[0,0],[2,0]]
});
});
它会查找页面上的所有表标签,并调用这些标签上的表分类器。但是,如果在页面中添加了额外的表标记,或者在页面已经加载时将第一个表标记添加到页面中,那么jquery不会调用表分类器,因为它以前在运行$("table")
选择器时不存在。
这还没有经过测试,但您可以尝试在每次ajax完成加载时将.tablesorter挂接到$("table")选择器上。
$( document ).ajaxComplete(function() {
$("table").tablesorter({
// sort on the first column and third column, order asc
sortList: [[0,0],[2,0]]
});
});
类似的情况是,当你使用类似的东西时:
$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});
.click事件仅绑定到首次加载页面时页面上存在的#目标元素。以后添加到页面的任何后续#target元素都不会绑定.click事件。
这么说吧。您有header.php,脚本就在这里。然后你有index.php
,然后你有了table.php
。如果在index.php
中包含header.php
,则header.php
中的脚本将影响index.php
中的元素。但是,如果在index.php
中也包含table.php
,则除非使用适当的事件绑定(如下面的.on()
事件),否则header.php
中的脚本不会影响table.php
中的元素。我想。。。?
要解决此问题,您必须使用.on事件:
$( "#target" ).on( "click", function() {
alert( $( this ).text() );
});
.on事件将自己绑定到选择器的所有当前和以后的实例,在本例中,选择器是#target。
- PHP/AAJAX阻止jquery工作
- Chrome扩展和Chome浏览器中的Jquery工作方式不同
- 2次点击事件不会'我在jquery工作
- 使用 href=“#” JQuery 工作,但使用 href=“page.jsp” 不起作用
- 迭代 javascript 对象无法通过 jQuery 工作
- 让简单的Javascript / jQuery工作(Ariel Flesler的ScrollTo)
- 更新面板阻止 jquery 工作
- Jquery工作,但只是暂时的
- 一个jQuery工作,两个不工作
- 当我使用AngularJS部分时,如何让JQuery工作
- 为什么不;我的jquery工作(使用延迟、hasclass、addclass、removeclass、keyUp、key
- jQuery工作不正常
- 我有一个JQuery工作,但小越野车
- :has() jquery工作不正常
- JQuery工作得太快了
- 如果一个输入单选被选中,改变父元素'的颜色:不能'使它与jQuery工作
- Chrome扩展:访问DOM的弹出.html和让jQuery工作
- 如何使下拉jQuery工作
- 尝试使jquery工作
- RegEx不与我的jQuery工作