Drongo_III Posted June 9, 2011 Share Posted June 9, 2011 Hi Guys I'm quite new to jquery ui and it's posing something of a headache to follow the demos :/ I'm trying to use the selectable grid (http://jqueryui.com/demos/selectable/#display-grid) and my desire is to pass a different value to a variable based on the item clicked. I'm then going to post that value to my php script. I've worked out the latter part which was pretty straight forward. But i can't work out how to retrieve a value from clicking on the grid :/ Anyone able to help? The code i'm working with is: <script> $(function() { $( "#selectable" ).selectable(); }); </script> </head> <body> <div class="demo"> <ol id="selectable"> <li class="ui-state-default">1</li> <li class="ui-state-default">2</li> <li class="ui-state-default">3</li> <li class="ui-state-default">4</li> <li class="ui-state-default">5</li> <li class="ui-state-default">6</li> <li class="ui-state-default">7</li> <li class="ui-state-default">8</li> <li class="ui-state-default">9</li> <li class="ui-state-default">10</li> <li class="ui-state-default">11</li> <li class="ui-state-default">12</li> </ol> </div><!-- End demo --> Quote Link to comment Share on other sites More sharing options...
Drongo_III Posted June 9, 2011 Author Share Posted June 9, 2011 Well after an hour of scratching my head I got it to work. Thought I'd post it here to help any others in the noob boat I think i need to seriously bone up on my jquery... <script> $(function() { $( "#selectable" ).selectable({ stop: function() { $("#selectable li").click(function() { var tester = $(this).attr("value"); $("#content").html(tester); }); } }); }); </script> </head> <body> <div class="demo"> <ol id="selectable"> <li class="ui-state-default" value="100">1</li> <li class="ui-state-default" value="200">2</li> <li class="ui-state-default" value="300">3</li> <li class="ui-state-default" value="400">4</li> <li class="ui-state-default">5</li> <li class="ui-state-default">6</li> <li class="ui-state-default">7</li> <li class="ui-state-default">8</li> <li class="ui-state-default">9</li> <li class="ui-state-default">10</li> <li class="ui-state-default">11</li> <li class="ui-state-default">12</li> </ol> </div><!-- End demo --> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.