Dojo dialog for Image and text pop up

Question

Dojo dialog for Image and text pop up

1.5k Views Asked by user3454189 At 13 March 2017 at 18:36

I'm trying to create a dialog which shows text and image using dojo dialog widget, whenever I'm passing image details through innerhtml pop-up is not appearing either for text or image.

It works fine for text details but the image details don't show. I've included my code below:

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();

Original Q&A

There are 3 best solutions below

**Bourbia Brahim** · Answer 1 · 2017-03-14T08:07:04.260000

I dont know where you have been mistaken, be sure to check if the image was successfuly loaded (in console ) ,

Another point is that you have to call the data-dojo-id identifier to show the dialog kycDetailDialog instead of subDetailDialog .

below a working snippet that may help you ( using modern 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>

Here is a fiddle if you want to test the code -> FIDDLE

**Stefano** · Answer 2 · 2017-04-11T13:10:02.173000

Try this. 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();

**Stefano** · Answer 3 · 2017-05-29T10:18:21.863000

You can also use Dojo Tooltip to connect pop up with an image in this case.
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 dialog for Image and text pop up

HTML:

Javascript:

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in DOJO

Related Questions in DIJIT.DIALOG

Trending Questions

Popular # Hahtags

Popular Questions