選択した後にajaxでデータをフィルタリングする

オプションを選択した後にajaxを使用してデータをフィルタリングしようとしています。ここでは、HTMLコードは次のとおりです。jqueryのコードで選択した後にajaxでデータをフィルタリングする

<select name="filter" onchange="filter(this.value)"> 
    <option disabled selected>Sort By</option> 
    <option value="all">All Artists</option> 
    <option value="new">Free Artists</option> 
</select>

、私はアコーディオンでフィルタリングされたデータを印刷しようとしています：

私は名前を印刷しよう

<link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.css"/> 
<script type="text/javascript" src="jquery-ui/jquery.js"></script> 
<script type="text/javascript" src="jquery-ui/jquery-ui.js"></script> 

$(document).ready(function(){ 
    function filter(item) 
    { 
     $.ajax({ 
      type: "POST", 
      url: "filter2.php", 
      data: { value: item}, 
      success:function(data){ 
        document.getElementById('getData').style.display = "block"; 
        document.getElementById("getData").innerHTML = response; 
        $('#hideData').hide(); 
        $("#myAccordion").accordion({heightStyle:"content", collapsible:true}); 
         $("#myAccordion li ").draggable({ 
          appendTo: "body", 
          helper: "clone", 
          refreshPositions: true, 
          start: function (event, ui) { 
           sourceElement = $(this); 
          },   
         }); 
      } 
     }); 
    } 
});

そしてfilter2.php：

require_once('inc/database_connection.php'); 
include 'model/model.project.php'; 
include 'model/model.filter.php'; 
$fieldname = $_POST['value']; 
if($fieldname=="all") 
{ 
    $result1 = getAll(); 
    while($row1=mysqli_fetch_array($result1)) 
    { 
     $name = $row1['username']; 
     echo '<div id="getData">'; 
     echo '<ul class="source">'; 
     echo "<li class='item'><span class='closer'>x</span>".$name."</li>"; 
    } 
     echo '</ul>'; 
     echo '</div>'; 
} 
else if($fieldname=="new") 
{ 
    $result2 = getFree(); 
    while($row2=mysqli_fetch_array($result2)) 
    { 
     $name = $row2['username']; 
     $color = $row2['color']; 
     echo '<div id="getData">'; 
     echo '<ul class="source">'; 
     if($color=0) 
     { 
      echo "<li class='item'><span class='closer'>x</span>".$name."</li>";    
     }  
    } 
     echo '</ul>'; 
     echo '</div>';  
}

だから問題はそれが働かないということです。私はオプションを選択しても反応がない。

出典

2017-01-24 Yevgeniy Bagackiy

それは動作しません？何かエラーが出ていますか？ javascriptのエラーのためのfirebugをチェックするか、XHRオプションをチェックして、あなたがajaxからどんな反応を得ているかチェックしてください。 –

あなたの関数を '$（document）.ready'の外に移動します。あなたはその行を削除することができます – Bhavik

@Bhavik didhelヘルプ –

jqueryはdivをロードするために使用できる.load関数を提供します。だから私はここでは、このリンクhttp://api.jquery.com/load/ を参照してください。この関数の詳細のために同じ機能を使用しています私は、これはあなたを助けるかもしれないと思うソリューション、はここでHTML

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> 
</head> 
<body> 
<select name="filter" onchange="filter(this.value)"> 
<option disabled selected>Sort By</option> 
<option value="all">All Artists</option> 
<option value="new">Free Artists</option> 
</select> 

<div id="div1"></div> 
</body> 
</html> 
<script> 
function filter(item) { 
    $("#div1").load("filter.php", {value: item}); 
} 
</script>

だと今ここでPHPコードは

require_once('inc/database_connection.php'); 
include 'model/model.project.php'; 
include 'model/model.filter.php'; 
$fieldname = $_REQUEST['value']; 
if (isset($fieldname)) { 
if ($fieldname == "all") { 

    $result1 = getAll(); 
    while($row1=mysqli_fetch_array($result1)) 
    { 
     $name = $row1['username']; 
     echo '<div id="getData">'; 
     echo '<ul class="source">'; 
     echo "<li class='item'><span class='closer'>x</span>".$name."</li>"; 
    } 
    echo '</ul>'; 
    echo '</div>'; 
} else if ($fieldname == "new") { 

    $result2 = getFree(); 
    while($row2=mysqli_fetch_array($result2)) 
    { 
     $name = $row2['username']; 
     $color = $row2['color']; 
     echo '<div id="getData">'; 
     echo '<ul class="source">'; 
     if($color=0) 
     { 
      echo "<li class='item'><span class='closer'>x</span>".$name."</li>"; 
     } 
    } 
    echo '</ul>'; 
    echo '</div>'; 
} 
}

です

出典

2017-01-24 07:01:14

あなたの関数を内部に入れないでください。$(document).ready(function(){ }); それでも問題が解決しない場合は、最後のJavaScriptコードはになります。

function filter(item) { 
    $.ajax({ 
     type: "POST", 
     url: "filter2.php", 
     data: {value: item}, 
     success: function(data) { 
      alert(data); 
      document.getElementById('getData').style.display = "block"; 
      document.getElementById("getData").innerHTML = response; 
      $('#hideData').hide(); 
      $("#myAccordion").accordion({ 
       heightStyle: "content", 
       collapsible: true 
      }); 
      $("#myAccordion li ").draggable({ 
       appendTo: "body", 
       helper: "clone", 
       refreshPositions: true, 
       start: function(event, ui) { 
        sourceElement = $(this); 
       }, 
      }); 
     } 
    }); 
}

出典

2017-01-24 07:26:01

あなたが構築し、コードを簡素化する必要があり、ここにあなたのコードから発見することができます明らかなエラーは以下のとおりです。

フィルタ機能は、DOM readyイベントハンドラ内であってはならない。

$(document).ready(function(){ 
function filter(item) 
{ ...

また

、

while($row1=mysqli_fetch_array($result1)){ 
    $name = $row1['username']; 
    echo '<div id="getData">'; 
    echo '<ul class="source">'; 
    echo "<li class='item'><span class='closer'>x</span>".$name."</li>"; 
    }

はあなたが一度のみを行う必要があります（行ごとの）複数回、エコーされています。

また、これは0ではなくに対してテストされるので$色に影響され、テストではありません：今

if($color=0) // should be ($color == 0)

、あなたはのはfilter2.phpを再作成しましょうacheiveしようとしているものを簡単にするために：

function getAll() // this is just to mimic your 'all' data 
{ 
    return array(
     array('username' => 'User 1', 'color' => 'red'), 
     array('username' => 'User 2', 'color' => 0), 
     array('username' => 'User 3', 'color' => 'red'), 
     array('username' => 'User 4', 'color' => 0), 
     array('username' => 'User 5', 'color' => 'red')); 
} 

function getFree() // this is just to mimic your 'free' data source 
{ 
    return array(
     array('username' => 'User 2', 'color' => 0), 
     array('username' => 'User 4', 'color' => 0)); 
} 

$results = array(); 
$fieldname = $_POST['value']; 
if ($fieldname == "all") // at a first stage you only need to check which data to use/fetch from the database 
    $results = getAll(); 
elseif ($fieldname == "new") 
    $results = getFree(); 

// now you have the data, you have to output the desired html for the accordion, I followed the regular jQuery layout so you can test it 
while($result=array_pop($results)) { // change array_pop back to mysqli_fetch_array($results) 
    echo "<h3>$result[username]</h3> 
       <div> 
        <p> 
         $result[username] 
        </p> 
       </div>"; 
}

とフロントエンドは、次のようになります。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Accordion - Test</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
     $(function() { 
      $("#myAccordion").accordion(); 
     }); 
    </script> 
</head> 
<body> 

<select name="filter" onchange="filter(this.value)"> 
    <option disabled selected>Sort By</option> 
    <option value="all">All Artists</option> 
    <option value="new">Free Artists</option> 
</select> 

<div id="myAccordion"></div> 

<script> 
    function filter(item) 
    { 
     $.ajax({ 
      type: "POST", 
      url: "filter2.php", 
      data: { value: item}, 
      success:function(data){ 
       $('#myAccordion').html(data).accordion("refresh"); 
      } 
     }); 
    } 
</script> 
</body> 
</html>

出典

2017-01-24 07:26:34 mrbm

選択した後にajaxでデータをフィルタリングする

答えて

関連する問題