Question

我有相同的脚本，在许多其他不同的页面上使用相同的样式，并且它在模态中显示动态数据时非常有效。我从上到下剥离了脚本......我已经多次重写了，我没有看到发生了什么......模态打开但没有数据显示。

动态数据

 <tbody>
 <?php while($client=mysqli_fetch_array($resultclient)){ ?>
  <tr>
   <td    data-th="ID" sorttable_customkey="2">     
  <button title="Edit Client" type='button' class='btn btn-default btn-sm'      data-toggle='modal' data-target='#editClient' 
  data-clientId="<?=$client['id'];?>" 
  data-clientWebsite="<?=$client['company_url'];?>" 
  data-clientEmail="<?=$client['contact_email'];?>" 
  data-clientSecretid="<?=$client['secret_id'];?>" 
  data-clientName="<?=$client['name'];?>" 
  data-clientStatus="<?=$client['client_status'];?>" 
  data-clientIndustry="<?=$client['client_industry'];?>" 
  data-clientAddress="<?=$client['address'];?>" 
  data-clientContactName="<?=$client['contact_name'];?>" 
  data-clientContactNumber="<?=$client['contact_number'];?>"> 
  <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
  </button>
  </td>
  </tr>
  <?php };?>
 </tbody>

在模态内显示

<input id="clientid" class="form-control formBlock" type="hidden" value="">
<input id="clientsecretid" class="form-control formBlock" type="hidden"  value="">
<input id="clientname"  class="form-control formBlock" type="text" value="" readonly>
<input id="clientstatus"  class="form-control formBlock" type="text"  value="" readonly>
<input id="clientindustry" type="text" class="formBlock form-control"  value=""  readonly/>
<input id="clientaddress" type="text" class="formBlock form-control"  value=""  readonly/>
<input id="clientcontactname"  type="text" class="formBlock form-control"  value="" readonly/>
<input id="clientcontactnumber"  type="text" class="formBlock form-control"  value="" readonly/>
<input id="clientwebsite"  type="text" class="formBlock form-control"  value="" readonly/>
<input id="clientemail"  type="text" class="formBlock form-control"  value="" readonly/>

脚本

$(document).ready(function () {
$('#editClient').on('show.bs.modal', function (client) { // id of the modal with event
var button = $(client.relatedTarget); // Button that triggered the modal

//get dynamic data from button data-attributes
var clientId = button.data('clientId'); // Extract info from data-* attributes
var clientSecretid = button.data('clientSecretid');
var clientName = button.data('clientName');
var clientStatus = button.data('clientStatus');
var clientIndustry = button.data('clientIndustry');
var clientAddress = button.data('clientAddress');
var clientContactName = button.data('clientContactName');
var clientContactNumber = button.data('clientContactNumber');
var clientWebsite = button.data('clientWebsite');
var clientEmail = button.data('clientEmail');

//display data in modal
var modal = $(this);
modal.find('#clientid').val(clientId);
modal.find('#clientsecretid').val(clientSecretid);
modal.find('#clientname').val(clientName);
modal.find('#clientstatus').val(clientStatus);
modal.find('#clientindustry').val(clientIndustry);
modal.find('#clientaddress').val(clientAddress);
modal.find('#clientcontactname').val(clientContactName);
modal.find('#clientcontactnumber').val(clientContactNumber);
modal.find('#clientwebsite').val(clientWebsite);
modal.find('#clientemail').val(clientEmail);

    });
});

Answer 1

您需要在数据调用中小写名称..

var clientId = button.data('clientid');
var clientSecretid = button.data('clientsecretid');
var clientName = button.data('clientname');
var clientStatus = button.data('clientstatus');
var clientIndustry = button.data('clientindustry');
var clientAddress = button.data('clientaddress');
var clientContactName = button.data('clientcontactname');
var clientContactNumber = button.data('clientcontactnumber');
var clientWebsite = button.data('clientwebsite');
var clientEmail = button.data('clientemail');

或正确格式化要调用的数据属性。

<button title="Edit Client" type='button' class='btn btn-default btn-sm'      data-toggle='modal' data-target='#editClient' 
data-client-id="<?=$client['id'];?>" 
data-client-website="<?=$client['company_url'];?>" 
data-client-email="<?=$client['contact_email'];?>" 
data-client-secretid="<?=$client['secret_id'];?>" 
data-client-name="<?=$client['name'];?>" 
data-client-status="<?=$client['client_status'];?>" 
data-client-industry="<?=$client['client_industry'];?>" 
data-client-address="<?=$client['address'];?>" 
data-client-contact-name="<?=$client['contact_name'];?>" 
data-client-contact-number="<?=$client['contact_number'];?>"> 
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</button>

这里的好东西：Using data attributes with jQuery

这个javascript没有从数据库获取动态获取数据有什么问题？

1 个答案: