php - Fancybox not working in Datatable -
i started use datatables plugin in system , manages display list of orders.the problem facing fancybox used pop out form in set next status column not working in datatable. help/suggestion fix problem highly appreciated. :)
here page using datatable:
<?php require_once ('common/islogin.php'); //(($nature == 1)||($nature == 2)||($nature == 3)||($nature == 5)||($nature == 6)||($nature == 9) ) ? "": die("<div class='error'>no access rights</div>"); (($nature == 1)||($nature == 10) ) ? "": die("<div class='error'>no access rights</div>"); ?> <?php require_once ('database.php'); require_once ('common/order_status.php'); $result = mysql_query("select * orders status = '3' or status = '18' order orders.id desc"); ?> <ul id="crumbs"> <li><a href="index.php?request=admin_main">assembling</a></li> </ul> <link rel="stylesheet" type="text/css" href="plugin/media/css/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="plugin/media/css/datatables.jqueryui.css"> <script type="text/javascript" language="javascript" src="plugin/media/js/jquery.js"></script> <script type="text/javascript" language="javascript" src="plugin/media/js/jquery.datatables.min.js"></script> <script type="text/javascript" language="javascript" src="plugin/media/js/datatables.jqueryui.js"></script> <style> *{ font-family: arial; } </style> <script type="text/javascript" > $(document).ready(function(){ $('#datatables').datatable({ "spaginationtype":"full_numbers", "aasorting":[[2, "desc"]], "bjqueryui":true, }); }); </script> <br /> <table id="datatables" class="display"> <thead> <tr><td colspan = '14' style='border:0;white;background:#4f6b72;height:40px;color:white;font-weight:bolder;font-size:16px;'>assembling</td></tr> <tr> <th>order id</th> <th>logistic id</th> <th>order date</th> <th>products</th> <th>quantity</th> <th>quantity packed</th> <th style="width:10px">order remarks</th> <th style="width:10px">to pack remarks</th> <th>status</th> <th>action</th> <th>set next status</th> </tr> </thead> <tbody> <?php while ($row = mysql_fetch_array($result)) { $status = $row['status']; $order_id = $row['id']; ?> <tr> <td><?=$row['id']?></td> <td><?=displaylogisticid($row['id'])?></td> <td><?=convertdate($row['date'])?></td> <td><?=truncateproduct($row['id'])?></td> <td><?=truncatequantity($row['id'])?></td> <td><?=quantitypack($row['id'])?></td> <td><?=$row['remarks']?></td> <td><?=$row['to_pack_remarks']?></td> <td><?=displaystatus($row['status'])?></td> <td><a href=index.php?request=packer_view&sec_code=<?=$row['sec_code']?>><img src='images/edit.jpeg' height='20' weight='20' border='0' alt='view' title='view'></a></td> <td><?=((($row['current_status']!==12)||($row['current_status']!==17)) && (($nature == 1)||($nature == 10)) ) ? displaystatuslink($status,$order_id,''):"not available";?></td> </tr> <?php } ?> </tbody> </table> and set next status pop out forms (using fancybox) "commom/order_status.php" :
<script type="text/javascript"> $(document).ready(function() { $("a#example3").fancybox({ 'overlayshow' : true, 'hideonoverlayclick' :true, 'width' : '45%', 'height' : '70%', 'autoscale' : true, 'transitionin' : 'elastic', 'transitionout' : 'elastic', 'type' : 'iframe', 'onclosed' : function() { parent.location.reload(true); ; } }); $("a#example5").fancybox({ 'overlayshow' : true, 'hideonoverlayclick' :true, 'width' : '55%', 'height' : '80%', 'autoscale' : true, 'transitionin' : 'elastic', 'transitionout' : 'elastic', 'type' : 'iframe', }); $("a#example4").fancybox({ 'overlayshow' : true, 'hideonoverlayclick' :true, 'width' : '32%', 'height' : '35%', 'transitionin' : 'elastic', 'transitionout' : 'elastic', 'type' : 'iframe', 'onclosed' : function() { parent.location.reload(true); ; } }); }); </script> function displaystatuslink($id, $order_id, $notice,$nature,$logistic_id){ $notice = '"are sure? "'; switch($id){ case 3: //to pack echo "<a href='packaging/partial_pack.php?id=$order_id' id='example3'>pack</a> | "; //echo "<a href=index.php?request=packed_email&id=$order_id&set_status=17 onclick='return confirm($notice)'>packed</a> | "; //echo "<a href=index.php?request=admin_main&id=$order_id&set_status=17 onclick='return confirm($notice)'>packed</a> | "; //echo "<a href=index.php?request=admin_main&id=$order_id&set_status=3 onclick='return confirm($notice)'>prepare</a> | "; //echo "<a href='admin/ship.php?id=$order_id' id='example3'>ship</a> | "; break; case 18: //partially packed echo "<a href='packaging/partial_pack.php?id=$order_id' id='example3'>pack</a> | "; //echo "<a href=index.php?request=packed_email&id=$order_id&set_status=17 onclick='return confirm($notice)'>packed</a> | "; echo "<a href='admin/ship.php?id=$order_id' id='example3'>ship</a> | "; //echo "<a href=index.php?request=admin_main&id=$order_id&set_status=4 onclick='return confirm($notice)'>done</a>"; break; default: return ""; } } ?>
sounds elements not in dom when you're applying fancybox plugin. call fancybox in createdrow callback. appears you're going have issues conflicting id attributes.
createdrow description
this callback executed when tr element created (and td child elements have been inserted), or registered if using dom source, allowing manipulation of tr element.
this particularly useful when using deferred rendering (deferrender) or server-side processing (serverside) can add events, class name information or otherwise format row when created.
$(document).ready( function () { var table = $('#example').datatable({ createdrow: function(row, data) { $('a', row).fancybox(options); } }); }); 
Comments
Post a Comment