bootstrap popover: put values into multiple textboxes with one popover

Question

I have run into a weird bootstrap popover issue. In my page I have 2 text boxes with buttons that opens a popover. Popover has an input box and when data is entered into the text box within popover, value needs to sent back to the parent text box that opened the popover.

Everything works fine until here, but when i click on to submit the value I entered in the popover, same values are added to both the text boxes in the page. Below is the code:

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('.showPopover').popover({
            html: true,
            placement: "bottom",
            title: function () {
                return $("#popover-head").html();
            },
            content: function () {
                return $("#popover-content").html();
            }
        });
        $('.showPopover').click(function () {
            var cTextBox = '#' + $(this).prev().attr("id");
            $('#hdnCalculatefteFor').val(cTextBox);
        });

        $(document).on("click", ".close", function () {
            $(".showPopover").popover('hide');
        });

        $(document).on("click", ".getData", function () {
            var ctl = $('#hdnCalculatefteFor').val();
            var ctlInput = $('#input1').val();
            $(ctl).val(ctlInput);
        });
    });
</script>
<div class="row">
    <div class="col-md-2">
        <div id="div1" class="form-group">
            <label class="required">Text Box 1</label>
            <div class="input-group">
                <asp:TextBox ID="txt1" runat="server" class="form-control" ClientIDMode="Static"></asp:TextBox>
                <span id="s1" style="cursor:pointer;" class="form-control showPopover" >
                        <i class="icon-list"></i>
                </span>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div id="div2" class="form-group">
            <label class="required">Text Box 2</label>
            <div class="input-group">
                <asp:TextBox ID="txt2" runat="server" class="form-control" ClientIDMode="Static"></asp:TextBox>
                <span id="s2" style="cursor:pointer;" class="form-control showPopover">
                    <i class="icon-list"></i>
                </span>
            </div>
        </div>
    </div>
</div>
<asp:HiddenField ID="hdnCalculatefteFor" ClientIDMode="Static" runat="server" />
<div id="popover-head" class="hide" >
    Test
    <button type="button" class="close" data-dismiss="popover" aria-hidden="true">×</button>
</div>
<div id="popover-content" class="hide">
    <input type="text" id="input1" />                
    <button type="button" id="btn" class="getData" value="Get"></button>    
</div>

Any suggestions on how to solve this problem?

Thanks, Navin

Answer 1

When you do this:

$('.showPopover').popover({...

you're creating a popover for each of the elements with the class showPopover. Which might be fine, but because you are resuing content, especially input elements, you will get them duplicated. So if you run your code and look at the source generated, you will see that you have 2 x input with id="input1". Therefore you are getting issues with the values cross contaminating your destinations.

A fix would be to have separate content for each popover, or to have the onclick event of the button get the value of the nearest input to find the data to populate.

e.g:

var ctlInput = $(this).siblings("#input1").val();

Here is a codepen demonstrating that: http://codepen.io/simoncowie/pen/lyGoK