Фильтрация списка jQuery с помощью флажка

#php #jquery

Вопрос:

У меня есть jQuery ListView, который загружает данные из файла php. У меня также есть флажок, по которому onclick должен иметь возможность фильтровать список. Фильтрация выполняется путем отправки сообщения post на сервер и обновления списка. Однако список checkbox не фильтрует список. Приведенный ниже код является только частью всей реализации. Вот страница: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>';
}
}

1. В вашем коде есть серьезная уязвимость для sql-инъекции. Я предлагаю вам использовать параметризованные запросы и исправить это как можно скорее.

2. @Esa да, спасибо, что указали на это.

3. В чем ваш вопрос?

4. @user3558931. Список флажков не фильтрует список

Ответ №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"/>

Я думаю, что флажок не будет срабатывать при изменении, когда вы устанавливаете или снимаете его.

Ответ №2:

1 . Для поддержания изменения состояния флажка используйте jQuery.toggle(). Это самый безопасный способ.

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

2. Создайте одну функцию с параметрами для получения элементов списка. Таким образом, вы сохраните свой код чистым и простым в обслуживании.

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