asked on

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

--s--

<script type="text/javascript">
 
$(document).ready(function(){ 
 
	$(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){
				$("#status_message").html(theResponse);
			}); 															 
		}								  
		});
	});
 
});
 
</script>
 
 
<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>
 
</ul>

Open in new window

anoyes

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;
)};

socross

ASKER

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??

--s--

ASKER CERTIFIED SOLUTION

anoyes

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial