Confirm dialog box in javascript/jquery

Question

I have a list of thumbnails on the webpage, upon clicking on them it redirects to the respective games in a new screen. I want to add a functionality that would ask the user to enter their dominant hand, ie, a dialog box which appears on clicking on the thumbnail asking "What is their dominant hand? Two buttons: Left and Right". Once the user selects either of the option, it proceeds to the game. I have used http://jqueryui.com/dialog/#modal-confirmation and many other options, but it just won't work.

My code is:

<li class="show-list" onclick="location.href='/excercises/gameserve?id={$exerData.id}'" id="hand">

So there is a list

and than onclick goes to the location of the game. I have added an id="hand" so that I could use it for the dialog box using getElementById.

Also, if it might help, the selected option must get stored in the database..

Can anyone help ...

Answer 1

First thing you cant have same id for all the li so have hand as a class not id

Then have html as

<li class="show-list" data-href="/excercises/gameserve?id={$exerData.id}" class="hand">your desired text</li>

    <div id="dialog-confirm" style="display:none" title="Please select your dominent hand?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Plesae select your dominent hand?</p>
</div>

and then using jquery

$("li.hand").on("click",function(){

    var $self = $(this);
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Right": function() {
          //get the url here
           var url = self.attr("data-href");

          //post a ajax request using the   
        },
        "Left": function() {
          var url = self.attr("data-href") ;

          //post a ajax request using the   
        }
      }
    });



})