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

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

    });
});

Answers 1

  • 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


Related Articles