Help with draggable/droppable ui
I have one <span id='draggable'>. It uses <span id='droppable1'>,
<span id='droppable2'>,<span id='droppable3'>, etc. This works
perfectly. When I use ajax to add a new entry to mysql, the
responsetext includes an additional <span id=''droppable4'>. The first
three work fine, but this additional droppable span does not work
until I refresh the page. I have spent hours double checking my
syntax, css validity, xml, etc. Is it because I initialize the
draggable function in the <head> of the page? If so, is there a way to
re-initialize the draggable/droppable functions to get a new droppable
to work without reloading the page? Thank you in advance for your
time!
Here is my pseudo code:
<head>
<script type="text/javascript" src="./jquery-1.3.2.js"></script>
<script type="text/javascript" src="./ui/ui.draggable.js"></script>
<script type="text/javascript" src="./ui/ui.droppable.js"></script>
<style type="text/css">
#draggable{ cursor: pointer; width: 150px; height: 40px; float: left;
text-align: center; cursor: move;font-size: 1.25em;}
//I create 30 additional css class declarations than the actual number
required. This way a user could add 30 new droppables and it should
still work without refreshing the page
<? for ($i=0; $i<$num+30; $i++){
$j = $i+1;
echo "#droppable$j{ height: 16px; width: 120px;float: left; text-
align: center; cursor: move;}";echo "\n";
} ?>
</style>
<script type="text/javascript">
$(function() {
$("#draggable").draggable({helper:'clone'});
<?
for ($i=0; $i<$num+30; $i++){
$j = $i+1;
echo" $(\"#droppable$j\").droppable({
activeClass: 'ui-state-hover',
drop: function(event, ui) {
//this returns the text of the draggable
var content = ($(ui.draggable).children().text());
var fieldname = 'password';
//this returns the id of the droppable, ex droppable2
var divIndex = $(this).attr('id')
//this returns the id number from the
droppable id ...ex id=droppable12 , this returns 12
var id = divIndex.slice(9)
//ajax function call
showUser(fieldname,id,content)
//highlights the changed droppable
$(this).addClass('ui-state-highlight').html(content);
}
});";echo "\n";
} ?>
});
</script>
</head>
<body>
//connect to db and return list of droppables
<table><tr>
<td><span id='droppable1'></span></td>
<td><span id='droppable2'></span></td>
<td><span id='droppable3'></span></td>
<td id='here'></td>
</tr>
</table>
<span id='draggable'></span>
//button to create an additional <span id='droppable4'></span> and
saves it to db using ajax and then returns it to <div id='here'></div>
Thanks again,
Chuck
--