I successfully copied the "Simple Photo Manager" to my page. ( http://jqueryui.com/demos/droppable/#photo-manager)

I want to manage many pictures in different categories.

What i want to do:

Type in a inputbox the name of a category. Click on a search-button left of the inputbox.

Clicking on the button will send an ajax request to my server. In my PHP-script i find all database entires (pictures) linked to the category name. Then i want to print out all pictures in the format that the "Simple Photo Manager" requires.

This works great, my problem is that after the ajax request the "Simple Photo Manager" doesn't work anymore.

my HTML :

2. <div class="demo ui-widget ui-helper-clearfix">
3. 
   
4. <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
5. </ul>
6. 
   
7. <div id="trash" class="ui-widget-content ui-state-default">
8. <h4 class="ui-widget-header">zugehörige Benutzer</h4>
9. </div>
10. 
    
11. </div>

my jQuery :

2. $('#create_check').click(function(){
3.         $('#create_loader').show()
4.         var myajaxrequest = $.post(
5.             'myphpfile.php',
6.             { field: $('#Category').val() },
7.             function(data) {
8.                 $('#gallery').append(data);
9.             })
10.          myajaxrequest.complete(function(){ $('#create_loader').hide() });
11.     });

For example, my PHP script will output:

2. <li class="ui-widget-content ui-corner-tr">
3. <?php echo $this->Html->image('Picture143.jpg',array('alt' => 'The peaks of High Tatras', 'width' => '96', 'height' => '72')); ?>
4. <a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
5. <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
6. </li>
8. <li class="ui-widget-content ui-corner-tr">
9. <?php echo $this->Html->image('Picture153.jpg',array('alt' => 'The peaks of High Tatras', 'width' => '96', 'height' => '72')); ?>
10. <a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
11. <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
12. </li>

I think i know what my problem is:

When i look at the page source before the ajax request and after the request, he's unchanged.

But the request works and i can see the new pictures.

Maybe " $('#gallery').append(data);" is not the right function?

lg lucaaAUT

_____________

Sorry for my bad english :D