jquery issue : object doesn't support this property or method 'dialog'

Issue#

I have a div in jsp which I am trying to show as dialog on a click event. But getting following error message while trying show a jquery dialog:

object doesn't support this property or method 'dialog'

Fix :

Possible reasons for this issues could :

1. Multiple references to Jquery library. Check if you have included jquery javascript more than once. If yes remove the duplicate references.

2. The dialog method is from the jQuery UI library. Make sure you have included jquery ui javascript.

3. If you are using any custom version of jQuery UI, please ensure it includes dialog method.

4. Also check if the browser version is obsolete. Sometime older version of IE does not support new fields and methods. Try upgrading the the browser.

Jquery : Change Product Image on click event

Following Example shows how to use jquery to change the product image in Product Image Container.

The same example can be tested in jsfiddle (http://jsfiddle.net/sanjayingole/9que4n1p/5/)

We have a left panel and a right panel, where :

• Left Panel contains small image icons.
• Right Panel shows the larger image when an icon from left panel is clicked.

Javascript :

$(".imageIconLink").click(function() {

    

    var imgSrc= $(this).find("img").attr("src");

    

    $(".largeImage").attr("src", imgSrc); 

});

CSS :

.smallImage {

    height: 80px; width: 80px; border: 0px solid;

}

.largeImage {

    height: 280px; width: 380px; border: 0px solid;

}

.leftImgDiv {

    width : 20%;

    float : left;

    height : 300px;

    overflow : auto;

}

.rightImgDiv {

    width : 80%;

    float : right;

}

HTML :

<div class="leftImgDiv">

<a href="#" class="imageIconLink">

    <img class="smallImage" src="http://s7d1.scene7.com/is/image/BedBathandBeyond/33748242127673p?hei=2000&amp;wid=2000&amp;qlt=50,1" :="" border="" width="2000" height="2000"/>

</a>

    

<a href="#" class="imageIconLink">

    <img class="smallImage" src="http://www.brookstone.com/webassets/product_images/700x700/833371p.jpg" width="252" height="252"/>

    </a>    

<a href="#" class="imageIconLink">

    <img class="smallImage" src="http://slimages.macys.com/is/image/MCY/products/8/optimized/2546128_fpx.tif?01AD=31absA3WJUG8eGA5NUMCutd7x16A-v8cmsm4k_DZNgdpUvQGEe2iugA&amp;01RI=958CD8AFBE261DF&amp;01NA=&amp;wid=1320&amp;hei=1616&amp;fit=fit,1&amp;$filterlrg$"/>

</a>

<a href="#" class="imageIconLink">

    <img class="smallImage"

    src="http://www.u3j.org/wp-content/uploads/2014/07/uncategorized-amazing-where-to-buy-leather-sofa-in-malaysia-where-to-buy-leather-furniture-repair-kits-where-to-buy-leather-furniture-repair-kit-where-to-buy-leather-furniture-in-bali-where-to-bu.jpg" />

</a>

    

    

<a href="#" class="imageIconLink">

    <img class="smallImage"

    src="http://www.u3j.org/wp-content/uploads/2014/07/uncategorized-amazing-where-to-buy-leather-sofa-in-malaysia-where-to-buy-leather-furniture-repair-kits-where-to-buy-leather-furniture-repair-kit-where-to-buy-leather-furniture-in-bali-where-to-bu.jpg" />

</a>

</div>    

    

<div class="rightImgDiv">

    <img class="largeImage" src="http://s7d1.scene7.com/is/image/BedBathandBeyond/33748242127673p?hei=2000&amp;wid=2000&amp;qlt=50,1"/>

</div>