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
– Jaromanda X, Commented Mar 5, 2017 at 4:06
What does client.relatedTarget hold? Element ID or Class Name? Please check it this has # or . preceding to selector — Rajesh Dixit
– Rajesh Dixit, Commented Mar 5, 2017 at 4:44

Community · Accepted Answer · 2017-05-23 12:17:14Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related