Jan
30
2012

Using jQuery and ajax with CodeigniterEl uso de jQuery y AJAX con Codeigniter

Using jQuery and ajax with Codeigniter

In previous posts I have already written about how to get database information using jQuery, ajax and PHP. Today, I would like to integrate that same approach while using the codeigniter framework. Take a look at it here, if you haven’t read it yet.

To integrate jQuery with codeigniter, might sound a bit scary at first, but mind you, it’s not something out of this world. We will implement the same example from the previous jQuery post. We will use the same html page used in previous post of ajax jquery, and will only change how our PHP script will look, making it specific for codeigniter. Thus, making this post a bit vague for those that do not know how this works yet. Again, I recommend all that have not read my previous post, to do so.

The final resulting html page was:
[php]








[/php]

Only one change needs to be done to this page, and it lies within the ajax call. Since we are using codeigniter, then we all know that the standard way of calling a function and a method is through the url and looks something like, the base_url / controller / function / additional parameters. In this particular example, we will create a new controller named profiles. Within the controller, we are going to have a function named: get_all_users(), so in this html page, we are going to change the ajax url parameter to this:

[php]
url: ‘
[/php]

This should return something like this:
[default]

http://www.yourdomain.com/index.php/products/get_all_users

[/default]

Or if you have removed the index.php then:
[default]

http://www.yourdomain.com/products/get_all_users

[/default]

Now, instead of having that ‘getdata.php’ file, we will create the products controller file for this task we are going to run. It will basically do the same process, except in a ‘codeigniter’ kind of way. Let’s create it:

Note: for the sake of this tutorial, I will place my logic within the controller, but the best practices are to create your logic within a model.

File name: products.php
[php]
class Products extends CI_Controller{

function __construct(){
parent::__construct();
}

public function get_all_users(){

$query = $this->db->get(‘products’);
if($query->num_rows > 0){
$header = false;
$output_string = ”;
$output_string .= “

\n”;
foreach ($query->result() as $row){
$output_string .= ‘
\n’;
$output_string .= “

\n”;
$output_string .= ‘

\n’;
}
$output_string .= ‘

{$row['value']}

\n’;
}
else{
$output_string = ‘There are no results’;
}

echo json_encode($output_string);
}
}
?>
[/php]

This logic is a bit simpler than the original post, but it’s just to get the idea on how to create an ajax, jquery connection using codeigniter. The html page should look something like this:

[php]








[/php]

The basic idea is technically the same as when creating an interactive website with jquery and PHP. Only a few tweaks needed to be made in order for this to work within a codeigniter environment.

Hope you all enjoyed.El uso de jQuery y AJAX con Codeigniter

En posts anteriores ya he escrito acerca de cómo obtener información de base de datos utilizando jQuery, Ajax y PHP. Hoy, me gustaría integrar el mismo enfoque mientras se utiliza el marco de CodeIgniter. Echa un vistazo al artículo aquí, si no lo ha leído aún.

La integración de jQuery con CodeIgniter, puede sonar un poco tenebroso al principio, pero la realidad es que no es algo fuera de este mundo. Vamos a aplicar el mismo ejemplo del artículo anterior jQuery. Vamos a utilizar la misma página HTML que se utiliza en el post anterior de jquery ajax, y sólo cambiar la forma de como manejar nuestro PHP, por lo que es específico para CodeIgniter. Por lo tanto, este mensaje será un poco vago para aquellos que no han leído el el artículo anterior, por lo cual una vez más, recomiendo a todos los que no han leído mi post anterior, que lo lean.

La página HTML resultante fue:
[php]








[/php]

Sólo un cambio que hay que hacer a esta página, y se encuentra dentro de la llamada AJAX. Ya que estamos usando CodeIgniter, entonces todos sabemos que la forma estándar de llamar a una función y un método, lo cuál es a través de la url y tiene el aspecto, el base_url / controlador / función / parámetros adicionales. En este ejemplo concreto, vamos a crear un nuevo controlador llamado profiles. En el controlador, vamos a tener una función con nombre: get_all_users(), por lo que en esta página html, vamos a cambiar el parámetro url ajax a esto:

[php]
url: ‘
[/php]

Esto debe devolver algo como esto:
[code]

http://www.yourdomain.com/index.php/products/get_all_users

[/code]

En el caso de que usted haya removido el index.php:
[code]

http://www.yourdomain.com/products/get_all_users

[/code]

Ahora, en lugar de tener el archivo de “getdata.php”, vamos a crear el archivo de controlador de productos para esta tarea que se va a ejecutar. Es básicamente el mismo proceso, excepto con un enfoque de “CodeIgniter”. Vamos a crearlo:

Nota: por el bien de este tutorial, voy a poner mi lógica en el controlador, pero las mejores prácticas son creando su lógica dentro de un modelo.

Archivo: products.php
[php]
class Products extends CI_Controller{

function __construct(){
parent::__construct();
}

public function get_all_users(){

$query = $this->db->get(‘products’);
if($query->num_rows > 0){
$header = false;
$output_string = ”;
$output_string .= ‘

\n’;
foreach ($query->result() as $row){
$output_string .= ‘
\n’;
$output_string .= ‘

\n’;
$output_string .= ‘

\n’;
}
$output_string .= ‘

{$row['value']}

\n’;
}
else{
$output_string = ‘No hay resultados’;
}

echo json_encode($output_string);
}
}
?>
[/php]

Esta lógica es un poco más simple que el post original, pero es sólo para hacerse una idea sobre cómo crear una conexión ajax, jquery conexión con CodeIgniter. La página HTML debe ser algo como esto:

Archivo: products_view.php
[php]








[/php]

La idea básica es técnicamente el mismo concepto al crear un sitio web interactivo con jQuery y PHP. Sólo unos pocos ajustes necesarios para hacerse con el fin para que esto funcione en un entorno de CodeIgniter.

Esperamos que todos hayan disfrutado.

About the Author: Jorge Torres

MS. Computer Science Codeigniter Web Developer

35 Comments+ Add Comment

  • Nice tutorial loco.

    There is a typo on your code example:
    “class Products extends CI_Cotnroller{” it should read “class Products extends CI_Controller{“… “Controller” is missed spelled ;)

    • oops! thanks for pointing it out. Fixed!

  • In general, i like to code with generic pages (e.g. views) and later on Ajaxify the page. For this you can use the input class to check if it’s a ajax request: http://codeigniter.com/user_guide/libraries/input.html

    if($this->input->is_ajax_request() == TRUE)
    {
    echo json_encode($output_string);
    }
    else
    {
    // load view …
    }

  • Por lo que pude entender este ejemplo me viene como anillo al dedo, pues en mi proyecto necesito algo así, solo con algunas variaciones.

    1- Necesito pasarle un parámetro al controlador(id) para limitar la búsqueda en base de datos, luego que este me devuelva solo el valor de un campo.

    ej. le paso id=5 y me devuelve el valor del campo nombre cuyo id sea 5.

    No se si mi ejemplo ilustra mi problema, podría ud. ayudarme?gracias de antemano.

    • Al esto ser jquery ajax, no te recomiendo que le pases un parametro por la funcion, sino que le envias a traves de post.

      • Gracias por responder.

        Entiendo lo que me dices, solo que olvidé referir que soy poco menos que un novato en ajax, por lo que, aunque en teoría entiendo, en la práctica no tengo idea. Le explico mi necesidad para que pueda ayudarme:
        Tengo un cuadro de lista con los productos al lado un input para introducir la cantidad a solicitar.
        necesito que al seleccionar un producto e introducir la cantidad se consulte la base de datos y en caso de la cantidad ser mayor emita una alerta, para ello necesito enviar el id del producto.
        gracias nuevamente por su atención

  • Client side :

    function ajax_submit_gen ( form_selector, submitter, server_message )
    {

    /* Eli Orr 2/2012
    // form_selector – The input->post(‘items’) ;
    $a = explode(‘&’, $serialized_params );

    $i = 0;
    $params = array ();
    $status =’ parsing:’;

    while ($i found_errors ($found_errors);
    return 0;
    }

    return $params;

    }

  • Nice tutorial, but you’re mixing up Products & Profiles in your text/code

  • Hello! Your tutorial seems nice for beginners but please – do not mess controllers methods with model methods. All traffic on db side needs to be in your model, due to MVC.

    • Indeed. Skinny controllers and fat models should be everyone’s way of thinking. For the sake of simplicity ( and tutorials ) though, I tend to do that sometimes.

  • Nice, it helped me a lot!

  • Just a small note on CI’s base_url() function, instead of using:
    base_url().’profiles/get_all_users’

    It’s better practice to use:
    base_url(‘profiles/get_all_users’)

    The base_url() function appends the parameter to the base URL it pulls from the config, then returns that. :)

  • This tutorial is good. Can you make a codeigniter login form ajax..which the user will be redirected to new page?

  • Qué pasa con esto?

    url: ”

    Si estoy usando un archivo .js externo para la consulta con AJAX?

    Se me ocurre formas de resolver esto, pero no quiero juntar la consulta AJAX en la vista mediante variables extra al fragmento footer. se me ocurre obtener base_ur mediante javascript. En fin, si me das tu opinión estaría agradecido.

  • Bu örnekte güzel bir örnek ama daha kısa olabilirdi ,codeigniter ile ajax işlemleri kadar zor değil aynı bence . . .

  • Hi your tutorial is simply awesome but one thing that i’ve noticed ? why do you have some data models in your controller? that’s a bad practice i think ? :D btw. keep it up bro! :D

    • Well, it’s actually for the sake of simplicity. I have noticed that many people ask about this, so from now on, I’m going to make a bit more comprehensive tutorials concerning the structures I talk about.

      Glad you liked it though.

  • Hi,

    What changes should I make to submit form values. I tried the following code but it with no success. It is not passing the values to controller :-

    [php]

    $(‘#submit_article’).click(function(){

    var article_title = document.getElementById(“title”).value;
    var article_body = document.getElementById(“body”).value;

    $.ajax({
    url: ”,
    type: ‘POST’,
    dataType: ‘json’,
    data: ‘title=’+article_title + ‘&body=’+article_body,
    success: function(output_string){
    $(‘#result_table’).append(output_string);
    }
    });
    });
    [/php]

    • Hi Anita,

      Try this:

      [php]

      $(‘#submit_article’).click(function(){

      //var article_title = document.getElementById(“title”).value;
      //var article_body = document.getElementById(“body”).value;
      // Let’s crate an array for your form variables
      var form_data = {
      title: $(‘#title’).val(),
      body: $(‘#body’).val()
      }
      $.ajax({
      url: ”,
      type: ‘POST’,
      dataType: ‘json’,
      data: form_data,
      success: function(output_string){
      $(‘#result_table’).append(output_string);
      }
      });
      });
      [/php]

      With this, you should be able to access those variables with the followig:

      [php]
      < ?php

      $titble = $_POST['title'];
      $body = $_POST['body'];
      ?>
      [/php]

      Hope this helps.

  • Cool man!!!

    If you want a demo with explication with the same subject check this:

    [link removed]

    Cheers

  • [...] am new to Ajax/Jquery and was following a guide on Ajax for CodeIgniter from jorge torres to implement a simple ajax call on my website and ran into [...]

  • Very Helpful…….. I wanted to how can i add Ajax in codeigniter ?

  • JSON data is not appended to div element…its shown in the response from server in firebug but is not actually shown in the page…Can you point out the problem?

    • got this solved myself! I had forgotten to delete the doctype,head etc at the top of one of my views…Thnx for the tutorial…

  • When I use this code error occured ”
    A PHP Error was encountered

    Severity: Notice

    Message: Undefined property: Products::$db

    Filename: controllers/Products.php

    Line Number: 9

    Fatal error: Call to a member function get() on a non-object in D:\xampp\htdocs\cirnd\application\controllers\Products.php on line 9″

    Please tell me , whats problem.

    • Are you loading your database class?

      • when I am loading database class this error occured – “Fatal error: Cannot use object of type stdClass as array in D:\xampp\htdocs\cirnd\application\controllers\Products.php on line 18

        Please tell me how can run this programme.

    • If you look at your controller you will have mistyped $this->db-> , You will have probably put _> instead of ->.

      I have had this issue before

  • please send me database sturucture of this code

    • The database structure would be the one you define.

  • I think there is an error. Isn’t the controller supposed to be called “Profiles” instead of “Products”? There are many places where you write “products” whereas the “get_all_users” method should be relevant to the “profiles”.

  • Hi,
    I wanted to know one thing for clear from the code above. With or without a framework, will I be able to call a function / method within class? I have searched many forums (SO for example) and I have come across only one answer – it cannot be done. I even tried and all I got was a 404 error. Amazingly, there are lot of answers for ASP .NET while calling a method using $.ajax. Why not for PHP ? I have see many plugins (if you can call it so) like phery.js but somehow I am not convinced. Also the piece of code in your example is within the view. I prefer to have my js code as external and include it at the bottom on the view. Now will the $.ajax call in your example work if it is in an external js file.?

    Thanks,
    Girish

  • $output_string .= ‘{$row['value']}\n’;

    tengo problema en el foreach al parecer no me recoge los datos de la base de datos:

    dentro de la columna CodigoProducto me sale esto en el navegador{$prods["IdProducto"]}

    • Muestrame tu codigo, para ayudarte.

Leave a comment