将html数据传递到bootstrap模式

时间：2017-02-28 03:22:08

标签： javascript jquery html html5 twitter-bootstrap

我有一个简单的脚本，它从链接收集数据并将其传递给bootstrap模式中的表单：

来自链接 

 <a id="editDetails" title="Edit Details"  href='#myModal2' data-id='<?=$company['id'];?>' class='btn btn-default btn-sm open-EditCompanyDialog'>

到模态 

<input id="companyid" name="companyid" type="hidden" class="formBlock btn btn-success"  value=""/>

脚本 

<script>
$(document).on("click", ".open-EditCompanyDialog", function (e) {

    e.preventDefault();

    var _self = $(this);

    var compid = _self.data('id');
    $("#companyid").val(compid);


    $(_self.attr('href')).modal('show');
});
</script>

这可以很好地获取id。但是，如果我想传递所有其他信息呢？有没有办法使用html5数据属性？

标记 

 <?php while($company=mysqli_fetch_array($result)){ ?>
  <tr>
      <td data-name="<?=$company['title'];?>" data-th="Name"><?=$company['title'];?></td>
    <td   data-description="<?=$company['description'];?>" data-th="Description"><?=$company['description'];?></td>
    <td  data-type="<?=$company['type'];?>" data-th="Type"><?=$company['type'];?></td>
    <td data-address="<?=$company['address'];?>" data-th="Address"><?=$company['address'];?></td>
    <td data-country="<?=$company['country'];?>" data-th="Country"><?=$company['country'];?></td>
    <td data-timezone="<?=$company['timezone'];?>" data-th="Time Zone"><?=$company['timezone'];?></td>
    <td data-th="ID" sorttable_customkey="2">
       <a id="editDetails" title="Edit Details"  href='#myModal2' data-id='<?=$company['id'];?>' class='btn btn-default btn-sm open-EditCompanyDialog'>
                <i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>

    </td>
  </tr>
  <?php };?>

修改 

$(document).on("click", ".open-EditCompanyDialog", function (e) {
    e.preventDefault();
    var _self = $(this);

    var _parent=$(_self.closest('tr')); //get its parent with closest
    var compid = _self.data('id');
    var compTitle=_parent.find("td[data-th='title']").attr('data-name');
    var compDesc=_parent.find("td[data-th='description']").attr('data-description');
    var compType=_parent.find("td[data-th='type']").attr('data-type');
    var compAdd=_parent.find("td[data-th='address']").attr('data-address');
    var compZone=_parent.find("td[data-th='timezone']").attr('data-timezone');
    var compCountry=_parent.find("td[data-th='country']").attr('data-country');

    $("#companyid").val(compid);
    $("#compname").val(compTitle);
    $("#description").val(compDesc);
    $("#type").val(compType);
    $("#address").val(compAdd);
    $("#timezone").val(compZone);
    $("#country").val(compCountry);
    $(_self.attr('href')).modal('show');
});

使用内部表格编辑完整模式 

<form id="editCompany" method="POST" action="core/query.php">
     <input id='compname'name='title' value='' type='text' placeholder="Name...">
     <input id="companyid" name="companyid" type="hidden"value=""/>

     <select name='type'>
     <option> Type...</option>
     <option id='type' value="" selected></option>
     </select>

     <select name='description'>
     <option  value="">Description...</option>
     <option id='description' value="" selected></option>
     </select> 

     <input id='address' name='address' value='' type='text' placeholder="Address">

     <select name="country" value='' type='text' placeholder="Country">
     <option value="">Country...</option>
     <option  id='country' value="" selected></option>
     </select>

     <select name="timezone">
     <option value=''>Timezone...</option>
     <option  id='timezone' value="" selected></option>
     </select>

     <input name="editCompany" id="submit" type="submit" value="Modify Data"/>

</form>

3 个答案:

答案 0 :(得分：0)

您可以访问以下其他信息：

var com_type = _self.parent().parent().find('[data-type]').html()
var com_name = _self.parent().parent().find('[data-name]').html()
....

我希望这会对你有所帮助！

答案 1 :(得分：0)

您可以做的是，使用 .closest 获取特定编辑按钮的父tr，然后根据td逐个获取每个数据他们的data-th属性。

请考虑以下示例：

