jquery对话框和填写编辑表单

时间:2011-09-15 20:31:31

标签: jquery jquery-ui jquery-ui-dialog

这是我玩jQuery的第一周,所以我对它有很多疑问。

我正在使用一个对话框来创建和编辑项目。

我的函数editCustomField()不像我想的那样填充我的字段名称,但它确实打开了对话框。

我应该使用javascript getElementById(“empId”)等代替jQuery吗?我可以将我的函数包装在某种形式的jQuery标签中以使其工作吗?该链接使用jstl和el构建。

<script type="text/javascript">
  function editCustomField(empId, fieldId, name, value){
    $("empId").val(empId);
    $("fieldId").val(fieldId);
    $("fieldName").val(name);
    $("fieldValue").val(value);
    $("#customFieldDialog").dialog("open");
    return false;
  };

  $(document).ready(function(){
    $("#customFieldDialog").dialog({
      resizable: false,
      modal: true,
      autoOpen: false,
      width:315,
      buttons: {
        "Save" : function() {
          $("#customFieldForm").submit();
        },
        "Cancel" : function() {
          $(this).dialog("close");
          return false;
        }
      }
    });

$(".customfield").click(function(e) {
      $("#customFieldDialog").dialog("open");
    });
  });
</script>

HTML:

<a href="#" onclick="editCustomField('${employee.id}','${viewCustomField.id}','${viewCustomField.name}','${viewCustomField.value}');"><img src="<c:url value="/images/pencil.png"/>" alt="edit" title="edit" /></a>

<div id="customFieldDialog" title="Custom Field">
  <form id="customFieldForm" action="saveCustomField.action" method="POST">
    <input type="hidden" id="empId" name="employeeId" />
    <input type="hidden" id="fieldId" name="customFieldId" />
    <table>
      <tr>
        <td>Field name:</td><td><input id="fieldName" type="text" name="customField.name" /></td>
      </tr>
      <tr>
        <td>Value:</td><td><input id="fieldValue" type="text" name="customField.value" /></td>
      </tr>
    </table>
  </form>
</div>

2 个答案:

答案 0 :(得分:2)

使用JQuery,当您通过id引用元素时,必须在属性前加上#

在您的情况下,填充字段的正确代码将是

  function editCustomField(empId, fieldId, name, value){
    $("#empId").val(empId);
    $("#fieldId").val(fieldId);
    $("#fieldName").val(name);
    $("#fieldValue").val(value);
    $("#customFieldDialog").dialog("open");
    return false;
  };

答案 1 :(得分:1)

你需要一个#作为ID选择器。

 function editCustomField(empId, fieldId, name, value){
    $("#empId").val(empId);
    $("#fieldId").val(fieldId);
    $("#fieldName").val(name);
    $("#fieldValue").val(value);
    $("#customFieldDialog").dialog("open");
    return false;
  };