Display iframe in Bootstrap popup

Question

There are several buttons with hidden input. When a user clicks a button, it must display a popover with div block with an iframe . Its content's URL should consist from the address + value from hidden input.

The block to be displayed is:

<div id="myPopoverContent">
<div id="outerdiv">
<iframe src="http://ip-score.com/checkip/94.45.43.42" id="innerIframe" scrolling="no"></iframe>
</div>
</div>

But the iframe 's src attribute value must consist of http://ip-score.com/checkip/ + ip (from hidden input).

<div id="myPopoverContent">
<div id="outerdiv">
<iframe src="http://ip-score.com/checkip/94.45.43.42" id="innerIframe" scrolling="no"></iframe>
</div>
</div>

Here is my code:

<a id='pop' data-toggle='popover' data-trigger='focus'>
    Check
    <input id='ip_id' type='hidden' value='94.45.43.42'>
</a>

<a id='pop' data-toggle='popover' data-trigger='focus'>
    Check
    <input id='ip_id' type='hidden' value='83.218.164.204'>
</a>

<script type="text/javascript">
$(document).ready(function() {
    $('[data-toggle=popover]').popover({
        content: function() {
            return $(this).children("#ip_id").val();
        },
        placement: 'bottom'
    });
});
</script>

JsFiddle

Answer 1

for one thing, your markup would be bad as you've got duplicate id attributes. But the answer to your problem is pretty simple. Basically you just retrieve the value from the child element with name="ip_id" and manipulate the SRC attribute of an iframe inside a modal, then show it. I haven't tested this, but try something likeso:

<a  class='pop'>                  
    Check
    <input name='ip_id' type='hidden' value='94.45.43.42'> 
</a>

<a class='pop' data-toggle='popover' data-trigger='focus'>                  
    Check
    <input name='ip_id' type='hidden' value='83.218.164.204'> 
</a>            

<div class="modal fade" id="popWin">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">
          Popup
        </h4>
        <div id="err"></div>
      </div>
      <div class="modal-body">
        <iframe id="formWin" src="" style="width:500px; height:500px; border:0px; overflow: hidden; scrolling="yes">
        </iframe>            
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<script type="text/javascript">
$(document).ready(function(){

    $('.pop').click(function(){
        var srcVal = 'http://ip-score.com/checkip/' + $(this).find('[name="ip_id"]').val()
        $('#formWin').attr('src', srcVal);
        $('#popWin').modal('show');
    });

});
</script>

UPDATED : It's ugly as sin, but since you asked for it, this works:

$(document).ready(function(){
    var src = 'http://ip-score.com/checkip/'+$(this).children("#ip_id").val();
$('[data-toggle=popover]').popover({
    html : true, 
    content: function () {  
        return $('<iframe height="200" width="200"></iframe>').attr('src', src)

    },

    placement: 'bottom'
});
});

JSFiddle