Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I have a Fantasy F1 Website, currently users select their teams using dropdown menus. It works OK but isn't as user friendly as I would like.

I would like to implement a drag and drop type of system, there's jQuery code out there that would go part of the way to allowing me to do this:

http://jqueryui.com/demos/draggable/

But I am not sure about how to integrate that into PHP and MySQL, my jQuery skills are limited!

I'd also need to stop them spending more than a certain amount of money, each driver has a value and the teams can only spend a certain amount of money.

There's also limits for example you can only pick a driver once, but you can have three different drivers.

Finally, how would you decide that the user had picked their team, I don't want a submit button as that kind of defeats the object of the exercise!

Thanks for any advice, I don't expect anyone to write the code for me but some pointers would be greatly appreciated.

share|improve this question
1  
The droppable demo seems to be more what you want: jqueryui.com/demos/droppable –  Gustavo Maciel Mar 17 '12 at 17:04
    
Or even the sortable: jqueryui.com/demos/sortable You could make the users put on top the 3 teams they want to choose. Then you can easily send these values to php. Then from php to MySQL. –  Gustavo Maciel Mar 17 '12 at 17:05
    
Thanks, I had seen the sortable but that dropable looks very interesting :-) Not enough rep to vote you up sorry. –  davidjwest Mar 17 '12 at 21:50

2 Answers 2

But I am not sure about how to integrate that into PHP and MySQL, my jQuery skills are limited!

In most cases, you'll have to store the driver's IDs (primary key in the database maybe?) on the client side. When the player has filled the list of drivers, you need to take this list of IDs and send it over to your server.

One approach is to store the ID as a data attribute of your container tag:

<div class="driver" data-driver-id="5">
    ...
</div>

Using jQuery you can easily extract these attributes back.

var selectedDriverIds = $('.driver').data('driver-id');

Use the droppable events to listen for changes (the driver has been dropped over), and send that to the server using jQuery's AJAX functionality.

Finally, you'll need to write a PHP function that accepts what data is sent, performs a bit of validation if needed, and returns the appropriate response to jQuery's AJAX call.

The way you implement your status codes, such as "OK", "Not enough drivers", etc is up to you. You can send a JSON string back with a number that the client knows how to interpret and display the appropriate message. Alternatively, you can use HTTP's own codes.

$.ajax({
  type: "POST",
  url: "http://.../drivers.php",
  data: JSON.stringify(selectedDriverIds),
  success: function(result) {
      if (result.message === "OK") {
          // proceed as planned
      } else {
          // handle the errors
      }
  }
});

It's an involved process and does take knowing JS, jQuery, and a bit of PHP<->AJAX knowledge. There are plenty of resources that will walk you through how to do this.

share|improve this answer

It sounds as if you should look at using JavaScript for this part of your interface. You can use JavaScript to validate choices as the user makes selections. For example, when the user chooses a driver, call a function that subtracts the driver's cost from available funds, removes that driver from the list of possible drivers, and updates the count of how many drivers have been chosen so far. You can make the menu more user-friendly by only allowing the user to choose from drivers that they can currently afford (unaffordable drivers could be greyed out, for example). For more complex interactivity such as the drag-and-drop menus you are describing, jQuery would certainly be useful.

You can also use jQuery's .ajax() methods to send data to your PHP scripts. This way more of your game logic could remain in PHP, which might be advantageous if you are trying to prevent cheating (JavaScript can easily be tampered with by the user).

share|improve this answer
    
I have already got a javascript validation system with the dropdown menus, but some users are really dumb ;-) –  davidjwest Mar 17 '12 at 21:51
2  
Never use client-side validation, maybe, for optimization purposes. –  jco Aug 14 '12 at 20:58
    
Often times it's better to use a combination of client and server validation. Client-side validation has a tendency to be very responsive compared to server-side. –  Jovan Jan 12 '13 at 0:22

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.