1. дома
  2. Вопрос и ответ
  3. jquery Datatables with dialog button

jquery Datatables with dialog button

2015-01-27 4 views
-1

Я пытаюсь использовать кнопку, которая откроет диалоговое окно, основанное на определенной строке, в которой находится кнопка. Я добавил код ниже.jquery Datatables with dialog button

Кнопки класс DLG-outletpart-BTN:

Вот JQuery Javascript часть:

<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>

Вот HTML с 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>

источник

2015-01-27 caryd12

ответ

0

Я Жду» t попытаться проверить это, и там была лот необходимой очистки, поэтому возьмите это с зерном соли, а не с точным решением.

Перед тем, как попасть в объяснение, есть несколько моментов, которые должны быть сделано:

  • Оставайтесь на верхней части уровней Отступят
    • Плохо отступ кода сложнее построить в и еще труднее устранить неполадки. Прежде чем отправлять сообщения на StackOverflow или на любой другой сайт, сначала нужно очистить свой код (действительно, вы должны сделать это, как только код). Вероятно, это причина, по которой вы получили пониженное голосование и причину, по которой вы не получаете от меня ответ. Однако, если вы вернетесь и отредактируете свой ответ на правильно отступ, все, что я бы поставил на ваш вопрос.
    • ПОМНИТЕ: то, что вы публикуете онлайн, отражает вас как программиста.
  • Не используйте переменные с единственными буквами.
    • Дайте своим переменным правильные и описательные имена. Однобуквенные имена также затрудняют кодирование и устранение неполадок.
  • Если она не нужна, не пишите его
    • Это особенно актуально, если вы собираетесь размещать на StackOverflow с просьбой о помощи. Место, где у вас было предложение else, без какого-либо кода в нем, должно быть удалено из вашего вопроса и действительно должно быть удалено из вашего кода. Если у вас нет задач для выполнения внутри предложения, не добавляйте его. Добавьте его обратно, когда вы на самом деле необходимо это. Это касается закрытия и немедленного открытия элемента php. Нет причин закрывать один php-элемент, если вы собираетесь немедленно открыть другой. Если это связано с тем, что вы вставляете два разных раздела для вопроса, тогда очищайте его, прежде чем отправлять его.

Я не хочу, чтобы оторваться, как выговор, но, честно говоря, если вы разместите плохо отформатированный и написанный код StackOverflow никто не собирается отвечать на него, и вы собираетесь получить вниз голосов. Вы почти потеряли часть своего пути, форматируя свой код, но я решил закончить его в любом случае.

Итак, вот код, который вы можете попробовать. Сосредоточьтесь на частях, которые я прокомментировал в javascript.Основная идея заключается в следующем:

  • Сделать стол вашим основным селектором.
    • Вы можете сделать элемент tr основным селектором, и он все равно даст вам индекс tr в таблице, но добавление селектора к самой таблице означает, что вы программно добавляете новые строки после того, jquery метод будет работать и для них.
  • Используйте ключевое слово this в качестве отправной точки.
    • это будет нажата кнопка, которая позволит вам перемещаться.

  • Использование навигационных методов jQuery, в данном случае 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>

Я не проверял часть PHP вне, но JQuery определенно работает.

источник

2015-01-29 00:54:22

 Смежные вопросы

  • Нет связанных вопросов^_^