jQuery的对话框给出缺少：属性ID错误后

Question

I am trying to popup the jquery dialogue box here. when I dialog has the following code..

var opt = {
        autoOpen: false,
        modal: true,
        width: 550,
        height:650,
        title: 'Details'
};

It works fine. I get the popup window. But adding additional info is getting me this error.

Updated Post

 <script>
$(document).ready(function(){

 $(".editbt").click(function(event) {
    event.preventDefault();

     $.ajax({
        type: "GET",
        url: this.href,
        cache:false,
        success: function(response){
        var opt = {
         box :$( "#box" ),
      itemname:$( "#itemname" ),
      size:$( "#size" ),
      potency:$( "#potency" ),
      quantity:$( "#quantity" ),

      allFields:$( [] ).add( box ).add(itemname).add(size).add(potency).add(quantity),
      tips :$( ".validateTips" );

    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }


  function checkLength( o, n, min, max ) {
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Please enter the field " );
        return false;
      } else {
        return true;
      }
    }
    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }

    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 600,
      width: 500,
      modal: true,
      buttons: {
        "edit": function() {
          var bValid = true;
          allFields.removeClass( "ui-state-error" );
 bValid = bValid && checkLength( box, "box", 1, 16 );
  bValid = bValid && checkLength( itemname, "itemname", 1, 16 );         
  bValid = bValid && checkLength( size, "size", 1, 16 );       
 bValid = bValid && checkLength( potency, "potency", 1, 16 ); 
   bValid = bValid && checkLength( quantity, "quantity", 1, 16 );        

          if ( bValid ) {
            $( "#users tbody" ).append( "<tr>" +
              "<td>" + box.val() + "</td>" +
              "<td>" + itemname.val() + "</td>" +
              "<td>" + size.val() + "</td>" +
              "<td>" + potency.val() + "</td>" +
              "<td>" + quantity.val() + "</td>" +
            "</tr>" );
            $( this ).dialog( "close" );
          }
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });
};

            if (response.length > 0) {  
            var wrapperelement = document.getElementById('display');

                wrapperelement.innerHTML = response; 
                $("#dialog-form").dialog(opt).dialog("open");

            }
        }
 });

});



 });

</script>

Any idea?? Thank you for your time..

Answer 1

Your syntax is wrong. You are creating a javascript object, the syntax for which is:

var opt = {
    box: $( "#box" ),
    itemname: $( "#itemname" ),
    size: $( "#size" ),
    potency: $( "#potency" ),
    quantity: $( "#quantity" ),
    .
    .
}

Also, the var ahead of box is not needed.

You can also do it as:

var opt = new Object();
opt.box = $( "#box" );
opt.itemname: $( "#itemname" );
.
.