How to update a mysql database without reloading page

Question

Hi, thanks for looking. I have a very long list of items, users click on an image (a plus sign) to add the item to their personal list. At the moment when they click the + it loads a "add-item.php?itemid=*" which processes the below code then redirects them to their own list, I did have it redirecting back to the global list but then it was unclear to the user if the item was added to their list. how would I go about making it all update the database without going anywhere, im thinking javascript but have never written any. Any help would be brilliant!! :)

<?php 
ini_set('display_errors', 'On');
error_reporting(E_ALL);

 $bucketlist=MYSQL_QUERY( "SELECT * FROM membersbuckets where userid = $userid AND bucketid = $bucketid")
 or die(mysql_error());  

          $bucketlist=mysql_fetch_array( $bucketlist ) ;

            if($bucketlist < 1) {

            mysql_query("INSERT INTO membersbuckets (memberbucketid, userid, bucketid, complete)
            VALUES ('', '$userid', '$bucketid', '0')");
            echo "Adding item to your bucketlist...";
            echo "<meta http-equiv='Refresh' content='2; URL=mybucketlist.php'/>";
            }
            else {
            echo "This item is already on your list, redirecting you to your list";
            echo "<meta http-equiv='Refresh' content='2; URL=mybucketlist.php'/>";
            }
?> 

Thank you in advance! :)

Answer 1

You would achieve this via JavaScript utilizing something referred to as "AJAX". An Asynchronous JavaScript And XML request allows JavaScript to send a request to another page and get the results from it.

So utilizing ajax, you would go to the URL you wanted, and then you could display the message to a user.

I use a library called jQuery to get something like this done

$.ajax({
    'url': 'path/to/add-item.php', 
    'type': 'GET',
    'dataType': 'json', 
    'data': {itemid: xx}, 
    'success': function(data) {
      // what happens if the request was completed properly
    },
    'error': function(data) {
      // what happens if the request fails.
    }
  });

Note that just because a request completes properly, doesn't mean the item was added as necessary.

I would suggest you read up on the following to get a good understanding of how exactly to adapt this to your needs.

http://json.org/

http://api.jquery.com/jQuery.ajax/

http://ca3.php.net/json_encode

Answer 2

http://jquery.com/ would be my suggestions. You are going to need to do some AJAX calls to the server to have it interact with your DB and then get a result back and display that information to the user. I prefer JQuery as it simplifies a lot of these calls and the documentation for it is fairly good. There are tons of tutorials around for the basics.

A simple google search reveals quite a few http://www.google.com/search?q=jquery+ajax+tutorial

Answer 3

Hi.. You may really want to use Javascript in your project! See, because you are telling that you dont want to navigate out of the current page and want to give a small message on the current page saying a confirmation to the user.. then u need to use something called as AJAX-Asynchronous Javascript and XML. Its a addition of PHP and Javascript.

        Using AJAX u can update currently loaded page without refreshing it. Here HTML is not connecting or requesting the server but its the Javascript. Hence u can achieve -> [how would I go about making it all update the database without going anywhere].. 

        And as far AJAX and Javascript is concerned, they r very simple! Just need to learn basic syntax of them and den on u can go further!!!

references u can refer to:

-> Best book for u to refer is -

Professional Ajax Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett

Answer 4

You need AJAX, like all of them have said. Since you have never written any javascript, here is the complete guide for you -

• Instead of your <a href="add-item.php?itemid='.$itemId.'" > Add Item </a> write <a onclick="addItemToUsersList('.$itemId.')" > Add </a>

• For using AJAX, use jquery like Angelo has suggested. Download it and add the following

  <script type="text/javascript" src="http://path/to/jquery-latest.min.js"&gt;&lt;/script&gt;
  <script type="text/javasript">
  
  
  function addItemToUsersList(itemId)
  {
    $.ajax({
        'url': 'path/to/add-item.php', 
         'type': 'GET',
        'dataType': 'json', 
        'data': {itemid: itemId}, 
         'success': function(data) 
         {
             if(data.status)
             {
                 if(data.added)
                  {
                          $("span#success"+itemId).attr("innerHTML","Item added to your personal list");
                   }
                   else
                   {
                          $("span#success"+itemId).attr("innerHTML","This item is already on your list");
                  }
              }
         },
         beforeSend: function() 
           {
                 $("span#success"+itemId).attr("innerHTML","Adding item to your bucketlist...");
           }
            'error': function(data) 
            {
            // what happens if the request fails.
              $("span#success"+itemId).attr("innerHTML","An error occureed");
          }
  });
                    }
       </script>
  

• And finally in your path/to/add-item.php file write the code to add the items. The parameter itemId will be available here as $_GET['itemId']. Ju st return proper status values using json_encode -

  if($bucketlist < 1) 
   {
      mysql_query("INSERT INTO membersbuckets (memberbucketid, userid, bucketid, complete)
      VALUES ('', '$userid', '$_GET['itemId]', '0')");
          return json_encode(array("status" => true, "added" => true));
   }
   else
   {
          return json_encode(array("status" => true, "added" => false));
   }