Javascript 无法将外部html加载到jquery对话框_Javascript_Jquery_Html_Google Apps Script

Javascript 无法将外部html加载到jquery对话框

javascript jquery html google-apps-script

Javascript 无法将外部html加载到jquery对话框,javascript,jquery,html,google-apps-script,Javascript,Jquery,Html,Google Apps Script,这是我的一些代码 function addLoad(){ //$("#dialog-modal")load('truckload.html').dialog({modal:true}); $("#dialog-modal").dialog( { width: 600, height: 400, open: function(event, ui) { $(this).load('truckload.htm

这是我的一些代码

     function addLoad(){

     //$("#dialog-modal")load('truckload.html').dialog({modal:true});
     $("#dialog-modal").dialog(
     {
     width: 600,
     height: 400,

     open: function(event, ui)
     {
     $(this).load('truckload.html');
     //$("#dialog-modal").load(url).dialog({modal:true});
        var textarea = $('<textarea style="height: 276px;">');
        $(textarea).redactor({
            focus: true,
            autoresize: false,

            initCallback: function()
            {
                this.set('<p>Lorem...</p>');
            }

            });
            }
            });
     }

</script>
<div id="dialog-modal" title="Add Information to calendar" style="display: none;"></div>

<div id='popup'>
Click Me
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#popup").click(function(){
   // call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
  });

});

 function showModal(htmlContent){
   var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
           .html(htmlContent)
           .dialog({
               autoOpen: false,
               modal: true,
              height: 350,
               width: 600,
               title: "truckload"
           });
    $dialog.dialog('open');
  }
</script>

函数addLoad（）{
//$（“#对话框模式”）加载（'truckload.html'）。对话框（{modal:true}）；
$（“#对话框模式”）.dialog(
{
宽度：600，
身高：400，
打开：功能（事件、用户界面）
{
$（this.load（'truckload.html'）；
//$（“#dialog modal”）.load（url.dialog（{modal:true}）；
var textarea=$（''）；
$（textarea）.redactor({
焦点：对，
自动调整大小：false，
initCallback:function（）
{
这个.set（'Lorem…'）；
<div id='popup'>
Click Me
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#popup").click(function(){
   // call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
  });

});

 function showModal(htmlContent){
   var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
           .html(htmlContent)
           .dialog({
               autoOpen: false,
               modal: true,
              height: 350,
               width: 600,
               title: "truckload"
           });
    $dialog.dialog('open');
  }
</script>

}
});
}
});
}

AddLoad由一个按钮调用，truckload.html是我的google脚本项目中包含的一个文件。所有被注释掉的行都是我尝试过的使其工作的不同方式

<div id='popup'>
Click Me
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#popup").click(function(){
   // call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
  });

});

 function showModal(htmlContent){
   var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
           .html(htmlContent)
           .dialog({
               autoOpen: false,
               modal: true,
              height: 350,
               width: 600,
               title: "truckload"
           });
    $dialog.dialog('open');
  }
</script>

我的目标是，当调用addLoad时，将打开一个对话框并显示truckload页面信息。我做错了什么？这可能吗

<div id='popup'>
Click Me
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#popup").click(function(){
   // call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
  });

});

 function showModal(htmlContent){
   var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
           .html(htmlContent)
           .dialog({
               autoOpen: false,
               modal: true,
              height: 350,
               width: 600,
               title: "truckload"
           });
    $dialog.dialog('open');
  }
</script>

任何帮助都将不胜感激

<div id='popup'>
Click Me
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#popup").click(function(){
   // call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
  });

});

 function showModal(htmlContent){
   var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
           .html(htmlContent)
           .dialog({
               autoOpen: false,
               modal: true,
              height: 350,
               width: 600,
               title: "truckload"
           });
    $dialog.dialog('open');
  }
</script>

谢谢

<div id='popup'>
Click Me
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#popup").click(function(){
   // call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
  });

});

 function showModal(htmlContent){
   var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
           .html(htmlContent)
           .dialog({
               autoOpen: false,
               modal: true,
              height: 350,
               width: 600,
               title: "truckload"
           });
    $dialog.dialog('open');
  }
</script>

Loren首先构建弹出窗口，然后通过链接或按钮调用弹出窗口。见此：

<div id='popup'>
Click Me
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#popup").click(function(){
   // call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
  });

});

 function showModal(htmlContent){
   var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
           .html(htmlContent)
           .dialog({
               autoOpen: false,
               modal: true,
              height: 350,
               width: 600,
               title: "truckload"
           });
    $dialog.dialog('open');
  }
</script>

确保您拥有正确的jquery资源：

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<div id='popup'>
Click Me
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#popup").click(function(){
   // call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
  });

});

 function showModal(htmlContent){
   var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
           .html(htmlContent)
           .dialog({
               autoOpen: false,
               modal: true,
              height: 350,
               width: 600,
               title: "truckload"
           });
    $dialog.dialog('open');
  }
