0

i have a little problem with jquery...for example i have five A anchor tags everyone with an ID (<a id="a1">, <a id="a2"> etc). when i click on one of them i want to appear a dialog box (with jquery-ui) containing an image. but the following code doesn't work, when i click on the link the dialog doesn't appear..why? (i insert it into a PHP class function: the image dimensions are passed to the functions via getimagesize)

<script type="text/javascript"> 
  var p = '<img src="http://www.xxx.it/images/yyy.jpg" width="543" height="402" alt="image" />';
  $('#a1').click(function(){
    $(p).dialog({
      resizable: false,
      modal: true,
      width: 543,
      height: 402,
      buttons: {
        OK: function() {
          $(this).dialog("close");
        }
      }
     });
   })
   </script>
   <a id="a1" href="#">link</a><div id="dialog" title="Show Image"></div>
2
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by emulman
0

I can see one problem. The script to open dialog by clicking '#a1' is defined before the <a id="a1"></a>. So it might be the case that $("#a1") was not getting captured.

Solution:
Put your <script></script> code after <a id="a1"></a> tag.

OR
Best will be to add script code in document ready function

$(document).ready(function() {
     /// Your dialog code
}
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.