Using ajax with codeigniter

Hey, I've been using codeigniter rather well for the last few weeks. 

It's now time that I move into AJAX with php, however I am having trouble with understanding how DOM files work with the codeigniter framework.

Where are they placed? How are they produced.

Thanks in advance.

Thanks, God bless.

Put simply you have a controller and a view file. In the view file you call ajax as per usual except you reference the method in the controller. That's the only difference.

Practical guide to IgnitedCMS - Book coming soon, www.ignitedcms.com

Can you elaborate on what you mean by "DOM files"?
All function that you want to call (with ajax) are placed in controllers (or called from one), so dynamic xml and json are created in an e.g. api controller.
Javascript are placed in the public folder (where you have your main index.php file), because they can't work otherwise.

jQuery will make life a lot easier. So, load jQuery in the head of your pages.
Have a look at the jQuery $.post() method.
Make sure the url that you pass to this method, starts with site_url().

Example.
If your controller is named Ajax_functions.php, and the method inside this controller is named test_ajax, then the url for the $.post() method (in your view) should be:

PHP Code:

var url = "<?= site_url('ajax_functions/test_ajax');?>";
$.post( url, { post-values } ) 
.done(function(data){
   alert(data);
}); 


The test_ajax function should end with an echo statement.
The echoed text is the return value for the Ajax call in your view (the data part).
In this example, the return value is displayed in an alert box. But you can do all sorts of things with the return value in jQuery.

Good luck.

It's now time that I move into AJAX with php, however I am having trouble with understanding how DOM files work with the codeigniter framework.
Where are they placed? How are they produced.

I sense a conceptual misunderstanding. The DOM (Document Object Model ) is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript. In other words, "DOM files" are whatever files were used to create a web page in a browser display.

This page from MDN webdocs (who I've already plagiarized for the above) says it better than i can.

jQuery will make life a lot easier. So, load jQuery in the head of your pages.
Have a look at the jQuery $.post() method.
Make sure the url that you pass to this method, starts with site_url().

Example.
If your controller is named Ajax_functions.php, and the method inside this controller is named test_ajax, then the url for the $.post() method (in your view) should be:

PHP Code:

var url = "<?= site_url('ajax_functions/test_ajax');?>";
$.post( url, { post-values } ) 
.done(function(data){
   alert(data);
}); 


The test_ajax function should end with an echo statement.
The echoed text is the return value for the Ajax call in your view (the data part).
In this example, the return value is displayed in an alert box. But you can do all sorts of things with the return value in jQuery.

Good luck.

Thanks for this, the main issue I'm having is where I place the json files and how I categorise them?

The view should not be able to access the json should not be directly as they come under the model group. Is this correct?

When you say "json files" I think you mean "the files that return json data". Those files need to be controllers.

Using Wouter60's example you need a controller named "Ajax_functions" that has a method named "test_ajax".

Modify Wouter60's javascript somewhat to this

Code:

var url = "<?= site_url('ajax_functions/test_ajax');?>";
$.post( url, { test_input: "Hello World" } )
.done(function(data){
  alert(data.result);
});

And using a controller like this

PHP Code:

class Ajax_functions extends CI_Controller
{
    public function test_ajax()
    {
        $posted = $this->input->post('test_input');
        echo json_encode(array('result'=> $posted));
    }
}
?>

The javascript 'alert(data.result)' will contain the message  "Hello World"

To modify the DOM you do that inside the .done() function

Given a view with this snippet of html

Code:

<div id="message"></div>

To put the response from test_ajax() in that DOM element (meaning change the html to look like this)

Code:

<div id="message">Hello World</div>

you would do this

Code:

var url = "<?= site_url('ajax_functions/test_ajax');?>";
$.post( url, { test_input: "Hello World" } )
.done(function(data){
  $("#message').html(data.result);
});

At the risk of giving too much information you should know that you don't have to return json. You can also return html directly. You should be able to find examples of that all over the web.