2013-05-17 2 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(); 
          }); 
         }); 

мне интересно, если возможно, есть лучший способ сохранения значений «см» «я» и, или если возможно, анонимные функции должны кодироваться по-другому.

Заранее спасибо ...

+0

Вместо использования анонимного себя выполнение функций и цикл для перебора массивов, почему бы вам не использовать [$ .each] (http://api.jquery.com/jQuery.each /) –

+0

Мне сложно читать код, так как у него много вложенных функций. Можете ли вы console.log (i) и cc посмотреть, все ли это значение, которое вы ожидаете от этого? Также консоль регистрирует объект в целом и проверяет, чтобы убедиться, что это то, что вы ожидали от него: console.log («и objj is now:», objj); – HMR

ответ

1

Было бы лучше улавливать значение ваших интересуют, а не итератор, так что ...

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

... однако, взглянув на ваш код, я настоятельно рекомендую структуру MV *, такую ​​как Backbone или Ember, если вы еще не проверили их, но это значительно упростит вашу жизнь!

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... 
} 
Смежные вопросы