CODEWITHSUNDEEP
javascripttwitter-bootstrapiframepopup
T_E_M_A
T_E_M_A

Reputation: 580

Display iframe in Bootstrap popup

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

Upvotes: 0

Views: 3528

Answers (1)

voidzero
voidzero

Reputation: 594

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

Upvotes: 3

Related Questions