loadurl

Load External URL

by WayBehind

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!DOCTYPE html>
<title>Test</title>
<body>
    <div class="container">
        <button class="btn btn-default btn-lg pop-form popbutton" data-container="body" data-toggle="popover" data-placement="bottom"> <i class="fa fa-arrow-left fa-lg orange"> My Button</i>

        </button>
         <h4>This button should load and reload external URL on every click. 
      At this time, the external URL is loaded only once and if the popover window is closed, 
      it will not reload the data.
    </h4>

         <h3>... also for some reason, the button is also disapearing here on Fiddle if you load() from a Fiddle URL.</h3>

         <h3>You can change the JS Google URL to JS fiddle URL to load but the button will disappear. It takes few secs to load the window!</h3>

        <div id="pop-head" class="hide">
             <h4 class="text-center"><i class="fa fa-list fa-lg grey"></i>&nbsp; My External Form</h4>

        </div>
        <div id="pop-content" style="width: 630px;">This is my Form that is loaded from external URL. Click the button and the form will disappear and will not realead. Why?</div>
    </div>
</body>

JavaScript

$(document).ready(function () {

    $('.pop-form').popover({
        html: true,
        title: function () {
            return $("#pop-head").html();
        },
        content: function () {
            $('#hidden-input').val(this.id);

            // set id from button id / blank default
            var id = this.id + '#load-container';
            return $("#pop-content").load(

            // change the google url to "/user/login/" to load JD Fiddle login page
            "//google.com" + id);
        }
    });

    // make popup larger
    var p = $('.popbutton').popover();
    p.on("show.bs.popover", function (e) {
        p.data()["bs.popover"].$tip.css("max-width", "630px");
    });


});