Using jQuery JSON in CodeIgniter

Question

In CI, I have setup a controller with a method of logsig(). Then in my index() method I'm calling a view called startpage. In my view I'm using JSON to make an asynchronous call between my view and my controller. How would I code the call. Below is the code I have:

Contoller:

function logsig() {
$this->load->view('startpage', $sync);
header('Content-type:application/json'); .............

View:

<script type="text/javascript" language="javascript">
$(document).ready(function() {
    // blink script
    $('#notice').blink();

    $("#action_button").click(function() {
        var username = $("#username").val();
        var password = $("#password").val();
        var dataString = '&username=' + username + '&password=' + password;
        if(username=='' ||  password=='') {
            $('#success').fadeOut(400).hide();
            $('#error').fadeOut(400).show();
        } else {
            $.ajax({
            type: "POST",
            dataType: "JSON",
            url: "processing/logsig.php",
            data: dataString,
            json: {session_state: true},
            success: function(data){
            if(data.session_state == true) { // true means user is logged in.
                $("#main1").hide();
                $('#main1').load('<?=$sync?>').fadeIn();
            } else if(data.session_state == false) { // false means user is being registered.
                $("#action_button").remove();
                $('#success').load('<?=$sync?>');
                // onLoad fadeIn
            }
          }
       });
      }
    });
});
</script>

Answer 1

Try This

Controller ---------

public function AjaxTest() {    

        $rollNumber = $this->input->post('rollNumber');

        $query = $this->welcome_model->get_students_informationByRoll($rollNumber);
        $array = array($query);
        header('Content-Type: application/json', true);
        echo json_encode($array);   
    }

View-----

<?php echo validation_errors(); ?>
        <?php echo form_open('welcome/SearchStudents'); ?>

        <input type="text" id="txtSearchRoll" name="roll" value="" />
        <input type="submit" name="btnSubmit" value="Search Students" onclick="return CheckAjaxCall();"/>

        <?php echo '</form>'; ?>

Scripts ----------

function CheckAjaxCall()
            {
                $.ajax({
                    type:'POST',
                    url:'<?php echo base_url(); ?>welcome/AjaxTest',                    
                    dataType:'json',
                    data:{rollNumber: $('#txtSearchRoll').val()},                    
                    cache:false,
                    success:function(aData){                        
                        //var a = aData[0];                    
                        //alert(a[0].roll);

                        $.map(aData, function (item) {

                            var stData = "<td>"+ item[0].roll +"</td>" +
                                " <td>"+item[0].Name+"</td>" +
                                "<td>"+item[0].Phone+"</td>" +
                                "<td> <a href=\"<?php echo base_url(); ?>welcome/EditStudents/"+ item[0].roll +"\">Edit</a> </td>"+
                                "<td> <a href=\"<?php echo base_url(); ?>welcome/DeleteStudents/"+item[0].roll+"\">Delete</a> </td>";
                            $('#tblStudent').text("");
                            $('#tblStudent').append(stData);
                            //alert (item[0].roll + "  " + item[0].Name);
                        });  

                        //alert(aData);
                    },
                    error:function(){alert("Connection Is Not Available");}
                });

                return false;
            }

Answer 2

You can't have your controller load a view and return JSON at the same time. Break out the JSON portion to a separate function.

An oversimplified example could look like this:

// Your existing function, but only displaying the view
function logsig() {
    $this->load->view('startpage', $sync);
}

// A new function whose sole purpose is to return JSON
// Also notice we're using CI's Output class, a handy way to return JSON.
// More info here: codeigniter.com/user_guide/libraries/output.html
function get_json() {
    $this->output->set_content_type('application/json')
                 ->set_output(json_encode(array('foo' => 'bar')));
}

Then, in your JavaScript, call get_json:

$.ajax({
    type: "POST",
    dataType: "JSON",
    url: "<?php echo site_url('processing/get_json.php'); ?>",
    // ... truncated for brevity ...
});

Answer 3

If I read your question correctly, your JS postback code isn't working:

url: "processing/logsig.php",

Your CI url should be something like:

url: <?php echo site_url("processing/logsig"); ?>,

The site_url() function requires the URL helper. Load that in the beginning of your loadsig() function:

$this->load->helper('url');