在不同的模态内容PHP

时间:2018-03-24 15:38:33

标签: php ajax twitter-bootstrap

我有一个表,正在使用while循环来填充书信息以获取并显示结果。该表由书籍信息和行动栏组成,行动栏处理一些功能,如数量的增加和数量的减少等。

操作列上的每个按钮都使用模态来显示所需的内容 像文本框一样。

所以我现在的主要问题是模态的内容只适用于表格的第一个数据。我不知道我在这里遗失了什么或者我做错了。任何帮助都会很棒! (我使用ajax插入数据)

如果你需要关于表格上绑定数据的php代码,我可以更新这篇文章。

模态的HTML代码

<!-- ADD STOCK QUANTITY  -->
<div class="modal fade" id="addqty<?php echo $bookisbn;?>" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content ">
      <div class="modal-header">
        <h3 style="text-align:  center;">Add Stock/s
        </h3>
      </div>
      <div class="modal-body">
        <!--     <form role="form" id="add_stock_form" name="add_stock_form"> -->
        <div class="row clearfix">
          <div class="col-md-12">
            <div class="form-group form-float">
              <div class="form-line">
                <label for="book_isbn1" class="form-label">Book ISBN
                </label>
                <input type="text" class="form-control text-center" id="book_isbn_as" name="book_isbn_as" value="<?php echo $bookisbn;?>" readonly>
              </div>
            </div>
          </div>
        </div>
        <div class="row clearfix">
          <div class="col-md-12">
            <div class="form-group form-float">
              <div class="form-line">
                <input type="hidden" class="form-control" id="book_title_as" name="book_title_as" value="<?php echo $booktitle;?>" readonly>
              </div>
            </div>
          </div>
        </div>
        <div class="row clearfix">
          <div class="col-md-6">
            <div class="form-group form-float">
              <div class="form-line">
                <input type="number" class="form-control text-center" id="currentstock_as" name="currentstock_as" value="<?php echo $bookquantity;?>" readonly>
                <label for="currentstock" class="form-label">Current Stock/s
                </label>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group form-float">
              <div class="form-line">
                <input min="0" class="form-control text-center" type="text" id="book_quantity_as" name="book_quantity_as" onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57" required>
                <label for="book_quantity_as" class="form-label">Enter Stock
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" id="btn_add_stock" name="btn_add_stock" class="btn btn-success waves-effect">
          <i class="material-icons">add
          </i> ADD
        </button>
        <button type="button" class="btn btn-danger waves-effect" data-dismiss="modal">
          <i class="material-icons">clear
          </i> CLOSE
        </button>
      </div>
    </div>
  </div>
</div>
<!-- END OF ADD STOCK QUANTITY  -->

Ajax脚本

//     //add quantity
$(document).on("click", "#btn_add_stock", function() {
    var getbookisbn = $("#book_isbn_as").val();
    var getbooktitle = $("#book_title_as").val();
    var getbookquantity = $("#book_quantity_as").val();
    var getcurrentquantity = $("#current_stock_as").val();
    var whatprocess = "ADDBOOKQUANTITY";
    if (validationaddquantity == 1) {
        $.ajax({
            url: "adminfunctions.php",
            method: "POST",
            data: {
                getbookisbn: getbookisbn,
                getbooktitle: getbooktitle,
                getbookquantity: getbookquantity,
                whatprocess: whatprocess
            },
            success: function(data) {
                var getdata = data.trim();
                if (getdata == "SUCCESS") {
                    swal({
                        title: 'Success!',
                        text: 'Quantity Added',
                        type: 'success',
                        confirmButtonClass: "btn btn-success",
                        buttonsStyling: false
                    }).then(function() {
                        /////REFRESH DATATABLE                        
                        $("#datatables").load(window.location + " #datatables");
                        $('#book_quantity_as').val("");

                    });
                } else if (getdata == "ERROR") {
                    swal({
                        title: 'Sorry...',
                        text: "You cannot perform that action right now",
                        type: 'error',
                        confirmButtonClass: "btn btn-danger",
                        buttonsStyling: false
                    }).then(function() {
                        fetch_data();
                    });
                } else {
                    swal({
                        title: 'Sorry for the inconvenience!',
                        text: "There's a problem. Please contact the technical support for any concerns and questions.!",
                        type: 'error',
                        confirmButtonClass: "btn btn-danger",
                        buttonsStyling: false
                    }).catch(swal.noop)
                }
            },
            error: function(jqXHR, exception) {
                console.log(jqXHR);
            }
        });
    } else if (validationaddquantity != 1) {

        swal({
            title: 'Oops..!',
            text: 'You must enter a value to proceed',
            type: 'warning',
            confirmButtonClass: "btn btn-success",
            buttonsStyling: false
        }).catch(swal.noop)
    }
});

1 个答案:

答案 0 :(得分:0)

on.show.bs.modal函数触发器调用你必须重新赋值你的行数据(通过ajax或通过表上的td值然后发布)到模态元素输入(我看是隐藏输入)。 因此,每次调用模态时,您的内容数据都会根据点击行表显示。

也许可以解决你的问题..