1

In a form I have 2 inputs. In the 1st input I use a datalist which I load it through JSON and the 2nd input is autocomplete it when the 1st input is changed.

Till here all works fine!

I added a new button, which I use popover from bootstrap which I want to show some text there depending the selection of the user (as above). The text I want to show is the information of the element labels.

I read a relevant question but I haven't succeeded till now.. 

var dataList = $('.products');
var jsonOptions = [{
  "product": "11111",
  "description": "description 1",
  "labels": [{
    "version": "01",
    "quantity": 500
  }, {
    "version": "02",
    "quantity": 800
  }, ]
}, {
  "product": "22222",
  "description": "description 2",
  "labels": [{
    "version": "01",
    "quantity": 900
  }, {
    "version": "02",
    "quantity": 100
  }, ]
}, {
  "product": "33333",
  "description": "description 3",
  "labels": [{
    "version": "01",
    "quantity": 200
  }, {
    "version": "02",
    "quantity": 4300
  }, ]
}];

jsonOptions.forEach(function(item) {

  var option = '<option value="' + item.product + '">' + item.description + '</option>';

  dataList.append(option);
});

$(function() {
  $('body').on('input', '.product,.products', function() {

    var i = this.value;
    var description = "";
    var productsInBox = 0;
    var text = "";

    jsonOptions.forEach(function(a) {
      if (a.product == i) {
        description = a.description;
        productsInBox = a.productsInBox;
        for (let i = 0, l = a.labels.length; i < l; i++) {
          text += "version " + a.labels[i].version + " has " + a.labels[i].quantity + "\n"
        }

      }
    });
    $(this).closest('.form-group').find('.description').val(description);
    $(this).closest('.form-group').find('.mytext').val(text);
    console.log(text);

  });
});

$('[data-toggle="popover"]').popover();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<form id="form1" method="post" class="form-horizontal" role="form">
  <fieldset>
    <div class="form-group">
      <div class="col-sm-2">
        <input type="text" list="products" class="form-control product" name="product[]" />
        <datalist id="products" class="products"></datalist>
      </div>

      <div class="col-sm-3">
        <input id="" type="text" class="form-control description" name=" description[]" />
      </div>
      
      
      <div class="col-sm-3" style="margin-left: 10px;">
        <button type="button" class="btn btn-info btn-group-sm mytext" data-toggle="popover" data-content="text to change to like:  version 01 has 500 "><i class="fa fa-info"></i></button>
      </div>

    </div>
  </fieldset>
</form>
Community
  • 1
  • 1
yaylitzis
  • 5,354
  • 17
  • 62
  • 107

2 Answers2

1

You can use another forEach loop to iterate over the labels and get the versions and quantities for the current selection, append them to a predefined empty variable and then add them to the popover using attr() method:

var dataList = $('.products');
var jsonOptions = [{
  "product": "11111",
  "description": "description 1",
  "labels": [{
    "version": "01",
    "quantity": 500
  }, {
    "version": "02",
    "quantity": 800
  }, ]
}, {
  "product": "22222",
  "description": "description 2",
  "labels": [{
    "version": "01",
    "quantity": 900
  }, {
    "version": "02",
    "quantity": 100
  }, ]
}, {
  "product": "33333",
  "description": "description 3",
  "labels": [{
    "version": "01",
    "quantity": 200
  }, {
    "version": "02",
    "quantity": 4300
  }, ]
}];

jsonOptions.forEach(function(item) {

  var option = '<option value="' + item.product + '">' + item.description + '</option>';

  dataList.append(option);
});

$(function() {
  $('body').on('input', '.product,.products', function() {

    var i = this.value;
    var description = "";
    var productsInBox = 0;
    var text = "";
    var version = '';
    var quantity = '';
    jsonOptions.forEach(function(a) {
      if (a.product == i) {
        description = a.description;
        productsInBox = a.productsInBox;
        text = a.labels
        a.labels.forEach(function(el) {
          version += el.version + " ";
          quantity += el.quantity + " ";
        });
      }
    });
    
    $('[data-toggle="popover"]').attr('data-content', "versions are: " + version + ' and quantity are: ' + quantity).data('bs.popover').setContent();
    $(this).closest('.form-group').find('.description').val(description);
    $(this).closest('.form-group').find('.mytext').val(description);


  });
});

$('[data-toggle="popover"]').popover();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<form id="form1" method="post" class="form-horizontal" role="form">
  <fieldset>
    <div class="form-group">
      <div class="col-sm-2">
        <input type="text" list="products" class="form-control product" name="product[]" />
        <datalist id="products" class="products"></datalist>
      </div>

      <div class="col-sm-3">
        <input id="" type="text" class="form-control description" name=" description[]" />
      </div>

      <div class="col-sm-3" style="margin-left: 10px;">
        <button type="button" class="btn btn-info btn-group-sm mytext" data-toggle="popover" data-content="text to change to like:  version 01 has 500 "><i class="fa fa-info"></i></button>
      </div>

    </div>
  </fieldset>
