2013-05-07 67 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中。這個伎倆。感謝您的正確方向