Login

03-08-2009, 07:10 PM

[eluser]Michael Nielsen[/eluser]
The title really say's it all; I want to use this (Record Deletion using Mootools) with CI.

Example: My backend administration panel showing users that have been flagged; I want to delete one account that has been very, very naughty so I simply click the delete button (just like the example show above) without having to reload the page so I can continue deleting the very, very naughty users.

IS IT POSSIBLE?

03-08-2009, 07:27 PM

[eluser]spyro[/eluser]
Yes.

03-08-2009, 07:36 PM

[eluser]richthegeek[/eluser]
To expand on spyro's lengthy reply;

Create a controller called "Ajax". Each method inside that handles one type of request. In this case, create a method which deletes the record.

Your AJAX POST (post rather than get for this request) URL could look something like this:
http://www.mysite.com/index.php/ajax/del...d_user/123

The main thing to remember is that you MUST authorise the AJAX actions to stop people guessing the URL and smurfing you over.

tl;dr: yes

03-08-2009, 07:51 PM

[eluser]Michael Nielsen[/eluser]
ok, I'll give it a go; If i run into any trouble I'll give you a shout.

03-08-2009, 10:21 PM

[eluser]Michael Nielsen[/eluser]
Uhhh, Little trouble.

I've got my controller, Ajax.php:

Code:
&lt;?php

class Ajax extends Controller

{

    function Ajax()

    {

        parent::Controller();

    }

    function index()

    {

        $this->load->database();

    }

    function delete()

    {

        $articleID = $this->uri->segment(3);

        $this->db->delete('product', array('id' => $articleID));

    }

}

?&gt;

I've got my page showing the data, product.php. It has the mootools javascript.:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

&lt;html&gt;

    &lt;head&gt;

        &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;

        &lt;style&gt;

        #delete{border: 1px solid #999; background: #ccc; padding: 10px; width: auto; height; auto}

        &lt;/style&gt;

        &lt;title&gt;Product&lt;/title&gt;

    [removed][removed]

    [removed]

      window.addEvent('domready',function() {

      $$('a.delete').each(function(el) {

          el.addEvent('click',function(e) {

               e.stop();

               var request = new Request({

                   url: 'http://localhost/CI/index.php/product/',

                   link: 'chain',

                   method: 'get',

                   data: {

                       'delete': el.getParent('div').get('id').replace('record-',''),

                       ajax: 1

                   },

                   onRequest: function() {

                       new Fx.Tween(el.getParent('div'),{

                           duration:300

                       }).start('background-color', '#fb6c6c');

                   },

                   onSuccess: function() {

                       new Fx.Slide(el.getParent('div'),{

                           duration:300,

                           onComplete: function() {

                               el.getParent('div').dispose();

                           }

                       }).slideOut();

                   }

               }).send();

           });

       });

  });

    [removed]

    &lt;/head&gt;

    &lt;body&gt;

        &lt;? foreach($query->result() as $row): ?&gt;

           <div id='delete'>

           <h3> &lt;?=$row->productName?&gt;</h3>

           <p>&lt;?='$'.$row->productPrice?&gt;</p>

           <p>&lt;?=anchor('product/view/'.$row->productID, 'View Product');?&gt;</p>

           <p>&lt;?=anchor('ajax/delete/'.$row->productID, 'Delete Product');?&gt;</p>

           </div>

        &lt;? endforeach; ?&gt;

    &lt;/body&gt;

&lt;/html&gt;

I'm not a very seasoned php developer so don't hold back on pointing out errors. I'm currently running it on a little mockup so nothings solid.

Problem: It's not working. I do get a db error but thats just the way I'm trying to delete the data however when i click the link to delete the record and trigger the animation it doesn't work; It loads the ajax/delete/ page. Not sure why - I don't do much javascript.

If anyone could point me in the right direction I'd be very happy. Thanks

03-09-2009, 12:42 PM

[eluser]pistolPete[/eluser]

Quote:I do get a db error

That's because you did not load the database in function delete()
The index() method is NOT called when you access ajax/delete!

Either autoload your database or use

Code:
function Ajax()

{

        parent::Controller();

        $this->load->database();

}

I don't use MooTools, but there are some obvious mistakes:

Code:
(...)

var request = new Request({

                   url: 'http://localhost/CI/index.php/product/',

                   link: 'chain',

                   method: 'get',

                   data: {

                       'delete': el.getParent('div').get('id').replace('record-',''),

                       ajax: 1

                   }, 

(...)

The url must be http://example.com/ajax/delete!

As richthegeek already said, use a POST instead of a GET request (here is why).

You can access the id of the product which should be deleted using:

Code:
$this->input->post('delete');

Finally, your links are missing

Code:
class="delete"

Change the following:

Code:
&lt;? foreach($query->result() as $row): ?&gt;

           <div id='delete'>

           <h3> &lt;?=$row->productName?&gt;</h3>

           <p>&lt;?='$'.$row->productPrice?&gt;</p>

           <p>&lt;?=anchor('product/view/'.$row->productID, 'View Product');?&gt;</p>

           <p>&lt;?=anchor('ajax/delete/'.$row->productID, 'Delete Product', array('class' => 'delete'));?&gt;</p>

           </div>

&lt;? endforeach; ?&gt;

03-09-2009, 02:03 PM

[eluser]Michael Nielsen[/eluser]
[quote author="pistolPete" date="1236642146"]

Quote:I do get a db error

That's because you did not load the database in function delete()
The index() method is NOT called when you access ajax/delete!

Either autoload your database or use

Code:
function Ajax()

{

        parent::Controller();

        $this->load->database();

}

I don't use MooTools, but there are some obvious mistakes:

Code:
(...)

var request = new Request({

                   url: 'http://localhost/CI/index.php/product/',

                   link: 'chain',

                   method: 'get',

                   data: {

                       'delete': el.getParent('div').get('id').replace('record-',''),

                       ajax: 1

                   }, 

(...)

The url must be http://example.com/ajax/delete!

As richthegeek already said, use a POST instead of a GET request (here is why).

You can access the id of the product which should be deleted using:

Code:
$this->input->post('delete');

Finally, your links are missing

Code:
class="delete"

Change the following:

Code:
&lt;? foreach($query->result() as $row): ?&gt;

           <div id='delete'>

           <h3> &lt;?=$row->productName?&gt;</h3>

           <p>&lt;?='$'.$row->productPrice?&gt;</p>

           <p>&lt;?=anchor('product/view/'.$row->productID, 'View Product');?&gt;</p>

           <p>&lt;?=anchor('ajax/delete/'.$row->productID, 'Delete Product', array('class' => 'delete'));?&gt;</p>

           </div>

&lt;? endforeach; ?&gt;

[/quote]

As I said in my previous post, I'm not a seasoned developer - there's no need to be an ass about it however regardless of your bedside manor I still would like your help.

Could you explain futher on the url, should it be localhost/CI/index.php/ajax/delete? or could someone please post an example?

03-09-2009, 04:27 PM

[eluser]kgill[/eluser]

Quote:As I said in my previous post, I'm not a seasoned developer - there's no need to be an ass about it however regardless of your bedside manor I still would like your help.

Could you explain futher on the url, should it be localhost/CI/index.php/ajax/delete? or could someone please post an example?

Here's a tip, don't insult the people helping you and if you are going to get defensive when someone does exactly what you asked - don't say "don't hold back".

Regarding the URL, yes it should be localhost/CI/index.php/ajax/delete that first segment after the index.php is the controller, having product there instead of ajax means the product controller will be used and none of the code you just wrote in your ajax controller is going to run.

03-09-2009, 04:36 PM

[eluser]TheFuzzy0ne[/eluser]
IMHO opinion, nothing nasty was said. Pete's post was clear and concise, and he emphasised the necessary parts. Pete tends to get straight to the point, and there's a very good reason for that; Everyone who volunteers to help others on this forum is giving up their own free time to do so. Please don't forget that. Smile

03-09-2009, 08:30 PM

[eluser]Michael Nielsen[/eluser]
I've completed all the necessary changes but I'm still getting the same result. It still loads the ajax/delete page which I don't get any db errors on anymmore however it doesn't remove the data from the database.

Could someone please show me a working example with CI, please?

BTW - here is my codes again incase you would like to have a look-see:

Controller:

Code:
&lt;?php

class Ajax extends Controller

{

    function Ajax()

    {

        parent::Controller();

        $this->load->database();

    }

    function delete()

    {

        $this->input->post('delete'); 

    }

}

?&gt;

View:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

&lt;html&gt;

    &lt;head&gt;

        &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;

        &lt;style&gt;

        #delete{border: 1px solid #999; background: #ccc; padding: 10px; width: auto; height; auto}

        &lt;/style&gt;

        &lt;title&gt;Product&lt;/title&gt;

    [removed][removed]

    [removed]

      window.addEvent('domready',function() {

      $$('a.delete').each(function(el) {

          el.addEvent('click',function(e) {

               e.stop();

               var request = new Request({

                   url: 'http://localhost/CI/index.php/ajax/delete',

                   link: 'chain',

                   method: 'post',

                   data: {

                       'delete': el.getParent('div').get('id').replace('record-',''),

                       ajax: 1

                   },

                   onRequest: function() {

                       new Fx.Tween(el.getParent('div'),{

                           duration:300

                       }).start('background-color', '#fb6c6c');

                   },

                   onSuccess: function() {

                       new Fx.Slide(el.getParent('div'),{

                           duration:300,

                           onComplete: function() {

                               el.getParent('div').dispose();

                           }

                       }).slideOut();

                   }

               }).send();

           });

       });

  });

    [removed]

    &lt;/head&gt;

    &lt;body&gt;

        &lt;? foreach($query->result() as $row): ?&gt;

           <div id='delete'>

           <h3> &lt;?=$row->productName?&gt;</h3>

           <p>&lt;?='$'.$row->productPrice?&gt;</p>

           <p>&lt;?=anchor('product/view/'.$row->productID, 'View Product');?&gt;</p>

           <p>&lt;?=anchor('ajax/delete/'.$row->productID, 'Delete Product', array('class' => 'delete'));?&gt;</p>

           </div>

        &lt;? endforeach; ?&gt;

    &lt;/body&gt;

&lt;/html&gt;