views:

547

answers:

1

Hi I'm using jQuery and Codeigniter. I'm creating a simple todo list that can add delete entries using ajax.

The problem is whenever I click on my delete anchor, it won't delete the entry. The adding of the entry feature works BTW.

Here's my code:

todo_view.php

<html>
    <head>Todo List</head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
     $(document).ready(function() {
      $('#submit').click(function() {

       var msg = $('#message').val();

       $.post("<?= site_url('todo/add') ?>", {message: msg}, function() {
        $('#content').load("<?= site_url('todo/view/ajax') ?>");
        $('#message').val('');
       });
      });

      $('a.delete').click(function() {
       var id = $('input', this).val();
       $.post("<?= site_url('todo/delete') ?>", {todoid: id}, function() {
        $('#content').load("<?= site_url('todo/view/ajax') ?>");
       });
      });

     });
    </script>
    <body>
     <div id="form">
      <input type="text" name="message" id="message" />
      <input type="submit" name="submit" id="submit" value="Add todo" />
     </div>
     <div id="content">
      <?php $this->load->view('message_list'); ?>
     </div>
    </body>
</html>

message_list.php

<ol>
    <?php foreach ($todolist as $todo): ?>
     <li>
     <?php echo $todo->todo; ?> 
     <a href="#" class="delete"><input type="hidden" value="<?=$todo->todoid ?>" />delete</a></li>
    <?php endforeach; ?>
</ol>

Why doesn't it work?

+1  A: 

First and foremost - to track GET/POST headers and values you should start using Firebug (an extension for Firefox). Really makes your life easy to terms of debugging ajax calls and responses.

Next (somewhat on the lines of what alimango mentioned)... the most likely cause is that the message list is being loaded AFTER your main page's DOM has already loaded. jQuery won't automatically bind the click event to elements added later. Your click binding routine has to be called AFTER the message list has been added to the DOM. Now this isn't always possible... as your list is being fetched / altered dynamically.

One solution is to use the live() bind event function that has been introduced since jQuery 1.3. This helps binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events. Fore more information, see http://docs.jquery.com/Events/live#typefn

Second solution is to use, LiveQuery - a jQuery plugin which "utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated." You can grab it from http://plugins.jquery.com/project/livequery

Cheers, miCRoSCoPiC^eaRthLinG

miCRoSCoPiC_eaRthLinG
Wow, great answer, never thought about the DOM issues.
jfar
I faced quite a lot of that myself during my early days with jq. Had a real tough time figuring it out :D In such cases, even Firebug won't tell you WHY!
miCRoSCoPiC_eaRthLinG