Question

我有jQuery ListView从php文件加载数据。我还有一个复选框，onclick应该能够过滤列表。通过向服务器发送帖子消息并刷新列表来完成过滤。但是，复选框列表不会过滤列表。下面的代码只是整个实现的一部分。这是页面： http://i.cs.hku.hk/~hsbashir/Project_Work/Listview/restaurant_list.html

这是HTML实现：

<head>
<script>
lastRecord=0;
       function loadRest(){
        $('#sample').html( 'hello' );
        $.get( 
        "queryRestaurantsList.php?lastRecord="+lastRecord,
        function( data ) {
            $('#rest_mesgs').append( data )
            .listview( 'refresh' );
        }
    );
}
</script>
</head>

<body onload="loadRest()">
<div data-demo-html="true">                
<form>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Select your type of Restaurant:</legend>
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" onchange="onfilter()" value="Vegetarian"/>
<label for="checkbox-h-2a">Vegetarian</label>
</fieldset>
</form>
</div>

<div data-demo-html="true">
<ul data-role="listview" data-theme="a" data-split-theme="b" data-split-icon="plus" data-inset="true" id="rest_mesgs">
<li data-role="list-divider">Restaurants</li>   
</ul>
</div>

<script>    
function onfilter(){
 if($("#checkbox-h-2a").prop('checked')){
     document.getElementById("hehe").innerHTML = "if condition is true";
 var a = document.getElementById("checkbox-h-2a");
 $.post("queryRestaurantsList.php",
    {
    filter0 : a.value;
    },
    function(data){
    $('#rest_mesgs').append( data )
    .listview( 'refresh' );
    });
}
    else {
         document.getElementById("hehe").innerHTML = "not working";
    }   
    }
</script>
</body>

这是php文件：

mysql_connect($host,$username,$password);
mysql_select_db($database) or die( "Unable to select database");

//Check if POST array is empty or not

if ($_POST == null){

$query = "SELECT Name,Short_Loc,Image_Link,Type FROM Restaurant_Info"; 

$result = mysql_query($query) or die( "Unable to execute query");

while ($row = mysql_fetch_array($result)){
        print '<li>';   
        print '<a href="'.$row['Full_Link'].'">';
        print '<img style="height:80px;" src="'.$row['Image_Link'].'">';
        print '<h2 style="text-wrap : normal">'.$row['Name'].'</h2>';
        print '<p id="type" class="ui-li-aside"><strong>'.$row['Type'].'</strong></p>';
        print '<p>'.$row['Short_Loc'].'</p>';
        print '</a>';
        print '</li>';
        }
}

else {

    $value1 = $_POST[filter0];

    $query0 = 'SELECT Name,Short_Loc,Image_Link FROM Restaurant_Info WHERE Type LIKE ';
    $query0 = $query0.'"%'.$value1.'%"';
$result = mysql_query($query0) or die( "Unable to execute query");
$num_results = mysql_num_rows($result); 

if ($num_results == 0){
    print "Your criteria does not match any of the restaurants";
}

else{
    while($row = mysql_fetch_array($result)) {
    print '<li>';   
    print '<a href="'.$row['Full_Link'].'">';
    print '<img style="height:80px;" src="'.$row['Image_Link'].'">';
    print '<h2 style="text-wrap : normal">'.$row['Name'].'</h2>';
    print '<p>'.$row['Short_Loc'].'</p>';
    print '</a>';
    print '</li>';
}
}

Answer 1

我可以看到2个错误，但不幸的是我无法测试它们。

1 - 这个php部分：

else {

$value1 = $_POST[filter0];

应替换为：

else {

$value1 = $_POST['filter0'];

否则filter0将被视为常量而不是字符串。

2 - 在你的HTML上，你做了：

<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" onchange="onfilter()" value="Vegetarian"/>

这应该是

<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" onclick="onfilter()" value="Vegetarian"/>

我认为当您选中或取消选中复选框时，复选框不会触发。

Answer 2

1。要维护复选框状态更改，请使用jQuery.toggle（）。这是最安全的方式。

$("#checkbox-h-2a").toggle(function(){
    var filter = $(this).val();
    getListviewItems({filter0: filter});
}, function() {
    getListviewItems();
});

2。使用params创建一个函数以获取列表项。这样，您就可以保持代码清洁，易于维护。

function getListviewItems(opt) {
    opt.filter0 = (opt.filter0 == undefined)?'':opt.filter0;
    /* Body of function, post and/or get calls, etc. */
}

使用Checkbox过滤jQuery ListView

2 个答案: