2013-05-17 146 views
1
<?php 

?> 
<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 

jTimesheetid = ""; 
jTimesheetweekending = ""; 
jPersonnelNo = ""; 
jLastInsertID = ""; 
jWorkCodes = ""; 
tabletdetails = ""; 

$(document).ready(function() { 
    $.ajax({ 
    type: "POST", 
    url: "php.scripts/timesheet.getsession.php", 
    data: { }, 
    async: false 
    }).done(function(msg) { 
    obj = JSON.parse(msg); 
    jTimesheetid = obj.timesheetid; 
    jTimesheetweekending = obj.timesheetweekending; 
    jPersonnelNo = obj.personnelno; 
    }); 

    $.ajax({ 
    type: "POST", 
    url: "php.scripts/buildselect.jobs.php", 
    data: { }, 
    async: false 
    }).done(function(msg) { 
    jQuery("#daddtablet").append(msg); 
    jQuery("#daddtablet select").css('margin','1px'); 
    jQuery("#daddtablet select").css('width','200px'); 
    jQuery("#daddtablet select").css('height','20px'); 
    }); 

    $("#baddtablet").click(function() { 
    $.ajax({ 
     type: "POST", 
     url: "php.scripts/tablet.add.php", 
     data: { jobno: jQuery("#daddtablet select").val() }, 
     async: false 
    }).done(function(msg) { 
     alert(msg); 
     window.location.reload(); 
    }); 
    }); 

    $.ajax({ 
    type: "POST", 
    url: "php.scripts/timesheet.getall.php", 
    data: { }, 
    async: false 
    }).done(function(msg) { 
    //alert(msg); 
    jTablets = JSON.parse(msg); 

    for (var i = 0; i < jTablets.length; i++) { 
     (function(i) { 
     //jQuery("body").append("x"); 
     jQuery("body").append("<br>"); 
     jQuery("body").append("<div class=\"wrapperouter\" id=\"tablet"+jTablets[i].idtablets+"\"></div>"); 
     jQuery("#tablet"+jTablets[i].idtablets).append("<div class=\"jobno\" id=\"jobno_tablet"+jTablets[i].idtablets+"\">"+jTablets[i].jobno+"</div>"); 
     jQuery("#tablet"+jTablets[i].idtablets).append("<div class=\"jobname\" id=\"jobname_tablet"+jTablets[i].idtablets+"\"><span>JobName:</span>"+jTablets[i].nname+"</div>"); 
     jQuery("#tablet"+jTablets[i].idtablets).append("<div class=\"jobclient\" id=\"jobclient_tablet"+jTablets[i].idtablets+"\"><span>JobClient:</span>"+jTablets[i].companyname+"</div>"); 
     jQuery("#tablet"+jTablets[i].idtablets).append("<div class=\"weekending\" id=\"weekending_tablet"+jTablets[i].idtablets+"\"><span>WeekEnding:</span>"+jTimesheetweekending+"</div>"); 
     jQuery("#tablet"+jTablets[i].idtablets).append("<div class=\"tablewrapper\" id=\"tablewrapper_tablet"+jTablets[i].idtablets+"\"></div>"); 

     var jHTML = "<div class=\"headercolumn0\" id=\"headercolumn0_tablet"+jTablets[i].idtablets+"\"> <span>Dash</span> </div> <div class=\"headercolumn1\" id=\"headercolumn1_tablet"+jTablets[i].idtablets+"\"> <span>Description</span> </div> <div class=\"headercolumn2\" id=\"headercolumn2_tablet"+jTablets[i].idtablets+"\"> <span>Work Code</span> </div> <div class=\"headercolumn3\" id=\"headercolumn3_tablet"+jTablets[i].idtablets+"\"> <span>M</span> </div> <div class=\"headercolumn4\" id=\"headercolumn4_tablet"+jTablets[i].idtablets+"\"> <span>TU</span> </div> <div class=\"headercolumn5\" id=\"headercolumn5_tablet"+jTablets[i].idtablets+"\"> <span>W</span> </div> <div class=\"headercolumn6\" id=\"headercolumn6_tablet"+jTablets[i].idtablets+"\"> <span>T</span> </div> <div class=\"headercolumn7\" id=\"headercolumn7_tablet"+jTablets[i].idtablets+"\"> <span>F</span> </div> <div class=\"headercolumn8\" id=\"headercolumn8_tablet"+jTablets[i].idtablets+"\"> <span>SA</span> </div> <div class=\"headercolumn9\" id=\"headercolumn9_tablet"+jTablets[i].idtablets+"\"> <span>SU</span> </div> <div class=\"headercolumn10\" id=\"headercolumn10_tablet"+jTablets[i].idtablets+"\"> <span>T</span> </div> <div class=\"headercolumn11\" id=\"headercolumn11_tablet"+jTablets[i].idtablets+"\"> <span>DEL</span> </div>"; 

     jQuery("#tablewrapper_tablet"+jTablets[i].idtablets).append(jHTML); 

     /*********************************************/ 
     // cycle through the details 
     $.ajax({ 
     type: "POST", 
     url: "php.scripts/tablet.getdetails.php", 
     data: { tabletid: jTablets[i].idtablets }, 
     async: false 
     }).done(function(msgg) { 
      objj = JSON.parse(msgg); 

      for (var cc = 0; cc < objj.length; cc++) 
      { 
      (function(cc) { 
       console.log(objj[cc].idtabletdetails); 
       var tIDTabletdetails = objj[cc].idtabletdetails; 

       jHTML = "<div class=\"column0\"><input type=\"text\" value=\""+objj[cc].dash+"\" /></div> \ 
       <div class=\"column1\"><input type=\"text\" value=\""+objj[cc].description+"\" /></div> \ 
       <div class=\"column2\"><input type=\"text\" value=\""+objj[cc].workcode+"\" /></div> \ 
       <div class=\"column3\"><input type=\"number\" value=\""+objj[cc].m+"\" /></div> \ 
       <div class=\"column4\"> <input type=\"number\" value=\""+objj[cc].tu+"\" /></div> \ 
       <div class=\"column5\"> <input type=\"number\" value=\""+objj[cc].w+"\" /></div> \ 
       <div class=\"column6\"><input type=\"number\" value=\""+objj[cc].t+"\" /></div> \ 
       <div class=\"column7\"><input type=\"number\" value=\""+objj[cc].f+"\" /></div> \ 
       <div class=\"column8\"><input type=\"number\" value=\""+objj[cc].sa+"\" /></div> \ 
       <div class=\"column9\"> <input type=\"number\" value=\""+objj[cc].su+"\" /></div> \ 
       <div class=\"column10\"> <input type=\"number\" value=\"\" /></div> \ 
       <div id=\"tablet"+jTablets[i].idtablets+"row"+cc+"\" class=\"column11\"><span>x</span> </div>"; 

       jQuery("#tablewrapper_tablet"+jTablets[i].idtablets).append(jHTML); 
       jQuery("#tablet"+jTablets[i].idtablets+"row"+cc).html(tIDTabletdetails); 

       jQuery("#tablet"+jTablets[i].idtablets+"row"+cc).on('click', function() 
       { 
       //console.log(jTablets[i].idtablets); 
       //console.log(objj[cc].idtabletdetails); 

       $.ajax({ 
       type: "POST", 
       url: "php.scripts/tablets.deleterow.php", 
       data: { 
        idtablets: jTablets[i].idtablets, 
        idtabletdetails: tIDTabletdetails 
       }, 
       async: false 
       }).done(function(msg) { 
        alert(msg); 
        window.location.reload(); 
       }); 
       }); 
      })(cc); 

      } 
     }); 
     // end cycle through the details 
     /**********************************************/ 

     jHTML = "<div style=\"clear: both;\"><input class=\"botbutton\" type=\"button\" id=\"addrowtablet"+jTablets[i].idtablets+"\" value=\">>\" /> \ 
     <input class=\"botbutton\" type=\"button\" id=\"savetablet"+jTablets[i].idtablets+"\" value=\"save\" /> \ 
     <input class=\"botbutton\" type=\"button\" id=\"deletetablet"+jTablets[i].idtablets+"\" value=\"delete\" /></div>"; 

     jQuery("#tablet"+jTablets[i].idtablets).append(jHTML); 

     //add row to tablet 
     jQuery("#addrowtablet"+jTablets[i].idtablets).on('click', function() 
     { 
      $.ajax({ 
      type: "POST", 
      url: "php.scripts/tablet.addrow.php", 
      data: { idtablets: jTablets[i].idtablets }, 
      async: false 
      }).done(function(msg) { 
      //alert(msg); 
      window.location.reload(); 
      }); 
     }); 

     //save tablet 
     jQuery("#savetablet"+jTablets[i].idtablets).on('click', function() 
     { 
      alert("alertsepy2..."); 
     }); 

     //delete tablet 
     jQuery("#deletetablet"+jTablets[i].idtablets).on('click', function() 
     { 
      console.log("jTablets[i].jobno: "+jTablets[i].jobno); 
      console.log(jTablets[i].idtablets); 

      $.ajax({ 
      type: "POST", 
      url: "php.scripts/tablet.delete.php", 
      data: { idtablets: jTablets[i].idtablets }, 
      async: false 
      }).done(function(msg) { 
      //alert(msg); 
      window.location.reload(); 
      }); 
     }); 

     })(i); 
    } 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="addtablet" style="border: 1px solid black; overflow: hidden;"> 
<div id="daddtablet" style="float: left; padding: 0px;"></div><input type="button" id="baddtablet" value="add.tablet" style="margin: 0px; height: 22px; padding: 0px;" /> 
</div> 
</body> 

在我的代碼,我在的方式使用像兩個嵌套的匿名函數:的JavaScript匿名函數

(function(i) { 
    (function(cc) { 

    })(cc); 
})(i); 

我一直有一些問題,這似乎是在我的程序中的錯誤,其中「objj [cc] .idtabletdetails」的值沒有被正確讀取導致我把它拉出來進入這行的變量:

var tIDTabletdetails = objj[cc].idtabletdetails; 

一旦我把值輸出到程序運行良好tIDTabletdetails。問題發生時,我試圖引用裏面的「objj [CC] .idtabletdetails」:

     jQuery("#tablet"+jTablets[i].idtablets+"row"+cc).on('click', function() 
         { 
          //console.log(jTablets[i].idtablets); 
          //console.log(objj[cc].idtabletdetails); 

          $.ajax({ 
          type: "POST", 
          url: "php.scripts/tablets.deleterow.php", 
          data: { 
           idtablets: jTablets[i].idtablets, 
           idtabletdetails: tIDTabletdetails 
          }, 
          async: false 
          }).done(function(msg) { 
           alert(msg); 
           window.location.reload(); 
          }); 
         }); 

我想知道是否也許有保留的「i」和「CC」值的更好的方法,或者也許匿名函數應該以不同的方式編碼。

在此先感謝...

+0

而不是使用匿名的自我執行功能和循環通過陣列迭代你爲什麼不使用[$。每個]的(http://api.jquery.com/jQuery.each /) –

+0

我很難讀代碼,因爲它有很多嵌套函數。你能console.log(我)和cc看看它是否仍然是你期望的值嗎?同時控制檯將對象作爲一個整體進行記錄並檢查以確保它是你期望的那樣:console.log(「和objj現在是:」,objj); – HMR

回答

1

這將是更好的陷阱的價值你的興趣,而不是迭代器,所以...

for (var i=0...) { 
    (function() { 
    })(data[i]) 
} 

...然而,在查看你的代碼之後,我強烈推薦一個像Backbone或者Ember這樣的MV *框架,如果你還沒有檢查它們,你應該會大大簡化你的生活!

http://backbonejs.org/ http://emberjs.com/

1

我還沒有完全修改後的代碼,但是我不認爲在每次循環迭代包裹在一個自動執行功能你的整個代碼是保留循環索引最徹底的方法。

你可以用下面的辦法來代替:

//create a factory function to which you can pass the loop index 
//and which returns another function that's using the index value 
function createLogIndexFn(index) { 
    return function() { 
     console.log(index); 
    }; 
} 

var i = 0, 
    logFunctions = []; 

for (; i < 10; i++) { 
    logFunctions.push(createLogIndexFn(i)); //pass index to factory fn 
} 

for (i = 0; i < 10; i++) { 
    logFunctions[i](); //0, 1, 2, 3, 4... 
}