asked on 5/6/2020

How do I create this popup?

Here's what my project looks like right now:

The "More Detail" button needs to open up a modal where I'm going to have several fields displayed which the user can edit.

This is what I have so far:

<script>
$(document).ready( function() {
	let accountId=$('#accountId').val();
	$.get("http://devtest.simplevoip.us/ajax_functions.php?fn=get_account_devices&accountId="+accountId)
		.done((data) => {
			$.each(data, (i, elem) => {
				$('#michelle').append(`<tr><td>${elem.deviceId}</td><td>${elem.name}</td><td><button data-device-id='${elem.deviceId}' class='detail'>More Detail</button></td></tr><tr><td colspan="2"><span style="font-size:9pt; font-style:italic;">product detail</span></td></tr>`)
			})
		})
		.fail((error) => console.log(error))
		.always(() => console.log('Done'));
});
</script>

Open in new window

My button: <button data-device-id='${elem.deviceId}' class='detail'>More Detail</button>

...needs to open up a popup where the user will have the following fields

mac - The user-specified MAC address for this device (I'm assuming I'm going to have to grab that from somewhere base on https://whatismyipaddress.com/mac-address)

oldmac - In case the MAC setting was changed, this should contain the original MAC address (not sure what this means apart from displaying the current Mac address)

customerTemplateID - value of the SELECT generated in the previous step (I've got this one)

codec - Can be 'DEFAULT', 'G722', 'G711', or 'OPUS' Ithis will be a pulldown)

transport - Can be 'TCP', 'UDP', or ' DNS-NAPTR' (another pulldown)

accountid - Our test accountId (I have this)

line1 - Set this to the Device's Unique ID (not sure what that's going to be)

configID - Unique ID for config, should match ID retrieved in previous step (if I'm retrieving this, perhaps it's the ID of my computer? Open to suggestion on this one)

ip - An IP address (e.g. 192.168.144.1) (current IP address I suppose)

subnet - An IP subnet mask (e.g. 255.255.255.128) (current subnet)

gw - An IP address (e.g. 192.168.144.1) (another IP address)

syslog - A boolean flag (true or false) (I'm just going to create a pulldown for either true or false)

I've got to create a popup that populates the appropriate fields and then just displays the right options for everything else.

What a day!

jQuery Web Development

Last Comment

Bruce Gust

5/7/2020

Chris Stanyon

5/6/2020

Hey Bruce,

As always, there are a number of ways to do this. First off, you're gonna want to hook an event up to your button. Because it's being created dynamically, you'll have to delegate the event to something that already exists on page load - such as your #michelle div, so something like this:

$('#michelle').on('click', 'button', function(e) {
    let deviceId = $(this).data('device-id');
    console.log(deviceId);
    ...
});

Open in new window

That will hook a click onto your button and grab the deviceId. I'm guessing that deviceId will allow you to do some kind of search / query to retrieve the values you need, so depending on how you want to get that data will dictate which is the easiest method to move forward.

Basically, you will need to add the Modal functionality to your page (easy options include Bootstrap or jQueryUI). You Modal body will either contain a form, or it will contain a place holder. When you run your query, you will either populate the form fields (based on data properties returned) and then show it, or you will inject a pre-populated HTML snippet into the form (this option is probably easiest if you're making a call back to your own server - you can use PHP to run the query and generate the form).

You haven't said how you intend to query the data, so I can't give you specifics. Also, let me know whether you're planning on using jQueryUI modal or Bootstrap (or neither if you're feeling adventurous!)

Bruce Gust

5/6/2020

ASKER

Chris!

Glad you're still up and running!

First, can you please tell me what I'm missing with your last comment at https://www.experts-exchange.com/questions/29181166/How-do-I-grab-the-detail-from-this-row.html

I'm missing a character. You'll see the post...

Bruce Gust

5/6/2020

ASKER

As far as how I'm supposed to query the data, based on the scope of the project, it looks as though I'm just going to be pulling from whatever is displayed at that moment. So, I'm not going to be running another query. Rather, I'm just going to embed:

customerTemplateID
accountid

...and whatever fields (I see you're looking at the question, so I want to get this in front of you...)

But you get the idea. Those will be "data-customerTemplateId" within the link.

That's what I'm thinking.

And I'm planning on a Bootstrap modal.

Chris Stanyon

5/6/2020

Right,

In that case, set up your Modal dialog with a form. Give each input an ID, or at the very least a name. Then in the click event of the button, you'll need to retrieve the data attribute values and push them into your form.

$('#michelle').on('click', 'button', function(e) {
    ${'#someFormId').val( $(this).data('some-attribute') )
    ...
    $('#myModal'),modal('show');
})

Open in new window

The above assumes you've attached the data attribute to each button. If it's somewhere else in your row, then you'll need to travers the DOM a little. You could potentially make it a little easier by setting one data atrribute and json encoding the entire dataset. You're then only having to retieve one attribute, decode it and you'll have all your data values.

It's just a case of hooking up the buttons on your Modal. These will just be standard buttons, bound to various click events.

Bruce Gust

5/7/2020

ASKER

Chris!

First, here's what I need to do - and this has changed somewhat since my last post.

I'm using this GET to retrieve the detail that corresponds to each device id
$.get("http://devtest.simplevoip.us/ajax_functions.php?fn=get_config_info&deviceId=" + elem.deviceId)

If that looks familiar, it's what you helped with earlier today.

That's going to populate my modal. Now, here's where I'm getting lost.

I was able to implement the first piece of the code you referenced on this thread accurately enough to trigger a basic alert. But building the modal is alluding me.

Here's what I've got:

<?php require_once("header.php");?>  
<body>
    <div class="container" style="height:100%;"><br>
      <div class="shopping_bag">
         <div class="content">
            <div class="row">
               <div class="col-xs-12">
                  <img src="images/header.jpg" class="img-responsive" style="border-radius:14px 14px 0px 0px; border:1px solid #fff;">
                </div>
            </div>
            <div class="orange_row"><br>
               <div class="white_background">
                   <table id="michelle" class="table">
                     <tr>
                        <td style="font-weight:bold; background-color:#000; color:#fff; text-align:center; border-right:1px solid #fff;">device id</td>
                        <td style="font-weight:bold; background-color:#000; color:#fff; text-align:center; border-right:1px solid #fff;">name</td>
                        <td style="font-weight:bold; background-color:#000; color:#fff; text-align:center;">edit</td>
                     </tr>
                   </table>
               </div><br>
            </div>
         </div>
         <div style="margin:auto; text-align:center; font-size:9pt; font-weight:bold; color:#ffffff;">
            <br>Bruce Gust | (e) <a href="mailto:bruce@brucegust.com" style="color:#fff; text-decoration:none;">bruce@brucegust.com</a> (p) 615.618.2059
         </div>
      </div>   
   </div>
   <input type="hidden" id="accountId" value="4b2e5ea8ca6231f67e1697768e5">
   <!-- Modal -->
   <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
     <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
         <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
        </div>
        <div class="modal-body">
         ...
        </div>
        <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
     </div>
   </div>
</body>


<script>
$(document).ready( function() {
   let accountId=$('#accountId').val();
   $.get("http://devtest.simplevoip.us/ajax_functions.php?fn=get_account_devices&accountId="+accountId)
      .done((data) => {
         $.each(data, (i, elem) => {
            $('#michelle').append(`<tr><td>${elem.deviceId}</td><td>${elem.name}</td><td><button data-device-id='${elem.deviceId}' class="detail">More Detail</button></td></tr>`)
         })
      })
      .fail((error) => console.log(error))
      .always(() => console.log('Done'));
      
      $('#michelle').on('click', 'button', function(e) {
      let deviceId = $(this).data('device-id');
      console.log(deviceId);
      });
});
</script>


</html>

Open in new window

I'm done for today, but I'll be up bright and early tomorrow morning.

Once in place, the modal needs to provide a field for all the information which is going to look like this:

{"result":"SUCCESS","mac":"0D8E1CF76146","customerTemplateID":146,"codec":"DEFAULT","transport":"UDP","proxy":"AUTO","line2":"","line3":"","line4":"","lastAccess":"Config last pulled: 2019-11-26 20:27:05 CST","configID":12,"ip":"","gw":"","subnet":"","algo_output":null,"syslog":0}

Open in new window

In addition, the "customerTemplateID" field can be broken down further using this GET:

http://devtest.simplevoip.us/ajax_functions.php?fn=get_config_options&accountId=4b2e5ea8ca6231f67e1697768e5

..and what's bizarre about that is that within that JSON, you have some HTML:

I have some liberty as far as how I want to display that, but there's that piece.

Finally, I've got to be able to post my changes to this endpoint:

http://devtest.simplevoip.us/ajax_functions.php?fn=update_config

The thing that weirds me out about that is I don't understand how that's going to work. If you run that URL all by itself, you get some text on the page that says, "No MAC specified to update." I'm not even sure how you would specify it, other than a portion of the statement of work that says,

"Parameters this will take:

mac - The user-specified MAC address for this device
oldmac - In case the MAC setting was changed, this should contain the original MAC address
customerTemplateID - value of the SELECT generated in the previous step
codec - Can be 'DEFAULT', 'G722', 'G711', or 'OPUS'
transport - Can be 'TCP', 'UDP', or ' DNS-NAPTR'
accountid - Our test accountId
line1 - Set this to the Device's Unique ID
configID - Unique ID for config, should match ID retrieved in previous step
ip - An IP address (e.g. 192.168.144.1)
subnet - An IP subnet mask (e.g. 255.255.255.128)
gw - An IP address (e.g. 192.168.144.1)
syslog - A boolean flag (true or false)

Not sure how that's going to work given my default to update a record based on a particular ID.

More than one question here, but this is what I want to finish by tomorrow afternoon...

I need a nap.

Chris Stanyon

5/7/2020

Morning Bruce,

Right, a few things to go through. Here's the general idea we're aiming for. When you run your second GET, you receive an Object back ( the one that has the properties such as result, mac, customerTemplateId, codec, transport). As well as displaying that info as you already have, you need to store that entire object somewhere so that you can use it later to populate a form. The easiest way to do this is to store it as a data-attribute on the button. In order to do that, we just want to make a slight change to the code you already have. Instead of appending the HTML directly to the table, we're going to create an Object for it first. This will allow us to set the data attribute and then append it, so something like this:

$.each(data, (i, elem) => {
    let row = $(`<tr><td>${elem.deviceId}</td><td>${elem.name}</td><td><button>More Detail</button></td></tr>`)
    $('button', row).data('info', elem)
    $('#michelle').append(row)
})

Open in new window

You'll see here that we create an object, set the data attribute on the button to elem (your object) and then append it to the #michelle div. This means that the entire object is now stored on the button as a data attribute called info.

Now your Modal. There's nothing particularly special about a Modal - it's just standard HTML within your page (forget about the fact that it's even a Modal). You just need to add your Update form in the normal manner:

<div class="modal-body">
    <form id="editForm">
        <label>Account Id
        <input type="text" name="accountid">
        <label>MAC</label>
        <input type="text" name="mac">
        ...
    </form>
</div>

Open in new window

Notice how the form fields match the parameters that you update endpoint will take - that's because ultimately, we're just going to post that form to the endpoint to do the update.

So now you have a button containing the data you need (the info data attribute we set earlier), and an empty Update form. To tie the 2 together, you hook into the button

$('#michelle').on('click', 'button', function(e) {
    let info = $(this).data('info') // retrieve the data from the button
    $('input[name=mac]').val( info.mac ) // set the values of your form fields
    ...
    $('#exampleModal).modal('show') // show the Modal form (you will need to add the ID to your Modal HTML)
});

Open in new window

All we're doing here is retrieving the info object from the button and setting the form fields to the values we stored. Once done, we just show the Modal popup.

The final part of the puzzle is to actually submit the Update form to the endpoint, and this is just a standard AJAX post (I'm assuming POST, but the docs for your endpoint will give you the details you need). On your Modal, you have a Save Changes button. Give that an ID so it's easier to hook into, and then bind your event:

$('#saveChanges').click(function(e) {

    let myForm = $('#editForm')
    $.ajax({
        url : 'http://devtest.simplevoip.us/ajax_functions.php?fn=update_config',
        method : 'post',
        data : myForm.serialize(),
    })
    .done({resp) => {
         // your update has been done.
        $('#exampleModal').modal('hide')
    })
})

Open in new window

I think that's the basic moving parts covered, but you'll need to check the code over and edit it to your needs. It'll be easier to handle all of this if you break it down into individual steps:

1 - Call your GETs and create your HTML table
2 - Add the data property to your Button
3 - Bind your button and console.log the data
4 - Use that data to populate your Modal and display it
5 - POST your Modal to the Update endpoint.

Good luck with it all :)

Bruce Gust

5/7/2020

ASKER

Morning, Chris!

It's 3:52 AM and I smell the aroma of accomplishment!

Here go...!

Bruce Gust

5/7/2020

ASKER

Chris!

Here's what I've got:

<script>
$(document).ready( function() {
let accountId=$('#accountId').val();
$.get("http://devtest.simplevoip.us/ajax_functions.php?fn=get_account_devices&accountId="+accountId)
  .done((data) => {
$.each(data, (i, elem) => {
  let row = $(`<tr><td>${elem.deviceId}</td><td>${elem.name}</td><td><button>More Detail</button></td></tr>`)
  $('button', row).data('info', elem)
  $('#michelle').append(row)
})
  })
  .fail((error) => console.log(error))
  .always(() => console.log('Done'));

  $('#michelle').on('click', 'button', function(e) {
  let info = $(this).data('info'); // retrieve the data from the button
  $('input[name=mac]').val( info.mac ); // set the values of your form fields
$('#exampleModal).modal('show'); // show the Modal form (you will need to add the ID to your Modal HTML)
  });
});
</script>

The error that I'm getting says that I'm missing a ")" at the end of "$('#exampleModal).modal('show'); // show the Modal form (you will need to add the ID to your Modal HTML) "

Chris Stanyon

5/7/2020

Haha - error messages a rarely specific and often need a bit of detective work to figure them out. The problem is actually a missing closing quote around exampleModal:

$('#exampleModal').modal(...

Bruce Gust

5/7/2020

ASKER

Got it!

And Chris, while I've got you on the phone...

My Modal / code looks like this:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body">
<form id="editForm">
<label>Account Id
<input type="text" name="accountid">
<label>MAC</label>
<input type="text" name="mac">
...
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>

<script>
$(document).ready( function() {
let accountId=$('#accountId').val();
$.get("http://devtest.simplevoip.us/ajax_functions.php?fn=get_account_devices&accountId="+accountId)
.done((data) => {
$.each(data, (i, elem) => {
let row = $(`<tr><td>${elem.deviceId}</td><td>${elem.name}</td><td><button>More Detail</button></td></tr>`)
$('button', row).data('info', elem)
$('#michelle').append(row)
})
})
.fail((error) => console.log(error))
.always(() => console.log('Done'));

$('#michelle').on('click', 'button', function(e) {
let info = $(this).data('info'); // retrieve the data from the button
$('input[name=mac]').val( info.mac ); // set the values of your form fields
$('#exampleModal').modal('show'); // show the Modal form (you will need to add the ID to your Modal HTML)
});
});
</script>

When I click on my button, I'm expecting my modal to come up, albeit a blank screen right now. Instead, I get an error that says, "test.php:122 Uncaught TypeError: $(...).modal is not a function." It's referring to this line:

$('#exampleModal').modal('show'); // show the Modal form (you will need to add the ID to your Modal HTML)

When I google that error, I get some counsel that says I need to be sensitive to the way in which I call my Bootstrap library, but I don't think that's the issue: https://stackoverflow.com/questions/27064176/typeerror-modal-is-not-a-function-with-bootstrap-modal

Also, when I open this Modal, I have to display the product detail that you helped me with earlier. It's not going to be just a form. I'm thinking that the form itself, in addition to providing the user the ability to edit certain information has to also display all of the detail that I had going on here:

<?php require_once("header.php");?>  
<body>
    <div class="container" style="height:100%;"><br>
      <div class="shopping_bag">
         <div class="content">
            <div class="row">
               <div class="col-xs-12">
                  <img src="images/header.jpg" class="img-responsive" style="border-radius:14px 14px 0px 0px; border:1px solid #fff;">
                </div>
            </div>
            <div class="orange_row"><br>
               <div class="white_background">
                   <table id="michelle" class="table">
                     <tr>
                        <td style="font-weight:bold; background-color:#000; color:#fff; text-align:center; border-right:1px solid #fff;">device id</td>
                        <td style="font-weight:bold; background-color:#000; color:#fff; text-align:center; border-right:1px solid #fff;">name</td>
                        <td style="font-weight:bold; background-color:#000; color:#fff; text-align:center;">edit</td>
                     </tr>
                   </table>
               </div><br>
            </div>
         </div>
         <div style="margin:auto; text-align:center; font-size:9pt; font-weight:bold; color:#ffffff;">
            <br>Bruce Gust | (e) <a href="mailto:bruce@brucegust.com" style="color:#fff; text-decoration:none;">bruce@brucegust.com</a> (p) 615.618.2059
         </div>
      </div>   
   </div>
   <input type="hidden" id="accountId" value="4b2e5ea8ca6231f67e1697768e5">
</body>


<script>
$(document).ready( function() {
   let accountId=$('#accountId').val();
   $.get("http://devtest.simplevoip.us/ajax_functions.php?fn=get_account_devices&accountId="+accountId)
      .done((data) => {
         $.each(data, (i, elem) => {
            let row = `<tr style="background-color:#ccc;"><td style="border-right:1px solid #fff;">${elem.deviceId}</td><td style="border-right:1px solid  #fff;">${elem.name}</td><td><button data-device-id='${elem.deviceId}' class='detail'>More Detail</button></td></tr>`
            $.get("http://devtest.simplevoip.us/ajax_functions.php?fn=get_config_info&deviceId=" + elem.deviceId)
               .done((data) => {
                  $('#michelle').append(`${row}<tr><td colspan="2"><span style="font-size:9pt; font-style:italic; font-weight:bold;">product detail</span>
                  <br>
                  <div class="row">
                     <div class="col-md-6 col-xs-12">
                        <b>mac:</b> ${data.mac}
                     </div>
                     <div class="col-md-6 col-xs-12">
                        <b>customer template Id:</b> ${data.customerTemplateID}
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-6 col-xs-12">
                        <b>code:</b> ${data.codec}
                     </div>
                     <div class="col-md-6 col-xs-12">
                        <b>transport:</b> ${data.transport}
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-6 col-xs-12">
                        <b>proxy:</b> ${data.proxy}
                     </div>
                     <div class="col-md-6 col-xs-12">
                        <b>line 2:</b> ${data.line2}
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-6 col-xs-12">
                        <b>line 3:</b> ${data.line3}
                     </div>
                     <div class="col-md-6 col-xs-12">
                        <b>line 4:</b> ${data.line4}
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-6 col-xs-12">
                        <b>config id:</b> ${data.configID}
                     </div>
                     <div class="col-md-6 col-xs-12">
                        <b>ip:</b> ${data.ip}
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-6 col-xs-12">
                        <b>gw:</b> ${data.gw}
                     </div>
                     <div class="col-md-6 col-xs-12">
                        <b>subnet:</b> ${data.subnet}
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-6 col-xs-12">
                        <b>algo_output:</b> ${data.algo_output}
                     </div>
                     <div class="col-md-6 col-xs-12">
                        <b>system log:</b> ${data.syslog}
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-xs-12">
                        <b>last access:</b> ${data.lastAccess}
                     </div>
                  </div>
                  </td></tr>`)
               })
            })
         })
      .fail((error) => console.log(error))
      .always(() => console.log('Done'));
});
</script>

Open in new window

That's the fruit of our labors yesterday. Line #38 is what I need to GET when I first open up this form. How do I implement that into this process?

BTW: I promise you, friend, if I could, I'd be buying you lunch for all this! Thank you!

Chris Stanyon

5/7/2020

Hey Bruce,

First off, your $(...).modal error sounds like you've not got the BootStrap Javascript loaded into your page. Make sure you include the CSS AND the JS for Bootstrap.

Regarding your other script - from line 37, you need to change that to match what we've been talking about here. Create the row as an object, append the data to the button (add a data attribute), append the object to the HTML. This time, the data you attach to the button will be the data you get from the second GET call. Then when you click on the button it's just a case of retreiving property values and setting DOM element values (textboxes / spans / selects etc - whatever you need in your Modal)

Bruce Gust

5/7/2020

ASKER

Alright, Chris! Here's my code, here's what I understand and here's where I'm falling short:

$(document).ready( function() {
let accountId=$('#accountId').val();
$.get("http://devtest.simplevoip.us/ajax_functions.php?fn=get_account_devices&accountId="+accountId)
.done((data) => {
$.each(data, (i, elem) => {
let row = `<tr style="background-color:#ccc;"><td style="border-right:1px solid #fff;">${elem.deviceId}</td><td style="border-right:1px solid #fff;">${elem.name}</td><td><button data-device-id='${elem.deviceId}' class='detail'>More Detail</button></td></tr>`
$.get("http://devtest.simplevoip.us/ajax_functions.php?fn=get_config_info&deviceId=" + elem.deviceId)
.done((data) => { //right here

Right here is where I need to take the "data" coming from the second "get" and somehow append it to the "info" that represents the object attached to the button.

This:

$('button', row).data('info', elem)

"row" was defined as a combination of HTML and data:

let row = $(`<tr><td>${elem.deviceId}</td><td>${elem.name}</td><td><button>More Detail</button></td></tr>`)

With "$('button', row).data('info', elem), what does "row" represent? Is it just a way of helping the system know where the "elem" dynamic exists so that it can be represented by "info?"

The reason I'm asking is because when I get to right here, I don't want to add any additional HTML to the current page, just data.

I'm hoping you hear my question.

How do I attach data to the button in addition to what's already there and not any HTML. The fact that the "button" references "row" makes me think I'm getting ready to more rows to the current page and I don't want to do that.

Bruce Gust

5/7/2020

ASKER

Never mind!

I got it!

$(document).ready( function() {
let accountId=$('#accountId').val();
$.get("http://devtest.simplevoip.us/ajax_functions.php?fn=get_account_devices&accountId="+accountId)
  .done((data) => {
$.each(data, (i, elem) => {
  let row = $(`<tr><td>${elem.deviceId}</td><td>${elem.name}</td><td><button>More Detail</button></td></tr>`)
  //this is where you're sticking in new code
  $.get("http://devtest.simplevoip.us/ajax_functions.php?fn=get_config_info&deviceId=" + elem.deviceId)
.done((data) => {
  $('button').data('info', data);
})
  //$('button', row).data('info', elem)
  $('#michelle').append(row)
})
  })
  .fail((error) => console.log(error))
  .always(() => console.log('Done'));

  $('#michelle').on('click', 'button', function(e) {
  let info = $(this).data('info'); // retrieve the data from the button
  console.log(info);
  $('input[name=mac]').val( info.mac ); // set the values of your form fields
  $('#exampleModal').modal('show'); // show the Modal form (you will need to add the ID to your Modal HTML)
  });
});
</script>

I'm not done, yet, but I figured that piece out...!

Bruce Gust

5/7/2020

ASKER

And I understand the significance of "row." That's how you're ensuring that each "more detail" button is retrieving the information that corresponds to that "row." Otherwise you get the same data over and over.

Bruce Gust

5/7/2020

ASKER

I'm assigning my fields now. How do I display the detail pertaining to customerTemplateID?

That's the nonsense that has to "mined" using http://devtest.simplevoip.us/ajax_functions.php?fn=get_config_options&accountId=

How do I incorporate that into the modal?

Chris Stanyon

5/7/2020

Pretty much spot on Bruce. The significane of 'row' was simply as a filter. In jQuery, when we're selecting objects we normally do this:

$('.someClass')...

That means select every element with the someClass.

Now we can limit that by doing stuff like this:

$('.someClass', '#myDiv')...

Now that selects all elements with someClass but only from within the #myDiv element.

So, when we do this:

let row = $('<tr><td><button>...</button></tr>')

we explcitly create a new object, and then this:

$('button', row).data

says select the button but only from that object.

If you do

$('button').data(...)

that will select all buttons on the page and attach the same data to each, which is why we need the limiter / filter.

Make sense ??

Chris Stanyon

5/7/2020

Hmmm. Regarding the customerTemplateID, you may need to make yet another round trip to the server, which means your calls back to the server are growing rapidly, probably giving rise to performance issues.

Do you have any control over the endpoints i.e http://devtest.simplevoip.us/ajax_functions.php

If you do, I would strongly suggest adding a new endpoint so that you can retreive the data in one go. As it stands, you're running n+1 queries (where n is the number of records returned). If you now need to add another request, you're going to end up with n*2+1 (21 round trips for just 10 records!)

Bruce Gust

5/7/2020

ASKER

No, Chris, I don't have any control over that. I've got use what they're giving me. I've got not input on that one, that's just the nature of the beast for right now.

ASKER CERTIFIED SOLUTION

Chris Stanyon

5/7/2020