Fetching post value via AJAX in Codeigniter views: A step-by-step guide

Question

Fetching post value via AJAX in Codeigniter views: A step-by-step guide

Having issues receiving Ajax response as it is coming back null.

The HTML layout includes:

<form method="post" action="<?php $_SERVER['PHP_SELF'] ?>">
        <select class="form-control" class="form-control" id="choose_country">
                            <option value="">Select a prefered language</option>
                            <option value="en">EN</option>
                            <option value="fr">FR</option>
                            <option value="de">DE</option>
                            <option value="nl">NL</option>
                        </select>
                        </form>


<div id="table_load"></div>  <!-- loads search table -->

Javascript code snippet:

    <script>
    $('#table_load').load('<?php echo base_url(); ?>admin/manage_article/search');

          $("#choose_country").change(function(){
            var choose_country = $("#choose_country").val();
            $.ajax({
            url: "<?php echo base_url(); ?>admin/manage_article/search",
            type: "post",
            data: {choose_country: choose_country},
            dataType: 'json',
            async: false,
            success: function (response) {
                if(response.success == true){
alert('success');
            $('#table_load').load('<?php echo base_url(); ?>admin/manage_article/search');
                }else{
                    alert('fail');
                    }
            },
            });
          });
    </script>

Controller code:

public function search(){   

            $choose_language = $this->input->post('choose_country');    

            $this->load->view('admin/manage_article/search');

        }
    }

Goal is to send the select box value to the controller and display the selected value on the page $this->load->view('admin/manage_article/search');

Tried implementing the above code but keep getting "fail" in response alerts.

Still learning ajax, bear with any coding mistakes. Thank you!

javascript ajax codeigniter

Answer 1

Answer №1

Implement this code snippet in your controller:

public function search() {
    $language_chosen = $this->input->post('choose_country');
    $result = ($language_chosen) ? true : false;
    $this->output->set_content_type('application/json')->set_output(json_encode(array('choose_country' => $language_chosen, 'result' => $result)));
}

Your jQuery script should look like this:

<script type="text/javascript>
    $(document).ready(function() {
        $("#choose_country").change(function() {
            var choose_country = $("#choose_country").val();
            $.ajax({
                url: "<?php echo base_url(); ?>admin/manage_article/search",
                type: "post",
                data: {
                    choose_country: choose_country
                },
                dataType: 'json',
                async: false,
                success: function(response) {
                    if (response.result) {
                        alert('success');
                        $('#table_load').html(response.choose_country);
                    } else {
                        alert('fail');
                    }
                },
            });
        });
    });
</script>

If you are not utilizing business logic in the controller with AJAX, you can simply display the chosen country in the table_load element using the following script.

<script type="text/javascript>
    $(document).ready(function() {
        $("#choose_country").change(function() {
            var choose_country = $("#choose_country").val();
            $('#table_load').text(choose_country);
        });
    });
</script>

Answer 2

Implement this code snippet in your controller:

public function search() {
    $language_chosen = $this->input->post('choose_country');
    $result = ($language_chosen) ? true : false;
    $this->output->set_content_type('application/json')->set_output(json_encode(array('choose_country' => $language_chosen, 'result' => $result)));
}

Your jQuery script should look like this:

<script type="text/javascript>
    $(document).ready(function() {
        $("#choose_country").change(function() {
            var choose_country = $("#choose_country").val();
            $.ajax({
                url: "<?php echo base_url(); ?>admin/manage_article/search",
                type: "post",
                data: {
                    choose_country: choose_country
                },
                dataType: 'json',
                async: false,
                success: function(response) {
                    if (response.result) {
                        alert('success');
                        $('#table_load').html(response.choose_country);
                    } else {
                        alert('fail');
                    }
                },
            });
        });
    });
</script>

If you are not utilizing business logic in the controller with AJAX, you can simply display the chosen country in the table_load element using the following script.

<script type="text/javascript>
    $(document).ready(function() {
        $("#choose_country").change(function() {
            var choose_country = $("#choose_country").val();
            $('#table_load').text(choose_country);
        });
    });
</script>

Answer 3

Answer №2

Avoid making multiple calls to the server - use AJAX for both fetching data and loading HTML content.

To load HTML content into the browser using AJAX, follow this JavaScript code snippet:

$("#choose_country").change(function () {
    var choose_country = $("#choose_country").val();
    $.ajax({
        url: "<?php echo base_url('admin/manage_article/search'); ?>",
        type: "post",
        data: {choose_country: choose_country},
        dataType: 'html', 
        success: function (response) {
            $('#table_load').html(response);
        },
        error: function(xhr, textStatus, errorThrown){
            console.log(textStatus, errorThrown);
        }
    });
});

Your controller logic seems correct, but ensure you handle the posted variable appropriately to get the desired language-specific HTML content.

If necessary, include a property named result in the returned JSON object for validation purposes:

public function search()
{
    $choose_language = $this->input->post('choose_country');

    $result = !empty($choose_language) ? true : false;

    $html = $this->load->view('admin/manage_article/search', NULL, TRUE);
    $out = array('result' => $result, 'html' => $html);
    $this->output
        ->set_content_type('application/json')
        ->set_status_header('200')
        ->set_output(json_encode($out));
}

In your success function, check for the result property before updating the HTML content:

success: function(response) {
    if (response.result === true) {
        alert('success');
        $('#table_load').html(response.html);
    } else {
        alert('fail');

Answer 4

Avoid making multiple calls to the server - use AJAX for both fetching data and loading HTML content.

To load HTML content into the browser using AJAX, follow this JavaScript code snippet:

$("#choose_country").change(function () {
    var choose_country = $("#choose_country").val();
    $.ajax({
        url: "<?php echo base_url('admin/manage_article/search'); ?>",
        type: "post",
        data: {choose_country: choose_country},
        dataType: 'html', 
        success: function (response) {
            $('#table_load').html(response);
        },
        error: function(xhr, textStatus, errorThrown){
            console.log(textStatus, errorThrown);
        }
    });
});

Your controller logic seems correct, but ensure you handle the posted variable appropriately to get the desired language-specific HTML content.

If necessary, include a property named result in the returned JSON object for validation purposes:

public function search()
{
    $choose_language = $this->input->post('choose_country');

    $result = !empty($choose_language) ? true : false;

    $html = $this->load->view('admin/manage_article/search', NULL, TRUE);
    $out = array('result' => $result, 'html' => $html);
    $this->output
        ->set_content_type('application/json')
        ->set_status_header('200')
        ->set_output(json_encode($out));
}

In your success function, check for the result property before updating the HTML content:

success: function(response) {
    if (response.result === true) {
        alert('success');
        $('#table_load').html(response.html);
    } else {
        alert('fail');

Fetching post value via AJAX in Codeigniter views: A step-by-step guide

Answer №1

Answer №2

Similar questions

Explore Python and Selenium for implementing pagination with JavaScript functionality

Tips for preventing a function from being triggered twice during a state change

Using jquery ajax during the initial page load and then making another ajax call after 5 minutes eventually causes the browser to crash

When utilised within the same function, JSON values in JavaScript can yield varying results

An array filled with unique and non-repeating elements

do not continue loop if promise is rejected in AngularJS

At times, MomentJS may miscalculate and add an incorrect number of hours

Updating the $location variable from the $rootScope perspective

Node.js MySQL REST API query fails to execute

Switch between showing the Font Awesome TitleText and its associated Class with a single click

adding content to div is becoming less speedy

Please provide the date using the Foundation Datepicker tool

Encountering an unspecified value in the JSON response

The SecurityError known as DOM Exception 18 can be triggered when attempting to use Backbone fetch with a datatype of "xml"

How can I get electron to interact with sqlite3 databases?

Instantaneous results are not achievable with AJAX

Avoiding the use of if statements in Javascript

Enhance the fields on a spring form by incorporating new elements upon the click of a button

Angular Datepicker MinDate function prevents selection of dates "behind" by one

Uncovering the Solution: Digging into a Nested ng-repeat to Access an Array in AngularJS