2012-04-24 11 views
1

最初に、これはもっと経験豊富な人にとっては本当に簡単な質問ですが、私は謝りますが、私はこれを少し熟知していますので、誰かが私を助けてくれることを願っています。jQueryモーダル確認

私は、ボタンクリック時にjQueryモーダル確認ボックスを実装しようとしています。これは、スクリプトに示されているの下:私がいる問題は、私はボタン「選択した画像の削除」をクリックしたときに、私はこのエラーが発生したということです

<!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 rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css"> 
    <link href="Libraries/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css"/> 
    <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> 

    <script type="text/javascript"> 
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 -> td -> tr -> td.name 
     name = jQuery.trim(name); 
     $("#jQueryDeleteConfirmationModalWindow").html('Are you sure you wish to delete ' + name + '?'); 
     $("#jQueryDeleteConfirmationModalWindow").dialog('open'); 
     return false; 
    }); 

}); 
</script> 
    <style type="text/css"> 
<!-- 
.style1 { 
    font-size: 14px; 
    margin-right: 110px; 
} 
.style4 {font-size: 12px} 
--> 
    </style> 
</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;?> 
      <div class="demo"> 
      <input name="username" type="hidden" id="username" value="IRHM73" /> 
      <input name="locationid" type="hidden" id="locationid" value="1" /> 
      <div class="inner"> 
       <div class="container"> 
       <div class="gallery"> 
        <ul class="gallery-image-list"> 
        <input type="button" name="deleteimage" value="Delete Selected Image" onclick="jQueryDeleteConfirmationModalWindow"/> 
        <?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'); 
          //$folder = htmlentities($xmlFile->getAttribute('folder'), ENT_COMPAT, 'UTF-8'); 
          $source = $galleryPath . rawurlencode($xmlFile->getAttribute('source')); 
          $thumbnail = $galleryPath . 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><input type="radio" name="delete" /></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> 
     </div> 
    </div> 
    </div> 
    </form> 
</body> 
</html> 

:この

<form id="gallery" name="gallery" class="page" action="index.php" method="post"> 

ある'jQueryDeleteConfirmationModalWindow' is undefined at line 92私は数回ページを再構築しましたが、私はまだ同じエラーが発生しますが、私は理由は分かりません。

私はちょうど誰かがこれを見て、私が間違っている場所を教えてもらえるかどうか疑問に思いましたか?

おかげに関して

+0

それをアクセスする関数名

<input type="button" onclick="showDialog()" ... /> 

呼び出す必要があります、と呼ばれる素敵なjQueryプラグインがあります[SimpleModal](http://www.ericmmartin.com/projects/simplemodal/)。モーダルを学習の練習として実装している場合は、このコードを参考にして、役に立つ演習を行うことができます。 –

+1

これは、エラーが発生している場所ではありません。これはonclick = "jQueryDeleteConfirmationModalWindow"という行です。そのようなオブジェクトがないためです。 –

+0

どちらも、返信に時間をとってくれてありがとう。あなたはどちらもとても役に立ちました。種類については – IRHM

答えて

5

私はID jQueryDeleteConfirmationModalWindowでのdivが表示されません。おそらく私はそれを逃している? jQueryダイアログは、既存のdivで実行されます。

http://jqueryui.com/demos/dialog/

<div id="jQueryDeleteConfirmationModalWindow">ARE YOU SURE???</div> 

あなたonlclickイベントハンドラは、あなたのJSは、このようFYI

function showDialog(){ 
    $("#jQueryDeleteConfirmationModalWindow").dialog({...}); 
} 
+0

それは素晴らしいです。ご助力ありがとうございます。敬具 – IRHM

関連する問題