Question

我正在编写一个从数据库动态填充表的网站，并且表上的每一行都有一个按钮，调用启动模式以查看该特定行的更多详细信息（详细信息也是从数据库动态生成的）并进行数据库更新。所以为了将所需的值传递给我的模态。

我在同一页面上声明了模态

<div class="modal fade" data-keyboard="false"  id="add_branchProductModal" tabindex="-1" role="dialog" aria-labelledby="add_branchProductModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

     </div>
   </div>
</div>

然后我使用href调用我的模态的其余部分来传递数据库ID

echo "<td width='20px'>
       <a class='btn btn-warning btn-sm' id=\"branch\" data-toggle=\"modal\" data-target='#add_branchProductModal' 
href='modals/add_branchProductModal.php?id3={$_SESSION['store_key']}&id={$products['product_key']}&id2={$category['category_key']}' role='button'>
  <span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>
 </a>
</td>";

我的问题是我也使用jquery进行表单更新以避免页面重新加载，但因为我用href调用其余的模态我必须将我的jquery库链接到该特定页面，否则它不会响应，其中我真的不明白为什么。但是当我这样做时它工作正常。唯一的问题是，在调用模式的页面上，我的jquery脚本可以帮助我在关闭时从我的模态中删除数据，并且只有这个特定的脚本。这是脚本。

<script>
    $(document).ready(function() {
        $('#add_branchProductModal').on('hidden.bs.modal', function () {
              $(this).removeData('bs.modal');
        });
    });
</script>

当我从我的href模态页面中删除jquery库时，上面的脚本运行正常，但是我无法使用jquery进行更新并避免页面重新加载

这是使用href（整个页面）调用模态的代码

<?php
  include '../connection/connect.php';
  $store_key = $_GET['id3'];
  $category_key = $_GET['id2'];
  $date = date("M, l Y", strtotime('Today'));

<div class="modal-header">                                                                               
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
  <h4 class="modal-title" id="products_summaryLabel">Date: (<?php echo $date;?>)</h4>
</div>
<div class="modal-body">                                                    
  <section id="content">
    <div class="content-wrap">
      <div class="container clearfix">
      <form id="register_formProduct1">
        <table class="table table-bordered table-responsive">
          <tr>
            <td>
              <select class="form-control" name="category">
        <?php 
          $query = "SELECT * FROM product_category WHERE store_key = '{$store_key}' AND category_key = '{$category_key}' LIMIT 1";
        $result_set = mysql_query($query);
        while($result = mysql_fetch_array($result_set)){
            echo "<option value='{$result['category_key']}'>".  ucfirst($result['category_name'])."</option>";
          }
        ?>
               </select><button type="button">Submit</button>
             </td>
           </tr> 
         </table>
        </form>
    </div>
   </section><!-- #content end -->
   <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

<script>
  $(document).ready(function() {
    $(".table").keyup(function(){
    var pieces_entered = +$("#pieces_entered").val();
    var available_pieces = +$("#available_pieces").val();
    var sum = (pieces_entered + available_pieces);
    var pieces = $("#pieces").val(sum);
   });

   $("#submit_product1").click(function() {  
    var category_key = $("#category_key").val();
    var branch_code = $("#branch_code").val();
    var product_name = $("#product_name").val();
    var product_key = $("#product_key").val();
    var pieces = $("#pieces").val();
    var category_key = $("#category_key").val();
    var reorder = $("#reorder").val();
    var exp_date = $("#exp_date").val();
    var note = $("#note").val();
    if (exp_date == '' || reorder == '' || category_key == '' || pieces == '' || branch_code == '' || product_key == '' || product_name == '') {
    window.alert("Insertion Failed, Some Fields are Blank....!!");
    } else {                                                     
if(pieces < reorder){ 
 window.alert("Re-order Level cannot be greater than pieces available!!");    
}else{
 // Returns successful data submission message when the entered information is stored in database.
    $.post("scripts/product_update.php", {
    category_key1: category_key,
    branch_code1: branch_code,
    product_key1: product_key,
    product_name1: product_name,
    pieces1: pieces,
    //measurement1: measurement,
    //price1: price,
    reorder1: reorder,
    exp_date1: exp_date,
    note1: note
    }, function(data) {
        window.alert("Product successfully added!!!");
        $('#register_formProduct1')[0].reset(); // To reset form fields
    });
    }
    });
    });
</script>

如何让两个脚本同时为我工作？

Answer 1

我的页面中的模式：

<div class="modal fade" data-keyboard="false"  id="add_branchProductModal" tabindex="-1" role="dialog" aria-labelledby="add_branchProductModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

     </div>
   </div>
</div>

我用来调用模式主体并将变量发送给它的<a>标签

echo "<a class='btn btn-warning btn-sm' id='branch' data-toggle='modal' data-target='#add_branchProductModal' 
   href='modals/add_branchProductModal.php?id3={$_SESSION['store_key']}&id={$products['product_key']}&id2={$category['category_key']}' role='button'>
  <span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>
 </a>"

我调用了函数，以在表单打开时在表单中提交表单

$('#add_branchProductModal').on('shown.bs.modal', function (e) {
  // Function that submits my form within the modal body
  $("#submit_product1").submit(function(e) {
    e.preventDefault();
      var form = e.target;
      var data = new FormData(form);
    if (string.IsNullOrWhiteSpace(Request.Form["form_name"])) {
      alert("Insertion Failed, Some Fields are Blank....!!");
    } else {                                                     
     if(data.get('pieces') < data.get('reorder')){ 
      alert("Re-order Level cannot be greater than pieces available!!");    
     }else{
       $.post("scripts/product_update.php",{
        data:data
       }, function(data) {
           alert("Product successfully added!!!");
           $('#register_formProduct1')[0].reset(); // To reset form fields
      });
     }
   }
  });
});

关闭时清除模式

$('#add_branchProductModal').on('hidden.bs.modal', function () {
   $(this).removeData('bs.modal');
});

Jquery removeData不适用于使用href调用的模式，以便传递$ _GET值

1 个答案: