简体   繁体   中英

How to get post value through ajax in view in Codeigniter

I tried to receive Ajax response but the response is null.

My HTML Looks like this

<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 -->

My Javascript looks like this

    <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>

My controller looks like this

public function search(){   

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

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

        }
    }

I want to pass the value of select box to the controller and return back the selected value in the page $this->load->view('admin/manage_article/search');

I have tried the above code but the response alerts "fail".

I am new to ajax so pardon me if there are any mistakes in coding.

Try this, in your controller

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

your jquery will be as below

<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>

I dont know why you are using the ajax, you might have business logic in controller, which you have not shown. If not then you can simply load the value of choose_country in table_load, as below.

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

There is no reason to make two calls to the server - once for the ajax call and then again to load html.

To return and load html into the browser via AJAX do this in your javascript.

$("#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', 
        // Forcing synchronous strongly discouraged, 
        // as it can cause the browser to become unresponsive.
        //async: false, 
        success: function (response) {
            $('#table_load').html(response);
        },
        error: function(xhr, textStatus, errorThrown){
            console.log(textStatus, errorThrown);
        }
    });
});

Your controller will work the way you show it in the question except I don't see where the posted var is used, so you may not receive the language specific html what you want (If that is what you're trying to do).

If you really feel the need to have the return contain a property called result that you can check using if (response.result) {... then you will need a variation on parth's answer to your question. You can add the html to the returned json with this in your controller.

public function search()
{
    //What do you do with this?
    //You don't show how this is used so I'm mostly going to ignore it.
    $choose_language = $this->input->post('choose_country');

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

    ///get the view file as a string of html markup
    $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));
}

Then your success function would be like this

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM