0

これが私のコードです。現在、ライトボックスが機能しています。Dialogbox は、ライトボックス スクリプトを削除した場合にのみ機能します。ダイアログボックスがロードされない理由を誰か提案できますか? Chrome コンソールでは Uncaught TypeError: Cannot call method 'click' of null と表示されます

<?php
    include 'header.inc.php';
    $floor_id=$_GET['id'];
    $path='floorPlanImages';
    //include 'addImageForPlan.php';
    $select_floor_images=mysql_query("SELECT id,image FROM zb_floorplan_gallery WHERE floor_id='$floor_id'");
    if(mysql_num_rows($select_floor_images)>0)
    {
    ?>

    <html lang="en">
    <!doctype html>
    <head>
      <meta charset="utf-8" />
      <title>jQuery UI Dialog - Default functionality</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link rel="stylesheet" href="css/style.css" />




    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />  
    </head>

    <table>

        <tr><th colspan="5">Image gallery</th></tr>
        <tr>

    <?php
    $count=0;
    while ($display_image=mysql_fetch_assoc($select_floor_images)) {

        ?>
        <td class="<?php echo $display_image['id'];?>" height="100" width="100">

        <!-- <img src="<?php echo $path.'/'.$display_image['image'];?>" width="100%" rel="lightbox[roadtrip]" class="<?php echo $display_image['id'];?>"></a> -->&nbsp;&nbsp;
         <a href="<?php echo $path.'/'.$display_image['image'];?>" rel="lightbox[gallery]" title="Floor Plan images">
            <img src="<?php echo $path.'/'.$display_image['image'];?>" width="100%" >
         </a>

           <a href="#" class="table-icon delete" title="Delete" id="<?php echo $display_image['id'];?>"></a></td>
        <?php
        $count++;
        if($count==4)
        {
        ?></tr><?php $count=0;
        }

    ?>


    <script type="text/javascript">
     $( document ).ready(function() {


            $('#<?php echo $display_image['id'];?>').click(function(){
            $( '#<?php echo $display_image['id'];?>').html("Are you sure you want to delete this image?").dialog(
                {

                     buttons: {
        'Confirm': function() {
           //do something
           $.ajax({
      type: "POST",
      url: "deleteFloorImage.php?id=<?php echo $display_image['id'];?>",
      data: { id: "<?php echo $display_image['id'];?>" }
    }).done(function( msg ) {

    $("td.<?php echo $display_image['id'];?>").hide();

    });
           $(this).dialog('close');
        },
        'Cancel': function() {
           $(this).dialog('close');
        }
      }
                }
            );
            });




      });
      </script>



    <?php
    }
    ?>
    </table>


    <?php
    }
    else {
        echo 'No images found for this floor plan';
    }
    include 'footer.inc.php';
    ?>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
4

1 に答える 1

0

DOM を監視してエラーを見つけます。

おそらく、libとのjqueryの競合です。

前に書いてみてくださいjQuery.noConflict(); ： 

$( document ).ready(function().....

そしてあなたのlibを入れてください：

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

jquery libを呼び出した直後

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
于 2013-09-21T12:45:47.100 に答える