logo标签列表

Dojo对话框用于图像和文本弹出窗口

javascripthtmldojodijit.dialog
3
我是一个能翻译文本的有用助手。下面是需要翻译的内容：

我正在尝试使用dojo对话框部件创建显示文本和图像的对话框，但无论是针对文本还是图像通过innerhtml传递细节，弹出窗口都不会出现。

文本细节可以正常工作，但图像细节不能显示。我在下面包含了我的代码：

HTML：

<div data-dojo-type="dijit.Dialog" title="SUB Details"
    style="width: 500px; height: 150px; display:none; 
    id="subDetailDialog"
    data-dojo-id="kycDetailDialog">
    <br>
    <table border ='0px' align='center' width='400' class='detailedInfo' id='detailedInfo' >
        <tr class='even'>
            <td style="width:40%"><strong>First Name</strong></td><td><strong>:</strong></td>
            <td id='firstNameRow' style="width:40%"></td>
        </tr>
        <tr class='odd'>
            <td><strong>Date of birth</strong></td><td><strong>:</strong></td>
            <td id='dobRow'></td>
        </tr>
        <tr class='even'>
            <td><strong>Subscriber Image</strong></td><td><strong>:</strong></td>
            <td id='imgRow'></td>
        </tr>
    </table>
</div>

Javascript:

dojo.byId("firstNameRow").innerHTML = data.firstName;
dojo.byId("dobRow").innerHTML = data.dob;
dojo.byId("imgRow").innerHTML = '<img src="/images/123456789_.jpg" border="0" width="32" height="32"/>';

subDetailDialog.show();
3个回答
0

我不知道你哪里出了错，请确保检查图像是否成功加载（在控制台中）。

另一个要点是，您必须调用 data-dojo-id 标识符来显示对话框 kycDetailDialog，而不是 subDetailDialog。

下面是一个可帮助您的工作示例（使用现代 dojo AMD）。

require(["dijit/Dialog", "dojo/dom","dojo/on","dijit/form/Button","dojo/ready","dojo/parser"],
   function(Dialog,Dom,On,Button,ready,parser){
        parser.parse();
     ready(function(){
        
            On(Dom.byId("btn"),"click",function(e){
           kycDetailDialog.show();
            });
          
            //data you grab from ajax or other stuff ...
            var data = {
               firstName:"bRIMOs",
               dob:"21/01/1989"
            }
            Dom.byId("firstNameRow").innerHTML = data.firstName;
            Dom.byId("dobRow").innerHTML = data.dob;
            Dom.byId("imgRow").innerHTML = '<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg" border="0" width="32" height="32"/>'
            kycDetailDialog.show();
        });    
    }
);
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.3/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<body class="claro">
  <div data-dojo-type="dijit/form/Button" id="btn">Show subscriber info </div>
  <div data-dojo-type="dijit/Dialog" title="SUB Details" style="width: 500px; height: 150px; display:none;" id="subDetailDialog" data-dojo-id="kycDetailDialog"><br>
    <table border='0px' align='center' width='400' class='detailedInfo' id='detailedInfo'>
      <tr class='even'>
        <td style="width:40%"><strong>First Name</strong></td>
        <td><strong>:</strong></td>
        <td id='firstNameRow' style="width:40%"></td>
      </tr>
      <tr class='odd'>
        <td><strong>Date of birth</strong></td>
        <td><strong>:</strong></td>
        <td id='dobRow'></td>
      </tr>
      <tr class='even'>
        <td><strong>Subscriber Image</strong></td>
        <td><strong>:</strong></td>
        <td id='imgRow'></td>
      </tr>
    </table>
  </div>
</body>

如果您想测试代码，这里有一个 JSFiddle -> FIDDLE

0
0

试试这个。 HTML：

<div data-dojo-type="dijit.Dialog" title="SUB Details"
    style="width: 500px; height: 150px; display:none; 
    id="subDetailDialog"
    data-dojo-id="kycDetailDialog">
    <br>
    <table border ='0px' align='center' width='400' class='detailedInfo' id='detailedInfo' >
        <tr class='even'>
            <td style="width:40%"><strong>First Name</strong></td><td><strong>:</strong></td>
            <td id='firstNameRow' style="width:40%"></td>
        </tr>
        <tr class='odd'>
            <td><strong>Date of birth</strong></td><td><strong>:</strong></td>
            <td id='dobRow'></td>
        </tr>
        <tr class='even'>
            <td><strong>Subscriber Image</strong></td><td><strong>:</strong></td>

            <!-- CHANGED -->
            <td><img src="" id='imgRow'></td>

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

Javascript：

dojo.byId("firstNameRow").innerHTML = data.firstName;
dojo.byId("dobRow").innerHTML = data.dob;

// CHANGED
dojo.byId("imgRow").src = "/images/123456789_.jpg";
dojo.byId("imgRow").style = "border: 0; height: 32px; width: 32px;";

subDetailDialog.show();
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接