jquery dialog image

Question

i am calling the function given below on dropping a tag on an area. If that tag drops successfully it should append an image and on double click it should produce a dialog box.This happens for the first time when i drop a tag but does not work when i drop that second time.

   function dropFile()    
   {
         $(".File_div").draggable({
             helper:'clone',
             revert: 'invalid'
         });
         var tag="#Normal_Tag1_div_dummy1";
         $(Normal_Tag1_div_dummy1).droppable({
          drop: function(ev,ui) { alert('dropped');
              //accept: ".File_div"
              var dropped = ui.draggable;
              alert(dropped);
              var file_img_src=document.getElementById('file_img').src;
              var image='<img id="file_img'+count+'" class ="file_img" name="file_img" src='+file_img_src+" />"
              $(image).appendTo(this).dblclick(
                  function(event){
                            alert("1");
                            window.event.cancelBubble = true;
                             //var jsmarty=WMCreateSmartyObject();
                            //var test_tpl= WMSmartyFetch(jsmarty, 'dialog.tpl');
                            //document.getElementById('test').innerHTML=test_tpl;
                            //dialogtest();
                            $("#dialog1").dialog(
                           {
                               /* buttons:
                                        {
                                            "Upload file": function(){
                                            },
                                            Cancel: function() {
                                            $(this).dialog('close');
                                            }
                                        },*/
                                close: function() {
                                }
                            });
                            alert("2");
               });

         }

        });

       count++;

    }

Answer 1

The problem is that you're creating the dialog in the event, but the second time around, it knows it has been created and does nothing. You have two options here. You can either build the dialog beforehand with the autoOpen:false attributed, then use .dialog('open') and .dialog('close'), or you can destroy the dialog when you are done with it.

To destroy, add this to your close handler.

close:function()
{
   $('#dialog1').dialog('destroy');
}