jQuery, AJAX and Codeigniter - form submit does not work

Question

I'm new to all this AJAX thing so I thought that good learning will be to build simple TODO list. Below is index.php and corresponding controller. Index gets loaded without errors, but when I submit my task nothing is happening. Only page gets reloaded. Database is still empty.

index.php

<html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <h1>Todo</h1> <form id="add" > <input type="input" name="task" /> <input type="submit" value="Add" /><br /> </form> <script> $("form").submit(function() { var value = $("input:first").val(); $.ajax({ type: "POST", url: "<?php echo base_url(); ?>todo/add/" + $("input:first").val(), dataType: 'text', success: function() { var newP = $('<p />').text(value); $(".todos").append(newP).fadeIn(1000); } }); return true; }); </script> <div class="todos"></div> <p>Załadowano w <strong>{elapsed_time}</strong></p> </body>

controller/todo.php

<?php class Todo extends CI_Controller { public function __construct() { parent::__construct(); $this->load->model('todo_model'); } public function index($type = NULL) { $this->load->view('todo/index'); } public function add($data) { $this->Todo_model->add($this->input->xss_clean($data)); } } ?>

Update: todo_model.php:

 <?php class Todo_model extends CI_Model { public function __construct() { parent::__construct(); $this->load->database(); } public function add($data) { $this->db->insert('todo', $data); } public function get() { return $this->db->get('todo')->result(); } } ?>

Does the insert work if you just visit the page with your browser (or cURL)? — Nick Pyett
– Nick Pyett, Commented Mar 13, 2012 at 14:17

Code Prank · Accepted Answer · 2012-03-13 13:58:15Z

1

Try using this:

public function add($data) { $this->Todo_model->add($data); }

instead of:

public function add($data) { $this->Todo_model->add($this->input->xss_clean($data)); }

UPDATE:
JAVASCRIPT:

$.ajax({ method: 'POST', url: '<?php echo base_url(); ?>todo/add/', data: 'data=' + $("input:first").val(), success: function(resp) { //rest processing } });

CONTROLLER:

public function add() { $this->Todo_model->add($this->input->post('data')); }

edited Mar 13, 2012 at 13:58

answered Mar 13, 2012 at 12:58

Code Prank

4,2706 gold badges35 silver badges48 bronze badges

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

4 Comments

GeekDaddy Over a year ago

Made your changes. Did a little debuging with print_r and die(). Add function isn't loading.

Code Prank Over a year ago

try after adding index.php in your url

stormdrain Over a year ago

No, type:'POST' is correct. It is not method:'POST'. If the problem is with the add() method in the model, show us that code.

GeekDaddy Over a year ago

Got some errors from PHP, [Tue Mar 13 19:38:51 2012] [error] [client 127.0.0.1] PHP Fatal error: Call to a member function add() on a non-object in /home/stamp/public_html/test/application/controllers/todo.php on line 17, referer: 127.0.0.1/dev/test/index.php/todo/index

qwertzman · Accepted Answer · 2012-03-13 17:40:37Z

You'll need to use a debugger like Firebug console to see what the reply of the server is to your request.
In your script section

$(function(){}

is missing, which should be wrapped around your jQuery

use something like this to stop the form from submitting:

if (evt.preventDefault()) { evt.preventDefault(); }else{ evt.returnValue = false; }

Hieu Van Mach · Accepted Answer · 2012-03-14 13:15:31Z

Try this one then debug with firebug by clicking on firebug icon then clicking on Console to see what you submit and how the response is

var id = 1;

$.ajax({

 type: "POST", url: "<?php echo base_url(); ?>todo/add/", data: {id : id}, success: function() { var newP = $('<p />').text(value); $(".todos").append(newP).fadeIn(1000); } });

Collectives™ on Stack Overflow

jQuery, AJAX and Codeigniter - form submit does not work

3 Answers 3

4 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Related