</script>

代码JS

 var webPage = "http://www.cbc.ca";

 var $dialog = $('<div></div>')
           .html('<iframe style="border: 0px; " src="' + webPage + '" width="80%"   [enter link description here][2]height="80%"></iframe>')
           .dialog({
               autoOpen: false,
               modal: true,
               height: 650,
               width: 600,
               title: "Add Information to calendar"
           });
 $("#popup").on("click", function(){
  $dialog.dialog('open');
 });

<div id='popup'>
Click Me
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#popup").click(function(){
   // call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
  });

});

 function showModal(htmlContent){
   var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
           .html(htmlContent)
           .dialog({
               autoOpen: false,
               modal: true,
              height: 350,
               width: 600,
               title: "truckload"
           });
    $dialog.dialog('open');
  }
</script>

var网页=”http://www.cbc.ca";
变量$dialog=$（''）
.html（“”）
.对话({
自动打开：错误，
莫代尔：是的，
身高：650，
宽度：600，
标题：“将信息添加到日历”
});
$（“#弹出窗口”）。在（“单击”，函数（）上）{
$dialog.dialog（'open'）；
});

如果您试图从HtmlService调用此函数，它将如下所示：

<div id='popup'>
Click Me
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#popup").click(function(){
   // call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
  });

});

 function showModal(htmlContent){
   var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
           .html(htmlContent)
           .dialog({
               autoOpen: false,
               modal: true,
              height: 350,
               width: 600,
               title: "truckload"
           });
    $dialog.dialog('open');
  }
</script>

Code.gs文件

// render initial html page
function doGet(event){
 return HtmlService.createTemplateFromFile('index').evaluate(); 
}

// call from click on page (or if using UiApp)
function addLoad(){
  try{
    // get the html content from the truckload.html page and return it to the showModal                function
    return HtmlService.createHtmlOutputFromFile('truckload').getContent();
  }catch(err){
    Logger.log(err.lineNumber + ' - ' + err);
  }
}

<div id='popup'>
Click Me
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#popup").click(function(){
   // call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
  });

});

 function showModal(htmlContent){
   var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
           .html(htmlContent)
           .dialog({
               autoOpen: false,
               modal: true,
              height: 350,
               width: 600,
               title: "truckload"
           });
    $dialog.dialog('open');
  }
</script>

index.html文件

<div id='popup'>
Click Me
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#popup").click(function(){
   // call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
  });

});

 function showModal(htmlContent){
   var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
           .html(htmlContent)
           .dialog({
               autoOpen: false,
               modal: true,
              height: 350,
               width: 600,
               title: "truckload"
           });
    $dialog.dialog('open');
  }
</script>


点击我
$（文档）.ready（函数（）{
$（“#弹出窗口”）。单击（函数（）{
//调用脚本运行程序
google.script.run.withSuccessHandler（showModal.addLoad（）；
});
});
函数showModal（htmlContent）{
变量$dialog=$（''）
.html（html内容）
.对话({
自动打开：错误，
莫代尔：是的，
身高：350，
宽度：600，
标题：“卡车”
});
$dialog.dialog（'open'）；
}

最后是truckload.html文件（无论您希望呈现何种html）

<div id='popup'>
Click Me
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#popup").click(function(){
   // call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
  });

});

 function showModal(htmlContent){
   var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
           .html(htmlContent)
           .dialog({
               autoOpen: false,
               modal: true,
              height: 350,
               width: 600,
               title: "truckload"
           });
    $dialog.dialog('open');
  }
</script>

下面是一个粗略的例子：

<div id='popup'>
Click Me
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#popup").click(function(){
   // call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
  });

});

 function showModal(htmlContent){
   var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
           .html(htmlContent)
           .dialog({
               autoOpen: false,
               modal: true,
              height: 350,
               width: 600,
               title: "truckload"
           });
    $dialog.dialog('open');
  }
</script>

您的浏览器控制台有错误吗？@teatimer我没见过。但当对话框加载时，似乎也没有显示任何内容。我在对话框代码之前和之后添加了注释，它们都显示在对话框代码之间，没有任何错误。我尝试运行此操作，但得到一个错误：TypeError:无效值用作弱映射键我确实获得了要显示的对话框，但页面没有显示。UGGG您正在运行哪个版本的jquery？以下是页面上声明的内容：更新了答案--Fiddle可以工作，因此您的代码中可能还有其他内容？在上面的帖子中没有显示，但在我使用的index.html文件中，但它也可以与您发布的CDN一起工作：

<div id='popup'>
Click Me
</div>

<script type="text/javascript">
$(document).ready(function() {
  $("#popup").click(function(){
   // call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
  });

});

 function showModal(htmlContent){
   var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
           .html(htmlContent)
           .dialog({
               autoOpen: false,
               modal: true,
              height: 350,
               width: 600,
               title: "truckload"
           });
    $dialog.dialog('open');
  }
</script>