Question

我在js函数中声明了3个变量，我想将它们发送到我的模态以显示它们的数据

js：

 function consulter_salle(id)
        {
               $.ajax({
                url : "<?php echo site_url('index.php/batiment/list_salle')?>/"+id,
                type: "POST",
                dataType: "JSON",
                success: function(data)
                {
                   var table_header = "<table>";
                   var table_footer = "</table>";
                var html ="";

                for (var row in data)
                {
                    html += "<tr><td>"+ data.id+"</td><td>"+data.libelle +"</td></tr>";
                }

       $('#modal_list').modal('show'); // show bootstrap modal when complete loaded
                $('.modal-title').text('Test');


                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error displaying data');
                }
            });

        }

我的模态：

<div class="modal fade" id="modal_list" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title">Liste des salles</h3>
          </div>
          <div class="modal-body form">
            <form action="#" id="form" class="form-horizontal">

              <div class="form-body">

                     </form>
              </div>
              <div class="modal-footer">
                <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div>
      </body>
    </html>

数据是我的控制器发送的列表，并且已经验证数据已收到，但我找不到将其发送到模态的方法。我想知道在模态体部分写什么！谢谢。

Answer 1

这是工作示例。

 // Example result, JS Object
 var result = {
  id: 12,
  title: 'My title',
  content: '<div>My example content</div>'
  
 }
 
 // your ajax success method
 function ajaxSuccess(result) {
  var modal = $('#modal_list');
  modal.modal('show');

  modal.find('.modal-title').html(result.title);
  modal.find('.modal-body').html(result.content);
 }
 
 ajaxSuccess(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="modal fade" id="modal_list" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3 class="modal-title">Liste des salles</h3>
            </div>
            <div class="modal-body form">
                <form action="#" id="form" class="form-horizontal">

                    <div class="form-body">

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
            </div>
        </div>
            <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

将数据从js函数发送到同一文件中的模态

1 个答案: