Codeigniter / jQuery update database without reload/redirect

Question

I've been trying to update a database row without having to reload a page or redirect to another page to commit the query. I've tried anything I could, but no luck. I have a gallery page. When a user submits an artwork, by default it's not approved and can be approved by an authorized user such as a moderator. The moderator page lists unapproved artworks. The database has a column called approved, its value being either 0 or 1.

Here is my codes.

UPDATE:

Thanks a lot for taking your time. I made the changes you said but it's still not working. Admittedly, I'm not really so good with jQuery/Ajax, so it must be a mistake on my part as to why it didn't work. My codes are now like this:

Model function:

function approve($id)
{
    $this->db->where('id', $id);
    $this->db->update('galeri', array('approved' => '1')); 
    return TRUE;
}

Controller

function approve($id)
{
    if ($this->galeri->approve($id)) {
        echo("VALID");
    }
}

HTML

.
.
.
<script type="text/javascript">
        $(document).ready(function() {

            var test = $("a.approval").attr("id").replace('artid-','');
            $.ajax({
                  type: 'post',
                  url: 'approve',
                  data: test,
                  beforeSend: function() {
                    parent.animate({'backgroundColor':'#fb6c6c'},300);
                  },
                  success: function(data, textStatus, jqXHR) {
                    if (data == "VALID") {
                        parent.slideUp(300,function() {
                          parent.remove();
                        });
                    };
                  }
            });
          });
        });
    </script>
.
.
.
    <?php foreach ($query->result() as $list): ?>
        <span style="display: block">
            <?php echo $list->path; ?> -- <a href="javascript:void(0)" id="artid-<?php echo $list->id; ?>'" class="approval">Approve artwork</a>
        </span>
    <?php endforeach; ?>
.
.
.

in your CI PHP, use Active Record to easily update your db, then echo back a string or JSON object telling your jQuery AJAX what's up! — SpYk3HH
– SpYk3HH, Commented Apr 20, 2012 at 14:31
from what little i've looked at so far, yoru function approve($id) needs an echo return in order for your jquery ajax to do anything based on returned data. That said, your params for success ar (data, textStatus, jqXHR), where data is the echo returned by php — SpYk3HH
– SpYk3HH, Commented Apr 20, 2012 at 14:33
on which event you want to fire that ajax request?I mean that on clicking that approval link or what? — Peeyush
– Peeyush, Commented Apr 21, 2012 at 7:40
Yes. The event should be triggered when the approval link is clicked. — Ahmet Durgun
– Ahmet Durgun, Commented Apr 21, 2012 at 18:04

SpYk3HH · Accepted Answer · 2012-04-20 14:37:54Z

You're not echoeing back anything and thus success is not evaluating anything

Try adding:

PHP

function approve($id) {
    $this->db->where('id', $id);
    $this->db->update('galeri', array('approved' => '1')); 
    return TRUE; // you could use several dif methods to check if updated
}

function approve($id) {
    if ($this->galeri->approve($id)) {
       echo("VALID");
    }
}

ajax

$.ajax({
      type: 'post',
      url: 'approve',
      data: test, // Not sure what to put here. 
      beforeSend: function() {
        parent.animate({'backgroundColor':'#fb6c6c'},300);
      },
      success: function(data, textStatus, jqXHR) {
        if (data == "VALID") {
            parent.slideUp(300,function() {
              parent.remove();
            });
        };
      }
});

also, I would suggest removing the "e.preventDefault" on your link for severl reasons

you dont have to put a click command on a link
if you do, set it's href to javascript:void(0), works as good as e.preventDefault with less possible crossbrowser function reading issues (tissue?)
as previously noted, some versions of some browsers (cough ie cough) dont like seeing e.preventDefault at the begining of a function, and i cnt remember what ver, but i had that problem once and nearly drove me nuts figuring out i had to remove my prevent default! (lol)

Peeyush · Accepted Answer · 2012-04-21 07:47:56Z

i think you should fire that jquery/ajax request on some event.So if i consider that you are trying to execute that ajax when user click on approval link then try something like this:

<script type="text/javascript">
        $(document).ready(function() {

       $('.approval').each(function(){
                  $(this).click(function(){
               var test = $("a.approval").attr("id").replace('artid-','');
            $.ajax({
                  type: 'post',
                  url: 'approve',
                  data: test,
                  beforeSend: function() {
                    parent.animate({'backgroundColor':'#fb6c6c'},300);
                  },
                  success: function(data, textStatus, jqXHR) {
                    if (data == "VALID") {
                        parent.slideUp(300,function() {
                          parent.remove();
                        });
                    };
                  }
            });
          });

      });
    });


        });
    </script>
.
.
.
    <?php foreach ($query->result() as $list): ?>
        <span style="display: block">
            <?php echo $list->path; ?> -- <a href="javascript:void(0)" id="artid-<?php echo $list->id; ?>'" class="approval">Approve artwork</a>
        </span>
    <?php endforeach; ?>
.
.
.

And please check that your global_csrf protection in config.php file is set to true of false.

$config['csrf_protection'] = TRUE;

if it's set to true then you need to pass csrf token also in your ajax request otherwise codeigniter will not execute your request.

if your $config['csrf_protection'] is set to true then let me know i will tell you how to handle that.

Ahmet Durgun · Accepted Answer · 2012-04-23 13:17:11Z

0

Thank you guys for taking your time and answering. I figured out the problem was the 'data' property of $.ajax. And this is the solution I came up with (which exactly is working the way I want):

<script type="text/javascript">
        $(document).ready(function () {
            $('a.approval').click(function () {
                var test = $(this).attr('id');
                $.ajax({   
                    url: "site/approve/"+test, 
                    type: "POST", 
                    // data: test,
                    success: function(data) {

                        $('.asdf-'+test).css("background-color", "green");
                    }
                })
            });
        });
</script>

Is this a healthy way of using $.ajax, I'd like to know.

edited Apr 23, 2012 at 13:17

answered Apr 22, 2012 at 16:49

Ahmet Durgun

11 silver badge2 bronze badges

Collectives™ on Stack Overflow

Codeigniter / jQuery update database without reload/redirect

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related