Function call from BS list items

1

Is there a way to manually fill a bootstrap list “items” property with each item containing a function call? A function call with some parameters?

I have tried the following but having no luck getting it working. I’ve tried using HTML codes for the quotes as well as escaping the quotes with ’ but that is not working either. Maybe there is another way? I’ve searched for a solution but nothing seems to work for BS listbox when pasted into the items property.

This is what I am trying to paste into the “items” property:

<a href="javascript:getInfo('Olympus','BF40','12033','3.50');"><h4>Camera 1</h4><h5>BF40</h5></a>
<a href="javascript:getInfo('Pentax','BF60','12056','3.65');"><h4>Camera 2</h4><h5>BF60</h5></a>
<a href="javascript:getInfo('Nikon','BF70','12087','3.80');"><h4>Camera 3</h4><h5>BF70</h5></a>

Then of course the function which is called when a list item is clicked:

function getInfo(brand,model,serial,size) {
	//process info here
}
2

This may move you in a little different direction than you intended, but the html data attribute is your friend in these kinds of situations. You can name it whatever you wish after the hyphen, so I used data-info for this example.

Assuming you wish to run a test of this code using the BS Listgroup sample project in AppStudio (the JS version):

  1. Comment out the existing sample project code wtihin Form1.
  2. Paste the following code into the Form1 code window:
function Main() {
  $('#Listgroup2_0').attr('data-info', 'Olympus,BF40,12033,3.50');
  $('#Listgroup2_1').attr('data-info', 'Pentax,BF60,12056,3.65');
  $('#Listgroup2_2').attr('data-info', 'Nikon,BF70,12087,3.80');
  $('#Listgroup2_3').attr('data-info', 'Minolta,XG-1,10255,2.20');
}

$(Listgroup2).on("click", clickHandler);

function clickHandler(e) {
  const [brand, model, serial, size] = e.target.dataset.info.split(',');
  console.log(brand, model, serial, size);
}

Some explanation is in order:

  1. Because I was using sample project code, I had to hard code my data attribute text at run time using Sub Main(), which also ensures the controls are already created on app start.
  2. I removed some of the quotes from around your text strings because you can only have quotes on the ends in attributes strings and I knew the individual data pieces (brand, model, serial, size) could be pulled out later.
  3. I used a bit of ES6 JavaScript to shorten the code somewhat, plus it’s fun.
  4. Your question includes a list of anchor tags instead of AppStudio’s provided button list or unordered list options. BS allows for an <a> list but AppStuido does not, at least not out of the box using the provided controls.

There are other ways to do what you seek to do, but this may be a simple option for you.

Kind regards,
Doug

3

Thank you Doug. That is a great solution!