$(document).on("click", ".open-EditCompanyDialog", function (e) {
    e.preventDefault();
    var _self = $(this);
    var _parent=$(_self.closest('tr')); //get its parent with closest
    var compid = _self.data('id');
    var compTitle=_parent.find("td[data-th='title']").attr('data-name');
    var compDesc=_parent.find("td[data-th='description']").attr('data-name');
    var compType=_parent.find("td[data-th='type']").attr('data-name');
    var compAdd=_parent.find("td[data-th='address']").attr('data-name');

    //Other 2 options country and timezone too..

    $("#companyid").val(compid);
    $(_self.attr('href')).modal('show');
});
  

但这不是正确的方法，因为你得到了   从客户端到这一切都可以在任何时候改变   时间client。所以我建议的是，因为你有id   从data-id属性获取，对server / db执行ajax调用   并在之前获得来自服务器的json响应所需的详细信息   弹出modal。

一个典型的例子是：

$(document).on("click", ".open-EditCompanyDialog", function (e) {
    e.preventDefault();
    var _self = $(this);
    var compid = _self.data('id');
    $.get('someurl/method?id='+compid,function(response){
         //parse response and get the details, set the values and then show the modal
         $("#companyid").val(compid);
         $(_self.attr('href')).modal('show');
    });
});
  

您还可以在显示modal后显示modal之前使用各种 events available in bootstrap modal ，并进行get来电到服务器。

答案 2 :(得分：0)

我找到了适用于inputs和divs的解决方案。它不适用于option标记。但我决定运行这个解决方案并解决这个问题。记下所有内容都在同一页面上。收集按钮上的所有数据，然后使用jQuery将数据传递到模式，如下所示：

 <?php while($company=mysqli_fetch_array($result)){ ?>
  <tr>
      <td  data-th="Name"><?=$company['title'];?></td>
    <td    data-th="Description"><?=$company['description'];?></td>
    <td  data-th="Type"><?=$company['type'];?></td>
    <td  data-th="Address"><?=$company['address'];?></td>
    <td  data-th="Country"><?=$company['country'];?></td>
    <td  data-th="Timezone"><?=$company['timezone'];?></td>
    <td data-th="ID" sorttable_customkey="2">

<button type='button' class='btn btn-default btn-sm open-EditCompanyDialog' data-toggle='modal' data-target='#myModal2'  data-name="<?=$company['title'];?>" data-description="<?=$company['description'];?>" data-type="<?=$company['type'];?>" data-address="<?=$company['address'];?>" data-country="<?=$company['country'];?>" data-timezone="<?=$company['timezone'];?>" >
    <i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>
    </td>
  </tr>
  <?php };?>

然后在你的模态中...... 

    <form id="editCompany" method="POST" action="query.php">
    <!-- Modal -->
    <div id="myModal2" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Edit Company Details</h4>
          </div>
          <div class="modal-body">
         <input id="companyid" name="companyid" type="hidden" class="formBlock btn btn-success"  value=""/>
         <input id='compname' class='form-control formBlock' name='title' value='' type='text' placeholder="Name...">
        <input id='type' class='form-control formBlock' name='type' value='' type='text'>
    <input id='description' class='form-control formBlock' name='description' value='' type='text'>
    <input id='country' class='form-control formBlock' name='country' value='' type='text'>
    <input id='timezone' class='form-control formBlock' name='timezone' value='' type='text'>
        <input id='address' class='form-control formBlock' name='address' value='' type='text'>

    <div class="modal-footer">
          <div class='col-md-12'>

        <input name="editCompany" id="submit" type="submit" class="formBlock btn btn-success"  value="Modify Data"/>
          </div></div>
    </div></div>
</form>

<强>脚本 

    $(document).ready(function () {
    $('#myModal2').on('show.bs.modal', function (event) { // id of the modal with event
      var button = $(event.relatedTarget) // Button that triggered the modal
      var id = button.data('id') // Extract info from data-* attributes
      var name = button.data('name')
                             var description = button.data('description')
                             var type= button.data('type')
                              var address = button.data('address')
                              var country = button.data('country')
                              var timezone = button.data('timezone')
      // Update the modal's content.
      var modal = $(this)
      modal.find('#companyid').val(id)
                            modal.find('#compname').val(name)
                            modal.find('#description').val(description)
                            modal.find('#type').val(type)
                            modal.find('#address').val(address)
                            modal.find('#country').val(country)
                            modal.find('#timezone').val(timezone)

    })
})
相关问题
最新问题