CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui-dialog
Gatocan
Gatocan

Reputation: 77

Open dialog with jquery

I have a dialog referenced by $imageDialog and I'm trying to open it with $imageDialog.dialog("open"), but it doesn't work.

The problem is that, by debugging, I've seen the $imageDialog.dialog("open") line executing, but then the open function inside $imageDialog does not execute. It doesn't show any errors and I checked that $imageDialog has the reference well set when executing the $imageDialog.dialog("open").

Here is the html dialog:

<div class="dialog" id="image-dialog"></div>

And here is the javascript code:

var selectedImage;
var $imageDialog = $("#image-dialog");

$imageDialog.dialog({
    autoOpen: false,
    buttons: [
        {
            text: "Cerrar",
            icons: {
                primary: "ui-icon-close"
            },
            click: function() {
                $(this).dialog("close");
            }
        }
    ],
    maxHeight: 580,
    modal: true,
    position: { my: "top", at: "top+160" },
    resizable: false,
    title: "Vista de imagen",
    width: 1000,
    close: function() {
        $imageDialog.empty();
    },
    open: function() {
        content += "         <img alt='previsualizacion'" + "src='" + imageSrc + "'>";

        $imageDialog.append(content);
    }
});

function showImage(img) {
    selectedImage = img.src;
    console.log($imageDialog);
    $imageDialog.dialog("open");
}

Upvotes: 1

Views: 13341

Answers (3)

R.K.Saini
R.K.Saini

Reputation: 2708

There are three thing you need to fix in your code

  1. You have added modal html with id calibration-image-dialog but you are using #image-dialog in your script.

  2. imageSrc is not defined

  3. In modal Open event callback you have a single quote missing.

content += "<img alt='previsualizacion" + "src='" + imageSrc + "'>";

it should be

content += "<img alt='previsualizacion'" + "src='" + imageSrc + "'>";

Here is working demo . 

var $imageDialog, imageSrc;
$(function() {

  $imageDialog = $("#image-dialog");
  $imageDialog.dialog({
    autoOpen: false,
    buttons: [{
      text: "Cerrar",
      icons: {
        primary: "ui-icon-close"
      },
      click: function() {
        $(this).dialog("close");
      }
    }],
    maxHeight: 580,
    modal: true,
    position: {
      my: "top",
      at: "top+160"
    },
    resizable: false,
    title: "Vista de imagen",
    width: 500,
    close: function() {
      $imageDialog.empty();
    },
    open: function() {
      var content = "         <img alt='previsualizacion'" + "src='" + imageSrc + "'>";

      $imageDialog.html(content);

    }

  });
});

function showImage(img) {
  imageSrc = img.src;
  $imageDialog.dialog("open");
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="dialog" id="image-dialog"></div>

<img onclick="showImage(this)" alt ="image" src="http://www.publicdomainpictures.net/pictures/100000/velka/autumn-by-the-lake.jpg#.WLnFxbbRDek.link" width="100" height="100">

<img onclick="showImage(this)" alt ="image" src="http://www.publicdomainpictures.net/pictures/40000/nahled/lion-head-portrait.jpg" width="100" height="100">

Upvotes: 0

Bilal Ahmed
Bilal Ahmed

Reputation: 4066

<!DOCTYPE html>
<html>
<head>
    <title></title>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>
    <script type="text/javascript">

$("#dialog").dialog({
    autoOpen: false,
    buttons: [
        {
            text: "Cerrar",
            icons: {
                primary: "ui-icon-close"
            },
            click: function() {
                $(this).dialog("close");
            }
        }
    ],
    maxHeight: 580,
    modal: true,
    position: { my: "top", at: "top+160" },
    resizable: false,
    title: "Vista de imagen",
    width: 1000,
    close: function() {
        $imageDialog.empty();
    },
    open: function() {
        content += "         <img alt='previsualizacion" + "src='" + imageSrc + "'>";

        $imageDialog.append(content);
    }
});

function showImage(img) {
    selectedImage = img.src;
    console.log($imageDialog);
    $imageDialog.dialog("open");
}
</script>
</head>
<body>
    <div class="dialog" id="dialog">Dialog</div>
</body>
</html>

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

To open JQuery UI dialog just use:

Jquery:

$(document).ready(function(){
    $('#dialog').dialog();
});

HTML:

<div id="dialog">

</div>

Working Fiddle

Upvotes: 1

Related Questions