0

I am doing a "list of items I have to ship", with every item and a button "Mark as shipped" for every item.

My problem is that when I press Mark as shipped, one item disappears, but it's not the one I clicked on.. I have to refresh the page to get the see a logical result. I would like to prevent PHP from updating this list because I want to handle that with jQuery. Also, I would like to know how to update $numItemHave2Ship without having to refresh the page (or is it better to do it with jQuery?).

How would I have to do that? Thanks a lot.

here is how my code works:

First I get all the items with MYSQL:

$query=mysql_query("SELECT * FROM items WHERE seller='$username' AND shipped!='1'");
$numItemHave2Ship=mysql_num_rows($query);
echo "You have to ship ".$numItemHave2Ship." items:<p>";

Then, for every item I have: 

<input type='hidden' name='item' value='".$row['item']."'>
<input type='submit' class='shipped_button' value='Mark as shipped'>

Then obviously, this button triggers the mysql query:

$query=mysql_query("UPDATE items SET shipped='1' WHERE item='$item' 
AND seller='$username'");

EDIT: I have no jQuery code yet. My whole code is in PHP and HTML.

alexx0186
  • 1,557
  • 5
  • 20
  • 32

3 Answers3

1

Is the action of the form for an item, this same page? If so, you must call the SQL UPDATE conditionally depending on if isset($_POST["item"]), before you call the SELECT query and the code which displays the list of items.

If you want to use jQuery to update the items list as well as numItems label without reloading the page, you will need to do something like this (untested, may contain errors, but this is the gist of it):

  1. Put the UPDATE and SELECT queries and the code to display (echo) the selected items in a separate php script. This must be called as the url in jQuery ajax() or .get() or .post().

  2. In jQuery, set a click method on the submit buttons, something like $('.shipped_button').click()

  3. Prevent default behaviour when a button is clicked by calling $(this).preventDefault()

  4. Use the name attribute of the submit button to store the $item value. (You can get rid of the hidden input if you don't need the page to degrade gracefully without the use of jQuery). Then you can get the $item value as $(this).attr('name') and pass it as data to your ajax script.

  5. Refresh the inner html of the items list in your callback function on success, something like this: $('#items').html(result)

  6. Decrement the value of numItems label: var str_items = $('#numItems').html(); var int_items = parseInt(str_items) - 1; $('#numItems').html(int_items);

EDIT: If you don't want to use .preventDefault(), you can easily prevent the form submission by just changing the type='submit' to type='button' instead.

Stefan
  • 3,850
  • 2
  • 26
  • 39
  • Hi Stefan, thanks a lot for your detailed answer. Changing the order of the isset(POST) has solved the first part of the problem. I will use your suggestion for jQuery. Thanks again – alexx0186 Mar 26 '12 at 16:45
  • Hi again, I was just wondering if using jQuery's post() or ajax() poses some security or reliability issues? Thanks a lot, Regards – alexx0186 Mar 26 '12 at 17:05
  • 1
    Hi - re jquery ajax security, not sure myself, but see http://stackoverflow.com/questions/6418620/jquery-ajax-and-ssl - specifically the comments in the accepted answer, about the possibility to call an https page. Re reliability: If you don't have javascript, it will fail if you depend solely on the jQuery - however it looks like you don't have to only depend on that and can have the form submit normally if javascript should fail. However, I think you can rely on js because this seems to be an admin page and you can require such a user to always enable javascript in his browser. – Stefan Mar 26 '12 at 17:17
  • Thanks a lot Stefan for your response and your link. I am looking into it now. Regards – alexx0186 Mar 26 '12 at 19:38
0

Somewhere in your callback the list is being refreshed. Without seeing your ajax call we can't troubleshoot it. But whatever call is building that list should only be called once, probably on page load. If you can post your ajax function we can take a look.

user1289347
  • 2,397
  • 1
  • 13
  • 16
  • Hi, thanks for your response. I actually have no jQuery yet. It's all in PHP and HTML. I was just considering using jQuery. – alexx0186 Mar 26 '12 at 07:30
0

You can have multiple submit buttons do different things. Try this:

<button type='submit' class='shipped_button' name='item' value='".$row['item']."'>Mark as Shipped</button>

You can have one of those on every row, and only that row's item will be "marked as shipped" when you click it.

landons
  • 9,502
  • 3
  • 33
  • 46