Question

我是一个jquery / javascript初学者。我必须以弹出形式接受一些细节（单击“添加员工”按钮）。表单不会显示在弹出窗口中。事实上，弹出窗口本身并未到来。我知道我某处发生了严重错误，有人可以帮忙！一段时间以来我一直坚持这个问题。这是我的代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Add an Employee!!</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">


   <style>
    body { font-size: 80.5%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:1; border:1; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
  </style>


  <script>
  $(function() {
    var empid = $( "#empid" ),
      empname = $( "#empname" ),
      empdesig = $( "#empdesig" ),  

    $( "#add-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Add Employee Details": function() {
          var bValid = true;
          if ( bValid ) {
            $( "#employees tbody" ).append( "<tr>" +
              "<td>" + empid.val() + "</td>" +
              "<td>" + empname.val() + "</td>" +
              "<td>" + empdesig.val() + "</td>" +
            "</tr>" );
            $( this ).dialog( "close" );
          }
        },
        "Cancel": function() {
          $( this ).dialog( "close" );
        },
      "Close": function() {
        $( this ).dialog( "close" );
      }
    });

    $( "#add-employee" )
      .button()
      .click(function() {
        $( "#add-form" ).dialog( "open" );
      });
  });
  </script>
</head>


<body>

<div id="add-form" title="Add an Employee">
  <form>
  <fieldset>
   <legend>Provide Employee details:</legend>
    <label for="empid">Employee ID</label>
    <input type="text" name="empid" id="empid">
    <label for="empname">Employee Name</label>
    <input type="text" name="empname" id="empname">
    <label for="empdesig">Employee Designation</label>
    <input type="text" name="empdesig" id="empdesig">
  </fieldset>
  </form>
</div>


<h1>Existing Employees:</h1>
  <table id="employees" >
    <thead>
      <tr>
        <th>Employee ID</th>
        <th>Employee Name</th>
        <th>Employee Designation</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Sandeep Nagpure</td>
        <td>Team Lead</td>
      </tr>
    </tbody>
  </table>

<button id="add-employee">Add an Employee!</button>


</body>
</html>

Answer 1

在属性列表之后

你错过了}。试试这个

$(function() {
var empid = $( "#empid" ),
  empname = $( "#empname" ),
  empdesig = $( "#empdesig" ) ; 

$( "#add-form" ).dialog({
  autoOpen: false,
  height: 300,
  width: 350,
  modal: true,
  buttons: {
    "Add Employee Details": function() {
      var bValid = true;
      if ( bValid ) {
        $( "#employees tbody" ).append( "<tr>" +
          "<td>" + empid.val() + "</td>" +
          "<td>" + empname.val() + "</td>" +
          "<td>" + empdesig.val() + "</td>" +
        "</tr>" );
        $( this ).dialog( "close" );
      }
    },
    "Cancel": function() {
      $( this ).dialog( "close" );
    },
  "Close": function() {
    $( this ).dialog( "close" );
  }
}
});

$( "#add-employee" )
  .button()
  .click(function() {
    $( "#add-form" ).dialog( "open" );
  });

}）;

Answer 2

Here is a fiddle to a working demo based on the code you provided...

form中有几个遗失的结束标记。像这样更新它们。

<input type="text" name="empid" id="empid" />

应将script标记更新为

<script type="text/javascript">

最后一部分是对话框缺少的右括号，将其更改为

    "Close": function() {
            $(this).dialog( "close" );
       }
     }});

Answer 3

你的JS无效，用这个替换它会起作用

<script>$(function () {
    var empid = $("#empid"),
        empname = $("#empname"),
        empdesig = $("#empdesig");

        $("#add-form").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Add Employee Details": function () {
                    var bValid = true;
                    if (bValid) {
                        $("#employees tbody").append("<tr>" +
                            "<td>" + empid.val() + "</td>" +
                            "<td>" + empname.val() + "</td>" +
                            "<td>" + empdesig.val() + "</td>" +
                            "</tr>");
                        $(this).dialog("close");
                    }
                },
                    "Cancel": function () {
                    $(this).dialog("close");
                },
                    "Close": function () {
                    $(this).dialog("close");
                }
            }});

        $("#add-employee")
            .button()
            .click(function () {
            $("#add-form").dialog("open");
        });
        });</script>

表单未显示在弹出窗口#Jquery中

3 个答案: