2013-05-07 68 views
1

好吧,我是一个JavaScript和jQuery的noob。我正在使用jQuery UI页面上的.dialog示例。我在标记中做了一些修改,结果我得到了一个“* idName * null”用于我的第一次提交,但之后,它做了我需要它做的事情。这似乎是计数开始于空,则增加了1,2,3,等等......下面是我的工作代码:用JavaScript指定一个ID

$(function() { 
    var rowID = document.getElementById("RowPlaceholder"), 
     fName = $("#fName"), 
     lName = $("#lName"), 
     jTitle = $("#jTitle"), 
     cPhone = $("#cPhone"), 
     oPhone = $("#oPhone"), 
     eMail = $("#eMail"), 
    allFields = $([]).add(fName).add(lName).add(jTitle).add(cPhone).add(oPhone).add(eMail), 
    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("Length of " + n + " must be between " + 
      min + " and " + max + "."); 
      return false; 
     } else { 
      return true; 
     } 
    } 
    $("#dialog-form").dialog({ 
     autoOpen: false, 
     height: 470, 
     width: 350, 
     modal: true, 
     buttons: { 
      "Add Contact": function() { 
       var bValid = true; 
       allFields.removeClass("ui-state-error"); 
       bValid = bValid && checkLength(fName, "fName", 1, 16); 
       bValid = bValid && checkLength(lName, "lName", 1, 16); 
       bValid = bValid && checkLength(cPhone, "cPhone", 10, 16); 
       bValid = bValid && checkLength(oPhone, "oPhone", 10, 16); 
       bValid = bValid && checkLength(eMail, "eMail", 10, 80); 
       if (bValid) { 
        $("#users tbody").append(
        "<tr>" + 
        "<td id=\"fName" + rowID + "\">" + fName.val() + "</td>" + 
        "<td id=\"lName" + rowID + "\">" + lName.val() + "</td>" + 
        "<td id=\"jTitle" + rowID + "\">" + jTitle.val() + "</td>" + 
        "<td id=\"cPhone" + rowID + "\">" + cPhone.val() + "</td>" + 
        "<td id=\"oPhone" + rowID + "\">" + oPhone.val() + "</td>" + 
        "<td id=\"eMail" + rowID + "\">" + eMail.val() + "</td>" + 
        "</tr>") 
       rowID++; 
        $(this).dialog("close"); 
       } 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: function() { 
      allFields.val("").removeClass("ui-state-error"); 
     } 
    }); 
    $("#create-user") 
    .button() 
    .click(function() { 
     $("#dialog-form").dialog("open"); 
    }); 
}); 

回答

0

看一看Here。看起来getelementById在没有找到id的情况下返回null。我的猜测是RowPlaceholder不存在并且返回null。在JavaScript null + 1将返回1,这就是为什么它在第一次实例后再次开始工作。

+0

是的,我只是设置一个窗体与ID为RowPlaceholder并将其设置为隐藏在CSS中。这个伎俩。感谢您的正确方向。 – 2013-05-15 22:21:09

0

我刚刚设置了一个窗体id为RowPlaceholder并将其设置为隐藏在CSS中。这个伎俩。感谢您的正确方向