ajax form like structure

Question

I will make this as short and descriptive as possible (considering my case is way longer). Lets say I have 2 database tables with the following structures:

User table:

id ---- username---- gold

Items table:

id----- item_name---- item_price

What I am trying to achieve is brainstorming, I tried this with over 20 script combinations. I need to be able to echo out all items in the table to a good layout (done) Have a text box for the user to type in the value required to be bought. an a href to submit the amount, deduct the price of the item from the amount of gold the user has, then add 1 to the inventory. I am not requiring php code, as it is easy. All I need is help with trying to update the value typed in "Live". The layout of the "shop" will look something like this:

while($_row = mysql_fetch_assoc($query)){
 echo out name...
 <input type = 'text' name = 'to_buy_value'/>
 <a href = 'javascript:;' class = 'buy'>Buy</a>
}

I hope the above code gives you enough reference. TL;DR (after db structure?) 1- A text box with an a href as the submit. 2- table update is done on-the-fly (no reloads). Ajax. 3- Be able to buy more than 1 item at a time without page reloads 4-no help with php code required unless necessary. I'd appreciate any sort of help.

Answer 1

Some time ago, I had project in which I had to do sort of a CMS just for news management, add, edit, delete, etc. As Satya commented, the way is with AJAX if you want to do it nicely.

What I did was a loop, just like yours, for each row fetched with PHP mysql_fetch_assoc add a tr in a table (yeah, I know, tables...). I know that you didn't wanted PHP help, but I think this will help you.

    $res=mysql_query($query) or die(mysql_error());
    while($row = mysql_fetch_assoc($res)) {  
     foreach ($row as $col => $val) {
     if ($col != "column you dont display or isn't 'ID' column" && $col != "another column you dont display, and so on") {
       if ($col == "ID") $id = $val;

       //use this to echo values in table/tr/td/div/span or whatever you use to display values
       if ($col == "gold") {
        echo 'whatever you want to echo using the gold value';
       }
       if ($col == "name of last column you are displaying") {
        echo 'whatever you display for that column';
        echo '<input type="text" value="Introduce quantity">';
        //If you are on HTML5 you could just use id="{$id}" as it will be easier
        echo '<a href="#" class="buy" id="i_{$id}" value="Introduce quantity">';
       }
      }
     }

One of the most important things here is to keep track of the ID of each item, this way you can relate them when sending the POST request to the server.

I recommend you to use jQuery for that matter, it's very easy to use

<script type="text/javascript">
  $(document).ready(function () {
    $(".buy").click(function(e) {
      e.preventDefault();
      // You get the id attribute of the button clicked, which contains the
      // item ID. Then you substr the string to get just the id number. Example:
      // The id of the clicked element is "i_2254" you use substr to get just the
      // 2254 and send it to the php that process the buy
      // If you choose the HTML5 id form I said above in the PHP, then var id=$(this).attr("id")
      var id = $(this).attr("id").substr(2);
      $.ajax({
              type: "POST",
              url: "buy_item.php",
              async:false,
              data: "itemID="+id,
              success: function(data) {
                  // Here is where the magic occurs, this is what happens when you
                                      // get the response, here is where you update the
                                      // inventory, quantity, etc WITHOUT reloading.
                                      // The variable data is the response of the server
                                      // you just echo what you need on buy_item.php, and 
                                      // that will be data here
                                      // A simple example is to change the value of an input
                                      // with id="gold", you echo gold on php and...

                                      $('#gold').val(data);

                }
              }); 

  });
    });
  });
</script>

In the buy_item.php is where you UPDATE the gold values of the table, and add the item to the item table. Use $_SESSION variable to store user session name and update the gold and items of that user.

I suggest you to investigate about AJAX and jQuery(optional), it would help a lot!

I think basically this will solve your problem, and I hope for an invitation for the game :P

Answer 2

Here's a very rough solution for you. In your while loop you could attach the item's database id to the id of the element:

while($_row = mysql_fetch_assoc($query)){
 echo out name...
 <input id="purchaseAmount{$_row->id}" type="text" name="value_to_buy" />
 <a id="purchaseButton{$_row->id}" href="#" class="buy">Buy</a>
}

Then bind a javascript function to your "Buy" link which will make an AJAX request:

$('.buy').bind('click', function() {

  // Grab the item id and amount
  var itemId = $(this).attr('id').substring(14);
  var itemAmount = $('purchaseAmount' + itemId).val();

  $.ajax({
    url: 'someurl/purchaseItem.php',
    data: { item: itemId, amount: itemAmount },
    success: function(data) {
      // Update the player's gold and inventory on screen
    }
  });
});

The "purchaseItem.php" file could return a simple JSON object that holds the player's current gold and item amount for the inventory. Or you could return HTML, depending on how your page is setup.