How to change data of the webpage using AJAX function in CodeIgninter

Question

I am using CodeIgniter as my web framework and from controller, I am using $this->load->view('Apartments_Hotels', $data to load data for the first time. But now I need to reload the page with new data using an ajax function in the view.

Ajax Function in the View

$(document).ready(function() {
    $(".filter_checkbox").click(function(){
        var filter = [];
        $.each($("input[name='filter']:checked"), function(){
            filter.push($(this).val());
        });
        $.ajax({
            async: false,
            type: 'POST',
            data: {
                filter: filter
            },
            url: "<?php echo base_url(); ?>index.php/ListingsController/showFilterListings",
            success: function (response) {

            }
        });
    });
});

Controller Function

public function showFilterListings(){echo $this->load->view('Apartments_Hotels', $data, TRUE);

}

But this is not working. Could anyone please help me with loading view again and again using ajax function

Invoke your PHP page in a Chrome browser, with F12 (Chrome developer tools) active. You can add a debugger; statement to "$(document).ready()" to make it easier to step through the browser-side JS code. Q: Does your JS look OK in Chrome? — paulsm4
– paulsm4, Commented Mar 3, 2019 at 19:24
I tried to alert the response and it shows the whole page I need to reload which includes all HTML and HEAD tags. But I have no idea how to show that page — Shelly
– Shelly, Commented Mar 3, 2019 at 19:37

paulsm4 · Accepted Answer · 2019-03-03 21:49:58Z

2

From your original post, I didn't understand what "wasn't working".

You already know how to display your view (by invoking the controller). You already know how to use Ajax (to get information from the server), and how to use jQuery (to manipulate the DOM rendered by your browser for the view).

The problem is that you don't want to refresh the entire page. Which seems to be exactly what you're doing, with your current Ajax call.

The solution is:

For the initial display, have your CI controller return a view - exactly like you're already doing.
The view will have a "$(document).ready()" action handler, which will make an Ajax call - exactly like you're already doing.
Add a <div id="xyz"...> tag to your view, in order to receive "refresh data" from the server.
Your Ajax call will invoke a different URL - a URL that returns JSON data - the data you want to "refresh".
Your Ajax handler will a) parse out the JSON from the response, and then b) Use it to update the <div> in your DOM.

Here are some examples:

Using AJAX to reload only a Div

Let jQuery AJAX Change This Text

answered Mar 3, 2019 at 21:49

paulsm4

123k23 gold badges175 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

paulsm4 Over a year ago

Beautiful - glad to hear it :)

Collectives™ on Stack Overflow

How to change data of the webpage using AJAX function in CodeIgninter

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related