JavaScript anonymous functions in script

Question

<?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>

In my code I am using two nested anonymous functions like in the fashion of:

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

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

I have been having some problem that seems like a bug in my program where the value of "objj[cc].idtabletdetails;" is not being read properly which lead me to pull it out into a variable at this line:

var tIDTabletdetails = objj[cc].idtabletdetails;

Once I pulled the value out to tIDTabletdetails the program is running fine. The problem occured when I tried to reference "objj[cc].idtabletdetails" inside of:

                        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 am wondering if maybe there is a better way of retaining the values of "i" and "cc" or if perhaps the anonymous functions should be coded in a different way.

Thanks in advance...

Instead of using anonymous self executing functions and for loop to iterate through the arrays why don't you use $.each — Arun P Johny
– Arun P Johny, Commented May 17, 2013 at 3:34
I'm having a hard time reading the code as it has a lot of nested functions. Could you console.log(i) and cc to see if it's still the value you expect it to be? Also console log the object as a whole and inspect to make sure it's what you expected it to be: console.log("and objj is now:", objj); — HMR
– HMR, Commented May 17, 2013 at 3:59

Grant Caesar Peters · Accepted Answer · 2013-05-17 03:55:46Z

1

It would be better to trap the value your interested in, rather than the iterator, so...

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

...however, after looking at your code I highly recommend an MV* framework like Backbone or Ember, if you haven't checked them out yet you should, it would greatly simplify your life!

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

answered May 17, 2013 at 3:55

Grant Caesar Peters

4164 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

plalx · Accepted Answer · 2013-05-17 03:38:47Z

1

I have not revised your code entirely, however I dont think wrapping your whole code in a self-executing function at each loop iteration is the cleanest way to retain the loop index.

You could use the following approach instead:

//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...
}

answered May 17, 2013 at 3:38

plalx

43.8k7 gold badges77 silver badges94 bronze badges

Collectives™ on Stack Overflow

JavaScript anonymous functions in script

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related