</form>
Ionut Necula
  • 11,107
  • 4
  • 45
  • 69
  • 1
    I was close enough! :) Thx a lot! – yaylitzis Mar 24 '17 at 09:13
  • @yaylitzis, yes you were. You're welcome. Happy to help. – Ionut Necula Mar 24 '17 at 09:13
  • 1
    @yaylitzis, I've also looked into the `popover()` documentation and I updated my answer to have a live change on the popup when it's open also. Just added the extra `.data('bs.popover').setContent();` to `$('[data-toggle="popover"]').attr('data-content', "versions are: " + version + ' and quantity are: ' + quantity).data('bs.popover').setContent();`. Now, when the popup is open and you change the values to the inputs you can see the change in the popup. – Ionut Necula Mar 24 '17 at 09:19
  • Great add!!! Can you alter the `$('[data-toggle="popover"]').attr('data-content'.. etc` to be like the below line? Because, I use an add button which I populate these option. I tried this `$(this).closest('.form-group').find('[data-toggle="popover"]').attr etc..` and always the 1st opens – yaylitzis Mar 24 '17 at 09:33
  • @yaylitzis, I will have to see more code including the add button. Please make a https://jsfiddle.net with the whole code including the button to be able to replicate the issue you say about that the first one opens too. – Ionut Necula Mar 24 '17 at 09:38
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/138909/discussion-between-ionut-and-yaylitzis). – Ionut Necula Mar 24 '17 at 09:39
0

If I understand you correctly, you will need to update attribute data-content based on selected value.

<div class="col-sm-3" style="margin-left: 10px;">
   <button type="button" class="btn btn-info btn-group-sm mytext" data-toggle="popover" data-content="text to change to like:  version 01 has 500 ">  
   <i class="fa fa-info"></i></button>
</div>

Updated your snippet. Probably you will need to handle: how to close popover when selection is changed

var dataList = $('.products');
var jsonOptions = [{
  "product": "11111",
  "description": "description 1",
  "labels": [{
    "version": "01",
    "quantity": 500
  }, {
    "version": "02",
    "quantity": 800
  }, ]
}, {
  "product": "22222",
  "description": "description 2",
  "labels": [{
    "version": "01",
    "quantity": 900
  }, {
    "version": "02",
    "quantity": 100
  }, ]
}, {
  "product": "33333",
  "description": "description 3",
  "labels": [{
    "version": "01",
    "quantity": 200
  }, {
    "version": "02",
    "quantity": 4300
  }, ]
}];

jsonOptions.forEach(function(item) {

  var option = '<option data- value="' + item.product + '">' + item.description + '</option>';

  dataList.append(option);
  
});

$(function() {
  $("#clear").click(function (e) {
    $(".product, .description").val("");
    $('.mytext').popover('hide');
  });

  $('body').on('input', '.product', function() {

    var i = this.value;
    
    var description = "";
    var productsInBox = 0;
    var labelData = "";

    jsonOptions.forEach(function(a) {
      if (a.product == i) {
        description = a.description;
        productsInBox = a.productsInBox;
        labelData = 
          'product ' + a.product + ' | ' +
          'version: ' + a.labels[0].version + 
          ' | quantity: ' + a.labels[0].quantity + " | " +
          'version: ' + a.labels[1].version + 
          ' | quantity: ' + a.labels[1].quantity + "\r\n";
       }
    });
    
    $(this).closest('.form-group').find('.description').val(description);

    $(this).closest('.form-group').find('.mytext').attr("data-content", labelData);
    $('.mytext').popover('toggle').popover('show');

  });
});

// $('.mytext').popover();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<form id="form1" method="post" class="form" role="form">
  <fieldset>
    <div class="form-group">
      <a class="btn btn-danger" id="clear">clear</a>
    
      <div class="col-sm-2">
        <input type="text" list="products" class="form-control product" name="product[]" />
        <datalist id="products" class="products"></datalist>
      </div>

      <div class="col-sm-3">
        <input id="" type="text" class="form-control description" name=" description[]" />
      </div>

      <div class="col-sm-3">
        <button type="button" class="btn btn-info btn-group-sm mytext" data-toggle="popover" data-content="text to change to like:  version 01 has 500 "><i class="fa fa-info"></i></button>
        
        
      </div>

      

    </div>
  </fieldset>
</form>
Sudarpo Chong
  • 608
  • 4
  • 12