CODEWITHSUNDEEP
phpjqueryajaxcodeigniter
Archana Gupta
Archana Gupta

Reputation: 73

fetch data from database using ajax codeigniter

In this code after clicking on button it should fetch the data from database and display it dynamically within appropriate div using jquery and ajax but i am not getting any output, below is my code:

controller 

defined('BASEPATH') OR exit('No direct script access allowed');

class Afcks extends CI_Controller 
{
public function __construct()
{
    parent::__construct();
    $this->load->model('afcks_search','am');        
}
function index()
{
    $this->load->view('afcks_home');
}
function search_course()
 {
        $result=$this->am->search_course();
        echo json_encode($result);
 }
}

model

 class Afcks_search extends CI_Model
 {
    function search_course()
    {
        $query=$this->db->query("SELECT course_name FROM courses");
        return $query->result();
     }
}

view

 <head>
  <script>
 $(document).ready(function(){
        $("button").click(function(){

            $.ajax({
                url:"<?php echo base_url(); ?>/afcks/search_course";
                type:"POST",
                dataType:"json",
                data:req,
                success:
                function(data)
                {
                    var str='';'
                    str+='<ul>';
                    for(var i = 0; i< data.length; i++)
                    {
                        str+='<li>'+data.course+'</li>';
                    });
                    str+='</ul>';
                    $('#course').html(str);
                }
            });
        });
    });
    </script>  
 </head>
 <body> 
<button> click me </button>
<div id="course"> </div>
</body>

Upvotes: 1

Views: 5951

Answers (3)

Pratik Thube
Pratik Thube

Reputation: 134

please copy my code, also try to change base url and json data conversion 

<head>
  <script>
 $(document).ready(function(){
        $("button").click(function(){
                 var base=<?php echo base_url(); ?>;
            $.ajax({

                url:base+"/afcks/search_course";//also try "<?php echo base_url(); ?>/afcks/search_course" i dont think it's correct.
                type:"POST",
                dataType:"json",
                data:req,
                success:
                function(data)
                {
                   var responseData = $.parseJSON(data);//convert string to json, i know you datatype is set to 'json' still want to cross check. 
                    var str='';
                    str+='<ul>';
                    $(function() {
                        $.each(responseData, function(i, item) {
                             str+='<li>'+item.course_name+'</li>';
                        });
                    })
                    str+='</ul>';
                    $('#course').html(str);
                }
            });
        });
    });
    </script>  
 </head>
 <body> 
<button> click me </button>
<div id="course"> </div>
</body>

hope this will work !

Upvotes: 0

Akshay Kapoor
Akshay Kapoor

Reputation: 302

Change 

url:"<?php echo base_url(); ?>/afcks/course";

to

url:"<?php echo base_url(); ?>afcks/search_course";

and

var str='';'
str+='<ul>';

to

var str='<ul>';

And

for(var i = 0; i< data.length; i++)
{
    str+='<li>'+data.course+'</li>';
});

to

$.each(data,function()
{
    str+='<li>'+this.course_name+'</li>';
}

And remove 

data:req,

Upvotes: 0

B. Desai
B. Desai

Reputation: 16436

You are requesting wrong url from ajax. In your controller method name is search_course So change you ajax url to:

url:"<?php echo base_url(); ?>/afcks/search_course";

Also change obj to data as you are retrieving result into data

for(var i = 0; i< data.length; i++)
{
      str+='<li>'+data.course_name+'</li>'; //<----change here
 });

Upvotes: 1

Related Questions