• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 903
  • Last Modified:

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

  • 2
1 Solution
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.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now