Home/ Questions/Q 7855801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T20:29:45+00:00

I wonder whether someone may be able to help me please. I’m a little

  • 0

I wonder whether someone may be able to help me please.

I’m a little new to jQuery, so please bear with me. Having received some guidance from an earlier post, I’ve added the Modal Confirmation dialog to a gallery page as shown in the script below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <title>Gallery</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <link href="Libraries/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" /> 
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
  <link href="Styles/style.css" rel="stylesheet" type="text/css" /> 
  <!--[if IE]>   
  <link href="Styles/ie.css" rel="stylesheet" type="text/css" /> 
  <![endif]-->
  <script src="Libraries/jquery/jquery-1.4.3.min.js" type="text/javascript"></script> 
  <script src="Libraries/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script> 
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>         
  <script type="text/javascript"> 

  $(function() { $('a.fancybox').fancybox(); }); 

  </script> 
  <style type="text/css">
<!--
.style1 {
    font-size: 14px;
    margin-right: 110px;
}
.style4 {font-size: 12px}
-->
  </style>
  <script type="text/javascript"> 
    $(function showdialog() {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:160,
            modal: false,
            buttons: {
                "Delete image": function() {
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });
    </script>


</head>
<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;">
<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> &larr; View Uploaded Images </div>
  <form id="gallery" name="gallery" class="page" action="index.php" method="post">  
  <div id="container"> 
    <div id="center"> 
      <div class="aB"> 
        <div class="aB-B"> 
          <?php if ('Uploaded files' != $current['title']) :?>
          <?php endif;?>
          <input name="deleteimage" type="button" value="Delete Selected Image" onclick="showdialog()" />
          <div class="demo"> 
            <div class="inner"> 
              <div class="container"> 
                <div class="gallery"> 
                  <ul class="gallery-image-list"> 
                  <?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) : 
                          $xmlFile = $descriptions->documentElement->childNodes->item($i); 
                          $name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8'); 
                          $description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8'); 
                          $source = $galleryPath . rawurlencode($xmlFile->getAttribute('source')); 
                          $thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute('thumbnail')); 
                  ?>
                    <li class="item"> 
                      <a class="fancybox" target="_blank" rel="original" href="<?php echo $source; ?>"><img class="preview" 
                        alt="<?php echo $name; ?>"  src="<?php echo $thumbnail; ?>" /></a><?php echo "<input type='radio' name='del' value='{$name}' />"?></li>
                        <p><span class="style4"><b>Image Name:</b> <?php echo htmlentities($xmlFile->getAttribute('originalname'));?> <br />
                          <b>Image Description:</b> <?php echo htmlentities($xmlFile->getAttribute('description'));?> </span><br />  
                          <?php endfor; ?>
                          </li>
                        </p>
                  </ul>
                </div> 
              </div> 
            </div> 

    </div> 
    <div id="dialog-confirm" title="Delete This Image?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This image will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
    </div> 
        <div class="aB-a">        </div> 
      </div> 
    </div> 
  </div> 
  </form> 
</body> 
</html>

The problem I’m having is that the dialog opens on page load, whereas I would like it to only
appear on a button click. I’ve got the dialog box to open on the button click, but I can’t find anyway of stopping it opening on page load.

I’ve looked through the jQuery documenation and there’s nothing that I can see that gives you the option of changing this setting.

I just wondered whether someone may be able to look at this please and let me know where I’m going wrong?

Many thanks and regards

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Remove the $ from your function declaration. You don’t need to use jQuery to define a regular function.

    $(function showdialog() { ... });

    should be 

    function showdialog() { ... }
    • 0