I am struggling with autocompletion via CodeIgniter. I followed a tutorial on http://www.codersmount.com/2012/09/jquery-ui-autocomplete-in-codeigniter-with-database/ .
I changed my database etc and the variables but when changing the database to one that not exists it doesn't gives any error so I guess it's something in the view itself but can't figure out what.
Thanks in advance
<?php
?>
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="<?php echo base_url() . 'resources/css/jquery-ui-1.10.3.custom.css' ?>" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="<?php echo base_url() . 'resources/js/jquery-1.9.1.js' ?>"></script>
<script type="text/javascript" src="<?php echo base_url() . 'resources/js/jquery-ui-1.10.3.custom.js' ?>"></script>
<script>
$(document).ready(function() {
alert('test');
$(function() {
$("#test").autocomplete({
source: "birds/get_birds"
});
});
});
</script>
<title>Add Project</title>
</head>
<body>
ID :<input type="text" id="test"> <br>
</body>
</html>
Here is my controller :
<?php
//birds.php
class Birds extends CI_Controller{
function index(){
$this->load->view('birds_view');
}
public function get_birds(){
$this->load->model('birds_model');
if (isset($_GET['term'])){
$q = strtolower($_GET['term']);
$this->birds_model->get_bird($q);
}
}
}
?>
Here is my Model :
<?php
//birds_model.php (Array of Strings)
class Birds_model extends CI_Model{
function get_bird($q){
$this->db->select('Code');
$this->db->like('Code', $q);
$query = $this->db->get('R_Projects');
if($query->num_rows > 0){
foreach ($query->result_array() as $row){
$row_set[] = htmlentities(stripslashes($row['Code'])); //build an array
}
echo json_encode($row_set); //format the array into json data
}
}
}
source: "birds/get_birds"
needs to be this :
source: "<?php echo site_url('birds/getbirds'); ?>"
Related
I'm trying to build a website for school project. I want the schoolResponse() function to happen after clicking the Submit button. If I remove the jQuery function it works but then it shows a default value when I load the page.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>NHG</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link type="text/css" rel="stylesheet" href="css/normalize.css"/>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<link type="text/css" rel="stylesheet" href="css/resposive.css"/>
</head>
<body>
<header>
<div id="main-head">
<h2 id="main-heading">sKoolBook</h2>
</div>
</header>
<section>
<div id="container">
<div id="wrapper">
<form method="POST">
<select name="school">
<option value="none" name="none">Please Select a School...</option>
<option value="NHG">New Horizon Gurukul</option>
</select>
<input type="submit" class="button"/>
<?php
error_reporting(0);
$school = $_POST['school'];
function schoolResponse() {
if ($_POST['school'] == 'none'){
echo 'nothing';
} else {
echo 'something';
}
}
?>
<script>
$('.button').click(
function(
<?php schoolResponse(); ?>
);
);
</script>
</form>
</div>
</div>
</section>
<footer>
</footer>
</body>
</html>
You should use jQuery/AJAX to do this.
<script>
$('.button').click(
$.ajax({
url: 'yoururl.php',
data: $("form").serialize(), //Better to put an ID to the form or something
success: function(data){
//DO something with your data
}
})
);
</script>
There are other functions you should check to properly use ajax requests.
In yoururl.php you should do something like
$school = $_POST['school'];
function schoolResponse() {
if ($_POST['school'] == 'none'){
echo 'nothing';
} else {
echo 'something';
}
}
You can't achieve it like this. Here is one solution:
<?php
error_reporting(0);
$school = $_POST['school'];
function schoolResponse() {
if ($_POST['school'] == 'none'){
echo 'nothing';
} else {
echo 'something';
}
}
if($_POST['school']) schoolResponse();
?>
It would be better if you replace error_reporting(0); with error_reporting(E_ALL); for example, because otherwise php errors will be disabled.
And remove this part:
<script>
$('.button').click(
function(
<?php schoolResponse(); ?>
);
);
</script>
But it is very very basic example.
I just need a little help here about displaying my table query result. When i checked the response from my ajax I shows. But when passing to the views it doesn't shows. Here's my code:
Controller/user.php
<?php
class User extends CI_Controller{
public function __construct(){
parent::__construct();
$this->load->model('user_model');
}
public function index(){
$this->load->view( 'index' );
}
public function read() {
echo json_encode( $this->user_model->getAll() );
}
}
?>
Model/user_model.php
<?php
class User_Model extends CI_Model{
public function __construct(){
parent::__construct();
}
public function getAll(){
$qGetAllData = $this->db->get('user');
if($qGetAllData->num_rows() > 0){
return $qGetAllData->result();
}else{
return array();
}
}
}
?>
View/index.php
<html>
<head>
<title><?php echo $title; ?></title>
<base href="<?php echo base_url(); ?>" />
<link type="text/css" rel="stylesheet" href="css/smoothness/jquery-ui-1.8.2.custom.css" />
<link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>
<body>
<table id="records"></table>
<div id="tabs">
<ul>
<li>Read</li>
<li>Create</li>
</ul>
<div id="read">
<table id="records"></table>
</div>
<div id="create"></div>
</div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-templ.js"></script>
<script type="text/template" id="readTemplate">
<tr>
<td>${id}</td> //doesn't display ID
<td>${name}</td> //doesn't display Name
<td>${email}</td> //doesn't display EMial
</tr>
</script>
<script type="text/javascript" src="js/myjs.js"></script>
</body>
</html>
Javascript/myjs.js
$(document).ready(function(){
$( '#tabs' ).tabs({
fx: { height: 'toggle', opacity: 'toggle' }
});
$.ajax({
url: 'index.php/user/read',
datatype: 'json',
success: function(response){
$('#readTemplate').render(response).appendTo('#records');
}
});
});
That's all guys. I just don't know where's my error.
I think you have issue with just render data.
please review this link for reference.
Please try below code.
Your html : View/index.php
<html>
<head>
<title><?php echo $title; ?></title>
<base href="<?php echo base_url(); ?>" />
<link type="text/css" rel="stylesheet" href="css/smoothness/jquery-ui-1.8.2.custom.css" />
<link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>
<body>
<table id="records"></table>
<div id="tabs">
<ul>
<li>Read</li>
<li>Create</li>
</ul>
<div id="read">
<table id="records"></table>
</div>
<div id="create"></div>
</div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-templ.js"></script>
<script type="text/javascript" src="js/myjs.js"></script>
</body>
</html>
Your JS : js/myjs.js
var readtpl = "<tr><td>${id}</td><td>${name}</td><td>${email}</td></tr>";
$.template( "readTemplate", readtpl );
$(document).ready(function(){
$( '#tabs' ).tabs({
fx: { height: 'toggle', opacity: 'toggle' }
});
$.ajax({
url: 'index.php/user/read',
datatype: 'json',
success: function(response){
$.tmpl( "readTemplate", response ).appendTo( "#records" );
}
});
});
in dbload.php i wrote:
<?php
class grid
{
function show()
{
echo"<div id = 'show'>";
if(isset( $_GET["Name"] ))
echo "done";
else
echo "Not done";
echo "</div>";
}
}
?>
and in load.php i wrote:
<!DOCTYPE html>
<?php
include "dbload.php";
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
$("a").click(function () {
$("div").load(this, function(){
alert("shod");
});
return false;
});
});
</script>
</head>
<body>
click for load ajax
<?php
$db = new grid();
$db->show();
?>
</body>
</html>
but my load function not working. any idea?
You should pass a string for the url argument instead of an object:
$("div").load(this.href, function(){
alert("shod");
});
First, i need to explain you what am i doing :
Note : This project is using codeigniter framework
I have a view for the header and the tabs :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Backend-Vihara Dharma Bhakti</title>
<link href="../../../style/style_backend.css" rel="stylesheet" type="text/css">
<link href="<?php echo base_url(); ?>style/style_backend.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/css/ui-lightness/jquery-ui-1.10.2.custom.min.css" />
<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="header"><h1>HEADER</h1></div>
<div id="tabs">
<ul>
<li>Daftar Umat</li>
<li>Daftar Pengurus</li>
<li>Absensi</li>
</ul>
</div>
</head>
Notice that i use the tabs to load different content(controller) below the header and tabs.
And the controller for the header and the tabs :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Backend_home extends CI_Controller {
public function index()
{
$this->load->view('template/header_v');
}
}
Then, i have another view to show the content (i will use the first link(backend/umat) for the example)
<body>
<link rel="stylesheet" href="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/css/ui-lightness/jquery-ui-1.10.2.custom.min.css" />
<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div id="form_search">
<?php echo form_open('backend/index') ?>
<!--<p>
<?php echo form_dropdown('ddl_search', $data_search, 'id="ddl_search"');?>
</p>-->
<p>
Kelas :
<?php echo form_dropdown('ddl_kelas1', $list_kelas, 'id="ddl_kelas1"');?> -
<?php echo form_dropdown('ddl_kelas2', $list_kelas, 'id="ddl_kelas2"');?>
</p>
<p>
Nama : <?php echo form_input('txt_nama');?>
Alamat : <?php echo form_input('txt_alamat');?>
Tanggal Lahir : <input type="text" id="datepicker" />
</p>
<?php echo form_submit('btn_search', 'Search');?>
<?php echo form_close(); ?>
</div>
<div>
<?php echo $table ?>
<?php echo $pagination ?>
</div>
</body>
</html>
And its controller :
public function umat() {
//check authorization
if(!isset($_SESSION['username']))
redirect('backend');
//pagination
$config['base_url'] = site_url('/backend/umat/');
$config['total_rows'] = $this->backend_m->count_umat();
$config['per_page'] = 10;
$config['uri_segment'] = 3;
$config['full_tag_open'] = '<div id="pagination">';
$config['full_tag_close'] = '</div>';
$this->pagination->initialize($config);
$data['pagination'] = $this->pagination->create_links();
//table
$data_umat = $this->backend_m->get_umat();
$this->table->set_heading(
'No',
'Nama',
'Kelas',
'Alamat',
'Sekolah',
'Nomor Telepon',
'Keterangan'
);
$no = 1;
foreach($data_umat as $list_temp)
{
$this->table->add_row(
$no++,
$list_temp->nama,
$list_temp->kelas,
$list_temp->alamat,
$list_temp->sekolah,
$list_temp->no_tlpn,
$list_temp->keterangan
);
}
//masukkan data dari DB ke DDL
$data_kelas = $this->backend_m->get_kelas();
$data['list_kelas'][0] = 'Pilih Kelas';
foreach($data_kelas as $row)
{
$data['list_kelas'][$row->kelas_id] = $row->kelas;
}
/*$data_search = array('kelas' => 'Kelas',
'nama' => 'Nama',
'alamat' => 'Alamat',
'bulan' => 'Bulan Lahir');*/
$data['table'] = $this->table->generate();
$this->load->view('backend/umat_v', $data);
}
Note that i use pagination in this controller.
Main Problem
Because i use 2 different view(html) in my page, the url will follow the header(tabs) one.
Its url is http://localhost/ci_gabdb/index.php/backend_home
Everything works fine until i click the second page of my pagination's index. The url will change to http://localhost/ci_gabdb/index.php/backend/umat/10 and it makes my page lost its css and header(tabs).
Screen shoot
Before i click any pagination (the pagination index is below, i dont include it so you can see the header and tabs) : (http://localhost/ci_gabdb/index.php/backend_home)
After i click the second page of my pagination's index : (http://localhost/ci_gabdb/index.php/backend/umat/10)
Sorry for the long post :D Please kindly help me if you have any solution to this problem, i dont mind to change my code a lot.
You need to rethink how you're doing your templates. I use templates too, what you need to do is pass the view to the template.
Basic example.
Template page:
$this->load->view('header');
$this->load->view('content',$main_content);
$this->load->view('footer');
Then in your controllers for each page you do this:
$data['main_content'] = 'umat';
$this->load->view('template',$data);
So essentially what you're going to do is EVERY page you load is going to load the template file, the specific page is going to pass to the correct place in that template via $data.
This way you don't have to try and pass multiple views from every controller function and you don't have to worry about things like the issue you have now where pagination requires a single url.
If I'm understanding your issue correctly reworking your pages to load like this should solve your problem.
<code>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery.pager.js Test</title>
<link href="Pager.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.pager.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#pager").pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PageClick });
});
PageClick = function(pageclickednumber) {
$("#pager").pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick });
$("#result").html("Clicked Page " + pageclickednumber);
}
</script>
</head>
<body>
$query = "select name from student";
$result = mysql_query(Query);
while($row=mysql_fetch_array($result)){
$student_name = $row['name'];
?>
<h1 id="result"><?php echo $student_name; ?></h1>
<? }
?>
<div id="pager" />
</body>
</html>
</code>
For my above code am not geting the student name , if i remove the pager script , the student name will appear, may i know , why, where i made mistake..
i thing i have to pass somthing to html() , but i am not sure..
while($row=mysql_fetch_array($result)){ $student_name = $row['name']; }
should be
$student_name = NULL;
while($row=mysql_fetch_array($result)){ $student_name .= $row['name']; }