I have made this application in which to look for a result and with jquery autocomplete me. What do I want to know is that when autocomplete the first "cari_keyword_id" field and click me automatically fill the other input, which is the user ID. How is possible?? I need the second step, taking the first field autocomplete filled.
I hope you can help me or give me information!
greetingS!!!
CODE
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Autocomplete Search dengan PHP, MySQLi, Ajax and jQuery </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://andeznet.com">AndezNet</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class='web'>
<input type="text" class="cari_keyword form-control" id="cari_keyword_id" placeholder="Cari Nama Siswa..." />
<input type="text" class="cari_keyword form-control" id="cari_jrsn_pil1_id" placeholder="ID..." />
<div id="result"></div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="alert alert-info">
<a name="contact"></a>
<h2>www.andeznet.com</h2>
<p class="text-info">Gudang Teknologi & Informasi</p>
<p>© www.andeznet.com <?php echo date("Y");?></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
</div><!--/row-->
</div>
<script src="assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".cari_keyword").keyup(function()
{
var cari_keyword_value = $(this).val();
var dataString = 'cari_keyword='+ cari_keyword_value;
if(cari_keyword_value!='')
{
$.ajax({
type: "POST",
url: "cari.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
}).done(function(respuesta){
$("#nombre").val(respuesta.nombre);
});
}
return false;
});
$("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.nama_siswa').html();
var decoded = $("<div/>").html($name).text();
$('#cari_keyword_id').val(decoded);
});
$(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("cari_keyword")){
$("#result").fadeOut();
}
});
$('#cari_keyword_id').click(function(){
$("#result").fadeIn();
});
});
</script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
cari.php
<?php
include('koneksi.php');
if(isset($_POST['cari_keyword']))
{
$cari_keyword = $dbConnection->real_escape_string($_POST['cari_keyword']);
$sqlSiswa="SELECT id_daftar,s_nama FROM master WHERE s_nama LIKE '%$cari_keyword%'";
$resSiswa=$dbConnection->query($sqlSiswa);
if($resSiswa === false) {
trigger_error('Error: ' . $dbConnection->error, E_USER_ERROR);
}else{
$rows_returned = $resSiswa->num_rows;
}
$bold_cari_keyword = '<strong>'.$cari_keyword.'</strong>';
if($rows_returned > 0){
while($rowSiswa = $resSiswa->fetch_assoc())
{
echo '<div class="show" align="left"><span class="nama_siswa">'.str_ireplace($cari_keyword,$bold_cari_keyword,$rowSiswa['s_nama']).'</span></div>';
}
}else{
echo '<div class="show" align="left">No matching records.</div>';
}
}
?>
table.sql
CREATE TABLE IF NOT EXISTS `master` (
`id_daftar` int(5) NOT NULL,
`s_nama` varchar(150) NOT NULL,
`s_jk` int(1) NOT NULL,
`s_agama` int(1) NOT NULL,
`s_tmp_lahir` varchar(100) NOT NULL,
`s_tgl_lahir` date NOT NULL,
`jrsn_pil1` int(4) NOT NULL,
`jrsn_pil2` int(4) NOT NULL,
`tgl_daftar` date NOT NULL,
`nisn` varchar(15) NOT NULL,
`noreg` varchar(10) NOT NULL,
`Alamat` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=172 ;
INSERT INTO `master` (`id_daftar`, `s_nama`, `s_jk`, `s_agama`, `s_tmp_lahir`, `s_tgl_lahir`, `jrsn_pil1`, `jrsn_pil2`, `tgl_daftar`, `nisn`, `noreg`, `Alamat`) VALUES
(30, 'GUSTI SUMAINDRA', 1, 1, 'sadadad', '2009-03-01', 1103, 1254, '2015-04-08', '0001', '0001', ''),
(31, 'AFIF PRASETYA', 1, 0, '', '0000-00-00', 0, 0, '2015-04-08', '0002', '0002', '');
koneksi.php
<?php
define('_HOST_NAME', 'localhost');
define('_DATABASE_USER_NAME', 'root');
define('_DATABASE_PASSWORD', '');
define('_DATABASE_NAME', 'prueba');
$dbConnection = new mysqli(_HOST_NAME, _DATABASE_USER_NAME, _DATABASE_PASSWORD, _DATABASE_NAME);
if ($dbConnection->connect_error) {
trigger_error('Connection Failed: ' . $dbConnection->connect_error, E_USER_ERROR);
}
?>
You can use a data attribute for more information like this:
echo '<div class="show" align="left"><span class="nama_siswa" data-id="'.$rowSiswa['id_daftar'].'">'.str_ireplace($cari_keyword,$bold_cari_keyword,$rowSiswa['s_nama']).'</span></div>';
Now you have both the name and the id associated with the result the user clicks. You can use this to change the other input.
$("#result").live("click",function(e){
var $clicked = $(e.target);
var $clickedKeyword = $clicked.find('.nama_siswa');
var $name = $clickedKeyword.html();
var id = $clickedKeyword.data('id');
var decoded = $("<div/>").html($name).text();
$('#cari_keyword_id').val(decoded);
$('#cari_jrsn_pil1_id').val(id);
});
Hope this helps.
Related
So, i want to populate div with id "listberita" with html code from ajax response.
Here is the php code where contain div with "listberita" id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jabary - Website Budaya Jabar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/f8535c9b97.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="berita.css">
</head>
<body>
<!-- Navbar -->
<?php include 'php/navbar.php'; ?>
<div class="container my-5">
<div class="kategoricaption mb-5">
<div class="row">
<div class="col">
<h1 class="text-center fw-bold judulkategori">Berita</h1>
<hr class="mx-auto" style="width:10%; background-color: #f49f16;">
</div>
</div>
</div>
<div class="card-group vgr-cards" id="listberita">
</div>
</div>
<!-- footer -->
<?php include 'php/footer.php'; ?>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="js/bootstrap.bundle.min.js "></script>
<script src="berita.js"></script>
</body>
</html>
Here is my ajax js code
$(this).ready(function() {
getNews()
function getNews() {
$.ajax({
type: "GET",
url: "_php/getBerita.php",
dataType: "JSON",
success: function(response) {
var kode;
$.each(response, function(i, obj) {
console.log(kode)
kode += '<div class="card kartu pb-3"><div class="card-img-body"><img class="card-img" src="img/Berita/' + obj.gambar_berita + '" alt="Card imagecap"></div><div class="card-body"><h4 class="card-title">' + obj.nama_berita + '</h4><p class="card-text">' + obj.keterangan_berita.substring(0, 250) + '....</p>Read More</div></div>'
$('#listberita').html(kode);
})
}
});
}
})
Here is my php code where ajax request to (php_/getBerita.php)
<?php
include '../koneksi.php';
$result = $conn->query("SELECT * from tbl_berita");
while($row=$result->fetch_assoc()){
$data[]=$row;
}
echo json_encode($data);
?>
The code above is working, it's return the data i want. But there is a problem.
Here is the problem
How to get rid the "undefined" thing on the beginning of div?
Try changing your var kode; to var kode = "";.
When you define the variable without initializing it, it will be undefined. And then your loop is appending text to an undefined variable. That's probably why.
I have an Ajax script on a PHP page which is to run a php script on clicking a button.
The code is as follows:
<script>
$('#signup-form').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.ajax({
url: 'insertfromsession.php',
type: 'POST',
data: $(this).serialize(), // it will serialize the form data
dataType: 'html'
})
.done(function(data){
$('#form-container').fadeOut('slow', function(){
$('#form-container').fadeIn('slow').html(data);
});
document.getElementById('submitBtn').disabled = true;
document.getElementById("submitBtn").value="Thanks!";
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
When I first open the web page the script isn't run, but if i click back and repeat the process the script executes without an issue. Does anyone know what is causing the issue?
Insert.php which runs this code is here:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/submit.js"></script>
<!-- /.website title -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- CSS Files -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="fonts/icon-7-stroke/css/pe-icon-7-stroke.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet" media="screen">
<link href="css/owl.theme.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">
<style type="text/css">
body { background: white !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
<!-- Colors -->
<link href="css/css-index.css" rel="stylesheet" media="screen">
<!-- <link href="css/css-index-green.css" rel="stylesheet" media="screen"> -->
<!-- <link href="css/css-index-purple.css" rel="stylesheet" media="screen"> -->
<!-- <link href="css/css-index-red.css" rel="stylesheet" media="screen"> -->
<!-- <link href="css/css-index-orange.css" rel="stylesheet" media="screen"> -->
<!-- <link href="css/css-index-yellow.css" rel="stylesheet" media="screen"> -->
<!-- Google Fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic" />
</head>
<div id="top"></div>
<div class="fullscreen landing parallax" style="background-image:url('images/fireworks.jpg');" data-img-width="2000" data-img-height="1333" data-diff="100">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-10">
<!-- /.logo -->
<!-- /.main title -->
<h2 class="wow fadeInLeft">Thank you for submitting your details</h2>
<h2 class="wow bounce infinite">While you are here, why not apply for one of other fantastic products?</h2>
<?php
session_start();
include ("dbconnect.php");
// prepare and bind
$stmt = $conn->prepare("INSERT INTO wills (forename,surname,postcode,telno,email,ipaddress,capturedate,url,user) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)");
$stmt->bind_param("sssssssss", $forename, $surname, $postcode, $telno, $email, $ipaddress, $capturedate, $url, $user);
$forename = $_POST["forename"];
$surname = $_POST["surname"];
$postcode = $_POST["postcode"];
$telno = $_POST["telno"];
$email = $_POST["email"];
$ipaddress = $_SERVER['REMOTE_ADDR'];
$capturedate = date('Y-m-d H:i:s');
$url ="www.test.com";
$user ="testuser";
$_SESSION["forename"] = $forename;
$_SESSION["surname"] = $surname;
$_SESSION["postcode"] = $postcode;
$_SESSION["telno"] = $telno;
$_SESSION["email"] = $email;
$_SESSION["ipaddress"] = $ipaddress;
$_SESSION["capturedate"] = $capturedate;
$_SESSION["url"] = $url;
$_SESSION["user"] = $user;
echo "<br>"."Forename: ".$forename."<br>";
echo "Surname: ".$surname."<br>";
echo "Telno: ".$telno."<br>";
echo "Email: ".$email."<br>";
echo "IP Address: ".$ipaddress."<br>";
echo "Session User: ".$_SESSION["user"]."<br>";
if (!$stmt->execute()) {
echo $stmt->error;
} else {
}
$stmt->close();
$conn->close();
?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center">Back to Main Page</div>
<div class="col-md-12">
<!-- /.product 1 -->
<div class="col-sm-6 feat-list">
<i class="pe-7s-phone pe-5x pe-va wow fadeInUp"></i>
<div class="inner">
<h4>Grab a Mobile SIM</h4>
<p>With a SIM only contract, you get the all the benefits of an ongoing contract, without the additional high cost of a handset.
Short-term SIM only contracts give you freedom and flexibility. All the networks offer them from as little as 30 days, and you can then keep them rolling month-by-month
</p>
<form method="post" id="signup-form" autocomplete="off">
<div class="form-group">
<input type="submit" class="btn btn-success btn-block btn-lg" id="submitBtn" value="Apply for Mobile Sim?">
</div>
</form>
</div>
</div>
<!-- /.product 2 -->
<div class="col-sm-6 feat-list">
<i class="pe-7s-like2 pe-5x pe-va wow fadeInUp"></i>
<div class="inner">
<h4>Debt Plan</h4>
<p>Do you have more than £5,000 worth of debt?<br>
Do you need help to reduce the monthly payments?<br>
If so, find out if you qualify to write off up to 80% of your debt here</p>
<form method="post" id="signup-formdebt" autocomplete="off">
<div class="form-group">
<input type="submit" class="btn btn-success btn-block btn-lg" id="submitBtndebt" value="Get help now">
</div>
</form>
</div>
</div>
</div>
<!-- /.footer -->
<footer id="footer">
<div class="container">
<div class="col-sm-4 col-sm-offset-4">
<!-- /.social links -->
<div class="social text-center">
<ul>
<li><a class="wow fadeInUp" href="https://twitter.com/"><i class="fa fa-twitter"></i></a></li>
<li><a class="wow fadeInUp" href="https://www.facebook.com/" data-wow-delay="0.2s"><i class="fa fa-facebook"></i></a></li>
</ul>
</div>
<i class="pe-7s-up-arrow pe-va"></i>
</div>
</div>
</footer>
<!-- /.javascript files -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script>
new WOW().init();
</script>
</body>
<script>
$( document ).ready(function() {
$('#signup-form').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.ajax({
url: 'insertfromsession.php',
type: 'POST',
data: $(this).serialize(), // it will serialize the form data
dataType: 'html'
})
.done(function(data){
$('#form-container').fadeOut('slow', function(){
$('#form-container').fadeIn('slow').html(data);
});
document.getElementById('submitBtn').disabled = true;
document.getElementById("submitBtn").value="Thanks!";
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
});
</script>
<script>
$( document ).ready(function() {
console.log( "ready!" );
$('#signup-formdebt').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.ajax({
url: 'insertfromsessiondebt.php',
type: 'POST',
data: $(this).serialize(), // it will serialize the form data
dataType: 'html'
})
.done(function(data){
$('#form-container').fadeOut('slow', function(){
$('#form-container').fadeIn('slow').html(data);
});
document.getElementById('submitBtndebt').disabled = true;
document.getElementById("submitBtndebt").value="Thanks!";
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
});
</script>
</html>
I think I solved the issue and it has nothing at all to do with the AJAX. It actually appears to be an issue with the session variables. I moved the session variables on the insert.php right to the top before anything else and this makes it work as intended.
Thanks for your efforts guys
You should use a document.ready function. Here is a link to the jQuery version documentation : https://learn.jquery.com/using-jquery-core/document-ready/
I have a working php form which also has a button that opens a windows to take a fee from an account.
Is it possible to setup an auto print feature where as soon as the form process is done then the user is taken to a print screen. The only solution i could find is to print the whole screen but I would prefer to design the receipt myself. Would FPDF work in this regard?
Below is the Fees.php form code:
<link rel="shortcut icon" href="img/icon.ico" type="image/x-icon"/>
<?php
include("php/dbconnect.php");
$errormsg= '';
if(isset($_POST['save']))
{
$paid = mysqli_real_escape_string($conn,$_POST['paid']);
$submitdate = mysqli_real_escape_string($conn,$_POST['submitdate']);
$transcation_remark =
mysqli_real_escape_string($conn,$_POST['transcation_remark']);
$sid = mysqli_real_escape_string($conn,$_POST['sid']);
$sql = "select fees,balance from student where id = '$sid'";
$sq = $conn->query($sql);
$sr = $sq->fetch_assoc();
$totalfee = $sr['fees'];
if($sr['balance']>0)
{
$sql = "insert into
fees_transaction(stdid,submitdate,transcation_remark,paid)
values('$sid','$submitdate','$transcation_remark','$paid') ";
$conn->query($sql);
$sql = "SELECT sum(paid) as totalpaid FROM fees_transaction WHERE stdid = '$sid'";
$tpq = $conn->query($sql);
$tpr = $tpq->fetch_assoc();
$totalpaid = $tpr['totalpaid'];
$tbalance = $totalfee - $totalpaid;
$sql = "update student set balance='$tbalance' where id = '$sid'";
$conn->query($sql);
echo '<script type="text/javascript">window.location="fees.php?act=1";</script>';
}
}
if(isset($_REQUEST['act']) && #$_REQUEST['act']=="1")
{
$errormsg = "<div class='alert alert-success'><a href='#' class='close'
data-dismiss='alert' aria-label='close'>×</a><strong>Success!</strong>
Fees submit successfully</div>";
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accounts | iBroker Finance</title>
<!-- BOOTSTRAP STYLES-->
<link href="css/bootstrap.css" rel="stylesheet" />
<!-- FONTAWESOME STYLES-->
<link href="css/font-awesome.css" rel="stylesheet" />
<!--CUSTOM BASIC STYLES-->
<link href="css/basic.css" rel="stylesheet" />
<!--CUSTOM MAIN STYLES-->
<link href="css/custom.css" rel="stylesheet" />
<!-- GOOGLE FONTS-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans'
rel='stylesheet' type='text/css' />
<link href="css/ui.css" rel="stylesheet" />
<link href="css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<link href="css/datepicker.css" rel="stylesheet" />
<link href="css/datatable/datatable.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.js"></script>
<script type='text/javascript' src='js/jquery/jquery-ui-1.10.1.custom.min.js'></script>
<script type="text/javascript" src="js/validation/jquery.validate.min.js">
</script>
<script src="js/dataTable/jquery.dataTables.min.js"></script>
</head>
<?php
include("php/header.php");
?>
<div id="page-wrapper">
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h1 class="page-head-line">Manage Accounts
</h1>
</div>
</div>
<?php
echo $errormsg;
?>
<div class="row" style="margin-bottom:20px;">
<div class="col-md-12">
<fieldset class="scheduler-border" >
<legend class="scheduler-border">Search:</legend>
<form class="form-inline" role="form" id="searchform">
<div class="form-group">
<label for="email">Name</label>
<input type="text" class="form-control" id="student" name="student">
</div>
<div class="form-group">
<label for="email"> Date Of Joining </label>
<input type="text" class="form-control" id="doj" name="doj" >
</div>
<div class="form-group">
<label for="email"> Branch </label>
<select class="form-control" id="branch" name="branch" >
<option value="" >Select Branch</option>
<?php
$sql = "select * from branch where delete_status='0' order by branch.branch asc";
$q = $conn->query($sql);
while($r = $q->fetch_assoc())
{
echo '<option value="'.$r['id'].'" '.(($branch==$r['id'])?'selected="selected"':'').'>'.$r['branch'].'</option>';
}
?>
</select>
</div>
<button type="button" class="btn btn-success btn-sm" id="find" > Find
</button>
<button type="reset" class="btn btn-danger btn-sm" id="clear" > Clear
</button>
</form>
</fieldset>
</div>
</div>
<script type="text/javascript">
$(document).ready( function() {
/*
$('#doj').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: false,
dateFormat: 'mm/yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear,
inst.selectedMonth, 1));
}
});
*/
/******************/
$("#doj").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm/yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month
:selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year
:selected").val();
$(this).val($.datepicker.formatDate('MM yy', new Date(year, month,
1)));
}
});
$("#doj").focus(function () {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
});
});
/*****************/
$('#student').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajx.php',
dataType: "json",
data: {
name_startsWith: request.term,
type: 'studentname'
},
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item,
value: item
}
}));
}
});
}
/*,
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var abc = ui.item.label.split("-");
//alert(abc[0]);
$("#student").val(abc[0]);
return false;
},
*/
});
$('#find').click(function () {
mydatatable();
});
$('#clear').click(function () {
$('#searchform')[0].reset();
mydatatable();
});
function mydatatable()
{
$("#subjectresult").html('<table class="table table-striped table-bordered table-hover" id="tSortable22"><thead><tr><th>Name/Contact</th> <th>Premium Amount Incl Stamp Fee</th><th>Oustanding</th><th>Branch</th><th>Joining Date</th><th>Action</th></tr></thead><tbody></tbody></table>');
$("#tSortable22").dataTable({
'sPaginationType' : 'full_numbers',
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
'bProcessing' : true,
'bServerSide': true,
'sAjaxSource':
"datatable.php?"+$('#searchform').serialize()+"&type=feesearch",
'aoColumnDefs': [{
'bSortable': false,
'aTargets': [-1] /* 1st one, start by the
right */
}]
});
}
////////////////////////////
$("#tSortable22").dataTable({
'sPaginationType' : 'full_numbers',
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
'bProcessing' : true,
'bServerSide': true,
'sAjaxSource': "datatable.php?type=feesearch",
'aoColumnDefs': [{
'bSortable': false,
'aTargets': [-1] /* 1st one, start by the right */
}]
});
///////////////////////////
});
function GetFeeForm(sid)
{
$.ajax({
type: 'post',
url: 'getfeeform.php',
data: {student:sid,req:'1'},
success: function (data) {
$('#formcontent').html(data);
$("#myModal").modal({backdrop: "static"});
}
});
}
</script>
<style>
#doj .ui-datepicker-calendar
{
display:none;
}
</style>
<div class="panel panel-default">
<div class="panel-heading">
Account Management
</div>
<div class="panel-body">
<div class="table-sorting table-responsive"
id="subjectresult">
<table class="table table-striped table-bordered
table-hover" id="tSortable22">
<thead>
<tr>
<th>Name/Payment Plan</th>
<th>Premium Amount Incl Stamp
Fee</th>
<th>Outstanding</th>
<th>Insurer</th>
<th>Joining Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!-------->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Take Fee</h4>
</div>
<div class="modal-body" id="formcontent">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--------->
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
</div>
<!-- /. WRAPPER -->
<div id="footer-sec">
iBroker Finance System | Developed By Siyakha Technology
</div>
<!-- BOOTSTRAP SCRIPTS -->
<script src="js/bootstrap.js"></script>
<!-- METISMENU SCRIPTS -->
<script src="js/jquery.metisMenu.js"></script>
<!-- CUSTOM SCRIPTS -->
<script src="js/custom1.js"></script>
</body>
</html>
For print styling, use the print media query
#media print {
body {
background-color: lightgreen;
}
}
Another way would be to link existing css file with the print media attribute
<link rel="stylesheet" type="text/css" media="print" href="print.css">
And for auto printing, just use window.print() in your js code
I try to make infinite scroll pagination in my codeigniter project. I'am using this tutorial http://www.mostlikers.com/2016/05/codeigniter-pagination-infinite-scroll.html to make it. But this is what i get
View
<!DOCTYPE html>
<html>
<head>
<title>deals</title>
<link href="<?php echo base_url();?>css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="<?php echo base_url();?>js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="<?php echo base_url();?>css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Food shop Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!--//fonts-->
<script type="text/javascript" src="<?php echo base_url();?>js/move-top.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<link href="<?php echo base_url();?>css/index.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="<?php echo base_url();?>css/imgslider.css" type="text/css" media="screen" />
<script src="<?php echo base_url();?>js/slideout.min.js"></script>
<script src="<?php echo base_url();?>js/jquery.wmuSlider.js"></script>
<script src="<?php echo base_url();?>js/jquery.wmuGallery.js"></script>
</head>
<body>
<nav id="menu">
<h1 style="color:white">Menu</h1>
<hr style="color:white;">
<ul>
<?php if($tipeUser=="user"){?>
<li><h4>Home</h4></li>
<li><h4 style="color:white">Welcome <?php echo $nama;?></h4></li>
<li><h4>My Voucher</h4></li>
<li><h4>Profile</h4></li>
<li><h4>Logout</h4></li>
<?php } else if($tipeUser=="restoran"){ ?>
<li><h4>Home</h4></li>
<li><h4 style="color:white">Welcome <?php echo $nama;?></h4></li>
<li><h4>Dashboard</h4></li>
<li><h4>Voucher Management</h4></li>
<!-- <li><h4>Reedem Voucher</h4></li> -->
<li><h4>Logout</h4></li>
<?php } else if($tipeUser==""){ ?>
<li><h4>Home</h4></li>
<li><h4>Login / Register</h4></li>
<li><h4>Voucher</h4></li>
<li><h4>Restaurants</h4></li>
<?php
if($data_kategori->num_rows()>0)
{
foreach ($data_kategori->result() as $rows)
{ ?>
<li><h4><a href="<?php echo base_url();?>home_controller/Type/<?php echo $rows->id_jenis_makanan; ?>" style="color:white"><?php echo $rows->nama_jenis_makanan;?>
</a></h4></li>
<?php } } ?>
<?php } ?>
</ul>
</nav>
<main id="panel">
<header>
<!--header-->
<div class="header-in">
<div class="container">
<!---->
<div class="header-bottom">
<div class="col-xs-1">
<button class="toggle-button"></button>
</div>
<div class="col-xs-11">
<?php echo form_open('home_controller/search_bar');?>
<div class="search">
<form>
<input type="text" id= "input-keyword" name="input-keyword" placeholder="Search ..." value="<?php echo set_value('input-keyword')?>" >
<input type="submit" value="">
</form><?php echo form_close(); ?>
</div>
</div>
<div class="clearfix"> </div>
</div>
<!---->
</div>
</div>
<!---->
<div class="container">
<div class="specials">
<ol> <div id="results"></div></ol>
</div>
</div></div>
<div class="container">
<div class="col-md-12">
<p style="height:10px"></p>
<div id="pagination" align="center" class="pagination-wrapper">
<ul class="tsc_pagination pagination" align="center">
<!-- Show pagination links -->
<!-- <?php foreach ($links as $link) {
echo "<li>". $link."</li>";
} ?></ul> -->
<!-- </div> -->
</div></div>
<!---->
</header>
</main>
<?php if($this->session->flashdata('message')) :
echo "<script>alert('". $this->session->flashdata('message')."')</script>";
endif; ?>
</body>
<script>
var slideout = new Slideout({
'panel': document.getElementById('panel'),
'menu': document.getElementById('menu'),
'padding': 190,
'tolerance': 70
});
// Toggle button
document.querySelector('.toggle-button').addEventListener('click', function() {
slideout.toggle();
});
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
{
slideout.disableTouch();
}
slideout.disableTouch();
// auto close
slideout.on('open', function() {
$( "#panel" ).click(function() {
return false;
});
$( "#panel" ).click(function() {
slideout.close();
});
});
slideout.on('close', function() {
$( "#panel" ).unbind('click');
});
</script>
<script>
$('.gallery').wmuSlider();
</script>
</html>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var total_record = 0;
var total_groups = <?php echo $total_data; ?>;
$('#results').load("<?php echo base_url() ?>Home_controller/load_more",
{'group_no':total_record}, function() {total_record++;});
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height())
{
if(total_record <= total_groups)
{
loading = true;
$('.loader_image').show();
$.post('<?php echo site_url() ?>Home_controller/load_more',{'group_no': total_record},
function(data){
if (data != "") {
$("#results").append(data);
$('.loader_image').hide();
total_record++;
}
});
}
}
});
});
</script>
Model
public function get_allDeal_count()
{
$sql = "SELECT COUNT(*) as tol_records FROM voucher v join restoran r on v.id_restoran = r.id_restoran";
$result = $this->db->query($sql)->row();
return $result;
}
public function get_allDeal_content($start,$content_per_page)
{
$sql = "SELECT * FROM voucher v join restoran r on v.id_restoran=r.id_restoran WHERE LIMIT $start,$content_per_page";
$result = $this->db->query($sql)->result();
return $result;
}
Controller
public function list_voucher()
{
if($this->session->userdata('logged_in'))
{
$session_data = $this->session->userdata('logged_in');
$data['nama'] = $session_data['nama'];
$data['id'] = $session_data['id_user'];
$data['tipeUser'] = $session_data['tipe_user'];
}
else{
$data['nama'] = "";
$data['id'] = "0";
$data['tipeUser']="";
}
$data['notif'] = '';
$config['base_url'] = base_url().'/home_controller/list_voucher/';
$data['data_kategori'] = $this->jenismakanan->Getjenismakanan();
$total_data = $this->voucher->get_allDeal_count();
$content_per_page = 5;
$data['total_data'] = ceil($total_data->tol_records/$content_per_page);
$this->load->view('listalldeals', $data,FALSE);
// $this->load->view('listalldeals', $data);
}
public function load_more()
{
$group_no = $this->input->post('group_no');
$content_per_page = 5;
$start = ceil($group_no * $content_per_page);
$all_content = $this->voucher->get_allDeal_content($start,$content_per_page);
if(isset($all_content) && is_array($all_content) && count($all_content)) :
foreach ($all_content as $key => $content) :
echo '<li>'.$content->id_restoran.'</li>';
echo '<p>'.$content->nama_restoran.'</p>';
endforeach;
endif;
}
That's all the code that I used. I don't know what should I do to fix it.
I am trying to use jqmobi with PHP where everything is working but when I try to use PHP session it's not working. First when I use jquery post then it will retrieve data from server but when I reload page then session is destroyed.
I have kept session_start() in every file but still of no use. So if anybody have worked with jqmobi and PHP, share your experience. I am posting my main index.php file:
<?php
session_start();
?>
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<title>UI Starter</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache" >
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/af.ui.base.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/icons.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/af.ui.css" />
<!-- http://code.jquery.com/jquery-1.10.1.min.js -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="./js/lib/jquery.validate.min.js"></script>
<script src="./js/jq.appframework.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.0/appframework.ui.min.js"> </script>
<script src="./fcharts/FusionCharts/FusionCharts.js"></script>
<!-- include touch on desktop browsers only -->
<script>
// $.ui.showBackButton = false;
if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) {
var script = document.createElement("script");
script.src = "plugins/af.desktopBrowsers.js";
var tag = $("head").append(script);
//$.os.android = true; //let's make it run like an android device
//$.os.desktop = true;
}
</script>
</head>
<body>
<div id="afui"> <!-- this is the main container div. This way, you can have only part of your app use UI -->
<!-- this is the header div at the top -->
<div id="header">
<a onclick="$.ui.toggleSideMenu()" id="mainbuon" class="menuButton" style="float:right"></a>
</div>
<div id="content">
<!-- here is where you can add your panels -->
<div title='Management' id="elogin" class="panel" selected="true"
data-load="notloadedPanel" data-unload="notunloadedPanel">
<h2 >login</h2>
<form id="sample" style="position:absolute;width:250px;height:350px; left:50%; top:50%;margin-left:-130px;margin-top:-50px;">
<input type="email" id="email" name="email" value="" placeholder="username"style="text-align:center;" >
<div id="error"></div>
<input type="password" id="password" name="password" value="" placeholder="password" style="text-align:center;" >
<div id="error1"></div>
<a class="button" onclick="validate()" >Login</a>
</form>
<footer>
</footer>
</div>
<div title='List' data-defer="evelist.php" id="elist" class="panel" data-header="testheader"
data-tab="navbar_list" data-load="loadedPanel" data-unload="unloadedPanel">
</div>
<div id="setting" class="panel" title='Management' data-defer="Setting.php" data-load="settingloadedPanel"
data-unload="settingunloadedPanel" data-tab="navbar_list" >
</div>
<div id="missreport" class="panel" data-defer="MissReports.php" title='Management' data-load="reportloadedPanel"
data-unload="reportunloadedPanel" data-tab="navbar_list" >
</div>
<header id="testheader">
<a onclick="$.ui.toggleSideMenu()" id="mainbuon" class="menuButton" style="float:left"></a>
<!-- <a id="backButton" onclick="$.ui.goBack()" class='button'>Go Back</a> -->
<h1>Events List</h1>
</header>
</div> <!-- content ends here #smessage -->
<!-- bottom navbar. Add additional tabs here -->
<div id="navbar">
<div class="horzRule"></div>
<a href="#Dashboard" id='navbar_dash' class='icon home'>Dashboard</a>
<a href="#elist" id='navbar_list' class='icon home'>list</a>
<a href="#aevent" id='navbar_add' class='icon home'>Add ent</a>
<a href="#smessage" id='navbar_sent' class='icon home'>Sent Msg</a>
<a href="#sendmessage" id='navbar_send' class='icon home'>Send Msg</a>
</div>
<!-- this is the default left side nav menu. If you do not want any, do not include these -->
</div>
</body>
<script type="text/javascript">
var webRoot = "./";
$.ui.autoLaunch = false; //By default, it is set to true and you're app will run right away. We set it to false to show a splashscreen
$(document).ready(function(){
//
$.ui.launch();
});
$.ui.backButtonText="Back"
$(document).bind("swipeLeft",function(){
$.ui.toggleSideMenu(false);
});
$(document).bind("swipeRight",function(){
$.ui.toggleSideMenu(true);
});
//$.ui.useAjaxCacheBuster=true;
function logout(){
var rt= "<?php echo session_destroy(); ?>";
$.ui.loadContent("#elogin",false,false,"slide");
} /***login form panel start here****/
function notloadedPanel(){
$.ui.disableSideMenu();
$('#mainbuon').hide();
$.ui.clearHistory();
}
function notunloadedPanel(){
$.ui.enableSideMenu();
$('#mainbuon').show();
}
function validate(){
var validator = $("#sample").validate({
rules: {
email: {
required: true,
}
, password: {
required: true,
}
},
errorPlacement: function(error, element) {
if (element.attr("name") == "email" ) {
// error.insertAfter("#error");
error.appendTo('#error');
} else {
//error.insertAfter(element);
error.appendTo('#error1');
} },submitHandler: function() {
$.post(webRoot + 'parameter.php', {
email:$('#email').val(),password:$('#password').val(),Login:'Login'
}, function (data) {
if($.trim(data)=='success'){
$.ui.loadContent("#elist",false,false,"slide");
}else{
alert("wrong username and password");
}
});
}
});
if(validator.form()){
$('form#sample').submit();
}
}
/***login form panel ends here****/
document.addEventListener("DOMContentLoaded", init, false);
$.ui.ready(function () {
//This function will get executed when $.ui.launch has completed
// $.ui.showBackButton = false;
});
/* This code is used for native apps */
var onDeviceReady = function () {
AppMobi.device.setRotateOrientation("portrait");
AppMobi.device.setAutoRotate(false);
webRoot = AppMobi.webRoot + "/";
//hide splash screen
AppMobi.device.hideSplashScreen();
$.ui.blockPageScroll();
};
document.addEventListener("appMobi.device.ready", onDeviceReady, false);
</script>
The code should be sufficient, however you need to find out if session_destroy or unset($_SESSION) was called else where
<?php
session_start();
$_SESSION['key'] = "value";
?>