doufang7385 2015-01-27 01:09
浏览 30

带有对话框按钮的jquery数据表

I am trying to utilize a button that will open a dialog based on the specific row that the button is located in. I have attached my code below.

The button is class is dlg-outletpart-btn:

Here is the jquery javascript portion:

<script> /*datatables script function below */
$(document).ready( function () {
$('#table_id_outlets').DataTable();
} );
</script>
<script> /*jquery dialog controls for project detail */
$(function() {
$( ".dlgoutletpart" ).dialog({
  autoOpen: false,
  show: {
    effect: "blind",
    duration: 500
  },
  hide: {
    effect: "fade",
    duration: 700
  },

});

$( ".dlg-outletpart-btn" ).click(function() {
  var outletID = $(this).attr("data-dlg-outletparts");
  $( "#dialog-" + outletID ).dialog( "open" )
});
});
</script>

Here is the html with php:

<body>
<div>
<p>
<a href="login.php" target="_self"> <h3>Go Back to main page</h3> </a>
</p>
</div>
<div>
<?php

session_start();

require_once('./includes/php/include_master.php');

if ($_SESSION['authenticated'] == "true") {

$id_account = $_SESSION['ID_Account'];

$q = $protoFM['EMGSV'] -> newFindCommand('web_outlets');
$q -> addFindCriterion('id_account', '=='.$id_account);

$r = $q->execute();

if(FileMaker::isError($r)){

    if($r->code == 401){
        echo "No outlets found.";
    }else{
        echo "Unknown Error:".$r->code;
    }

}else{


}

} else {
echo "You are not logged in.";
}

?>
<?php

foreach ($r->getRecords() as $parts){
$outletID = $parts->getField('ID_Outlet');
$outletData1 = $parts->getField('Image_Data');
$outletData2 = $parts->getField('Image_Data2');
$outletData3 = $parts->getField('Image_Data3');
$outletPart1 = $parts->getField('part1');
$outletPart2 = $parts->getField('part2');
$outletPart3 = $parts->getField('part3');
$outletPart4 = $parts->getField('part4');
$outletPart5 = $parts->getField('part5');
$outletPart6 = $parts->getField('part6');
$outletPart7 = $parts->getField('part7');
$outletPart8 = $parts->getField('part8');
$outletPart9 = $parts->getField('part9');
$outletPart10 = $parts->getField('part10');

        echo '<div class="dlgoutletpart" id="dialog-' .$outletParts. '" title="Outlet Parts for '.$outletID.'">';
        echo '<p>';
        echo '1. &nbsp;'.$outletPart1.'<br>';
        echo '2. &nbsp;'.$outletPart2.'<br>';
        echo '3. &nbsp;'.$outletPart3.'<br>';
        echo '4. &nbsp;'.$outletPart4.'<br>';
        echo '5. &nbsp;'.$outletPart5.'<br>';
        echo '6. &nbsp;'.$outletPart6.'<br>';
        echo '7. &nbsp;'.$outletPart7.'<br>';
        echo '8. &nbsp;'.$outletPart8.'<br>';
        echo '9. &nbsp;'.$outletPart9.'<br>';
        echo '10. &nbsp;'.$outletPart10.'<br>';
        echo '</p>';
        echo '</div>';
}
?>
<table id="table_id_outlets" class="display">
<thead>
    <tr>
        <th>Floor</th>
        <th>Area Served</th>
        <th>Room Number</th>
        <th>Outlet Number</th>
        <th>Outlet Gas</th>
        <th>Outlet Manufacturer</th>
        <th>Outlet Model</th>
        <th>Outlet Parts</th>
    </tr>
</thead>
<tbody>
<?php
foreach ($r->getRecords() as $outlet){
$outletFloor = $outlet->getField('Outet_Floor');
$outletAreaServed = $outlet->getField('Outlet_Area_Served');
$outletRoomNumber = $outlet->getField('Outet_Room_Number');
$outletNumber = $outlet->getField('Outlet_Number_In_Room');
$outletGas = $outlet->getField('Outlet_Gas_Type');
$outletManufacturer = $outlet->getField('Outlet_Manufacturer');
$outletModel = $outlet->getField('Outlet_Model');

        echo "<tr>";
        echo '<td>' .$outletFloor. '</td>';
        echo '<td>' .$outletAreaServed. '</td>';
        echo '<td>' .$outletRoomNumber. '</td>';
        echo '<td>' .$outletNumber. '</td>';
        echo '<td>' .$outletGas. '</td>';
        echo '<td>' .$outletManufacturer. '</td>';
        echo '<td>' .$outletModel. '</td>';
        echo '<td> <button class="dlg-outletpart-btn" data-dlg-outletparts="'.$outletParts.'">Outlet Parts</button>';
    }
?>
</tbody>
</table> 

</div>
<?php $outlet->getfields('Outlet_Room_Number')?>
</body>
  • 写回答

1条回答 默认 最新

  • duanbo6871 2015-01-29 00:54
    关注

    I didn't try to test this and there was a lot of cleanup needed so take this with a grain of salt rather than the exact solution.

    Before I get into the explanation, there are a couple of points that need to be made:

    • Stay on top of your indention levels
      • Poorly indented code is harder to build in and even harder to troubleshoot. Before you post on StackOverflow or any other site you should clean up your code first (really, you should do it as you code). This is probably the reason you got a down vote and the reason you're not getting an upvote on the question from me. However, if you go back and edit your answer to properly indent everything I'd give your question an upvote.
      • REMEMBER: what you post online reflects on you as a programmer.
    • Don't use variables with single letters.
      • Give your variables proper and descriptive names. Single letter names also make it hard to code and hard to troubleshoot.
    • If you don't need it, don't write it
      • This is especially true if you're going to post on StackOverflow asking for help. The place where you had an else clause without any code in it should be stripped out of your question and really should be stripped out of your code. If you don't have any tasks to perform within a clause then don't add it. Add it back in when you actually need it. This goes for the closing and immediately opening of the php element. There's no reason to close one php element if you're going to immediately open another. If this is because your knitting two different sections together for the question then clean it out before you submit it.

    I don't want to come off as scolding, but honestly if you post poorly formatted and written code to StackOverflow no one is going to answer it and you're going to get down votes. You almost lost me part of the way through formatting your code but I decided to finish it out anyway.

    So, here's the code you can try. Focus on the parts that I commented on in the javascript. The basic idea is:

    • Make the table your main selector.
      • You could make the tr element the main selector and it would still give you the index of the tr in the table, but adding the selector to the table itself means if you programmatically add new rows after the DOM has been rendered the jquery method will work for them as well.
    • Use the this keyword as a starting point.
      • this will be the button clicked which will allow you to navigate around.

    • Leverage jquery's navigation methods, in this case closest().

      <html>
<head>
    <script> /*datatables script function below */
        $(document).ready( function () {
            $('#table_id_outlets').DataTable();
        });
    </script>

    <script> /*jquery dialog controls for project detail */
        $(function() {
            $( ".dlgoutletpart" ).dialog({
              autoOpen: false,
              show: {
                effect: "blind",
                duration: 500
              },
              hide: {
                effect: "fade",
                duration: 700
              },

            });

            // I changed the element selector to the id of the table element. 
            // This allows you to specify the selector for the 'on' method to apply to all
            // tr elements within the given table and then reference their index relative
            // to the overall table.
            // I'm using `button` for the method's selector because you have only have 
            // on button in your table so it de-couples your selector from your class name.
            $( "#table_id_outlets" ).on('click', 'button', function() {
                debugger;
                // this: refers to the button that was clicked
                // closest: walks up the node hierarchy till it finds a `tr`
                // index(): gives you the index of the `tr` within the table.
                // Use the index number however you need.
                console.log($(this).closest('tr').index());

                var outletID = $(this).attr("data-dlg-outletparts");
                $( "#dialog-" + outletID ).dialog( "open" )
            });
        });
    </script>
</head>

    <body>
    <div>
    <p>
    <a href="login.php" target="_self"> <h3>Go Back to main page</h3> </a>
    </p>
    </div>
    <div>
    <?php

    session_start();

    require_once('./includes/php/include_master.php');

    if ($_SESSION['authenticated'] == "true") {

        $id_account = $_SESSION['ID_Account'];

        // Note: you can't put a space between your 
        $query = $protoFM['EMGSV']->newFindCommand('web_outlets');
        $query->addFindCriterion('id_account', '==' . $id_account);

        $result = $query->execute();

        if(FileMaker::isError($result)){
            if($result->code == 401){
                echo "No outlets found.";
            }else{
                echo "Unknown Error:".$result->code;
            }
        }

    } else {
    echo "You are not logged in.";
    }

    foreach ($result->getRecords() as $parts){
        $outletID     = $parts->getField('ID_Outlet');
        $outletData1  = $parts->getField('Image_Data');
        $outletData2  = $parts->getField('Image_Data2');
        $outletData3  = $parts->getField('Image_Data3');
        $outletPart1  = $parts->getField('part1');
        $outletPart2  = $parts->getField('part2');
        $outletPart3  = $parts->getField('part3');
        $outletPart4  = $parts->getField('part4');
        $outletPart5  = $parts->getField('part5');
        $outletPart6  = $parts->getField('part6');
        $outletPart7  = $parts->getField('part7');
        $outletPart8  = $parts->getField('part8');
        $outletPart9  = $parts->getField('part9');
        $outletPart10 = $parts->getField('part10');

        echo '<div class="dlgoutletpart" id="dialog-' .$outletParts. '" title="Outlet Parts for '.$outletID.'">';
        echo '<p>';
        // Use an unordered list here
        echo '1. &nbsp;'.$outletPart1.'<br>';
        echo '2. &nbsp;'.$outletPart2.'<br>';
        echo '3. &nbsp;'.$outletPart3.'<br>';
        echo '4. &nbsp;'.$outletPart4.'<br>';
        echo '5. &nbsp;'.$outletPart5.'<br>';
        echo '6. &nbsp;'.$outletPart6.'<br>';
        echo '7. &nbsp;'.$outletPart7.'<br>';
        echo '8. &nbsp;'.$outletPart8.'<br>';
        echo '9. &nbsp;'.$outletPart9.'<br>';
        echo '10. &nbsp;'.$outletPart10.'<br>';
        echo '</p>';
        echo '</div>';
    }
    ?>
    <table id="table_id_outlets" class="display">
        <thead>
            <tr>
                <th>Floor</th>
                <th>Area Served</th>
                <th>Room Number</th>
                <th>Outlet Number</th>
                <th>Outlet Gas</th>
                <th>Outlet Manufacturer</th>
                <th>Outlet Model</th>
                <th>Outlet Parts</th>
            </tr>
        </thead>
        <tbody>
        <?php
        foreach ($result->getRecords() as $outlet){
            $outletFloor        = $outlet->getField('Outet_Floor');
            $outletAreaServed   = $outlet->getField('Outlet_Area_Served');
            $outletRoomNumber   = $outlet->getField('Outet_Room_Number');
            $outletNumber       = $outlet->getField('Outlet_Number_In_Room');
            $outletGas          = $outlet->getField('Outlet_Gas_Type');
            $outletManufacturer = $outlet->getField('Outlet_Manufacturer');
            $outletModel        = $outlet->getField('Outlet_Model');

            echo "<tr>";
            echo '<td>' .$outletFloor. '</td>';
            echo '<td>' .$outletAreaServed. '</td>';
            echo '<td>' .$outletRoomNumber. '</td>';
            echo '<td>' .$outletNumber. '</td>';
            echo '<td>' .$outletGas. '</td>';
            echo '<td>' .$outletManufacturer. '</td>';
            echo '<td>' .$outletModel. '</td>';
            echo '<td> <button class="dlg-outletpart-btn" data-dlg-outletparts="'.$outletParts.'">Outlet Parts</button>';
            }
        ?>
        </tbody>
    </table> 

    </div>
    <?php $outlet->getfields('Outlet_Room_Number')?>
    </body>
</html>

    I didn't test the php portion out, but the jquery definitely works.

    评论

报告相同问题？

悬赏问题

  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是，这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示