根据复选框的点击过滤数据
Filtering data according to click of checkboxes
目前,我在视图 class 中以 table 格式显示所有数据。现在我在顶部有复选框,当用户进入页面时默认选中这些复选框。现在我想要它,以便当用户取消选中其中任何一个时,它应该向我的控制器发送 POST ajax 调用并从我的模型中删除该过滤器。为此,我使用了以下代码:
查看Class:
<span><input type="checkbox" id="propsubcommunity" name="matchfield" value="propsubcommunity" checked>
<label for="propsubcommunity">Sub-Community</label></span>
<span><input type="checkbox" id="community" name="matchfield" value="community" checked>
<label for="community">Community</label></span>
<span><input type="checkbox" id="proptype" name="matchfield" value="unit_type" checked>
<label for="proptype">Type (Villa, Apartment,etc)</label></span>
<span><input type="checkbox" id="propbeds" name="matchfield" value="bedrooms" checked>
<label for="propbeds">Beds</label></span>
<?php if($properties) foreach($properties as $lead): ?>
<td><?php echo $lead['refno'] ?></td>
<?php endforeach;?>
<script>
$("input[name='matchfield']").change(function() {
var matchfields = [];
$.each($("input[name='matchfield']:checked"), function(){
matchfields.push($(this).val());
});
$.ajax({
url: 'listings/edit/'+<?php echo $property->listingsid;?>,
data : { selmatches : matchfields, clickmatches:'clicked' },
type: 'POST',
beforeSend: function(){
$("#matchedleadscont").empty();
$("#loader").show();
},
success: function (data) {
$("#loader").hide();
$("#matchedleadscont").html(data);
}
});
});
控制器Class:
if(isset($_POST["clickmatches"]) ){
if(in_array('community', $_POST["selmatches"])){
$propcommunity = $default_data[0]['community'];
}
if(in_array('propsubcommunity', $_POST["selmatches"])){
$propsubcommunity = $default_data[0]['property_name'];
}
if(in_array('bedrooms', $_POST["selmatches"])){
$propbeds = $default_data[0]['bedrooms'] ;
}
if(in_array('unit_type', $_POST["selmatches"])){
$proptype = $default_data[0]['unit_type'];
}
$edit['properties']= $this->listings_model->load_leads($propcommunity, $propsubcommunity,$propbeds,$proptype);
}
型号Class:
$this->db->select('*');
$this->db->from("table1");
if($community!='')
$this->db->where('crm_data_table.community',$community);
if($subcommunity!='')
$this->db->where('crm_data_table.property_name',$subcommunity);
if($proptype!='')
$this->db->where('crm_data_table.unit_type',$proptype);
if($bedrooms!='')
$this->db->where('crm_data_table.bedrooms',$bedrooms);
$query = $this->db->get();
return $query->result_array();
但是当我更改我的复选框时这并没有改变。我放了一个 var_dump($_POST["selmatches"]);死();和“clickmatches”,两者都给出了以下内容:
我们可以简化 jQuery
$("input[name='matchfield']").on("change", function() {
const matchfields = $("input[name='matchfield']:checked").map(function() {
return $(this).val()
}).get();
const data = {
selmatches: matchfields,
clickmatches: 'clicked'
};
$.ajax({
url: 'listings/edit/'+<?php echo $property->listingsid;?>,
data : data,
...
});
});
下面的代码得到
array(4) { [0]=> string(16) "propsubcommunity" [1]=> string(9) "community" [2]=> string(9) "unit_type" [3]=> string(8) "bedrooms" }
found community (if community is on)
PHP
<?php
error_reporting(E_ALL);
header("Access-Control-Allow-Origin: *"); // if on another server
$selmatches = $_POST['selmatches'];
var_dump($selmatches);
if(in_array('community', $_POST["selmatches"])){
echo "Found community";
}
?>
$("input[name='matchfield']").on("change", function() {
const matchfields = $("input[name='matchfield']:checked").map(function() {
return $(this).val()
}).get();
const data = {
selmatches: matchfields,
clickmatches: 'clicked'
};
console.log(data)
$.ajax({
url: 'https://plungjan.name/SO/testAjaxArray/save.php',
data: data,
type: 'POST',
success: function(data) {
$("#matchedleadscont").html(data);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<span><input type="checkbox" id="propsubcommunity" name="matchfield" value="propsubcommunity" checked>
<label for="propsubcommunity">Sub-Community</label></span>
<span><input type="checkbox" id="community" name="matchfield" value="community" checked>
<label for="community">Community</label></span>
<span><input type="checkbox" id="proptype" name="matchfield" value="unit_type" checked>
<label for="proptype">Type (Villa, Apartment,etc)</label></span>
<span><input type="checkbox" id="propbeds" name="matchfield" value="bedrooms" checked>
<label for="propbeds">Beds</label></span>
<div id="matchedleadscont"></div>
在视图中:
将 name="matchfield"
更改为 name="matchfield[]"
....
$("input[type='checkbox']").click(function() {
$.ajax({
url: 'listings/edit/'+<?php echo $property->listingsid;?>,
data : $(form).serialize(),
type: 'POST',
beforeSend: function(){
$("#matchedleadscont").empty();
$("#loader").show();
},
success: function (data) {
$("#loader").hide();
$("#matchedleadscont").html(data);
}
});
});
在你的控制器中:
if(in_array('community', $_POST["matchfield"])){
$propcommunity = $default_data[0]['community'];
}
目前,我在视图 class 中以 table 格式显示所有数据。现在我在顶部有复选框,当用户进入页面时默认选中这些复选框。现在我想要它,以便当用户取消选中其中任何一个时,它应该向我的控制器发送 POST ajax 调用并从我的模型中删除该过滤器。为此,我使用了以下代码:
查看Class:
<span><input type="checkbox" id="propsubcommunity" name="matchfield" value="propsubcommunity" checked>
<label for="propsubcommunity">Sub-Community</label></span>
<span><input type="checkbox" id="community" name="matchfield" value="community" checked>
<label for="community">Community</label></span>
<span><input type="checkbox" id="proptype" name="matchfield" value="unit_type" checked>
<label for="proptype">Type (Villa, Apartment,etc)</label></span>
<span><input type="checkbox" id="propbeds" name="matchfield" value="bedrooms" checked>
<label for="propbeds">Beds</label></span>
<?php if($properties) foreach($properties as $lead): ?>
<td><?php echo $lead['refno'] ?></td>
<?php endforeach;?>
<script>
$("input[name='matchfield']").change(function() {
var matchfields = [];
$.each($("input[name='matchfield']:checked"), function(){
matchfields.push($(this).val());
});
$.ajax({
url: 'listings/edit/'+<?php echo $property->listingsid;?>,
data : { selmatches : matchfields, clickmatches:'clicked' },
type: 'POST',
beforeSend: function(){
$("#matchedleadscont").empty();
$("#loader").show();
},
success: function (data) {
$("#loader").hide();
$("#matchedleadscont").html(data);
}
});
});
控制器Class:
if(isset($_POST["clickmatches"]) ){
if(in_array('community', $_POST["selmatches"])){
$propcommunity = $default_data[0]['community'];
}
if(in_array('propsubcommunity', $_POST["selmatches"])){
$propsubcommunity = $default_data[0]['property_name'];
}
if(in_array('bedrooms', $_POST["selmatches"])){
$propbeds = $default_data[0]['bedrooms'] ;
}
if(in_array('unit_type', $_POST["selmatches"])){
$proptype = $default_data[0]['unit_type'];
}
$edit['properties']= $this->listings_model->load_leads($propcommunity, $propsubcommunity,$propbeds,$proptype);
}
型号Class:
$this->db->select('*');
$this->db->from("table1");
if($community!='')
$this->db->where('crm_data_table.community',$community);
if($subcommunity!='')
$this->db->where('crm_data_table.property_name',$subcommunity);
if($proptype!='')
$this->db->where('crm_data_table.unit_type',$proptype);
if($bedrooms!='')
$this->db->where('crm_data_table.bedrooms',$bedrooms);
$query = $this->db->get();
return $query->result_array();
但是当我更改我的复选框时这并没有改变。我放了一个 var_dump($_POST["selmatches"]);死();和“clickmatches”,两者都给出了以下内容:
我们可以简化 jQuery
$("input[name='matchfield']").on("change", function() {
const matchfields = $("input[name='matchfield']:checked").map(function() {
return $(this).val()
}).get();
const data = {
selmatches: matchfields,
clickmatches: 'clicked'
};
$.ajax({
url: 'listings/edit/'+<?php echo $property->listingsid;?>,
data : data,
...
});
});
下面的代码得到
array(4) { [0]=> string(16) "propsubcommunity" [1]=> string(9) "community" [2]=> string(9) "unit_type" [3]=> string(8) "bedrooms" }
found community (if community is on)
PHP
<?php
error_reporting(E_ALL);
header("Access-Control-Allow-Origin: *"); // if on another server
$selmatches = $_POST['selmatches'];
var_dump($selmatches);
if(in_array('community', $_POST["selmatches"])){
echo "Found community";
}
?>
$("input[name='matchfield']").on("change", function() {
const matchfields = $("input[name='matchfield']:checked").map(function() {
return $(this).val()
}).get();
const data = {
selmatches: matchfields,
clickmatches: 'clicked'
};
console.log(data)
$.ajax({
url: 'https://plungjan.name/SO/testAjaxArray/save.php',
data: data,
type: 'POST',
success: function(data) {
$("#matchedleadscont").html(data);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<span><input type="checkbox" id="propsubcommunity" name="matchfield" value="propsubcommunity" checked>
<label for="propsubcommunity">Sub-Community</label></span>
<span><input type="checkbox" id="community" name="matchfield" value="community" checked>
<label for="community">Community</label></span>
<span><input type="checkbox" id="proptype" name="matchfield" value="unit_type" checked>
<label for="proptype">Type (Villa, Apartment,etc)</label></span>
<span><input type="checkbox" id="propbeds" name="matchfield" value="bedrooms" checked>
<label for="propbeds">Beds</label></span>
<div id="matchedleadscont"></div>
在视图中:
将 name="matchfield"
更改为 name="matchfield[]"
....
$("input[type='checkbox']").click(function() {
$.ajax({
url: 'listings/edit/'+<?php echo $property->listingsid;?>,
data : $(form).serialize(),
type: 'POST',
beforeSend: function(){
$("#matchedleadscont").empty();
$("#loader").show();
},
success: function (data) {
$("#loader").hide();
$("#matchedleadscont").html(data);
}
});
});
在你的控制器中:
if(in_array('community', $_POST["matchfield"])){
$propcommunity = $default_data[0]['community'];
}