Question

当我使用welcome.jsp运行时，dojo会动态创建一个文本框。但是当我在index.jsp中调用带有ajax的welcome.jsp时，它只显示div元素。它不会在该div中创建一个文本字段。 ..........请有人帮帮我？听到的是代码。

                            index.jsp



<!DOCTYPE html>
<%@page import="java.util.*" %> <%@page import="org.hibernate.*,org.hibernate.cfg.*,example.*" %>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js"  data-dojo-config="parseOnLoad: true, isDebug: true"></script>

    <link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dojo/resources/dojo.css">
    <link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/tundra/tundra.css">
<script>
require(["dojox/layout/ContentPane"]);
function showCustomer(str)
{
var xmlhttp;    
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  alert("str is"+str);
xmlhttp.open("GET","welcome.jsp",true);
xmlhttp.send();
alert(4);
}
</script>
</head>
<body class="tundra">

<form action=""> 
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>


<option value="customer1">customer1</option>    

</select>
</form>
<br>
<div data-dojo-type="dojox/layout/ContentPane" id="txtHint" data-dojo-props="href: '/welcome.jsp', executeScripts: true">
    Customer info will be listed here...
</div>

</body>
</html>

                    welcome.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@page import="java.util.*" %> <%@page import="org.hibernate.*,org.hibernate.cfg.*,example.*" %>
<html>
<head>
    <title>Dojo DnD test</title>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js"  data-dojo-config="parseOnLoad: true, isDebug: true"></script>

    <link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/document.css">
    <link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/dijitTests.css">
    <body onload="vali();">
    </body>
<script>
dojo.require("dojo.dnd.Source");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
require(["dojox/layout/ContentPane"]);
var widgets = new Array();
var source;
var c=new Array();


dojo.ready(function() {




 for (var i = 0; i < 5; i++) {
     widgets.push(
     new dijit.form.TextBox({
         value: i,
         class: 'dojoDndItem',
     }).placeAt("source"));
 }

 source = new dojo.dnd.Source("source", {
     copyOnly: false
 });
 new dojo.dnd.Source("target");
});
setValue = function() {
    widgets[0].attr("value", (new Date).getTime());
};

insertNew = function() {
 widgets.push(
    new dijit.form.TextBox({
        value: widgets.length,
        class: 'dojoDndItem',
    }));

    source.insertNodes(true, [widgets[widgets.length-1].domNode]);
};
</script>

</head>
<body class="claro">
<form name="form1">
    <div dojoType="dijit.form.Button" onClick="setValue">
    set value textbox 0
</div>
<div dojoType="dijit.form.Button" onClick="insertNew">
    insert new textbox
</div>
<table>
<tr>
<td>
<div id="source" style="height: 200px; width: 200px; border: 1px solid red;">

</div>  </td>
<td><div id="target" style="height: 200px; width: 200px; border: 1px solid blue;">

</div></td></tr></table>

</form>
</body>
</html>

Answer 1

那是因为当您使用AJAX加载内容时，不会解释脚本。您必须使用eval()函数自行评估它们。或者，既然您正在使用Dojo，那么您可以查看dojox/layout/ContentPane模块。此模块允许您加载页面（通过AJAX请求）并执行其上的脚本，而不需要整个XMLHttpRequest或ActiveXObject开销（无需手动调用eval()）。

要使用dojox/layout/ContentPane执行此操作，您只需将身份<div>的{{1}}替换为：

#txtHint

您只需要确保加载Dojo，设置<div data-dojo-type="dojox/layout/ContentPane" id="txtHint" data-dojo-props="href: 'welcome.jsp', executeScripts: true"> Customer info will be listed here... </div>属性以便设置data-dojo-config属性，并且您需要确保通过以下方式导入parseOnLoad: true模块代码：

dojox/layout/ContentPane

可以在this JSFiddle上找到加载网页的完整示例（我将require(["dojox/layout/ContentPane", "dojo/parser"]);更改为href，以便再次加载主页，因为我没有/页）。

可以在此JSFiddle上找到以编程方式执行相同操作的另一个示例。

使用ajax在div中创建动态dojo文本字段？

1 个答案: