Sunday, November 20, 2011

Working in jQuery really makes me appreciate (miss) the generics of C#!

@using OurApp.Web.UI.Util

@model ProgramPlanShuffleListFiltrationHelper

<script src="@Url.Content("~/Scripts/jquery.timers-1.2.js")" type="text/javascript">

</script>

<script type="text/javascript">

   var flatPrograms = "@Model.FlattenedListOfListsOfProgramPlansForPrograms";

   var flatSampleTypes = "@Model.FlattenedListOfListsOfProgramPlansForSampleTypes";

   var endList = new Array();

   var oldList = new Array();

   

   $(function () {

      $(document).everyTime(3000, function (i) {

         prepareProgramPlanList(flatPrograms.split('|'), flatSampleTypes.split('|'));

         setOldList();

         revampCurrentlySelectedProgramPlans();

         setOldList();

         revampCurrentlyAvailableProgramPlans();

      }, 0);

   });

   

   function revampCurrentlyAvailableProgramPlans() {

      var revisionToOldList = new Array();

      var $counterForRevisedList = 0;

      var $counterForEndList = 0;

      while ($counterForEndList < endList.length) {

         var halvesOfProgram = endList[$counterForEndList].split(',');

         var $counterForOldList = 0;

         var isMatch = false;

         while ($counterForOldList < oldList.length) {

            if (oldList[$counterForOldList] == halvesOfProgram[0]) {

               isMatch = true;

            }

            $counterForOldList++;

         }

         if (!isMatch) {

            $counterForRevisedList++;

         }

         $counterForEndList++;

      }

      if ($counterForRevisedList > 0) {

         var dummyStringForCreatingEmptyStringArray = 'replace me';

         if ($counterForRevisedList > 1) {

            var $counterForCreatingEmptyStringArray = 1;

            while ($counterForCreatingEmptyStringArray < $counterForRevisedList) {

               dummyStringForCreatingEmptyStringArray += ',replace me';

               $counterForCreatingEmptyStringArray++;

            }

         }

         revisionToOldList = dummyStringForCreatingEmptyStringArray.split(',');

      }

      $counterForEndList = 0;

      $counterForRevisedList = 0;

      while ($counterForEndList < endList.length) {

         var halvesOfProgram = endList[$counterForEndList].split(',');

         var $counterForOldList = 0;

         var isMatch = false;

         while ($counterForOldList < oldList.length) {

            if (oldList[$counterForOldList] == halvesOfProgram[0]) {

               isMatch = true;

            }

            $counterForOldList++;

         }

         if (!isMatch) {

            revisionToOldList[$counterForRevisedList] = endList[$counterForEndList];

            $counterForRevisedList++;

         }

         $counterForEndList++;

      }

      $("#pp option").remove();

      $counterForRevisedList = 0;

      while ($counterForRevisedList < revisionToOldList.length) {

         var item = revisionToOldList[$counterForRevisedList];

         var x = item.split(',');

         $("#pp").append($('<option></option>').val(x[1]).html(x[0]));

         $counterForRevisedList++;

      }

   }

   

   function revampCurrentlySelectedProgramPlans() {

      var revisionToOldList = new Array();

      var $counterForRevisedList = 0;

      var $counterForEndList = 0;

      while ($counterForEndList < endList.length) {

         var halvesOfProgram = endList[$counterForEndList].split(',');

         var $counterForOldList = 0;

         while ($counterForOldList < oldList.length) {

            if (oldList[$counterForOldList] == halvesOfProgram[0]) {

               $counterForRevisedList++;

            }

            $counterForOldList++;

         }

         $counterForEndList++;

      }

      if ($counterForRevisedList > 0) {

         var dummyStringForCreatingEmptyStringArray = 'replace me';

         if ($counterForRevisedList > 1) {

            var $counterForCreatingEmptyStringArray = 1;

            while ($counterForCreatingEmptyStringArray < $counterForRevisedList) {

               dummyStringForCreatingEmptyStringArray += ',replace me';

               $counterForCreatingEmptyStringArray++;

            }

         }

         revisionToOldList = dummyStringForCreatingEmptyStringArray.split(',');

      }

      $counterForEndList = 0;

      $counterForRevisedList = 0;

      while ($counterForEndList < endList.length) {

         var halves = endList[$counterForEndList].split(',');

         var $counterForList = 0;

         while ($counterForList < oldList.length) {

            if (oldList[$counterForList] == halves[0]) {

               revisionToOldList[$counterForRevisedList] = endList[$counterForEndList];

               $counterForRevisedList++;

            }

            $counterForList++;

         }

         $counterForEndList++;

      }

      $("#pps option").remove();

      $counterForRevisedList = 0;

      while ($counterForRevisedList < revisionToOldList.length) {

         var item = revisionToOldList[$counterForRevisedList];

         var x = item.split(',');

         $("#pps").append($('<option></option>').val(x[1]).html(x[0]));

         $counterForRevisedList++;

      }

   }

   

   function setOldList() {

      var countOfPlans = $("#pps").get(0).options.length;

      oldList = new Array();

      if (countOfPlans > 0) {

         var dummyStringForCreatingEmptyStringArray = 'replace me';

         if (countOfPlans > 1) {

            var $counterForCreatingEmptyStringArray = 1;

            while ($counterForCreatingEmptyStringArray < countOfPlans) {

               dummyStringForCreatingEmptyStringArray += ',replace me';

               $counterForCreatingEmptyStringArray++;

            }

         }

         oldList = dummyStringForCreatingEmptyStringArray.split(',');

      }

      if (countOfPlans > 0) {

         var $counterForPopulatingStringArray = 0;

         $("#pps option").each(function () {

            oldList[$counterForPopulatingStringArray] = $(this).text();

            $counterForPopulatingStringArray++;

         });

      }

   }

   

   function prepareProgramPlanList(programsList, sampleTypesList) {

      var currentSampleType = $("#SelectedSampleTypeId option:selected").text();

      var countOfPrograms = $("#programsGroup-selection").get(0).options.length;

      var currentPrograms = new Array();

      if (countOfPrograms > 0) {

         var dummyStringForCreatingEmptyStringArray = 'replace me';

         if (countOfPrograms > 1) {

            var $counterForCreatingEmptyStringArray = 1;

            while ($counterForCreatingEmptyStringArray < countOfPrograms) {

               dummyStringForCreatingEmptyStringArray += ',replace me';

               $counterForCreatingEmptyStringArray++;

            }

         }

         currentPrograms = dummyStringForCreatingEmptyStringArray.split(',');

      }

      if (countOfPrograms > 0) {

         var $counterForPopulatingStringArray = 0;

         $("#programsGroup-selection option").each(function () {

            currentPrograms[$counterForPopulatingStringArray] = $(this).text();

            $counterForPopulatingStringArray++;

         });

      }

      logic(programsList, sampleTypesList, currentSampleType, currentPrograms);

   }

   

   function logic(programsList, sampleTypesList, currentSampleType, currentPrograms) {

      var truncatedList = new Array();

      var $counterForSampleTypes = 0;

      var $counterForSampleTypeMatches = 0;

      $(sampleTypesList).each(function () {

         var halvesOfSampleType = sampleTypesList[$counterForSampleTypes].split(',');

         if (halvesOfSampleType[1] == currentSampleType) {

            $counterForSampleTypeMatches++;

         }

         $counterForSampleTypes++;

      });

      var dummyStringForCreatingEmptyStringArray = 'replace me';

      if ($counterForSampleTypeMatches > 1) {

         var $counterForCreatingEmptyStringArray = 1;

         while ($counterForCreatingEmptyStringArray < $counterForSampleTypeMatches) {

            dummyStringForCreatingEmptyStringArray += ',replace me';

            $counterForCreatingEmptyStringArray++;

         }

      }

      truncatedList = dummyStringForCreatingEmptyStringArray.split(',');

      if ($counterForSampleTypeMatches > 0) {

         $counterForSampleTypes = 0;

         var $counterForPopulatingStringArray = 0;

         $(sampleTypesList).each(function () {

            var halvesOfSampleType = sampleTypesList[$counterForSampleTypes].split(',');

            if (halvesOfSampleType[1] == currentSampleType) {

               truncatedList[$counterForPopulatingStringArray] = halvesOfSampleType[0];

               $counterForPopulatingStringArray++;

            }

            $counterForSampleTypes++;

         });

      }

      var $counterForIntersectionList = 0;

      var $counterForAllPrograms = 0;

      $(programsList).each(function () {

         var halvesOfProgram = programsList[$counterForAllPrograms].split(',');

         var $counterForTruncatedList = 0;

         $(truncatedList).each(function () {

            if (halvesOfProgram[0] == truncatedList[$counterForTruncatedList]) {

               $counterForIntersectionList++;

            }

            $counterForTruncatedList++;

         });

         $counterForAllPrograms++;

      });

      var intersectionList = new Array();

      dummyStringForCreatingEmptyStringArray = 'replace me';

      if ($counterForIntersectionList > 1) {

         $counterForCreatingEmptyStringArray = 1;

         while ($counterForCreatingEmptyStringArray < $counterForIntersectionList) {

            dummyStringForCreatingEmptyStringArray += ',replace me';

            $counterForCreatingEmptyStringArray++;

         }

      }

      if ($counterForIntersectionList > 0) {

         intersectionList = dummyStringForCreatingEmptyStringArray.split(',');

      }

      if ($counterForIntersectionList > 0) {

         $counterForAllPrograms = 0;

         var $counter = 0;

         $(programsList).each(function () {

            var halvesOfProgram = programsList[$counterForAllPrograms].split(',');

            var $counterForTruncatedList = 0;

            $(truncatedList).each(function () {

               if (halvesOfProgram[0] == truncatedList[$counterForTruncatedList]) {

                  intersectionList[$counter] = programsList[$counterForAllPrograms];

                  $counter++;

               }

               $counterForTruncatedList++;

            });

            $counterForAllPrograms++;

         });

      }

      var $counterForEndList = 0;

      $counterForAllPrograms = 0;

      $(intersectionList).each(function () {

         var halvesOfProgram = intersectionList[$counterForAllPrograms].split(',');

         var quartersOfProgram = halvesOfProgram[0].split('.');

         var $counterForCurrentPrograms = 0;

         $(currentPrograms).each(function () {

            if (quartersOfProgram[0] == currentPrograms[$counterForCurrentPrograms]) {

               $counterForEndList++;

            }

            $counterForCurrentPrograms++;

         });

         $counterForAllPrograms++;

      });

      endList = new Array();

      dummyStringForCreatingEmptyStringArray = 'replace me';

      if ($counterForEndList > 1) {

         $counterForCreatingEmptyStringArray = 1;

         while ($counterForCreatingEmptyStringArray < $counterForEndList) {

            dummyStringForCreatingEmptyStringArray += ',replace me';

            $counterForCreatingEmptyStringArray++;

         }

      }

      if ($counterForEndList > 0) {

         endList = dummyStringForCreatingEmptyStringArray.split(',');

      }

      $counterForEndList = 0;

      $counterForAllPrograms = 0;

      $(intersectionList).each(function () {

         var halvesOfProgram = intersectionList[$counterForAllPrograms].split(',');

         var quartersOfProgram = halvesOfProgram[0].split('.');

         var $counterForCurrentPrograms = 0;

         $(currentPrograms).each(function () {

            if (quartersOfProgram[0] == currentPrograms[$counterForCurrentPrograms]) {

               endList[$counterForEndList] = intersectionList[$counterForAllPrograms];

               $counterForEndList++;

            }

            $counterForCurrentPrograms++;

         });

         $counterForAllPrograms++;

      });

   }

