CODEWITHSUNDEEP
codeigniterviewload
zesilva
zesilva

Reputation: 47

How to load a view inside a div - codeigniter

I have a page that i want to remain static with two divs that i want to load different html views during user navigation. I want the content to change without refreshing the entire page, only refreshing those two divs.

How can i load a specific view into those divs? I already have the menu navigation that determines the html views to be loaded into those divs and controller functions to the menu choices that i get using javascript and then use it in the controller of the main page, i just dont know how to load the content.

Upvotes: 3

Views: 17966

Answers (3)

joni_demon
joni_demon

Reputation: 666

I think you need to use a jquery and Codeigniter

This will be your jQuery Code

$('nav').click(function(){//element to be click to load the page in the div
     $(your_div_element).load('controller/method');

});

This will be your Codeigniter

function method(){

   $data['result'] = ''//you can use this if you need to pass some data to the view


   print $this->load->view('your_view',$data,true);//This will load your view page to the div element 

}

Goodluck!

Upvotes: 4

Carlos Quijano
Carlos Quijano

Reputation: 1576

In order to put content without refreshing you should use ajax, lets say you have divs in a file under a directory (webparts), and you want to add it's content to a div called my_div; first create a method on the controller that renders just the view (div) you want to put something like this

function part($part = false)
{
   $data = array(); // you can add data to your div, if you need to.
   $this->load->view("webparts/$part", $data);
}

Then with javascript (jQuery in this case) you can call

$('#my_div').load('controller/mypart');

Note: I like to use "load" because it allows me to select certain sections of the view Im requesting, using something like this

 $('#my_div').load('controller/mypart #certainsection');

Will load the element with the id="certainsection" from mypart view

Upvotes: 3

Calvin
Calvin

Reputation: 8765

You can load the views using a bit of Javascript with AJAX.

With jQuery:

$('a.nav-button').click(function(e) {
  // prevent the default action when a nav button link is clicked
  e.preventDefault();

  // ajax query to retrieve the HTML view without refreshing the page.
  $.ajax({
    type: 'get',
    url: '/path/to/your/controller/method',
    dataType: 'html',
    success: function (html) {
      // success callback -- replace the div's innerHTML with
      // the response from the server.
      $('#yourDiv').html(html);
    }
  });
});

Upvotes: 5

Related Questions