I am trying to use ajax to filter the data after an option is selected. Here is html code:
<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>
In the jquery code, I am trying to print filtered data in accordion:
<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);
},
});
}
});
}
});
And filter2.php
where I try to print names:
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>';
}
So the problem is it doesnt work. I dont get any reaction after choosing option.
jquery provide a .load function that you can use to load your div. So i am using the same function for more about this function refer to this link http://api.jquery.com/load/ Here the solution i think this might help you, Here's the 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>
and Now Here's the php code
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>';
}
}
Simply, you shouldn't put your functions inside $(document).ready(function(){ });
So after removing it the final JavaScript code will be if still have any problem let me know
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);
},
});
}
});
}
You need to structure and simplify your code, here are the obvious errors that can be spotted from your code :
The filter function shouldn't be inside the DOM ready event handler :
$(document).ready(function(){
function filter(item)
{ ...
Also,
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>";
}
You are echoing multiple times (for each row), where you should only do it once.
Also this is not a test, 0 is affected to $color instead of being tested against:
if($color=0) // should be ($color == 0)
Now, to simplify what you are trying to acheive let's recreate filter2.php :
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>";
}
And the front end would look like :
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.