SQL While语句中的Bootstrap Modal始终显示第一个记录内容

如何解决SQL While语句中的Bootstrap Modal始终显示第一个记录内容

我是新手。我正在转换一个包含发布表格的工作Bootstrap模式。模态使用带有ID的按钮打开。打开时，它始终显示在SQL while语句结果列表中找到的第一条记录的FORM内容。我将模式从id更改为类。我现在使用类按钮而不是id按钮打开它。但是现在它继续显示第二条记录的表单内容。如果我从模态中删除该表格，它将正常工作并显示正确的内容。 accept-btn打开模式。（'.confirm-body'）包含模态内容表单。请感谢一些帮助。

<!-- Opens modal is outside the modal-->
<a class="accept-btn">Accept</a>
<!-- The Modal -->
<div class="modal">
  <!-- Modal content -->
  <div class="modal-content animate confirmarea-size">
    <div id="topblue-border1" class="topblue-border1"></div> <!-- topblue border End -->
    <!-- Popup buttons Start -->  
    <div class="confirm-body boxshadow" style="display:none;">
      <form class="whatever" action="" method=""> 
        <input type="hidden" class="whatever" name="" value="<?php echo whatever?>"> 
        <input type="hidden" class="whatever" name="" value="<?php echo whatever?>">
        <input type="hidden" class="whatever" name="" value="<?php echo whatever?>">
        <div class="ajax-response"></div>
        <a><div id="css-btn" class="confirm-btn">Accept</div></a>
        <a><div id="css-btn" class="cancel-btn">Cancel</div></a>
        <a><div id="css-btn" class="nextstage-btn">OK</div></a>
      </form>   
    </div> <!-- Popup Confirm Section END --> 
  </div> <!-- End of The Modal Content -->      
</div> <!-- End of The Modal -->


1st Option Button script
<script>
// Accept button Opens the Modal .
$(document).ready(function() {
  $('.accept-btn').click(function(event) {
    $('.modal').show();
    $('.confirm-body').show();
  });
});
</script>

2nd Option button  script.  I want to try something like this but I dont know how to code it and close it correctly. each recored has a record Id field.  I want to relate the modal to the record id.

<script>
//Accept Bid Button Opens the Modal and displays the Confirm-Body Div.
$(document).ready(function(){
$('.acceptbid-btn').click(function(event){ 
var myModal = "myModal" + $('.recordid').val();
$  $(this).closest('recordid').find('modal').modal({
            keyboard: true
        },'show');
        return false;
$('.confirm-body').show();


});
});
});

</script>


UPDATE:
I have done this using php.  The button and the modal ids 
now matches the Row record id. And will always be unique. 
I am going some where with this idea,not sure yet I am 
yet to test what happens.

<?php  $buttonid = $recordid;?>
 <a  id="<?php echo $buttonid;?>" class="acceptbid-btn"></a>


<!-- The Modal -->
<div id="<?php echo $buttonid;?>" class="modal">

解决方法

我已经解决了这个问题。解决它的一些方法很好，例如AJAX GET在这里起作用。但是我知道必须有另一种方法，它不需要AJAX GET命令，而是对模式进行了微小的更改，因为我的另一个问题是我在另一个项目上的另一个模式包含模式形式的用户输入字段，该字段将Js查询返回给通过Ajax发布表单之前，先打开公开的Mondal。经过大量的测试和痛苦之后，我找到了解决方案，因为我知道答案就在于Modal ID是静态的。我如何使其动态并匹配SQL $ row id和Button ID。答案就在下面。

1. 在php变量中创建，该变量包含Sql数据库 $row [recordid] 或该行的ID。现在，这是确保您获取正确数据所需的变量。

$id = "". $row["id"]."";

1. 在用于打开模态回显的按钮中，记录id变量。保持！变量前的哈希号： <button type="button" class="accept-btn" data-toggle="modal" data-target="#<?php echo $id;?>">
1. 模态Div-删除#myModal并回显id php变量。不要散列＃ <div id="<?php echo $id;?>" class="modal">

就这样了。因此，当您单击任意行中的模式按钮时，它将显示正确的内容/表单。

我研究了类似的模式。让我给你看一个例子..

data-id按钮

 <button type="button" class="btn btn-info btn-xs btn_width editPrescription" data-toggle="modal" data-id="<?php echo $prescription->id; ?>"><i class="fa fa-edit"></i>
                                                        <?php echo lang('edit'); ?>
                                                    </button>

这是一个模式，其ID为myModal2

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title"><i class="fa fa-edit"></i> <?php echo lang('edit_medical_history'); ?></h4>
        </div>
        <div class="modal-body">
            <form role="form" action="patient/addMedicalHistory" id="medical_historyEditForm" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="exampleInputEmail1">
                        <?php echo lang('date'); ?>
                    </label>
                    <input type="text" class="form-control form-control-inline input-medium default-date-picker" name="date" id="exampleInputEmail1" value='' placeholder=""> </div>
                <div class="form-group col-md-12">
                    <label class="control-label col-md-3">Initiated By: </label>
                    <div class="col-md-9">
                        <input type="text" class="form-control form-control-inline" name="initiated_by" id="" value='' readonly=""> </div>
                    <br>
                </div>
                <div class="form-group col-md-12">
                    <label class="control-label col-md-3">
                        <?php echo lang('description'); ?>
                    </label>
                    <div class="col-md-9">
                        <textarea class="ckeditor form-control editor" id="editor" name="description" value="" rows="10"></textarea>
                    </div>
                </div>
                <input type="hidden" name="patient_id" value='<?php echo $patient->id; ?>'>
                <input type="hidden" name="id" value=''>
                <section class="">
                    <button type="submit" name="submit" class="btn btn-info submit_button">Submit</button>
                </section>
            </form>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

这是Ajax，使用数据触发模态，但问题是您必须创建一个页面，该页面通过php JSON将数据发送回ajax

<script type="text/javascript">
$(document).ready(function() {
    $(".editbutton").click(function(e) {
        e.preventDefault(e);
        // Get the record's ID via attribute  
        var iid = $(this).attr('data-id');
        $('#myModal2').modal('show');
        $.ajax({
            url: 'patient/editMedicalHistoryByJason?id=' + iid,method: 'GET',data: '',dataType: 'json',}).success(function(response) {
            // Populate the form fields with the data returned from server
            $('#medical_historyEditForm').find('[name="id"]').val(response.medical_history.id).end()
            $('#medical_historyEditForm').find('[name="date"]').val(response.medical_history.date).end()
            $('#medical_historyEditForm').find('[name="initiated_by"]').val(response.medical_history.initiated_by).end()
            CKEDITOR.instances['editor'].setData(response.medical_history.description)
        });
    });
});

我希望这可以使您了解其工作原理。

SQL While语句中的Bootstrap Modal始终显示第一个记录内容

如何解决SQL While语句中的Bootstrap Modal始终显示第一个记录内容

解决方法

相关推荐