What is wrong with this javascript not getting dynamic fetch data from database?

Question

I have the same script, same style on many other different pages and it works perfectly at displaying dynamic data in a modal. I stripped the script from top to bottom... I have rewritten many times and I do not see what's going on... The modal opens but no data is being displayed.

dynamic data

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

display inside modal

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

script

$(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);

    });
});

any errors in the **developer** tools console? if you check the page source in the browser, does it look right? — Jaromanda X, Mar 05 '17 at 04:06
What does `client.relatedTarget` hold? Element ID or Class Name? Please check it this has `#` or `.` preceding to selector — Rajesh, Mar 05 '17 at 04:44

score 1 · Accepted Answer · edited May 23 '17 at 12:17

You either need to lowercase the names in the data calls..

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

or properly format the data attributes to be called like you are..

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

Good stuff here: Using data attributes with jQuery

What is wrong with this javascript not getting dynamic fetch data from database?

1 Answers1