CodeIgniter Forums
jQuery, Add / Delete elements without page refresh - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived General Discussion (https://forum.codeigniter.com/forum-21.html)
+--- Thread: jQuery, Add / Delete elements without page refresh (/thread-3938.html)

Pages: 1 2


jQuery, Add / Delete elements without page refresh - El Forum - 10-29-2007

[eluser]Chris Newton[/eluser]
I've been trying to wrap my brain around this now for days, and I'm getting nowhere, so please bear with me...

I have admin page for my clients to add/edit/delete content to their site. I have a functioning form that currently has 2 input fields for files. I'd LIKE the client to be able to add / remove these input fields as needed based on the amount of files they need for a specific piece of content WITHOUT having to refresh the page using jQuery.

1. I need to delete an input field from a form without a page refresh AND make a call to the model to delete the corresponding data associated with that field.

I know how to get jQuery to remove or add an element to the page.
I know how to get Code Igniter to delete the data.

Using MVC, I"m having trouble wrapping my brain around how I'm supposed to call a jQuery function AND call a code igniter controller method without refreshing the page. I'm waiting for that "OH, I GET IT" moment, and unfortunately, it's just not coming.

Does anyone have any good jQuery / Code Igniter tutorials they could recommend? Any help you could provide at all would be greatly appreciated. I'm an established web guy trying to take his stuff to the next level and I see huge potential in both jQuery and Code Igniter if I can just get past the first operation...


jQuery, Add / Delete elements without page refresh - El Forum - 10-29-2007

[eluser]xwero[/eluser]
from what i read i don't understand what the problem is?

If you can have multiple files you loop through them so it doesn't matter if you have one or ten files.

can you show the code where it goes wrong?


jQuery, Add / Delete elements without page refresh - El Forum - 10-30-2007

[eluser]Antivanity[/eluser]
Use the JSON GET function in jQ to call a controler function that calls your model. I recently did this as well.

Hope this helps.


jQuery, Add / Delete elements without page refresh - El Forum - 10-30-2007

[eluser]Chris Newton[/eluser]
Antivanity, I'll look into that. Thanks for the tip.

Xwero, the code doesn't go wrong at this point, It's not written, and that's the problem. I'm confused about methodology & approach, rather than syntax.


jQuery, Add / Delete elements without page refresh - El Forum - 10-30-2007

[eluser]xwero[/eluser]
Why not only use one ajax upload field that returns the list of related files and an error message if needed instead of multiple upload fields that are only useful to upload other files. So in your view you would have something like
Code:
// empty form
<input type="file" name="userfile" id="userfile">
<input type="submit" id="upload" value="Upload">
<div id="files"></div>
In the files div comes a list/table of files with action buttons. The benefit of doing it like this is you can make the form php only.

I see there are many posts about ajax but i wonder how many back-up the ajax functionality with php only code. It's not always possible to do it but i think the basic code of the site should have php only back-up. Maybe i'm one of the 'old' guys who can't let go the BA (before ajax) time Smile


jQuery, Add / Delete elements without page refresh - El Forum - 10-30-2007

[eluser]Chris Newton[/eluser]
xwero, I think what you are suggesting, an input field, plus list of files is a great idea.

However, I'd still like a way to delete something from that list without a page refresh, which still brings me back to removing an element & calling a controller without page refresh.


jQuery, Add / Delete elements without page refresh - El Forum - 10-30-2007

[eluser]xwero[/eluser]
I do this by adding the id to the row
Code:
// html
<tr><td>filename</td><td>other info</td><td><span class="hidden">23</span>&lt;input type="submit" class="delete" value="delete"&gt;</tr>
// javascript
$('.delete').click(function(){
$.ajax({
   type: "POST",
   url: "index.php/ajax/deletefile",
   data: "id="+$(this).prev().text(),
   success: function(table){
     $('#files').html(table);
   }
});
return false
});
To be save you can use an absolute url.
You can even put the code to generate the table in a separate function so you can use it for adding a file and deleting one.


jQuery, Add / Delete elements without page refresh - El Forum - 10-30-2007

[eluser]Chris Newton[/eluser]
Ah.... sorry to be so dense. Now that I see it, it really makes sense. Thanks for the perseverance. I'll give it a shot.


jQuery, Add / Delete elements without page refresh - El Forum - 11-06-2007

[eluser]Chris Newton[/eluser]
Ok. I've been trying on and off for a few days, but I'm not getting anywhere on this. Thus far, you guys have been really helpful, but every method I've tried hasn't yielded me any results. I'll post my code, and would be grateful to anyone that can provide any insight into the errors. I've stepped the code down to the bare essentials to reduce any bugs. I'd love to get some kind of error at a minimum, but so far I've been unable to see any action whatsoever.

1. Controller: test_controller.php
Code:
&lt;?php
class Test_controller extends Controller {

    function Test_controller(){
        parent::Controller();

    }
    function index(){
    $data['title']='test';
        $this->load->view('admin_delete_this_view',$data);
    }
        
}            
            
?&gt;

2. View admin_delete_this_view.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;test&lt;/title&gt;
    
    
    $('.delete').click(function(){
    $.ajax({
       type: "POST",
       url: "/index.php/test_ajax_controller/delete",
       data: "id="+$(this).prev().text(),
       success: function(html){
           $("#show").html(html);
           }
    });
    return false
    });
    
&lt;/head&gt;

&lt;body&gt;
<table>
<tr><td>filename</td><td>other info</td><td><span class="hidden">3</span>&lt;input type="submit" class="delete" value="delete"&gt;</tr>
</table>
<br />
<br />
<p>
<div id="show"></div>
</p>
&lt;/body&gt;

3. Ajax controller. test_ajax_controller.php
If the $_POST['id'] is hard coded to a known database id, and called directly it works.

Code:
&lt;?php
class Test_ajax_controller extends Controller {

    function Test_ajax_controller(){
        parent::Controller();
    }
    function delete(){
        $data['delete_me']=$_POST['id'];
    
        if (!empty($data['delete_me'])){
            $this->load->model('properties', '', TRUE);
            $this->properties->deleteElevations($data['delete_me']);
            $this->output->set_output('works');
        } else {
            $this->output->set_output('dontwork');

        }
    }
}    
                
            
?&gt;

4. Model snippet from properties.php (which will work if called via other methods)
Code:
function deleteElevations($id){
        $this->db->delete('elevations', array('id' => $id));
    }



jQuery, Add / Delete elements without page refresh - El Forum - 11-06-2007

[eluser]xwero[/eluser]
in your view the jQuery is added somewhere before this particular view?? And the javascript code is in a script tag called by the jQuery using $(function(){// code }); so it loads when the document is ready?

Maybe there are other things but those are the ones my eye fell on right away.