I want to filter Table data, but I have more than hundred row so I used pagination. If i apply any filter it only filters the current page inseated of entier table.
Html and javascript code are given below
<select id='filterText' style='display:inline-block' onchange='filterText()'>
<option disabled selected>Select</option>
<option value='Active'>Active</option>
<option value='Obsolete'>Obsolete</option>
<option value='all'>All</option>
</select>
<table class="table table-striped table-bordered table-hover table-list-search" id="dataTables-example" >
<thead>
<tr style="background-color:#abdcd5;">
<th align="left" class="col-xs-2">Employee ID</th>
<th align="left" class="col-xs-1">Name</th>
<th align="left" class="col-xs-2">Location</th>
<th align="left" class="col-xs-2">Company </th>
<th align="left" class="col-xs-3">Job Description</th>
<th align="left" class="col-xs-1">Status</th>
<th align="left" class="col-xs-1">Action</th>
</tr>
</thead>
<tbody>
<?php employeedetails::employeelist();?>
</tbody>
</table>
Javascript
<script>
function filterText() {
var rex = new RegExp($('#filterText').val());
if(rex == "/all/") {
clearFilter();
} else {
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFilter() {
$('.filterText').val('');
$('.content').show();
}
</script>
Php code
<?php
class employeedetails
{
//function for display details of employee
static function employeelist()
{
$tenanPortalId = $_SESSION['PortalID'];
$databaseConnectionObject = new DB_CONNECT();
$resultForGettingDetailsOfEmployees = mysqli_query($databaseConnectionObject->connect(),$Query);
if(!$resultForGettingDetailsOfEmployees){
die(mysqli_error($databaseConnectionObject->connect()));
}
else if($resultForGettingDetailsOfEmployees)
{
while($row = mysqli_fetch_array($resultForGettingDetailsOfEmployees))
{
$employee_ID=$row['employee_id'];
$employee_ID_trim = str_replace($tenanPortalId."~","",$row['employee_id']);
$employee_Name=$row['employee_name'];
$employee_Location=$row['employee_location'];
$employee_Status=$row['employee_Status'];
$expenseManager=$row['expenseManager'];
$SnactionManager=$row['SnactionManager'];
$EmployeeLocation=$row['countryName'];
$hireDate=$row['hireDate'];
if($row['company'] == "->")
{
$company = "";
}
else
{
$company=$row['company'];
}
if($row['reportingLineUnit'] == "->")
{
$reportingLineUnit="";
}
else
{
$reportingLineUnit=$row['reportingLineUnit'];
}
$employeeType = $row['employeeType'];
$jobdescription = $row['jobDescription'];
?>
<tr class="content">
<td>
<a data-toggle="modal" data-target='#<?php echo "$employee_ID_trim"; ?>' style="cursor: pointer;">
<?php echo "$employee_ID";?>
</a>
<?php
$msg = "";
if($SnactionManager == "" || $SnactionManager == "No")
{
$msg = "Do you want to make $employee_Name as Sanction Manager?" ;
}
else
{
$msg = "Do you want to remove $employee_Name as Sanction Manager?" ;
//echo " <span><img src='../assets/img/twouser.png' width='20px;' height='20px;'/></span>";
}
echo $imgPath = ($expenseManager == "Yes") ?
(($SnactionManager == "Yes") ? " <span><img src='../assets/img/twouser.png' width='20px;' height='20px;' title='Project & Sanction Manager'/></span>" : " <span><img src='../assets/img/project.png' width='20px;' height='20px;' title='Project Manager'/></span>" )
:
(($SnactionManager == "Yes") ? " <span><img src='../assets/img/sanction.png' width='20px;' height='20px;' title='Sanction Manager'/></span>" : "" ) ;
?>
<!-- Modal -->
<div id='<?php echo "$employee_ID_trim"; ?>' class="modal fade" role="dialog" ">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
<?php echo "$employee_Name";?>
</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<tr style="background-color:#abdcd5;">
<th align="left" class="col-xs-2">Project Manager</th>
<th align="left" class="col-xs-2">Sanction Manager</th>
<th align="left" class="col-xs-2">Type</th>
<th align="left" class="col-xs-2">Reporting Line Unit </th>
<th align="left" class="col-xs-2">Hire Date </th>
</tr>
<tr>
<td><?php echo "$expenseManager";?></td>
<td><?php echo "$SnactionManager";?></td>
<td><?php echo "$employeeType";?></td>
<td><?php echo "$reportingLineUnit";?></td>
<td><?php echo date("m/d/Y", strtotime($hireDate));?></td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
<td>
<?php echo "$employee_Name"; ?>
</td>
<td><?php echo "$EmployeeLocation";?></td>
<td><?php echo "$company";?></td>
<td><?php echo "$jobdescription";?></td>
<?php $color =($employee_Status=="Obsolete" ? "red" : "green") ; ?>
<td style="color:<?php echo $color; ?> ;font-weight:bold;text-align:center;"><?php echo "$employee_Status";?></td>
<td align="center">
<button type="button" style="background-color:#00a4a4;border-color:#00a4a4;" class="btn btn-primary btn-xs" data-toggle="modal" data-target='#<?php echo "$employee_ID_trim"."SMM"; ?>' style="cursor: pointer;">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<div id='<?php echo "$employee_ID_trim"."SMM"; ?>' class="modal fade" role="dialog" ">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
<?php echo "$employee_Name";?>
</h4>
</div>
<div class="modal-body">
<div class="row" style="padding-bottom:5%;">
<?php echo $msg; ?>
</div>
<div class="row" style="padding-bottom:3%;">
<form id="eventForm" action="../index.php" method ="POST">
<input type="hidden" class="form-control" id="" name="EmployeeId" value="<?php echo "$employee_ID"; ?>" />
<input type="hidden" class="form-control" id="" name="EmployeeName" value="<?php echo "$employee_Name"; ?>" />
<?php
$buttonName = "Assign";
if($SnactionManager == "" || $SnactionManager == "No")
{
?>
<input type="hidden" name="SnManager" value="Yes">
<?php
}
else
{
$buttonName = "Remove";
?>
<input type="hidden" name="SnManager" value="No">
<?php
}
?>
<button type="submit" class="btn btn-primary" value="Assign Manger" name="operation">
<span class="glyphicon glyphicon-ok" ></span>
<?php echo $buttonName; ?>
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">
<span class="glyphicon glyphicon-remove" ></span>
Cancel
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php
} //while
} //else if
} //function
} //class
?>
Related
Hello i am getting an error while fetching data with ajax as Cannot read property 'childNodes' of null can any one tell me what is going wrong with my codes, actually i have made a form to search data with date from to date to so after fetching the records i want to display them in table but childnode error is showing how can i resolve it. Most interestingly when i console i found the desired data just it is not showing inside of div2.
Jquery
$(document).on('submit','#date-search',function(e){
e.preventDefault();
// var url = $(this).attr('action');
var data = $(this).serialize();
$.ajax({
url:"model/orders/orders.php?selectdate",
type:"POST",
data:data,
success:function(data){
// console.log(data);
// $('#date-search')[0].reset();
$('#div2').html(data);
if(data==''){
$('#div2').append('<tr class="odd"><td valign="top" colspan="5" class="dataTables_empty">No data available in table</td></tr>');
}
// $("#div2").html(data, function () {
// $(".table").dataTable({
// retrieve:true,
// });
// });
}
});
return false;
});
php part
if(isset($_GET['selectdate'])){
$date_from = $_POST['date_from'];
$date_to = $_POST['date_to'];
$sql_date = "select * from $tb_orders where book_date >= '$date_from' and book_date <= '$date_to' order by id DESC";
$res_date = mysqli_query($conn,$sql_date);
if($num_date = mysqli_num_rows($res_date) > 0){
$i=0;
while($rows_date = mysqli_fetch_assoc($res_date)){
$i++;
$order_id = $rows_date['id'];
$product = $rows_date['product_id'];
$total_price = $rows_date['total_price'];
$transac = $rows_date['transaction_no'];
$sel_pro = "select * from $tb_products where id='$product'";
$res_pro = mysqli_query($conn,$sel_pro);
if($res_pro){
$rows_pro = mysqli_fetch_assoc($res_pro);
$pname = $rows_pro['pname'];
}
$sel_ro = "select * from $tb_customers where order_id='$order_id'";
$res_ro = mysqli_query($conn,$sel_ro);
if($res_ro){
$rows_ro = mysqli_fetch_assoc($res_ro);
$cust_name = $rows_ro['cust_name'];
$cust_number = $rows_ro['cust_number'];
}
?>
<tr>
<td><?php echo $i; ?></td>
<td>
<?php
if($cust_name == ''){
echo 'N/A';
}else{
echo $cust_name;
}
?>
</td>
<td><?php echo date("d-m-Y", strtotime($rows_date['book_date'])); ?></td>
<td><?php echo ucfirst($pname); ?></td>
<td><a href="../uploads/<?php echo $rows['file']; ?>" target="_blank" class="btn btn-success btn-sm ml-1" download>Download</a></td>
<td>Rs. <?php echo $total_price; ?></td>
<td>
<?php
if($transac == ''){
echo 'N/A';
}else{
echo $transac;
}
?>
</td>
<td>
<button onclick="alertify.confirm('Want to Delete','Are you sure you want to Delete?',function(){typedel(<?php echo $rows['id']; ?>)},function(){});" class="btn btn-danger btn-sm ml-2" title="Delete"><i class="mdi mdi-delete"></i></button>
</td>
</tr>
<?php
}
}
}
html part
<div class="card-body">
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="mx-auto">
<form class="form-inline mt-4 d-flex justify-content-center" method="post" id="date-search">
<input type="date" class="form-control mb-2 mr-sm-2" id="date_from" name="date_from" placeholder="Date from" required>
<input type="date" class="form-control mb-2 mr-sm-2" id="date_to" name="date_to" placeholder="Date to" required>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
</div>
</div>
<div class="col-sm-2"></div>
</div>
</div>
<div class="table-responsive pl-3 pr-3" id="tableWrap">
<table class="table download-excel">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">Customer</th>
<th scope="col">Booking</th>
<th scope="col">Product</th>
<th scope="col">File</th>
<th scope="col">Amount</th>
<th scope="col">Transaction Details</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody id="div2">
</tbody>
</table>
</div>
I think you may have typo errors in php
I have this code to fill the field based on data in table triggered by on click updateinputSediaModal that echo 1 data-id to trigger ajax function for populate the updateinputSediaModal field forms, it populate function work in chrome browser but not in firefox.
In my View Page
<table id="inputsedia_tb" class="table table-striped table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Kode Persediaan</th>
<th scope="col">Jurusan</th>
<th scope="col">Uraian</th>
<th scope="col">Satuan</th>
<th scope="col">User Penginput</th>
<th scope="col">Tanggal Input</th>
<th scope="col">Aksi</th>
</tr>
</thead>
<tbody>
<?php $i = 1; ?>
<?php foreach ($sediaMaster as $sm) : ?>
<tr>
<th scope="row"><?= $i; ?></th>
<td><?= $sm['id_sedia']; ?></td>
<td><?= $sm['nama_jur']; ?></td>
<td><?= $sm['nama_sedia']; ?></td>
<td><?= $sm['sedia_satuan']; ?></td>
<td><?= $sm['user_input']; ?></td>
<td><?= $sm['tgl_input']; ?></td>
<td>
Ubah
Hapus
</td>
</tr>
<?php $i++ ?>
<?php endforeach; ?>
</tbody>
</table>
<!-- Modal Update Menu -->
<div class="modal fade" id="updateinputSediaModal" tabindex="-1" role="dialog" aria-labelledby="updateinputSediaLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateinputSediaLabel">Update Data Persediaan</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="<?= base_url('persediaan/updatemasterSedia') ?>" method="post">
<div class="modal-body">
<input type="hidden" name="id_sediaUpd" id="id_sediaUpd">
<div class="form-group">
<input type="text" class="form-control" id="namasediaUpd" name="namasediaUpd" placeholder="Nama Barang Praktik">
</div>
<div class="form-group">
<input type="text" class="form-control" id="satuanUpd" name="satuanUpd" placeholder="Satuan">
</div>
<div class="form-group">
<input type="text" class="form-control" id="nikUpd" name="nikUpd" value="<?= $user['nik']; ?>" readonly>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
<button type="submit" class="btn btn-primary">Ubah</button>
</div>
</form>
</div>
</div>
</div>
In my footer page
<script>
//script update input persediaan (persediaan/input persediaan)
$('.updateinputSediaModal').on('click', function() {
const id = $(this).data('id');
$.ajax({
url: "<?= base_url('persediaan/getSediaid'); ?>",
data: {
id: id
},
method: 'post',
dataType: 'JSON',
success: function(data) {
$("#id_sediaUpd").val(data[0].id_sedia);
$("#namasediaUpd").val(data[0].nama_sedia);
$("#satuanUpd").val(data[0].sedia_satuan);
$("#nikUpd").val(data[0].user_input);
}
});
});
</script>
can I get explain how this happening ?
I can't see where you are defining jQuery, so are you getting $ is not defined error?
Another thing I notice is you have $('.updateinputSediaModal') but I do not see any class called updateinputSediaModal however I do see this element;
<div class="modal fade" id="updateinputSediaModal" ...
So perhaps change $('.updateinputSediaModal') to be $('#updateinputSediaModal')?
As it is an ID not a CLASS.
I need help.
I want to show the data's within the range of the date i choose.
Here's my code so far
Here's the code where I display the datatables
View
<div class="box-body">
<div class="table-responsive">
<div class="row">
<div class="col-md-4">
<div class="form-group start-date">
<label>From</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="start_date" name="start_date">
</div>
<!-- /.input group -->
</div>
</div>
<div class="col-md-4">
<div class="form-group end-date">
<label>To</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="end_date" name="end_date">
</div>
<!-- /.input group -->
</div>
</div>
<div class="col-md-2">
<div class="form-group met-cheq">
<label>Go </label>
<div class="input-group date">
<button class="btn btn-warning btn-md" name = "search" id="search">Search!</button>
</div>
<!-- /.input group -->
</div>
</div>
</div>
<table id="table-sales" class="table table-bordered table-striped">
<thead>
<tr>
<th>DR</th>
<th>Date</th>
<th>Customer</th>
<th>Price</th>
<th>Paid Amnt</th>
<th>Balance</th>
<th>Receipt</th>
<th>Remarks</th>
<th>Items</th>
<th style="width:55px;">Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($sales_inv as $inv) {
$balance = $inv->inv_price-$inv->payment;
$status = "";
$payment = $inv->payment;
if ($inv->inv_type==1) {
$status = "Department Store";
}elseif($inv->inv_type==2){
$status = "Local";
}elseif($inv->inv_type==3){
$status = "Provincial";
}elseif($inv->inv_type==4){
$status = "UNITOP";
}elseif($inv->inv_type==5){
$status = "GAISANO";
}
?>
<tr class="row-<?php echo $inv->id; ?>">
<td><?php echo $inv->inv_cno; ?></td>
<td><?php echo date("M d, Y", strtotime($inv->timestamp)); ?></td>
<td><?php echo $inv->cust_name; ?></td>
<td class="price-<?php echo $inv->inv_cno; ?>">Php <?php echo number_format($inv->inv_price,2); ?></td>
<td class="payment-<?php echo $inv->inv_cno; ?>">Php <?php echo number_format($payment,2); ?></td>
<td class="bal-<?php echo $inv->inv_cno; ?>">Php <?php echo number_format($balance,2); ?></td>
<td><?php echo $status; ?></td>
<td>
<button class="btn btn-info btn-sm btn-rem" data-value="<?php echo $inv->id; ?>">View Remarks
</button>
</td>
<td>
<button class="btn btn-success btn-sm btn-item" data-value="<?php echo $inv->inv_cno; ?>">View Item
</button>
</td>
<td>
<button class="btn btn-primary btn-xs btn-print" data-value="<?php echo $inv->inv_cno; ?>"><i class="fa fa-print"></i></button>
<button class="btn btn-warning btn-xs btn-add-pay" data-value="<?php echo $inv->inv_cno; ?>#<?php echo $inv->custid; ?>#<?php echo $inv->id; ?>"><i class="fa fa-credit-card"></i></button>
<button class="btn btn-danger btn-xs btn-edit-pay" data-value="<?php echo $inv->inv_cno; ?>#<?php echo $inv->custid; ?>#<?php echo $inv->id; ?>"><i class="fa fa-edit"></i></button>
</td>
</tr>
<?php } ?>
</tbody>
<tfooter>
<tr>
<th>DR</th>
<th>Date</th>
<th>Customer</th>
<th>Price</th>
<th>Paid Amnt</th>
<th>Balance</th>
<th>Receipt</th>
<th>Remarks</th>
<th style="width:55px;">Action</th>
</tr>
</tfooter>
</table>
</div>
<!-- /.table-responsive -->
</div>
</div>
<!-- /.box -->
</section>
<!-- right col -->
</div>
Model
public function rangeDate($start_date,$end_date){
$query = $this->db->select($this->tables['invent_inv'].'.id,'
.$this->tables['invent_inv'].'.inv_type,'.$this->tables['invent_inv'].'.inv_cno,'
.$this->tables['invent_cust'].'.id as custid,'.$this->tables['invent_cust'].'.cust_name,'
.$this->tables['invent_inv'].'.inv_price, '.$this->tables['invent_inv'].'.inv_tax,'
.$this->tables['invent_inv'].'.pay_due, SUM('.$this->tables['invent_sales'].'.paid_amnt) as payment,'
.$this->tables['invent_inv'].'.timestamp')
->join($this->tables['invent_cust'], $this->tables['invent_inv'].'.cust_id='
.$this->tables['invent_cust'].'.id','LEFT')
->join($this->tables['invent_sales'], $this->tables['invent_inv'].'.inv_cno='
.$this->tables['invent_sales'].'.inv_cno','LEFT')
->where($this->tables['invent_inv'].'.status !=', 1)
->where($this->tables['invent_inv'].'.status !=', 0)
->where($this->tables['invent_inv'].'.timestamp >=',$start_date)
->where($this->tables['invent_inv'].'.timestamp <=',$end_date)
->group_by($this->tables['invent_sales'].".inv_cno")
->group_by($this->tables['invent_inv'].".inv_cno")
->group_by($this->tables['invent_inv'].".timestamp")
->get($this->tables['invent_inv']);
return $query;
}
JS
$('#start_date').datepicker({
dateFormat: 'yy-mm-dd',
autoclose: true
})
$('#end_date').datepicker({
dateFormat: 'yy-mm-dd',
autoclose: true
})
$('#table-sales').DataTable();
Now my problem is that I don't know what to put on the controller and I don't know how to show it on my table-sales . I don't know if the code I am putting is correct or if I am on the right path . I'm using codeigniter3x . Could someone help me please.
Thank you in advance for someone who will help me .
You can call ajax when click on Search button and pass start and end date as parameters in ajax request and filter data.
After get ajax response from controller you can update tbody of table-sales table using jquery with updated data.
Example
Assume you get array of updated data
var tab_body = '';
$.each(sub_subject, function (key, value)
{
tab_body = tab_body + '<tr><td>' + value.sub_subject_name + '</td>' +
'<td>' + value.sub_subject_code + '</td>' +
'<td><div class="text-center"><button class="btn btn-primary open_edit_sub_subject_model" sub_subject_id="' + value.sub_subject_id + '" type="button" title="Edit" request_type="open_edit" subject_name="' + d.subject_name + '"><i class="fas fa-edit"></i></button>\n\
<button type="button" class="btn btn-primary subject-data-delete" title="Remove" delete_type="sub_subject" subject_group_id="' + d.subject_group_id + '" subject_id="' + d.subject_id + '" sub_subject_id="' + value.sub_subject_id + '"><i class="fa fa-trash"></i></button>\n\
</div></td>' +
'</tr>';
});
// example is just for reference
put above data in table using
$("#table-sales tbody").html(tab_body);
Hopfully it will help.
I want to display search result on click of button, but my code is giving me the search result without click on button.
I think it's giving me the query result not the search result.
This code is working fine when I display the result on the page, but as per my requirement I want to display the search result on a popup.
I have used jquery popup.
<body><form action="#" method="POST"><body><form action="#" method="POST"><div data-role="page">
<div data-role="main" class="ui-content" >
Smart Search
</div>
<div data-role="popup" id="a" class="col-sm-6 ui-content">
<div class="input-group col-sm-8">
<input type="text" name="query" class="form-control" placeholder="Search Products to Buy..." " />
<span class="input-group-btn">
<button name ="search_btn" id ="search class="btn btn-warning" type="submit" value="Search" style="background-color:orange;">Search</button>
</span>
</div><div class="input-group col-sm-8 " ><table class="table table-hover">
<thead >
<tr bgcolor="#1E90FF">
<th>Products</th>
<th>Details</th>
<th>Retailers</th>
<th>Price</th>
<th>Buy</th>
</tr>
</thead>
</div><?php
error_reporting(0);
mysql_connect("localhost", "root", "") or die("Error connecting to database: ".mysql_error());
mysql_select_db("wordpress") or die(mysql_error());
?><?php $query = $_POST['query']; $query = htmlspecialchars($query);
$query = mysql_real_escape_string($query);
$raw_results=mysql_query("select feed_product_image,feed_product_name,price,deeplink,image from wp_pc_products_merchants e,wp_pc_products w where e.slug=w.id_merchant and feed_product_name LIKE '%".$query."%'") or die(mysql_error());
if(mysql_num_rows($raw_results) > 0)
{
while($results = mysql_fetch_array($raw_results))
{ ?><div class="input-group col-sm-8" style="text-align:center;margin-top:10px;"><tbody>
<tr>
<td><img src = "<?php echo $results['feed_product_image']; ?>" style="object-fit:contain;height:70px;width:100px;" /></td>
<td><?php echo "<p>".$results['feed_product_name']. "</p>" ; ?></td>
<td><img src = "<?php echo $results['image']; ?>" style="background-size:contain;height:40px;width:120px;" /></td>
<td><?php echo '<i class="fa fa-inr"> '.$results['price']. '</i>'.".00" ; ?></td>
<td>Buy now</td>
</tr>
</tbody>
</div>
<?php
}
}
else
{ // if there is no matching rows do following
echo "No results";
}
?>
</div>
</form>
</div>
This will give you search results in modal popup. I have changed your code around a bit. You can popup in case of no search results too.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content" >
Smart Search
</div>
<div data-role="popup" id="a" class="col-sm-6 ui-content">
<div class="input-group col-sm-8">
<form method="POST">
<input type="text" name="query" class="form-control" placeholder="Search Products to Buy..." " />
<span class="input-group-btn">
<button name ="search_btn" id ="search" class="btn btn-warning" type="submit" value="Search" style="background-color:orange;">Search</button>
</span>
</form>
</div>
<?php
if(isset($_POST['query']) && $_POST['query']!="" ) {
error_reporting(0);
mysql_connect("localhost", "root", "") or die("Error connecting to database: ".mysql_error());
mysql_select_db("wordpress") or die(mysql_error());
$query = $_POST['query']; $query = htmlspecialchars($query);
$query = mysql_real_escape_string($query);
$raw_results=mysql_query("select feed_product_image,feed_product_name,price,deeplink,image from wp_pc_products_merchants e,wp_pc_products w where e.slug=w.id_merchant and feed_product_name LIKE '%".$query."%'") or die(mysql_error());
if(mysql_num_rows($raw_results) > 0)
{
?>
<div class="input-group col-sm-8 modal-box" id="popup" title="Search Results" style="text-align:center;margin-top:10px;">
<table class="table table-hover">
<thead >
<tr bgcolor="#1E90FF">
<th>Products</th>
<th>Details</th>
<th>Retailers</th>
<th>Price</th>
<th>Buy</th>
</tr>
</thead>
<tbody>
<?php
while($results = mysql_fetch_array($raw_results))
{ ?>
<tr>
<td><img src = "<?php echo $results['feed_product_image']; ?>" style="object-fit:contain;height:70px;width:100px;" /></td>
<td><?php echo "<p>".$results['feed_product_name']. "</p>" ; ?></td>
<td><img src = "<?php echo $results['image']; ?>" style="background-size:contain;height:40px;width:120px;" /></td>
<td><?php echo '<i class="fa fa-inr"> '.$results['price']. '</i>'.".00" ; ?></td>
<td>Buy now</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<?php
}
else
{ // if there is no matching rows do following
echo "No results";
}
}
?>
</div>
</form>
</div>
<script>
$(function() {
$( "#popup" ).dialog();
});
</script>
My check box when unchecked my input with id of delete should be disabled, but for some reason the java script code it not picking up the id of both input and checked input. I use bootstrap 3 and codeigniter.
What's wrong with my code? Unsure why not working. All JS scripts loaded correct.
<script type="text/javascript">
$('#check_delete').click(function(){
if($(this).attr('checked') == false){
$('input #delete').attr("disabled","disabled");
} else {
$('input #delete').removeAttr('disabled');
}
});
</script>
<input type="submit" role="button" class="btn btn-danger" id="delete" value="Delete">
View
<?php echo form_open('admin/users_group/delete');?>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td style="width: 1px;" class="text-center"><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);" /></td>
<th class="text-left">User Group ID</th>
<th class="text-left">Name</th>
<th class="text-right">Action</th>
</tr>
</thead>
<?php if ($users_group == TRUE) {?>
<?php foreach ($users_group as $user_group) { ?>
<tr>
<td class="text-center"><?php if (in_array($user_group['user_group_id'], $selected)) { ?>
<input type="checkbox" id="check_delete" name="selected[]" value="<?php echo $user_group['user_group_id']; ?>" checked="checked" />
<?php } else { ?>
<input type="checkbox" id="check_delete" name="selected[]" value="<?php echo $user_group['user_group_id']; ?>" />
<?php } ?>
</td>
<td class="text-left"><?php echo $user_group['user_group_id']; ?></td>
<td class="text-left"><?php echo $user_group['name']; ?></td>
<td class="text-right">
<input type="submit" role="button" class="btn btn-danger" id="delete" value="Delete">
<i class="fa fa-pencil"></i> Edit</td>
</tr>
<?php } ?>
<?php } else { ?>
<tr>
<td class="text-center" colspan="3">No Results</td>
</tr>
<?php } ?>
</table>
</div>
<?php echo form_close();?>
</div>
<div class="panel-footer clearfix">
<div class="pull-left pag-user-group"><?php echo $pagination; ?></div>
<div class="pull-right" style="padding-top: 7.5px;"><?php echo $results; ?></div>
</div>
</div>
</div>
</div>
</div><!-- # Page Inner End -->
</div><!-- # Page End -->
</div><!-- # Wrapper End -->
<script type="text/javascript">
$('#check_delete').click(function(){
if($(this).attr('checked') == false){
$('input #delete').attr("disabled","disabled");
} else {
$('input #delete').removeAttr('disabled');
}
});
</script>
You declare your script before the HTML code.
A HTML page is read sequentially.
alert( $('input#delete').length )
<input id="delete" >
This will alert "0" because jQuery looks for #delete, and then, next line, #delete exists.
Two solutions :
1) Move your script after HTML, at the end, before the </body> tag.
2) Wrap your code in $(function(){ /* Your code here */ } . This will wait for the page to be ready before executing the script.
<input id="delete" >
alert( $('input#delete').length )
This will work, and this also will :
$(function(){
alert( $('input#delete').length )
})
<input id="delete" >