Welcome Guest, Not a member yet? Register   Sign In
AJAX Load Content No Page Refresh
#6

Sounds pretty complex, but it isn't.
The whole idea is that you have an html element on your page, let's say a <div>, that must be populated with a different content, triggered by some user action. For a start, you'll have to give this html element a unique id, in order to change it's content with jQuery.
Code:
<div id="mycontent"><p>Old piece of content blablabla<p/></div>
<button type="button" id="button1">Click me to change the content!</button>

Next, you write a method (= function) inside a controller that must return the new content.  Make sure it ends with an echo statement:
PHP Code:
echo '<p>New piece of content tadaaa!</p>'

If this method must accept one or more parameters, the safest way is passing 'POST' variables to it in the AJAX request.
Handle them with the standard CI way for $_POST variables, e.g.:
PHP Code:
$category $this->input->post('category'); 

The last step is the jQuery part in your view. Make sure your view has a link to the jQuery library in the <head> section.
PHP Code:
<script>
$(
document).ready(function(){
 
   $('#button1').click(function(){
    var 
url "<?= base_url();?>controller/method";
 
       var cat 'A';
    $.
posturl, { category cat })
    .
done(function(data) {
        $(
'#mycontent').html(data);
    });    
 
   });
});
</
script

After the user has clicked the button, the div will have the new content without a page refresh.
Reply


Messages In This Thread
AJAX Load Content No Page Refresh - by apysan - 02-18-2017, 06:23 AM
RE: AJAX Load Content No Page Refresh - by apysan - 02-22-2017, 02:00 AM
RE: AJAX Load Content No Page Refresh - by Wouter60 - 02-22-2017, 02:43 PM
RE: AJAX Load Content No Page Refresh - by apysan - 02-22-2017, 10:11 PM



Theme © iAndrew 2016 - Forum software by © MyBB