JQuery UI - Sortables with Selectables with PHP + Mysql

Hi Guys

Am still learning JQuery and using the Jquery UI, I am working with the demos but tend to get rather stuck when i need it to do more!!!

Here is my situation:

I have a simple ul sortable list, which calls a php script to reorder records in my mysql database.
This is all working fine!

Now comes the next stage, I need each ul li to be selectable and then a set of buttons displayed depending on which one is selected.

I can write the php script which returns the buttons html if it is passed the ID of the li item.
So i need some way of calling 'script.php?page_id=45653' from within a function that is triggerd on select of an item and which sends an ID identified in the specific li item and then appends the new html buttons to the buttons html section.

I have attached where i am now and would really appriciate any thoughts on how i would move this to the next stage.

Many thanks

<script type="text/javascript">
	$(function() {
		$("ul.pages-icons-large").sortable({ revert: true, containment: '#box-large', placeholder: 'ui-sortable-placeholder', opacity: 0.6, cursor: 'move', update: function() {
			var order = $(this).sortable("serialize") + '&action=updateSectionOrder'; 
			$.post("/core/reorder.php", order, function(theResponse){
<ul class="pages-icons-large" id="large-icons-5">
<li id="recordsArray_5"><a class="main-offline" href="#">contact us</a><span class="page-name"><h2>contact us</h2></span></li>
<li id="recordsArray_8"><a class="main" href="#">our gallery</a><span class="page-name"><h2>our gallery</h2></span></li>
<li id="recordsArray_1"><a class="main" href="#">home</a><span class="page-name"><h2>home</h2></span></li>
<li id="recordsArray_18"><a class="main" href="#">Buy</a><span class="page-name"><h2>Buy</h2></span></li>
<li id="recordsArray_2"><a class="main" href="#">services</a><span class="page-name"><h2>services</h2></span></li>

Open in new window

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Could you make the href attribute of those links point to 'script.php?page_id=45653' or whatever?  Then you can just use AJAX to load them and display the buttons:

$('ul.pages-icons-large li a').click(function() {
  var a = $(this);
  $.get(a.attr('href'), function(html) {
    //html is the button html returned by the script, do what you want with it here
  return false;
socrossAuthor Commented:
I have started a work around which uses hadles for moving elements and custom JQuery for setting the active elements and displaying the button html.

Your method looks interesting, by targeting the a tags like this would it fire the code when you click to drag the li parent element??

No, it would only fire the code when you click the actual link.  The problem is that if you wire it up so that it does it when you click the li parent item, then you have to start worrying about firing off the request when someone really just wants to drag the item.  If you're using handles, though, I think this is less of an issue because you have two separate areas for clicking and dragging.  You could tweak the code above pretty easily to wire the click to the li instead of a by doing this:

$('ul.pages-icons-large li').click(function() {
  var li = $(this);
  $.get(li.attr('href'), function(html) {
    //html is the button html returned by the script, do what you want with it here
  return false;

Then you could just add a href attribute (or url, or whatever you want) to the li and then go from there.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.