CODEWITHSUNDEEP
htmljquerydialog
Sachin
Sachin

Reputation: 39

Open Dialogbox with Jquery

I am trying to open up a website(Google DialogFlow Chat BOT) in my website using JQuery load function.

My Code is as shown below.

<a href="#" id="configs">ChatBOT</a>
<div id="configs-dialog"  title="ChatBOT">
        </div>

    
    $("#configs").ready( function() {
                    $( "div#configs-dialog" ).dialog({
                        autoOpen: false,
                        height: 400,
                        width: 600,
                        modal: true,
                        buttons: {
                            Close: function() {
                                $( this ).dialog( "close" );
                            }
                        }
                    });
                    <!-- On Click function for terms dialog -->
                    $('#configs').click(function(){ $('div#configs-dialog').dialog('open'); });
                        
                } );
                <!-- load configs html -->
                $(function(){
                    $("#configs-dialog").load("https://console.dialogflow.com/api-client/demo/embedded/bbdd7d51-741c-4308-82c0-fc70073b057e"); 
                });

I am not able to load the website into the dialog window. It opens up a blank dialog box when I click on the link. Can any one please help me with this?

Upvotes: 0

Views: 234

Answers (1)

Twisty
Twisty

Reputation: 30883

With this sort of element, you cannot use .load() as it will only load the elements and not the JavaScript that is needed.

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

Consider using an iFrame instead.

$(function() {
  $("#configs-dialog").dialog({
    autoOpen: false,
    height: 400,
    width: 600,
    modal: true,
    buttons: [{
      text: "Close",
      class: "ui-state-primary",
      click: function(e) {
        var results = confirm("Are you sure you want to close the ChatBOT?");
        if (results) {
          $(this).dialog("close");
        }
        return false;
      }
    }]
  });

  $('#configs').click(function() {
    $('#configs-dialog').dialog('open');
    $("#configs-dialog")
      .html("")
      .append($("<iframe>", {
          class: "configs-dialog-frame",
          src: "https://console.dialogflow.com/api-client/demo/embedded/bbdd7d51-741c-4308-82c0-fc70073b057e"
        })
        .css("height", $("#configs-dialog").height() - 5));
  });
});
.ui-dialog .ui-dialog-titlebar {
  display: none;
}

.ui-dialog #configs-dialog.ui-dialog-content {
  padding: 0;
}

.configs-dialog-frame {
  border: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a href="#" id="configs">ChatBOT</a>
<div id="configs-dialog" title="ChatBOT"></div>

Upvotes: 1

Related Questions