Live search using codeigniter Json Mysql Ajax Jquery

Question

I am doing a project on Live Search Using Jquery Ajax, Php Codeigniter and Mysql
This search is similar to http://w3schools.com/ajax/ajax_aspphp.asp but with MYSql

Here is my database table:

CREATE TABLE IF NOT EXISTS `ix08s_subjects` (
  `SUB_ID` int(11) NOT NULL AUTO_INCREMENT,
  `NAME` varchar(211) DEFAULT NULL,
  `added_by` int(11) DEFAULT NULL,
  `date_added` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`SUB_ID`),
  KEY `FK_ix08s_subjects` (`added_by`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 COMMENT='to store the subjects' AUTO_INCREMENT=3 ;

--

-- Dumping data for table `ix08s_subjects`

INSERT INTO `ix08s_subjects` (`SUB_ID`, `NAME`, `added_by`, `date_added`) VALUES
(1, 'physics', 2, '2013-05-31 10:07:55'),
(2, 'physics', 2, '2013-05-31 10:41:09');

Here is my model code- Subjectmodel.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Subjectmodel extends CI_Model {
   public function __construct() {
        parent::__construct();
    }
    function getSubject($search){
        $this->db->select("SUB_ID,NAME");
        $whereCondition = array('NAME' =>$search);
        $this->db->where($whereCondition);
        $this->db->from('ix08s_subjects');
        $query = $this->db->get();
        return $query->result();
    }
}
?>

Here is my Controller code- Subject.php

<?php
class Subject extends CI_Controller {
    function __construct() {
        parent::__construct();
        $this->load->model('SubjectModel');
    }
    public function index(){
        $search=  $this->input->post('search');
        $query = $this->SubjectModel->getSubject($search);
        echo json_encode ($query);
        $this->load->view('search', $query);
    }
}
?>

Here is my View code- Search.php

<html>
<head>

<script type="text/javascript" language="javascript" src="http://somexyz/js/javascripts/plugin/jquery.js"></script>
<script type="text/javascript" src="http://somexyz/js/javascripts/plugin/json2.js"></script>
<script>
    $(document).ready(function(){
      $("#search").keyup(function(){
        if($("#search").val().length>3){
        $.ajax({
            type: "post",
            url: "http://localhost/ibps/index.php/subject",
            cache: false,               
            data:'search='+$("#search").val(),
            dataType: 'json',
            success: function(response){
                $('#finalResult').html("");
                var obj = JSON.parse(response);
                if(obj.length>0){
                    try{
                        var items=[];   
                        $.each(obj, function(i,val){                                            
                            items.push($('<li/>').text(val.NAME));
                        }); 
                        $('#finalResult').append.apply($('#finalResult'), items);
                    }catch(e) {     
                        alert('Exception while request..');
                    }       
                }else{
                    $('#finalResult').html($('<li/>').text("No Data Found"));       
                }       

            },
            error: function(){                      
                alert('Error while request..');
            }
        });
        }
        return false;
      });
    });
</script>
</head>
<body>
<div id="container">

<input type="text" name="search" id="search" />
<ul id="finalResult"></ul>
</div>
</body>
</html>

When ever I type four letters into the search box I get this alert pop up

Error while request..

Not getting the values from the database

error while request.... get the actual error details by seeing in the console. — itachi
– itachi, Commented May 31, 2013 at 7:51

Community · Accepted Answer · 2017-05-23 12:28:57Z

1

The problem is with the returned format of http://localhost/ibps/index.php/subject.

You have added the line:

$this->load->view('search', $query);

When compaired to your previous question 'Live search using Codeigniter Mysql'. This is probably adding an html template to the output and not the json expected by the ajax call.

Have a look at Return JSON with CodeIgniter

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered May 31, 2013 at 7:50

James Birkett

4903 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sotero Aranguren Over a year ago

If I remove it I Don't see any search box in my output at all @James Birkett

James Birkett Over a year ago

The output of http://localhost/ibps/index.php/subject should not contain any html when used in the ajax call as the responce must be json.

Collectives™ on Stack Overflow

Live search using codeigniter Json Mysql Ajax Jquery

-- Dumping data for table `ix08s_subjects`

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

-- Dumping data for table ix08s_subjects

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

-- Dumping data for table `ix08s_subjects`