</script>

 
 

Some notes on the fire hose of code above which represents the contents of an ASP.NET MVC3 partial:

  • Shouldn't most of this code be kept in a .js file? Well, yes, most of it should. I am part way through crafting a solution and in the short term I just want to get things working. I'll do the abstraction to a .js file as a last step. Lines 6 and 7 above which are a seam between C# and jQuery need to remain in the Razor view. They are:

    @Model.FlattenedListOfListsOfProgramPlansForPrograms

    @Model.FlattenedListOfListsOfProgramPlansForSampleTypes


       
  • So what is bubbling up from C# to jQuery? I'll explain in the next post.

       
  • Is the timer loop running between lines 11 and 19 by way of, as referenced in line 3: jquery.timers-1.2.js ...a good idea? No, it's a terrible implementation. This is not the way to empower the code it empowers. A better way would be to run the same concerns upon the click events of certain key elements within the view containing the partial. I just got the timer working in the short term as it was easy to wire up quickly to have something to show my superiors. (I'm not done with this yet.) Don't do this:

    $(function () {

       $(document).everyTime(3000, function (i) {

          prepareProgramPlanList(flatPrograms.split('|'), flatSampleTypes.split('|'));

          setOldList();

          revampCurrentlySelectedProgramPlans();

          setOldList();

          revampCurrentlyAvailableProgramPlans();

       }, 0);

    });


       
  • What is the point of this blog post? I hope it expositions some of the pain of creating new collections based upon other collections. If someone knows a better way to approach this problem, please let me know. I am new to this. There are numerous places herein where I am using a set of three sequential loops:
    1. I loop through an existing collection trying to find items that "make a match" and... for every match I increment a counter up one from zero.
    2. I create a dummy string. The string will have a number of commas in it equal to a number one less than number I ended up with in the counter. It will look like so "replace me,replace me,replace me" and will allow me to ultimately create an array with the appropriate number of records by way of .split(',');
    3. I go through a loop not unlike the first loop in which I change out the replace me values with what I really want in the array.
       
  • The problem is that as the first loop runs there is no way to know just how big the array I am to make should be and thus I have to define it by incrementing a counter and then creating an array based upon the counter's count. I may then "rerun" the first loop, so to speak, and just put data in my new array.

       
  • Isn't it awesome how with a List<T> in C# that one doesn't need to set a finite count size. One can always just incrementally add items onto the end of the list. If I could do something like that here I could do everything in one loop. Does anyone know how to address this problem in jQuery?

       
  • What else is interesting in the code above? Well, it shows how to pull the contents from a drop down list.

    $("#pps option").each(function () {

       oldList[$counterForPopulatingStringArray] = $(this).text();

       $counterForPopulatingStringArray++;

    });


       
  • Use $(this).val(); instead of $(this).text(); to get the "real" value of an item instead "public facing" one that the user sees.

       
  • Fill a drop down list with the contents of an array like so:

    $("#pps").append($('<option></option>').val(x[1]).html(x[0]));

       
  • Empty a drop down list:

    $("#pps option").remove();

       
  • Get the number of items in a drop down list:

    var countOfPrograms = $("#programsGroup-selection").get(0).options.length;

       
  • Get the number of items in an array:

    while ($counterForEndList < endList.length) {

       
  • Type cast a variable as an array:

    var endList = new Array();

No comments:

Post a Comment