title: jQuery Modal Confirmation
body: <p>Firstly, I apologise if this is a really simple question to those with more experience, but I'm a little to new to this so I hope someone may be able to help me please.</p>
  
  <p>I'm trying to implement a jQuery Modal Confirmation box upon a button click. This shown in the script below:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;Gallery&lt;/title&gt; 
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; 
    &lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css"&gt;
    &lt;link href="Libraries/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css"/&gt; 
    &lt;link href="Styles/style.css" rel="stylesheet" type="text/css" /&gt;
    &lt;!--[if IE]&gt;   
    &lt;link href="Styles/ie.css" rel="stylesheet" type="text/css" /&gt; 
    &lt;![endif]--&gt;
    &lt;script src="Libraries/jquery/jquery-1.4.3.min.js" type="text/javascript"&gt;&lt;/script&gt; 
    &lt;script src="Libraries/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"&gt;&lt;/script&gt; 
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;     
    &lt;script type="text/javascript"&gt;
  
    $(function() { $('a.fancybox').fancybox(); }); 
  
    &lt;/script&gt; 
  
    &lt;script type="text/javascript"&gt;
  var deleteTheSelectedUrl = '';
  $(document).ready(function() {
      // create the jQuery modal window and set autoOpen to false
      $("#jQueryDeleteConfirmationModalWindow").dialog({
          title: "Delete Confirmation",
          autoOpen: false,    // set this to false so we can manually open it
          dialogClass: "jQueryDeleteConfirmationModalWindow",
          closeOnEscape: false,
          draggable: false,
          width: 460,
          height: 260,
          modal: true,
          buttons: {
                  "Yes, I'm sure": function() {
                      $( this ).dialog( "close" );
                      if('' != jQuery.trim(deleteTheSelectedUrl)) {
                          window.location = deleteTheSelectedUrl;
                      }
                  },
                  Cancel: function() {
                      $( this ).dialog( "close" );
                  }
              },
          resizable: false,
          open: function() {
              // scrollbar fix for IE
              $('body').css('overflow','hidden');
          },
          close: function() {
              // reset overflow
              $('body').css('overflow','auto');
          }
      }); // end of dialog
  
      // bind the loading screen to each delete link, assuming you have some kind of way to select them via jQuery
      jQuery('a.deleteConfirmation').click(function() {
          deleteTheSelectedUrl = $(this).attr('href');
          var name = $(this).parent().parent().children('td.name').html(); // a.delete -&gt; td -&gt; tr -&gt; td.name
          name = jQuery.trim(name);
          $("#jQueryDeleteConfirmationModalWindow").html('Are you sure you wish to delete ' + name + '?');
          $("#jQueryDeleteConfirmationModalWindow").dialog('open');
          return false;
      });
  
  });
  &lt;/script&gt;
    &lt;style type="text/css"&gt;
  &lt;!--
  .style1 {
      font-size: 14px;
      margin-right: 110px;
  }
  .style4 {font-size: 12px}
  --&gt;
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body style="font-family: Calibri; color:  #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: -476px; margin-right: 1px; margin-bottom: -10px;"&gt;
  &lt;div align="right" class="style1"&gt; &lt;a href = "javascript:document.gallery.submit()"/&gt; Add Images &lt;a/&gt; &amp;larr; View Uploaded Images &lt;/div&gt;
    &lt;form id="gallery" name="gallery" class="page" action="index.php" method="post"&gt;  
    &lt;div id="container"&gt; 
      &lt;div id="center"&gt; 
        &lt;div class="aB"&gt; 
          &lt;div class="aB-B"&gt; 
            &lt;?php if ('Uploaded files' != $current['title']) :?&gt;
            &lt;?php endif;?&gt;
            &lt;div class="demo"&gt; 
            &lt;input name="username" type="hidden" id="username" value="IRHM73" /&gt;
            &lt;input name="locationid" type="hidden" id="locationid" value="1" /&gt;
            &lt;div class="inner"&gt; 
                &lt;div class="container"&gt; 
                  &lt;div class="gallery"&gt; 
                    &lt;ul class="gallery-image-list"&gt; 
                    &lt;input type="button" name="deleteimage" value="Delete Selected Image" onclick="jQueryDeleteConfirmationModalWindow"/&gt;
                    &lt;?php for ($i = 0; $i &lt; $descriptions-&gt;documentElement-&gt;childNodes-&gt;length; $i++) : 
                            $xmlFile = $descriptions-&gt;documentElement-&gt;childNodes-&gt;item($i); 
                            $name = htmlentities($xmlFile-&gt;getAttribute('originalname'), ENT_COMPAT, 'UTF-8'); 
                            $description = htmlentities($xmlFile-&gt;getAttribute('description'), ENT_COMPAT, 'UTF-8'); 
                            //$folder = htmlentities($xmlFile-&gt;getAttribute('folder'), ENT_COMPAT, 'UTF-8'); 
                            $source = $galleryPath . rawurlencode($xmlFile-&gt;getAttribute('source')); 
                            $thumbnail = $galleryPath . rawurlencode($xmlFile-&gt;getAttribute('thumbnail')); 
                    ?&gt;
                      &lt;li class="item"&gt; 
                        &lt;a class="fancybox" target="_blank" rel="original" href="&lt;?php echo $source; ?&gt;"&gt;&lt;img class="preview" 
                          alt="&lt;?php echo $name; ?&gt;"  src="&lt;?php echo $thumbnail; ?&gt;" /&gt;&lt;/a&gt;&lt;input type="radio" name="delete" /&gt;&lt;/li&gt;
                          &lt;p&gt;&lt;span class="style4"&gt;&lt;b&gt;Image Name:&lt;/b&gt; &lt;?php echo htmlentities($xmlFile-&gt;getAttribute('originalname'));?&gt; &lt;br /&gt;
                            &lt;b&gt;Image Description:&lt;/b&gt; &lt;?php echo htmlentities($xmlFile-&gt;getAttribute('description'));?&gt; &lt;/span&gt;&lt;br /&gt;  
                            &lt;?php endfor; ?&gt;
                            &lt;/li&gt;
                          &lt;/p&gt;
                    &lt;/ul&gt;
                  &lt;/div&gt; 
          &lt;/div&gt; 
        &lt;/div&gt; 
      &lt;/div&gt; 
      &lt;/div&gt; 
        &lt;/div&gt; 
      &lt;/div&gt; 
    &lt;/div&gt; 
    &lt;/form&gt; 
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem I'm having, is that when I click the 'Delete Selected Image' button, I receive this error:<code>'jQueryDeleteConfirmationModalWindow' is undefined at line 92</code> which is this </p>
  
  <pre><code>&lt;form id="gallery" name="gallery" class="page" action="index.php" method="post"&gt;
  </code></pre>
  
  <p>I've rebuilt the page a few times, but I still get the same error, but I'm not sure why.</p>
  
  <p>I just wondered whether someone could have a look at this please and let me know where I'm going wrong?</p>
  
  <p>Thanks and regards</p>