What's wrong with below jQuery code?

Question

I'm not able to trace the error in following code. I tried with firebug but still couldn't get the bug. Can you help me in identifying it?

$("#preview_newsletter").click(function() {
      $( "#newsletter_preview" ).dialog({
      height: 140,
      modal: true
      });
    });

Answer 1

What about waiting for DOM ready:

$(function () {
    $("#preview_newsletter").click(function () {
        $("#newsletter_preview").dialog({
            height: 140,
            modal: true
        });
    });
});

Your selectors mean you have one element with ID preview_newsletter and one element with ID newsletter_preview. So for sure, you need both elements in your DOM.

You could not use the ready handler if setting your code in a script tag just before the body's closing tag: </body>

Answer 2

Error is you are not including UI script

include jQuery UI 1.9.2 script

$(function(){
  $("#preview_newsletter").click(function() {
    $("#newsletter_preview").dialog({
      height: 140,
      modal: true
    });
   });
});

Demo

Answer 3

I don't sure about this. I think you are trying to open a dialog window on click of #preview_newsletter.

You have to define the dialog on document ready. Then open it on the click event. While defining dont open it.

    var dialog  = "";
    $(document).ready(function() {

        dialog = $( "#newsletter_preview" ).dialog({
            height: 140,
            modal: true,
            // code for preventing open it
        });
    });

    $("#preview_newsletter").click(function() {
        dialog.open()
    })