Question

我尝试使用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();

Answer 1

我不知道你哪里弄错了，一定要检查图片是否已成功加载（在控制台中），

另一点是，您必须调用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>

如果你想测试代码，这是一个小提琴 - ＆gt; FIDDLE

Answer 2

试试这个。 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();

Answer 3

在这种情况下，您还可以使用Dojo Tooltip连接弹出图像 Doc：https://dojotoolkit.org/reference-guide/1.10/dijit/Tooltip.html

<img id="image" src="myimage.jpg" height="200px" width="200px">

new Tooltip({
   connectId: ["image"],
   defaultPosition: "after",
   label: 'TEXT ...'
});

弹出图像和文本的Dojo对话框

HTML：

使用Javascript：

3 个答案: