傳遞的HTML數據的形式引導模式

Question

裏面我有一個簡單的腳本，從鏈接收集數據並將其傳送到一個表單自舉模式的內部：

從鏈接

<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'); 
}); 

EDIT充滿FORM MODAL INSIDE

<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> 

Answer 1

我發現了一個適用於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) 

    }) 
}) 

Answer 2

可以ACC ess其他信息如下：

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

我希望這會幫助你！

Answer 3

你可以做的是，讓特定的編輯按鈕的父tr與.closest，然後從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改變的正確方法。所以，我的建議是，因爲你必須從data-id屬性獲得id ，執行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'); 
    }); 
}); 

您也可以利用各種events available in bootstrap modal如顯示modal，顯示modal等前後，讓您get呼叫服務器。