CODEWITHSUNDEEP
javascriptphpjqueryajaxcodeigniter
Shubham Sanglikar
Shubham Sanglikar

Reputation: 31

Ajax call not working in CodeIgniter

I am trying to test AJAX in CodeIgniter, with no luck so far. Please tell me where I am going wrong.

Here is my test_page.php:

<!DOCTYPE html>
<head>
    <script src="<?php echo base_url();?>assets/libs/jquery/jquery-2.2.3.min.js"></script>
    <script src="<?php echo base_url();?>assets/libs/jquery/jquery-2.2.3.min.js"></script>
    <script src="<?php echo base_url();?>assets/libs/js-cookie/js.cookie.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>

<button id="btn" onclick="gethtml()">ajax Test</button>

<script type="text/javascript">
function gethtml(){
    var url = "<?php echo base_url();?>home/ajax_test";
    alert(""+url);
    $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        success: function(data){
            alert("ajax success");
        }
    });
}
</script>

</body>

</html>

Here is my function in controller:

public function ajax_test() {
    echo "return from ajax";
}

Upvotes: 2

Views: 2283

Answers (4)

Akshay Singhai
Akshay Singhai

Reputation: 189

This Type of AJAX Call dataType is not required

Remove 

dataType: 'json'

Use like

<script type="text/javascript">
function gethtml(){
    var url = "<?php echo base_url();?>home/ajax_test";
    alert(""+url);
    $.ajax({
        url: url,
        type: 'POST',
        success: function(data){
            alert("ajax success");
        }
    });
}
</script>

Upvotes: 1

user4419336
user4419336

Reputation:

Try on view

<button id="btn">ajax Test</button>

<script type="text/javascript">
$('#btn').on('click', function(e) {

    // e.preventDefault(); Not sure if you need it.

    $.ajax({
        url:"<?php echo base_url('home/ajax_test');?>",
        type: 'POST',
        dataType: 'json',
        // data: {
        // someinput: $('#someinput').val()
        //},
        success: function(data){
            alert(data['test']);
        }
    });
});

</script>

On controller you can use the output class also.

public function ajax_test() {

    $json['test'] =  "return from ajax";

    $this->output->set_content_type('application/json');
    $this->output->set_output(json_encode($json));
}

Upvotes: 0

Shubham Sanglikar
Shubham Sanglikar

Reputation: 31

Error in the above code is the response from the ajax_test() is not encoded into json. So, the error event of json is triggered and the code inside success is not executed. Always make sure to send json encoded data if you are specifying dataType as json.

Upvotes: 0

Alex Mac
Alex Mac

Reputation: 2993

You can use below mentioned solution.

<button id="btn">ajax Test</button>


$(document).ready(function(){
   $('#btn').Click(function(e){
      e.preventDefault();
      var url = "<?php echo base_url();?>home/ajax_test";           
      alert(""+url);             
      $.ajax({           
            url: url,            
            type: 'POST',               
            dataType: 'json',            
            success: function(data){            
                   alert("ajax success");           
             }      
        });
    });
});

Let me know if it not works for you.

Upvotes: 0

Related Questions