Want to get rid of that X at the top right of the modal "Control"? Well here it is: (The bold part, moron)

     jQuery('#WaitingDiv').dialog({
          autoOpen: false,
          bgiframe: false,
          height: 150,
          width: 200,
          modal: true,
          open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); }
        });

And that's really it. Just thought I'd pass that on to you, the consumer.

On a side note, the big movie thing is the canceling of Spiderman 4 or at least going in a new direction. As much as I don't care, it might lead to my dream come true:

A spiderman movie based on the SNES classic: Spider-Man & Venom: Maximum Carnage. Uwe Boll, are you out there?

• ByATool.com gets a shiny new tool!
• Child IFrame Page Interacting with Parent Page… Yeah I went there.
• Get the jQuery DatePicker to Work With jQuery Modal Dialog
• jQuery – Check All Checkboxes Toggle Method Thingy

Special people like me do it in one.

    function toggleCheckboxes(buttonId, checkBoxNamePrefix, checked)
    {
      //Get all checkboxes with the prefix name and check/uncheck
      jQuery('[id*=' + checkBoxNamePrefix + ']').attr('checked', checked);

      //remove any click handlers from the button
      //  Why?  Because jQuery(buttonId).click() will just add another handler
      jQuery(buttonId).unbind('click'); 

      //Add the new click handler
      jQuery(buttonId).click(
        function() {
          toggleCheckboxes(buttonId, checkBoxNamePrefix, !checked);
        }
      );
    }

And POW! What? You want to know how to use it? Fine, but only because I'm nice.

   jQuery('#buttonName').click(
     function() {
       toggleCheckboxes('#buttonName', 'someCheckBoxName', true);
     }
   );

And in case you were still wondering why I used .unbind and didn't understand the comment, it's because using just .click will add another handler to the button. So next click you will get both check and uncheck all. Kind of hurts the effectiveness.

And there you have it. Once again I have filled your life with meaning. Couldn't be easier. Or maybe it could but that's not my problem now is it? Go back to doing something useful.

• ByATool.com gets a shiny new tool!
• Child IFrame Page Interacting with Parent Page… Yeah I went there.
• Get the jQuery DatePicker to Work With jQuery Modal Dialog
• jQuery Modal Dialog : Hide That Stupid X Button / Windows Close Button

Or you could see it as a knowledge transfer that you the reader can learn from because I am a generous and giving tool.

Whatever, I really don't care. I won't sleep any differently. I just don't feel like making 1000 posts of jquery stupidity.

I'll add more as I come across them.

Checkbox

How To Check a CheckBox

  jQuery('#CheckBoxId').attr('checked', false);

How To Know if a Checkbox is Checked

  jQuery('#CheckBoxId').is(':checked')

How To Find a Bunch of Like Named Checkboxes that are Checked

  jQuery('[id*=someCheckBox_]:checked');

Drop Down Lists

How to Add an Item/Option to a Drop Down List

 jQuery('#DropDownListId').append(jQuery('<option>').val(1).html("SomeText"));

Odd Note: Apparently jquery is smart enough to set the attributes on the option AND close the option with </option>

How to Remove an Item/Option from a Drop Down List

  jQuery('#DropDownListId option[value=\'3\']').remove();

How to Sort a Drop Down List by Option Text

  var sortedList = jQuery('#someDropDownList option').sort(
    function (first, second) {
      return first.text == second.text ? 0 : first.text < second.text ? -1 : 1;
    }
  );

  jQuery('#someDropDownList').html(sortedList);

Elements

How to Filter Out an Element in a List

  someElementList.filter('[id=someId]');

Example:

  //Uncheck all id like someId_ and check only where id = someId_1
  var someElementList = someElement.children('[id*=someId_]');
  someElementList.attr('checked', false);
  someElementList.filter('[id=someId_1]').attr('checked', true);

How To Find an Element Based on a Like Name/Using Wildcards

  jQuery('#SomeTable').children('tr[id*=SomeRowId]');

How To Know if a Something is Hidden

  jQuery('#CheckBoxId').is(':hidden')

Possible Use:

 function showOrHide(element) {
    if(jQuery(element).is(':hidden')) {
      jQuery(element).show();
    }
    else {
      jQuery(element).hide();
    }
  }

How to Disable an Input/Select

  jQuery('#DropDownListId').attr('disabled', 'disabled');

How to Enable an Input/Select

  jQuery('#DropDownListId').removeAttr('disabled');

How to Know if an Element Exists

  jQuery('#ElementId').length > 0

Possible use:

  function elementExists(elementId) {
    return jQuery(elementId).length > 0;
  }

String

How To Remove the First Character from a String

  someString.substring(1, someString.length)

Tables

How to Add a Row to a Table

  jQuery('#TableId > tbody:last').append('<tr>...</tr>')

How to Remove a Table Row

  jQuery('#TableId > tbody:last').children(someSortOfRowId).remove();

Methods

How to Post With a Link

  function postToUrl(path, params)
  {
    var method = "post"; 

    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);
    for(var key in params)
    {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", key);
        hiddenField.setAttribute("value", params[key]);
        form.appendChild(hiddenField);
    }
    document.body.appendChild(form);    

    form.submit();
  }

Use:

<a href="javascript:postToUrl('/SomeController/SomeAction/', { 'id', '1' })">link</a>

• ByATool.com gets a shiny new tool!
• Child IFrame Page Interacting with Parent Page… Yeah I went there.
• Get the jQuery DatePicker to Work With jQuery Modal Dialog
• jQuery Modal Dialog : Hide That Stupid X Button / Windows Close Button

Say you have this:

  <div>
    <input type="checkbox" name="JqueryIdList" value="1"  />
    <input type="checkbox" name="JqueryIdList" value="2" />
    <input type="checkbox" name="JqueryIdList" value="3" />
    <input type="checkbox" name="JqueryIdList" value="4" />
  </div>
  <div onclick="getIds('JqueryIdList');">
    CLICK
  </div>

And you need the getIds method to find all the checked checkboxes from that markup. Well it's actually fairly simple, or at least it wil be once I enlighten you. I should get paid for this...

  function getIds(checkList)
  {
    var idList = new Array();
    var loopCounter = 0;
    //find all the checked checkboxes
    jQuery("input[name=" + checkList + "]:checked").each
    (
      function()
      {
        //fill the array with the values
        idList[loopCounter] = jQuery(this).val();
        loopCounter += 1;
      }
    );
    ...
  }

The important part is this:

 jQuery("input[name=" + checkList + "]:checked").

As you can see, it is very simple. Give it the name of the checkboxes, add on the ":checked" and boom you have a list of checked checkboxes. Could it be more simple? I think not.

• ByATool.com gets a shiny new tool!
• Child IFrame Page Interacting with Parent Page… Yeah I went there.
• Get the jQuery DatePicker to Work With jQuery Modal Dialog
• jQuery Modal Dialog : Hide That Stupid X Button / Windows Close Button

How to center a div using jQuery.

Have used it. Works brilliantly. Although the:

  this.css("position","absolute");

May be overkill since any "pop up" div I create already has that in the style where personally I think it should be.

How does it work? Well break down the "top" part:

  this.css("top", ( jQuery(window).height() - this.height() ) / 2+jQuery(window).scrollTop() + "px");

To

   jQuery(window).height() - this.height() ) / 2

But why not just divide the height by 2? Well say the height of the window is 800 and your item is 600 high. If you just placed the item at 800 / 2, the bottom of the item would end up 1000. (800/2 = 400... 600 tall item + 400 starting point = 1000). So subtracting the item's height from the window height and THEN dividing by two ensures that that item, provided it is no taller than the window, will end up within the 800 tall window.

  + jQuery(window).scrollTop()

Now what if the user has scrolled the widow down? Well adjust for that. using the scrollTop(), the item can be started at the correct point adjusted with the scroll. Nice huh?

• No Related Posts

So pop quiz, and one that doesn't involve a hostage and shooting.

jQuery(document).ready
(
  function()
  {
    for(var loopCounter = 0; loopCounter < 3; loopCounter++)
    {
      var tempThing = loopCounter;
      alert('in' + tempThing); 

      jQuery(".someButton").click
      (
        function()
        {
          alert('out' + tempThing);
        }
      );
    }
  }
);
....
  <button class="someButton">click!</button>

What happens when you click that button? Well for one it will alert three times but what will it print out?

The first alert (in the loop) does what you would expect. It gives 0, 1, 2. But what about the button click? Well that's a little different. It gives 2, 2, 2... Wait what? The f--- is that? That makes no real sense.

Given that this was C#, it would output 0, 1, 2 because we would know that every loop the tempThing field is a new field. Sure it has the same name in code, but every iteration would create a new space in memory for a new tempThing. And then with closures, a reference would be made to that tempThing so that when the method actually runs, the values are what they should be. Javascript does something a little different. Go figure, right? Can't do anything like anyone else... anyone else being C#.

Now what does happen is it does give you the correct value of tempThing. What you didn't know (Assuming you didn't know because if you are reading this you either are really bored or don't know... or both) is that tempThing is global to that method. Turns out variables are global to the current scope no matter if in a loop or not. tempThing, no matter where in that function is created/instantiated/ect is the same tempThing through out the method. So what's happening is that the first time in the loop it's being created and every iteration after it's just being updated with the current loopCounter value.

How do you solve this? Well you have to make a method to create a method to set the value. AWESOME!!111

jQuery(document).ready
(
  function()
  {
    for(var loopCounter = 0; loopCounter < 3; loopCounter++)
    {
      alert('in' + tempThing); 

      jQuery(".someButton").click
      (
        createReturnMethod(loopCounter)
      );
    }
  }

);

//This is used to create a new method scope so that
//tempThing is unique to each call.
function createReturnMethod(loopCounter)
{
  var tempThing = loopCounter;

  return function(event)
  {
    alert('out' + tempThing);
  };
}

As you can see, I created a method to create a method to be run on click. Because tempThing is now in the second method's scope, it will be different for every time this method is called. Magic!

Here's a thought, if only you can prevent forest fires then you really should get on that. People have lost a lot of money because of your slacking.

• No Related Posts

So with no further build up or stupidity (I used that all up in building this game) I give you jQuery WHACK A MOLE which oddly enough has somehow clawed it's way into my hosting here. So if you're foolish enough to actually want to know how it works, there are plenty of comments in the script files. Just don't blame me for any loss of intelligence.

I might actually take this to the next horrifying level and make it an mvc application. Not sure I... no... THE WORLD can take it.

• ByATool.com gets a shiny new tool!
• Child IFrame Page Interacting with Parent Page… Yeah I went there.
• Get the jQuery DatePicker to Work With jQuery Modal Dialog
• jQuery Modal Dialog : Hide That Stupid X Button / Windows Close Button

Remember that question you never asked? Well once again I've answered it.

To take the normal sliding menu farther I thought I should have something happen when hovering over the menu items. Novel! Well as you can see if you clicked on the link above (Sorry, can't repost the link. Links are expensive.) the menu items have large counter parts that show up when hovered over and don't go away until the counter part or the main item is left. What does this all mean? I DON'T KNOW but I'll find out eventually. It's in the cards man, it's in the cards...

Ok so additions... For the style sheet, I added a class:

.menuItemBig
{
  height:100px;
  margin-right:5px;
  position:absolute;
  width:100px;
  z-index:100;
}

And have included a child div to the menu item:

Before

  <div class="menuItem floatLeft blue">1</div>

Now

  <div class="menuItem floatLeft blue">
    1
    <div class="menuItemBig red">THIS IS THE BIG ITEM 1</div>
  </div>

I added two methods:

//
// mouseenter: Find any menuItemBig within the given element and show
//             Reset the position of the menuItemBig element to appear
//             to be in the middle of the parent element
// mouseleave: Hide the child menuItemBig
//
function setOnHoverForMenuItems(items)
{
  jQuery(items)
  .each
  (
    function ()
    {
      jQuery(this).mouseenter
      (
        function()
        {
          //Why the positioning?  I wanted the child div to show up in the
          // middle of the parent div which is done by putting the child's left side
          // to half of the width of the parent over from the parent's left side
          var parentPosition = jQuery(this).position();
          var bigItems = jQuery(this).children(".menuItemBig");
          bigItems.css({ left: parentPosition.left - (jQuery(this).width() /2), top: parentPosition.top + 10  });
          bigItems.show();
        }
      );

      jQuery(this).mouseleave
      (
        function()
        {
          jQuery(this).children(".menuItemBig").hide();
        }
      );
    }
  );
}

Why not hover? *EDIT* It should be hover. Turns out an issue I was having with hover was not actually an issue with it... *END EDIT*

The other method I added was a simple one:

//
// Used to find any element of menuItemBig
//
function hideAllBigItems(bigItemParentItems)
{
  jQuery(bigItemParentItems).children(".menuItemBig").hide();
}

And where did I use these? I appended them to the setChildrenDivs method:

function setChildrenDivs(mainHolder)
{
  var menuItems = getMenuItems(mainHolder);

  for (var loopCounter = 0; loopCounter < menuItems.length; loopCounter++)
  {
    if(loopCounter > maximumToShow - 1)
    {
      jQuery(menuItems[loopCounter]).hide();
    }
  }

  setPager(jQuery(mainHolder).children(".leftPager"), getLastVisible, getNextInLineBack);
  setPager(jQuery(mainHolder).children(".rightPager"),getFirstVisible, getNextInLineFront);
  setOnHoverForMenuItems(menuItems);
  hideAllBigItems(menuItems);
}

So in all, this didn't take much at all, thanks to mouseleave. Next up... not sure. No idea if I will take this any further.

• ByATool.com gets a shiny new tool!
• Child IFrame Page Interacting with Parent Page… Yeah I went there.
• Get the jQuery DatePicker to Work With jQuery Modal Dialog
• jQuery Modal Dialog : Hide That Stupid X Button / Windows Close Button

The main idea is that there are two scroll arrows, one on each side, and X amount of divs. Now at the start, a certain amount of divs are hidden (global variable). When hovering over the left pager, for example, it causes one on the right to hide while one on the left appears giving the feeling of the items sliding.

EXAMPLE HERE!!11

The markup is simple, a holder with x number of elements that are "menuitems" and two pager divs.

<div class="mainHolder">
  <div class="leftPager green floatLeft"><</div>
  <div class="menuItem floatLeft blue">1</div>
  <div class="menuItem floatLeft red">2</div>
  <div class="menuItem floatLeft yellow">3</div>
  <div class="menuItem floatLeft blue">4</div>
  <div class="menuItem floatLeft red">5</div>
  <div class="menuItem floatLeft yellow">6</div>
  <div class="menuItem floatLeft blue">7</div>
  <div class="rightPager green floatLeft">></div>
</div>

I think from the classes you can tell what you need to know about them.

First thing we need from jQuery is methods to find various elements in the container when paging.

//When using the left pager, it's important to find the first visible element
//then find the item before it so that it can be shown.
function getNextInLineBack(menuItems)
{
  var oneBefore = null;

  for (var loopCounter = 0; loopCounter < menuItems.length; loopCounter++)
  {
    if(jQuery(menuItems[loopCounter]).is(":visible") && loopCounter > 0)
    {
      oneBefore = jQuery(menuItems[loopCounter - 1 ]);
      break;
    }
  }

  return oneBefore;
}

//Find the first visible element from the beginning.
//This will be needed when paging right since it will have to be hidden
function getFirstVisible(menuItems)
{
  var firstVisible = null;

  for (var loopCounter = 0; loopCounter < menuItems.length; loopCounter++)
  {
    if(jQuery(menuItems[loopCounter]).is(":visible") && loopCounter < menuItems.length - maximumToShow)
    {
        firstVisible = menuItems[loopCounter];
        break;
    }
  }
  return firstVisible;
} 

//Get the last possible visible item
//If the item is in an index less than the maximum number to show, then null is returned since there has to be no more or less than the maximumToShow.
function getLastVisible(menuItems)
{
  var lastVisible = null;
  for (var loopCounter = menuItems.length - 1; loopCounter > maximumToShow - 1; loopCounter--)
  {
    if(jQuery(menuItems[loopCounter]).is(":visible"))
    {
      lastVisible = menuItems[loopCounter];
      break;
    }
  }

  return lastVisible;
}

//Find the first visible from the end
//Pretty simple, this will be important when paging left since this
//will be the next item to be hidden
function getNextInLineFront(menuItems)
{
  var lastOne = null;

  for (var loopCounter = menuItems.length-1; loopCounter > -1; loopCounter--)
  {
    if(jQuery(menuItems[loopCounter]).is(":visible"))
    {
      lastOne = menuItems[loopCounter + 1];
      break;
    }
  }

  return lastOne;
}

Next is a method that is just used to stop having to repeat the same thing over and over when needing a list of all the menu items.

function getMenuItems(mainHolder)
{
  return jQuery(mainHolder).children(".menuItem");
}

Next is the method to handle what item to show and what item to hide when the pager has the mouse over it. Instead of having methods for the right and left pager, I just ended up having the methods for finding the item to hide and show sent through as parameters.

function showHideOnHover(pager, timer, getHideMethod, getShowMethod)
{
  //This is just candy for changing the color of the pager when the mouse
  //is over it
  jQuery(pager).removeClass("green");
  jQuery(pager).addClass("orange");

  //Remember those methods I passed through, well here they
  //are in use.  I'm using them to get the item to hide and the item
  //to show along with the list of items.
  var menuItems = getMenuItems(jQuery(pager).parent());
  var hide = getHideMethod(menuItems);
  var show = getShowMethod(menuItems);

  //If neither is null, then go ahead and show/hide
  //If either one is null, something isn't right and the timer
  //needs to be stopped.... timer??  Well I'll get to that
  //next.
  if(show != null && hide != null)
  {
    jQuery(hide).hide( "slide", { direction: "right" } , 0);
    jQuery(show).show( "slide", { direction: "left" } , 100);
  }
  else
  {
    timer.stop();
  }
}

Now for the method above the last one, this one involves the timer passed in the last method. This method actually sets the mouseover/mouseout events (aka hover). When mouseover, the timer is created and the showHideOnHover method is called every 500 units, that's we'll call tools, (Not sure how much that is, seems like a half second) after the first time it's called. On mouseout, the timer is stopped, nulled out, and the pager changes it's color.

function setPager(pager, hideMethod, showMethod)
{
  //Making the timer variable "global" to the events so that I know
  //I have the same timer for both mouseover and mouseout.
  var newTimer;
  pager.hover
  (
    //Mouseover method
    function()
    {
      var first = true;
      //This sets the timer, consequently starting the method for the first time.
      //Why timer doesn't have a start method I don't know.  Ask jquery.com.
      //The first thing is just so that the first time around it runs right away,
      //then each call afterwards comes every 500 tools.
      newTimer = jQuery.timer
                      (
                         0, //First time through, runs after 0 tools.
                         function(timer)
                         {
                           showHideOnHover(pager, timer, hideMethod, showMethod);
                           //If this is the first time through, reset
                           //timer to run every 500 tools.
                           if(first)
                           {
                              timer.reset(500);
                              first = false;
                           }
                         }
                       );
    },

    //Mouseout method
    function()
    {
      //mouse is done, stop the timer
      newTimer.stop();
      newTimer = null;
      jQuery(pager).addClass("green");
      jQuery(pager).removeClass("orange")
    }
  );
}

Now for the method above the one... above. This is used to set the children of the passed in holder.

function setChildrenDivs(mainHolder)
{
  //Get the items for the holder
  var menuItems = getMenuItems(mainHolder);

  //Hide all the items after the first X items (maximumToShow)
  for (var loopCounter = 0; loopCounter < menuItems.length; loopCounter++)
  {
    if(loopCounter > maximumToShow - 1)
    {
      jQuery(menuItems[loopCounter]).hide();
    }
  }

  //set the pagers.
  setPager(jQuery(mainHolder).children(".leftPager"), getLastVisible, getNextInLineBack);
  setPager(jQuery(mainHolder).children(".rightPager"),getFirstVisible, getNextInLineFront);
}

FINALLY THE END! This is the document.ready method used to set this whole joke in motion. maximumToShow is just how many items to show at a time and is global.

var maximumToShow = 5;

jQuery(document).ready
(
  function()
  {
    //Find every holder on the page and set everything in motion.
    var mainHolders = jQuery(".mainHolder");
    for (var loopCounter = 0; loopCounter < mainHolders.length; loopCounter++)
    {
      setChildrenDivs(mainHolders[loopCounter]);
    }
  }
);

Why the timer? If you haven't figured that out yet, well it's because I had issues with how to get the menu to keep doing it's thing as long as the user had his/her mouse over a pager. I didn't want this to be a click menu because, let's be honest, that would be much easier. So as is, the timer is started the moment the mouse is over a pager and hides/shows an item. Then every 500 tools the mouse is over the pager, it continues the hide/show until it runs out of items to show/hide. (End of the list)

Uhg that's annoying to type out even with cut and paste so I will host it here.

I suppose the next part of this would have the items blow up or something when hovering over them but that should be much easier than this was.

• jQuery Slide and Pairing a Div’s Hover With a Div’s Slide
• ASP.Net MVC, jQuery, JSon, and paging… how’s that for a SOE title?
• jQuery: Add a Pop Up Div to a Link Dynamically
• JQuery, Position : Absolute, and How to Make It All Work

LIVE EXAMPLE HERE

The idea is to set the hover on one div to show/hide another div WITHOUT having to use some kind of id/name trick (as in setting the id to "divHide1") and to have it be completely self setting in the .ready method. Why would this be at all useful? Say you want to roll through a list of things and generate the divs, but want to defer the jQuery until the page has loaded. And you don't want to have to resort to:

    <div id="someDiv<%= someId %>"></div>

like structure where you parse some identifier from the id property. Mostly because you have no idea how many someDiv1s there could be on the page. It could be a highly reused name (someDiv) and that could lead to a mess.

Also the reason 'cuz. If you have any more questions of why after that answer, well you're just being annoying.

Anywho, here's the actual html for structure.

   <div class="mainDiv">
      <div class="showDiv" id="oneTop">
        Kaneda?
      </div>
      <div class="slideDiv" id="one">
        What do you see?!
      </div>
    </div>
    <div class="clear"></div>

Now I get that this isn't off a foreach, but it doesn't take much to figure out that it's easily made into a loop if you just loop it over and over. Why? Because first there are no ids or names so that you can't have two of the same name and also because that chunk is self contained.

So what is going on there? Simple, you have a parent container that holds a div to hold and a div to hover over and the other that will be shown/hidden.

Here's the styles involved just incase you care:

    <style type="text/css">
        .clear
        {
        	clear:both;
        }

        .leftDiv
        {
        	float:left;
        }

        .mainDiv
        {
        	margin:5px;
        	height:200px;
        }

        .rightDiv
        {
        	float:left;
        }

        .showDiv
        {
        	float:left;
        	margin-right:5px;
        	height:200px;
        	background-color:Silver;
        }

        .slideDiv
        {
        	background-color:Teal;
        	height:200px;
        	position:absolute;
        	float:left;
        	z-index:100;
        }
    </style>

That doesn't entirely matter, but it does to show the div "sliding" over another div. Kind of a little somethin' somethin' I threw in at no extra cost. Now for the jQuery:

First the method for setting the mouse over and out events for the show div, we turn to .hover:

    function setHover(currentSlideDiv, currentStableDiv)
    {
      currentStableDiv.hover
      (
        //first parameter is the method for showing the div on mouse over
        function()
        {
          if (currentSlideDiv.is(":hidden"))
          {
            currentSlideDiv.show("slide", { direction: "left" }, 100);
          }
        },
        //second parameter is the method for hiding the div on mouse out
        function()
        {
          if (currentSlideDiv.is(":visible"))
          {
            currentSlideDiv.hide("slide", { direction: "left" }, 100);
          }
        }
      );
    };

Now for the method that actually uses these:

    //This is used to take in one of the main divs and set all the
    //show and slide divs within.
    function setChildrenDivs(mainDiv)
    {
      //get all the show and slide dvis within the main div
      var mainChildrenStableDiv = jQuery(mainDiv).children(".showDiv");
      var mainChildrenSlide = jQuery(mainDiv).children(".slideDiv");

      //loop through the list of show divs
      for (var loopCounter = 0; loopCounter < mainChildrenStableDiv.length; loopCounter++)
      {
        //Get the show div and it's corresponding slide div using the
        //two lists and the current counter.
        var currentStableDiv = jQuery(mainChildrenStableDiv[loopCounter]);
        var currentSlideDiv = jQuery(mainChildrenSlide[loopCounter]);

         //This is to make sure the slide is where it should be.
         //to the right of the show div.
         var containerPosition = jQuery(currentStableDiv).position();
         jQuery(currentSlideDiv).css({ left: containerPosition.left + currentStableDiv.width() });
        //Set the mouse over and the mouse out on the show div
        setHover(currentSlideDiv, currentStableDiv);
      }
    }

Now the final touch, the .ready method:

    jQuery(document).ready
    (
      function()
      {
        //hide all the slide divs
        jQuery(".slideDiv").hide();

        //find all the parent divs
        var mainDivs = jQuery(".mainDiv");

        //set the children
        for (var loopCounter = 0; loopCounter < mainDivs.length; loopCounter++)
        {
          setChildrenDivs(mainDivs[loopCounter]);
        }
      }
    );

And boom, now you have multiple show/hide (Slide in this instance). Now if I could just find a use for it...

Oh yeah and you'll need jQuery 1.3.2 and jQuery ui 1.7.2 to use this. At least those are the versions I know this works with.

Update: Due to popular demand... one person... Source can be found here.

• jQuery Slide Menu… Another Cause I Can Experiment
• ASP.Net MVC, jQuery, JSon, and paging… how’s that for a SOE title?
• jQuery: Add a Pop Up Div to a Link Dynamically
• JQuery, Position : Absolute, and How to Make It All Work

So for an experiement the other day I decided to try my hand at some sort of dynamic grid using jQuery's ajax fun and JSon. Just so happens that this works really well with MVC's REST like makeup. Don't know what REST is? On a very tool level, it's using a url and a command to tell the server what to do. So something like:

www.byatool.com/users/dostuff

Could mean either get all users (if using get) or create a user (If using post). And yes that is probably a ridiculously simplistic view so I'd suggest consulting the Wikitruth. In an MVC sense this would be:

Controller: Users
Action: dostuff

Now most likely your Get All Users action isn't going to the same as your Add A User action, but it was just a stupid example ok?

However, with jQuery what this means is you have a simple url that it can call and get information from, making it incredibly easy to set up a dynamic grid.

So first off, lets say I have a Forum controller with an action of IndexJquery... yeah I know cheesy name, but it gets the job done. Basically the method IndexJquery would have to take in a page number and optionally (And for this example) how many items to show along with a sort. With that it should return a JSon "object" that will be in this example holds first page, last page, next page, previous page, sortBy, and some kind of list of stuff. (For the two people actually reading this, comment if you want the c# code. It's really just basic MVC stuff.)

The markup for this is pretty simple. I have a div to hold the grid, four directional divs that work as buttons (First, Previous, Next, Last), and two div "butons" for how many items to show.

    <div>
        <div id="divHolder">
        </div>
    </div>
    <div>
        <div id="divFirstPage" class="divLink floatLeft">
            <<
        </div>
        <div id="divPreviousPage" class="divLink floatLeft">
            <
        </div>
        <div id="divNextPage" class="divLink floatLeft">
            >
        </div>
        <div id="divLastPage" class="divLink floatLeft">
            >>
        </div>
    </div>
    <div class="clear"></div>
    <div>
        <div id="divAmountToShowOne" class="divLink floatLeft">
            1
        </div>
        <div id="divAmountToShowFive" class="divLink floatLeft">
            5
        </div>
    </div>
    <div class="clear"></div>

As you can see exactly as advertised.

Ready for the call? It's waaaaay hard:

        function getGrid(pageNumberIn, amountToShowIn, sortByIn)
        {
            jQuery.getJSON
            (
               //This is the url for the information I need
               "http://www.someurl.com/Forum/IndexJquery/",
               //this is the construction of the "object" to send... really this just
               //means that I have a method somewhere looking for pageNumber,
               //amountToShow, and sortBy
               {
                   pageNumber: pageNumberIn,
                   amountToShow: amountToShowIn,
                   sortBy: sortByIn
               },
               //This is the method to call once this ajax transaction has completed...
               //transaction may not be the best word.  Basically it has to be a method
               //that takes in the result from the getJSon call
               returned
            );
        }

Next would be the script to actually create the grid. Looks verbose, but most likely thats because I didn't refactor much.

    function returned(jsonObject)
    {
        //Have to remove all the previous click event handlers since because
        //this is all client side, there's no "refresh" and therefore the object
        //is still in memory.  So even though I might call the method to get the
        //information, the "objects" are still in memory.
        jQuery("#divFirstPage").unbind("click");
        jQuery("#divLastPage").unbind("click");
        jQuery("#divNextPage").unbind("click");
        jQuery("#divPreviousPage").unbind("click");
        jQuery("#divAmountToShowOne").unbind("click");
        jQuery("#divAmountToShowFive").unbind("click");

        //Ok so now that the event is not being listened to, set up the listeners
        //The idea is to call that getGrid method and pass in the values straight
        //off the previously returned json object.  Using jQuery's easy .click method
        //makes this so simple.
        jQuery("#divFirstPage").click(function() { getGrid(jsonObject.FirstPage, jsonObject.AmountToShow, jsonObject.SortBy); })
        jQuery("#divPreviousPage").click(function() { getGrid(jsonObject.PreviousPage, jsonObject.AmountToShow, jsonObject.SortBy); })
        jQuery("#divNextPage").click(function() { getGrid(jsonObject.NextPage, jsonObject.AmountToShow, jsonObject.SortBy); })
        jQuery("#divLastPage").click(function() { getGrid(jsonObject.LastPage, jsonObject.AmountToShow, jsonObject.SortBy); })
        jQuery("#divAmountToShowOne").click(function() { getGrid(0, 1, jsonObject.SortBy); })
        jQuery("#divAmountToShowFive").click(function() { getGrid(0, 5, jsonObject.SortBy); })

        //Again since this is client side, the divHolder "object" still is holding
        //the previous results.  These have to be cleared.
        jQuery("#divHolder").children().remove();

        //Create the table and loop through the list.
        var mytable = document.createElement("table");
        var mytablebody = document.createElement("tbody");

        for (loopCounter = 0; loopCounter < jsonObject.ListForViewing.length; loopCounter++)
        {
           var currentItem = something.ListForViewing[loopCounter];
           var mycurrent_row = document.createElement("tr");

           var mycurrent_cell = document.createElement("td");
           var currentText = document.createTextNode(currentItem.ForumName);
           mycurrent_cell.appendChild(currentText);
           mycurrent_row.appendChild(mycurrent_cell);

           mytablebody.appendChild(mycurrent_row);
        }

        mytable.appendChild(mytablebody);
        //Don't forget to add the table to the div!!11
        jQuery("#divHolder").append(mytable);
        return false;
    }

And boom. So easy even a ca... tool can do it. Now if you want this grid to come preloaded, it's pretty easy:

    jQuery(document).ready
    (
        function setPage()
        {
            getGrid(0, 10, null);
        }
    )

• jQuery Slide Menu… Another Cause I Can Experiment
• jQuery Slide and Pairing a Div’s Hover With a Div’s Slide
• jQuery: Add a Pop Up Div to a Link Dynamically
• JQuery, Position : Absolute, and How to Make It All Work

If you're developing a web based app that might be used by IPhone users, there is a simple way to stop the IPhone from shrinking the page onload. Thanks to Mark W on The Stack Hath Runith Over there is a simple solution.

  <head runat="server">
     <title>I LOVE TITLES!</title>
     <meta name="viewport" content="width=420" />

That one beautiful metatag makes life worth living again... until the next Street Fighter movie comes out. Then life is back in the forfeit container. Here's a link to more options:
BYEBYE

• No Related Posts

<a onclick="return ShowCommentForPost('1', this, 'THIS IS SO STUPID!');" href="www.byatool.com">word.</a>

Kind of annoying since I would have to explain that '1' is the name and it has to be unique for every one of these, this isn't really understood by those people, and well it just seems more complicated then it needs to be. So what if I told you it could look like this?

<a href="http://www.byatool.com" class="showItLink" xmlns:comment="hihihi">HI</a>

Gorsh, that seems even better and it works in both IE and Firefox... which might be a first for this site and anything javascript. First let's get the css out of the way, shall we?

    .showItLink
    {
    }

    .postComment
    {
        background-color:Gray;
        border-color:Black;
        border-style:dotted;
        border-width:thin;
        color:White;
        margin-right:3px;
        padding:3px;
        position:absolute;
        text-decoration:none;
        z-index:50;
    }

Most of the is just for looks, but like the older example I've called upon the power of position:absolute and z-index well that's just pulling it in front of everything else.

Next part will be the actual code, and if you take the method from THE POSITION ABSOLUTE POST

    function SetTopAndLeft(parentContainer, elementToSet)
    {
        var containerPosition;

        containerPosition = $(parentContainer).position();
        $(elementToSet).css({ top: containerPosition.top + 10, left: containerPosition.left + 10 });
    }

and add in a simple span creation method:

    function CreateDiv(innerText, cssClass)
    {
        var spanToAdd;

        spanToAdd = document.createElement('span');
        spanToAdd.className = cssClass;
        spanToAdd.innerHTML = innerText;

        return spanToAdd;
    }

you're ready for the actual fun part... making sure something pops up when the link is clicked.

jQuery(document).ready  //Everything inside this will load as soon as the DOM is loaded and before the page contents are loaded.*
(
    function()  //this is the start of an anonymous method
    {
        jQuery(".showItLink").click //find all things with the .showItLink class and assign the click event to the next anonymous method
        (
            function(event) //this is the start of an anonymous method for the click event
            {
                var containerPosition;
                var createdSpan;
                var comment;

                comment = jQuery(this).attr("xmlns:comment");  //Get the value from the comment attribute on the link.
                createdSpan = jQuery(this).children(".postComment"); //Find a possible span already attached to the link if it exists.  The span is of class 'postComment'

                if (createdSpan.length == 0)  //span doesn't exist
                {
                    createdSpan= CreateDiv(comment, "postComment");  //create the span
                    jQuery(this).append(createdSpan);  //Add the span to the link
                    jQuery(this).children(".postComment").hide();  //Make sure the new span is hidden
                }
                SetTopAndLeft(this, createdSpan);  //Set the position of the span
                jQuery(createdDiv).toggle();  //This will hide if it's showing, show if it's hidden... kind of nice huh?

                event.preventDefault();  //Equivalent to false.  Need this for Firefox.
            }
        );
    }
);

And boom you have something that works. Hooray.

Couple things of note:

.Hide - At first I though this would screw up my class for the span by removing the current class and adding display:none. Turns out it doesn't harm the original class. Kind of nice.

.Toggle() - This is really nice. It will hide if it is showing and show if hidden. Stupid easy to use and is pretty effective. Just like .Hide, the class of the element is not harmed.

$ versus jQuery - Some people might notice that I am not using the short hand $ for my jQuery calls. Turns out that it might be safer this way. There are other javascript libraries that use the $ short hand like prototype. I ran into this with WordPress since it uses both jQuery and Prototype and blocks jQuery from using $ since it could conflict with other libraries. Weeeee!

• JQuery, Position : Absolute, and How to Make It All Work
• Child IFrame Page Interacting with Parent Page… Yeah I went there.
• jQuery Validation – How to Use to Get Rid Of Even The Toughest Stains
• jQuery Slide Menu… Another Cause I Can Experiment

Firefox? Not so much:

Well... turns out JQuery pretty much does it for me. With a simple method, you can set one element's position relative to a parent's position:

    function SetTopAndLeft(parentContainer, elementToSet)
    {
        var containerPosition;

        containerPosition = $(parentContainer).position();
        $(elementToSet).css({ top: containerPosition.top + 10, left: containerPosition.left + 10 });
    }

Really simple, you get the position of the parent container and you set the child element's top and left to it. Or in this case, I have it just off since hiding the parent container could be problematic. (Say if the parent container is a link AND NOW YOU CAN'T FIND IT TO CLICK ON IT AND THINGS HAPPEN BAD THINGS AND THE WORLD EXPLODES BECAUSE OF YOU!)

And boom, you can for once be a winner just like me.

• jQuery: Add a Pop Up Div to a Link Dynamically
• Child IFrame Page Interacting with Parent Page… Yeah I went there.
• jQuery Validation – How to Use to Get Rid Of Even The Toughest Stains
• jQuery Slide Menu… Another Cause I Can Experiment

So why did I do this? Well it started with the idea of having something simple for a blog that has multiple authors: What if other authors could add notes to someone's post in the post. Well the idea of using some kind of text change (Like italics) sounded lame. I wanted something easy that could be replicated quickly and wouldn't be visible unless needed. Thus the onClick idea. Now the next problem I had was the class needed for the style sheet. As you can see, when the div is shown, it doesn't displace any of the items on the page. This is because I am using position:absolute and a high z-index. This allows for the div to lay on top of other things and not touch them. Problem with absolute is that it basicaly plants the div in relation to it's parent container. Now that whole parent container thing seems to be up for interpretation when you are talking about browsers. Each seems to deal with it the way it sees fit.

Originally I had it as a div that would contain this new div. This was a pain in the -ss. In IE it showed up over the div, FireFox not so much. So the next thought was to create a div to hold the div that held the div. Something that isn't exactly "user friendly" to be sure. Then it hit me, maybe I could put this in a link. After all, people who are viewing the blog would understand it's something they can click on (Provided I don't screw with the link styles too much) and it's easy for non coders to copy and paste.

So on to the promised land. First I'll just get the CSS out of the way since it's absolutely needed but needs little explanation:

.hidePostComment
{
    visibility:hidden;
    position: absolute;
    z-index:-100;
}

.showPostComment
{
    background-color:Gray;
    border-color:Black;
    border-style:dotted;
    border-width:thin;
    color:White;
    margin-right:3px;
    padding:3px;
    position:absolute;
    text-decoration:none;
    visibility:visible;
    width:100px;
    z-index:10;
}

.hidePostComment

As you can see, I've screwed with the z-index, visibility, and position. Position I've already explained, and I think you can understand why visibility is hidden with this class. However, z-index might not be something you know about. Basically,z-index tells the browser where an item is in a vertical sense. When you look at a browser, there are actually a lot of layers regardless of the 2nd appearance. The z-index is used to bring something forward or backward. If I want the div to be behind say the text I am typing right now, it has to be at a z-index lower than the text. I used -100 in the example just to make sure it's behind anything. It's really an arbitrary number though. A positive number would make the div appear in front of the text (And in that case the text would not show up since it would be "behind" the div) which is what I did with the visibility class.

.showPostComment

Mostly just a bunch of visual changes like border and background color. However, you will also notice the the position is still absolute and that the z-index is now 10. (positive) The div will now effectively be "in front" of the link when it shows up giving it the pop up look. One Note: I had to add in text-decoration:none since the div is attached to the link and IE wants to drag the underline with the pop up causing the text to up with an underline. Kind of odd but no big deal.

Now for the code:

function BuildSelectableSpanForPost(spanName, parentElement, innerText)
{
    var divToAdd;
    var parentContainer;
    //check to see if the parentElement is actually an element or string.  If string, use it
    //to find the element.
    if (typeof parentElement == 'string')
    {
        parentContainer = document.getElementById(parentElement);
    }
    else
    {
        parentContainer = parentElement;
    }
    //Create the div
    //set the name (The name must unique since there could be a million "pop ups" per page
    //set the id
    //set the text for the div which is what we want to show up in the pop up
    divToAdd = document.createElement('span');
    divToAdd.setAttribute('name', spanName);
    divToAdd.id = spanName;
    divToAdd.innerHTML = innerText;

    //Add the div to whatever element that was found.  For this post it will be a link
    //but it doesn't really matter.
    parentContainer.appendChild(divToAdd);

    return divToAdd;
}

So there is the building of the pop up div. Here's the method to be called by the onclick event:

function ShowCommentForPost(postName, parentElement, innerText)
{
    var divName;
    var createdDiv;
    var parentContainer;

    //Same as before
    if (typeof parentElement == 'string')
    {
        parentContainer = document.getElementById(parentElement);
    }
    else
    {
        parentContainer = parentElement;
    }
    //See if the pop up div  already exists.  If it does, then don't create again
    //I didn't have this before and it would create a new div everytime
    //That's what some might call a surprise feature
    divName = 'comment' + postName;
    createdDiv = document.getElementById(divName);
    //Ooops, the div didn't exist, create it and add the hide class
    if (createdDiv == null)
    {
        createdDiv = BuildSelectableSpanForPost(divName, parentContainer, innerText);
        //this is a method found on this post
        ClassHandler.AddClass(createdDiv, 'hidePostComment');
    }

    //this is a method based off this post
    //As you can guess it will show or hide depending on which class it already has.
    ShowHideElementBasedOnCss(createdDiv);

    return false;
}

To start, there is the code to create the actual div.

Now for the actual use:

<a onclick="return ShowCommentForPost('1', this, 'THIS IS SO STUPID!');" href="www.byatool.com">word.</a>

Pretty easy to actually use right? The actual location doesn't really matter since it the method will always return false and therefore the link will never redirect. Also, you'll see that I put 1 as the name sent in. The name sent in doesn't matter what it is, but for every link it has to be different. If you are using this in a blog situation where there could be multiple blog posts in one page, I would suggest the name sent in would be the title and an increasing number.

If you got to this point and feel robbed of five minutes in your life, well just be happy this post robbed me of 15 minutes of mine.

• Add, Remove, or Replace a CSS Class Using Javascript
• jQuery: Add a Pop Up Div to a Link Dynamically
• JQuery, Position : Absolute, and How to Make It All Work
• Use Javascript and an HttpHandler to Load an Image from a Database

This is the idea, you want show or hide something on a click of it.

    <div onclick="HideOrShowMe();">
      YAYAAYAYAY!
    </div>

Annoying thing is trying to keep up with whether it's hidden or not. Now there are ways to do this for sure, but if you had them you wouldn't be here... or you just love idiotic banter. Either way, you're here.

To start, get a class going:

    if (typeof ClassHandler != 'object')
    {
      ClassHandler = new Object();
    }

Normal declaration. Yeehaw. Now we need a method to check for the class:

ClassHandler.CheckForClass = function(element, nameOfClass)
{
    var returnValue = false;

    //Check to see if the element variable is a string or (hopefully) a control.
    //If it is a string, get the control that belongs to that id.
    if (typeof element == 'string')
    {
        element = document.getElementById(element);
    }

    //next you use a regular expression to check the className property for
    //  the class you want.  If it finds a match, you're good to go.
    if (element.className != '')
    {
        returnValue = new RegExp('\\b' + nameOfClass + '\\b').test(element.className);
    }

    return returnValue;
}

Ok so now you have a method to check if it's there... but what about if you want to replace the old one with a new one? Well that could be broken into two methods first (Both that are useful). First one is the removal of the old class:

ClassHandler.RemoveClass = function(element, nameOfClass)
{
    var returnValue = false;

    //You know the drill
    if (typeof element == 'string')
    {
        element = document.getElementById(element);
    }

    //Hey cool, I just used the CheckForClass method
    if (ClassHandler.CheckForClass(element, nameOfClass))
    {
        //Real simple, replace the old
        //But you have to check if the nameOfClass exists with a preceding space
        //If it does, then you replace that with a space, other wise just replace
        //the nameOfClass with a space.
        element.className = element.className.replace((element.className.indexOf(' ' + nameOfClass) >= 0 ? ' ' + nameOfClass : nameOfClass),'');
        returnValue = true;
    } 

    return returnValue;
}

And now you'll have to add in the new one.

ClassHandler.AddClass = function(element, nameOfClass)
{
    var returnValue = false;
    //lalalala
    if (typeof element == 'string')
    {
        element = document.getElementById(element);
    }
    //If className already has a value, precede the nameOfClass with a space
    // otherwise just add it in.
    if (!ClassHandler.CheckForClass(element, nameOfClass))
    {
        element.className += (element.className ?  '  '  :  '') + nameOfClass;
        returnValue = true;
    } 

    return returnValue;
}

Now for the replace:

ClassHandler.ReplaceClass = function(element, classToRemove, classToAdd)
{
    var returnValue = false;

    //african elephants only have four teeth for chewing their food.
    if (typeof element == 'string')
    {
        element = document.getElementById(element);
    }

    //Remove the old one
    //Add the new one
    if(ClassHandler.CheckForClass(element, classToRemove))
    {
        ClassHandler.RemoveClass(element, classToRemove);
        ClassHandler.AddClass(element, classToAdd);
        returnValue = true;
    }

    return returnValue;
}

Now you might be thinking, "Tool, why don't you just use the replace method in the replace method." Well I suppose you could, but this way you have two other methods at your disposal for future use. Up to you really, part of this was because I actually needed those methods and the title says "Add, Remove, or Replace". I can't go against the title. I don't have that kind of strength.

Usage? Well there are couple ways you can do this.

    if(ClassHandler.CheckForClass('someDiv', 'hide'))
    {
       ClassHandler.ReplaceClass('someDiv', 'hide', 'show');
    }
    else
    {
       ClassHandler.ReplaceClass('someDiv', 'show', 'hide');
    }

or this:

    if(!ClassHandler.ReplaceClass('someDiv', 'hide', 'show'))
    {
       ClassHandler.ReplaceClass('someDiv', 'show', 'hide'));
    }

And other ways to be sure. Now I'm not saying this is the best way to do it, just a decent way... although looking back on this I wonder if I could clean up the regex stuff.

• Add a Pop Up Div to a Link Dynamically
• jQuery: Add a Pop Up Div to a Link Dynamically
• JQuery, Position : Absolute, and How to Make It All Work
• Use Javascript and an HttpHandler to Load an Image from a Database

Here's the problem, you have a section that you want to only show the horizontal scroll bar. Now the scroll bar is usually set with the overflow keyword in css:

  overflow:auto;

But what does this do? Well if the section you have is larger than its parent (Say a pre section in a set width div), both scroll bars come up. Sometimes that's not a bad thing but sometimes it looks really annoying if you only have two lines in it like:

Since it will automatically force both scroll bars. And on top of that, the scroll bars themselves now take up space and essentially cover up some of that second line. Well there's two ways you can go about this in order to at least allow for everything to be seen without a verticle scroll.

1)

You can use the overflow-x and overflow-y keywords:

  {
    overflow-y:hidden;
    overflow-x:auto;
  }

What this does is completely hides the verticle scroll bar. Now this will work very well if you have sections that are of a specific height. Problem is if the height isn't set specifically, it will just not show the parts that would normally need the verticle scroll for. (Happens sometimes)

This brings us to the second solution:

B)

Padding.

  padding:8px 0px 40px 0px;
  overflow-x:auto;
  overflow-y:hidden;

Really simple addition that will basically push the bottom of the container down so that the writing that was being hidden before (Because the scroll bar didn't exist) is now pushed upwards causing no loss of stuff.

As you can see, now everything can be... eh seen. Sure you get that annoying bit of space, but the 40px I'm using could be a bit of overkill. You really just have to shoot for a number that allows the bottom to be shown. But hey, life is tough.

• Force Embeded Video Behind A JQuery Modal Dialog
• Element ‘Embed’ Is Not Supported: Embedding YouTube Video Without The Embed Tag
• Get the jQuery DatePicker to Work With jQuery Modal Dialog
• Add a Pop Up Div to a Link Dynamically

Before I can show you what you can do with jQuery, I think I should probably show you how to get a reference to jQuery into your code.

In ASP.NET you can add your reference directly to your Script Manager

<asp:scriptmanager id="pageScriptManager" runat="server">
	<scripts>
		<asp:scriptreference path="/client/jquery-1.3.1.min.js" />
	</scripts>
</asp:scriptmanager>

What does jQuery have to offer? First and foremost, jQuery has given me power over the Document Object Model (DOM)! jQuery Selectors are the greatest thing since sliced bread, no lie. Being able to EASILY find an object or group of objects in the DOM by ID, CSS Class, or by HTML Tag is something web developers have long needed.

To select an object from the DOM by ID would look like this:

$('#ID_Goes_Here')

To select an object from the DOM by CSS Class would look like this:

$('.CSS_Class_Name_Goes_Here')

To select an object from the DOM by HTML Tag would look like this:

$('<Tag_Goes_Here>')

With jQuery Selectors being so simple, it allows the developer to easily select an object or a group of objects. Now that we can select objects, what can we do with them? This is where the power of Selectors really builds into what else you can do. In a web application, round trips to the server to manage UI is wasteful. I avoid JavaScript like the plague because it's a pain in the ass. jQuery makes client-side UI management feel like climbing the rope in gym class.

For example, if I have a label that I want to be rendered but not visible I could create the label.

<asp:label id="Label4" runat="server" cssclass="myLabel" text="This is " />

And later on in jQuery I can hide it like this.

$('#Label4').css('display', 'none');

It's nice to be able to easily select an object and modify it, but what if you have a whole group of items you want to modify? With jQuery, you can EASILY loop through a collection of objects.
In this example I have a group of labels.

<asp:label id="Label1" runat="server" cssclass="myLabel" text="This is "  />
<asp:label id="Label2" runat="server" cssclass="myLabel" text="This is " />
<asp:label id="Label3" runat="server" cssclass="myLabel" text="This is " />
<asp:label id="Label4" runat="server" cssclass="myLabel" text="This is " />

Now I want to update the text of each label to include its ID. I am going to loop through each object in the DOM with a CSS Class of .myLabel.

$('.myLabel').each(function() { $(this).append(this.id); });

What the jQuery code above does is execute a function that will append the object's ID to its text value. Notice the Selector inside the function $(this). The syntax is used to find the loop's current object in the DOM.

I do a lot of web work where I create controls on the fly. For my last example, I just wanted to show a way to quickly insert some HTML into a container object.

I will start with a Panel AKA a DIV.

<asp:panel id="Panel1" runat="server" />

Now I am going to use jQuery to select my DIV and add some HTML to it.

$("#Panel1").html("<ul><li>Item One</li><li>Item 2</li></ul>");

Now I have shown you some snippets here and there, let me show you what my page actually looks like.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
	<head runat="server">
		<title>jQuery Examples</title>
		<link href="/style/jQuery.css" rel="Stylesheet" type="text/css" />
		<script type="text/javascript">
			function pageLoad() {
				$('.myLabel').each(function() { $(this).append(this.id); });
				$('.myLabel').css('color', '#FFFFFF').css('font-size', '30px');
				$('#Label4').css('display', 'none');
				$("#Panel1").html("<ul><li>Item One</li><li>Item 2</li></ul>");
			}
		</script>
	</head>
	<body>
	    <form id="pageForm" runat="server">
			<asp:scriptmanager id="pageScriptManager" runat="server">
				<scripts>
					<asp:scriptreference path="/client/jquery-1.3.1.min.js" />
				</scripts>
			</asp:scriptmanager>
 
			<asp:label id="Label1" runat="server" cssclass="myLabel" text="This is "  /><br />
			<asp:label id="Label2" runat="server" cssclass="myLabel" text="This is " /><br />
			<asp:label id="Label3" runat="server" cssclass="myLabel" text="This is " /><br />
			<asp:label id="Label4" runat="server" cssclass="myLabel" text="This is " /><br />
 
			<asp:panel id="Panel1" runat="server" /><br />
		</form>
	</body>
</html>

Links
jQuery: http://www.jQuery.com/
Document Object Model: http://en.wikipedia.org/wiki/Document_Object_Model

Twitter: http://www.twitter.com/RockCityGhost

• ByATool.com gets a shiny new tool!
• Child IFrame Page Interacting with Parent Page… Yeah I went there.
• Get the jQuery DatePicker to Work With jQuery Modal Dialog
• jQuery Modal Dialog : Hide That Stupid X Button / Windows Close Button

You have a button and when it's pressed you want to have it fill a drop down list without a postback. So your first thoughts are, "I like Mentos" followed by, "WebMethod" since you of course read this super awesome post. Now it might look like this:

        function GetUserList()
        {
            PageMethods.GetUserList(OnGetUserListComplete);
        }

        function OnGetUserListComplete(result)
        {
            var dropdownList = $get('dropdownListID');
            for (var i = 0; i < result.length; i++)
            {
                var item;
                item = document.createElement("option");
                item.text = result[i].UserName;
                item.value = result[i].UserID;
                dropdownList.options.add(item);
            }
        }

And GetUserList would be called on click. Fine and dandy, but this sort of bad since you're hardcoding the id of the control. Meh. You look back at the method and see that there just isn't a way to pass in a name, and if you didn't you would be sooooo wrong it hurts. Shame on you. Good thing I'm here. The way you're going to do this is to use an anonymous method. You see, as it is the PageMethod call needs a method to call post completion and that's all it takes in. (Well not completely true, it can take in parameters for the server side method, but that's not the point.) So you have to find a way for that PageMethod to call the method after completion AND make sure it has the list name with it.

        function GetUserList(dropdownList)
        {
            PageMethods.GetUserList(function(result) {
                 OnGetUserListComplete(result, dropdownList); });
        }

        function OnGetUserListComplete(result, dropdownList)
        {
            for (var i = 0; i < result.length; i++)
            {
                var item;
                item = document.createElement("option");
                item.text = result[i].UserName;
                item.value = result[i].UserID;
                dropdownList.options.add(item);
            }
        }

Ooo pretty tricky huh?

        PageMethods.GetUserList(function(result) {
                 OnGetUserListComplete(result, dropdownList); });

See what I did there, I created an anonymous method to be called on completion and in turn it calls the original (Though modified) OnGetUserListComplete method now. And you thought javascript sucked.

• Call Server Side methods With Javascript in ASP.Net… Yeah Ajax
• Ajax Webmethods, Javascript, and Anonymous Types… Booyah
• Return False from a ScriptControl method and why I hate Firefox…
• Child IFrame Page Interacting with Parent Page… Yeah I went there.

So let's say I want to click on a div and have it's innerHTML be filled with some string. Sounds like a completely viable situation for any money making business... Anyways, I could do some kind of post back and fill it, or I could use an update panel (Uhg) or I could use a Web Service or I could just bang my head on the desk and get the same level of satisfaction. But then came 3.5 and something wonderful. Take this page:

    public partial class Test : System.Web.UI.Page
    {
        [System.Web.Services.WebMethod]
        [System.Web.Script.Services.ScriptMethod]
        public static String GiveMeString()
        {
            return "hi";
        }
    }

See somethig weird? Yeah that's the magic of the class file. All I need is:

• A Static Method
• The WebMethod Attribute
• The ScriptMethod attribute
• Optionally something to return, but for this example it's not optional just like Burt Renold's mustache

And now the page file is ready, but what about the markup? Well, that's next, so glad you asked. First the javascript:

        function ShowString()
        {
            var test = $get('ShowThings');
            PageMethods.GiveMeString(OnGiveMeStringComplete);
        }

        function OnGiveMeStringComplete(result)
        {
            var test = $get('ShowThings');
            test.innerHTML = result;
        }

First method is the method to call. The PageMethods object will allow the use of the class method that was created. The parameter being sent in is actually the method needing to be called when the server side call is complete. With that in mind, guess what the second method is... No, not ice cream. It's the method called when the server call is compete. As you can see, I am simply changing the innerHTML of a div.

    <form id="form1" runat="server">
        <asp:ScriptManager ID="smMain" runat="server" EnablePageMethods="true" />
        <div id="ShowThings" style="background-color:Yellow;height:20px;width:20px;"
          onclick="ShowString()"></div>
    </form>

And there you have the markup. ScriptManager is a must in this case, but that's pretty standard when dealing with Ajax in asp.net. The only other thing of note is the method call on the div's onClick. Beyond that, it's ready to go. And if you were to make this example yourself and click on the div, you will get a 'hi' string in it on the first click. Amazing.

• Javascript Anonymous Methods and How they help Ajax WebMethod
• Ajax Webmethods, Javascript, and Anonymous Types… Booyah
• Return False from a ScriptControl method and why I hate Firefox…
• Child IFrame Page Interacting with Parent Page… Yeah I went there.

First you need a handler (If you don't what this is for, well for this example it allows you to create a non existant url for an image loaded from the database.) which is aptly named Generic Handler when you do the usual Add New Item. Amazing. You should get something like this in the class file:

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class SomeImage: IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("Hello World");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

Yeah you like that don't you? Yeah you do.

So now we have something to display the image right? Well that's pretty easy too. For me, I have an UserImage class I created with Linq to Sql to mimic my UserImage table. I'm cool like that. I then created a method to return the image bytes based on the ID sent in. That part is up to you how to handle. The main thing you need is to get the image bytes somehow. With that in mind, here is what the class file looks like now:

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class ShowImage : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            Int32 imageID;
            Byte[] imageBytes;

            imageID = Convert.ToInt32(context.Request.QueryString["ImageID"]);
            imageBytes = UserImage.GetImageBytesById(imageID);
            context.Response.ContentType = "image/jpeg";
            context.Response.Cache.SetCacheability(HttpCacheability.Public);
            context.Response.BufferOutput = false;
            context.Response.OutputStream.Write(imageBytes, 0, imageBytes.Length);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

As you can see, the query string has an id being sent in and I'm retrieving it. From there I get the image bytes, tell the context what it is, how to handle the cache, and sending the bytes out. What you can't see right now is that somewhere I have something that looks like this:

   <image src="SomeImage.ashx?ImageID=1" />

When that url is read, it will send it off to the handler to get and display the image. (Not taking caching into account mnd you)

Now I know what you're thinking right now, "I'm bored" which I understand but you're also thinking, "Where's the f@&#ing javascript?". Well my vulgar friend, it's on the way.

<head runat="server" >
        <script type="text/javascript" language="javascript">
        function TestThis(name, imageID)
        {
            var test = document.getElementById(name);
            test.src = 'ShowImage.ashx?imageID=' + imageID;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div style="background-color:Gray;height:20px;width:20px;" onclick="TestThis('hi', 1);"> </div>
        <div style="background-color:Red;height:20px;width:20px;" onclick="TestThis('hi', 2);" > </div>
        <div style="background-color:Blue;height:20px;width:20px;" onclick="TestThis('hi', 3);"> </div>
        <br />
        <img src="" id="hi" name="hi" />
    </div>
    </form>
</body>

So now every time one of the three divs is "clicked", the image is changed depending on the image id sent in using the "url" of the handler you created. Much like sending information to another page, you send the id to the handler so it can display the correct image.

I realize this isn't the best of examples but it's a push in the right direction. Maybe next time you want something, you won't swear at me.

• jQuery: Add a Pop Up Div to a Link Dynamically
• JQuery, Position : Absolute, and How to Make It All Work
• Add a Pop Up Div to a Link Dynamically
• Add, Remove, or Replace a CSS Class Using Javascript

Ok so in part four I showed you how to create a webcontrol from the AutoComplete control, so now it's time to take the first four lessons and combine them. Now it's time to have an autocomplete script control. The first part is really simple, just like before you have to:

• Inherit from ScriptControl
• Override the GetScriptDescriptors and GetScriptReferences methods
• Create the .js file
• Make the .js file an embedded resource
• Update the assemblyinfo file in the Properties folder
• Add the minimal needed javascript

So it will look something like this:

public class AutocompleteScriptControl : ScriptControl, INamingContainer
{
  private AutoCompleteExtender autoComplete;
  private TextBox textboxTarget;

  protected override void CreateChildControls()
  {
    base.CreateChildControls();

    autoComplete = new AutoCompleteExtender();
    autoComplete.ID = "autoCompleteMain";

    textboxTarget = new TextBox();
    textboxTarget.ID = "textboxTarget";

    Controls.Add(textboxTarget);
    Controls.Add(autoComplete);
  }

  protected override void OnPreRender(EventArgs e)
  {
    base.OnPreRender(e);
    autoComplete.TargetControlID = textboxTarget.ID;
  }

  protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
  {
    ScriptControlDescriptor desc =
      new ScriptControlDescriptor("Test.Examples.Client.AutocompleteScriptControl", ClientID);
    desc.AddProperty("textboxTargetID", textboxTarget.ClientID);
    desc.AddProperty("autocompleteID", autoComplete.ClientID);

    return new ScriptDescriptor[] { desc };
  }

  protected override IEnumerable<ScriptDescriptor> GetScriptReferences()
  {
    return new [] { new ScriptReference
      ("Test.Examples.AutoCompleteExample.AutocompleteScriptControl.js", "Test.Examples") };
  }

}

And the script file:

if (Type)
{
    Type.registerNamespace("Test.Examples.Client");
}

Test.Examples.Client.AutocompleteScriptControl = function(element)
{
    Test.Examples.Client.AutocompleteScriptControl.initializeBase(this, [element]);

    this._autocompleteID = "";
    this._textboxTargetID = "";

    this._autoComplete = null;
    this._textboxTarget = null;
}

Test.Examples.Client.AutocompleteScriptControl.prototype =
{
    get_autocompleteID: function()
    {
        return this._autocompleteID;
    },

    set_autocompleteID: function(value)
    {
        this._autocompleteID = value;
    },

    get_textboxTargetID: function()
    {
        return this._textboxTargetID;
    },

    set_textboxTargetID: function(value)
    {
        this._textboxTargetID = value;
    },

    initialize: function()
    {
        this._autoComplete = $get(this._autocompleteID);
        this._textboxTarget = $get(this._textboxTargetID);

        Test.Examples.Client.AutocompleteScriptControl.callBaseMethod(this, 'initialize');
    },

    dispose: function()
    {
        Test.Examples.Client.AutocompleteScriptControl.callBaseMethod(this, 'dispose');
    }
}

/***********************************/

Test.Examples.Client.AutocompleteScriptControl.registerClass
    ('Test.Examples.Client.AutocompleteScriptControl', Sys.UI.Control);

And now this is the bare minimum needed to get this done.

• Handle Events and Add Controls to Script Controls (ASP.Net ScriptControl)
• Return False from a ScriptControl method and why I hate Firefox…
• Make an Autocomplete Control a Webcontrol
• Ajax Control Toolkit Autocomplete – How to use… simple example.

Ok so what is this about? Well let's say you have the control from the last example and you don't want a list of controls in the markup, but maybe you want a list of strings set in the markup. (Say for a list of settings) Or even better, let's say you have controls already on the page but you want our ParentControl (Yes I said "our" but no I'm not proposing... yet) to do something with those controls. Say we want to have the ParentControl to assign some javascript to certain buttons on the page. Ok yeah, kind of dumb but that's the example I made. I supposed you could think of it like this: You want a validation control to validate multiple controls but you want to give it the names of the controls in the markup. Anyways, let's stick with the example I already have.

First off you'll need to create a new class, something that you want to hold the information in. (Although truth be told I could do something way easier and just use a list of strings, but this should prove more interesting) Here's the one I have:

  namespace Test.Frontend.ControlInControl
  {
    public class ChildControlDefinition
    {
        public String ControlName { get; set; }
    }
  }

Pretty sweet? Eh? Eh? No? Ok. So now we have a class, and that's like wow. Now with the same attributes from the old example, build the WebControl:

    [ParseChildren(true)]
    [PersistChildren(false)]
    public partial class ParentControl : UserControl
    {
        public List<ChildControlDefinition> NamedControls { get; set; }
    }

Holy smokes, that just got way complicated compared to the last example. I added a whole new property NamedControls that is a list of the ChildControlDefinition class we created. Now you might notice that the AddedControls property from the old example isn't there anymore. I just removed it to simplify this one.

And then there's the markup:

    <asp:Button ID="mainButton" runat="server" />
    <uc1:ParentControl ID="ParentControl1" runat="server" >
        <NamedControls>
            <examples:ChildControlDefinition ControlName="mainButton" />
        </NamedControls>
    </uc1:ParentControl>

Now you might notice two things here:

1) There is a mark up section named "NamedControls" just like the collection. Can you guess why?

2) examples:ChildControlDefinition : This is the class type name and the TagPrefix for where the class is. For this to work, you have to register the assembly the class is in EVEN IF the class is in the web application assembly. So it would look like this:

<%@ Register Assembly="Test.Frontend" Namespace="Test.Frontend.ControlInControl" TagPrefix="examples" %>

Now what does this do for anyone? Possibly it prevents you from dying a little inside but it also allows you to find those controls within the usercontrol... Ah buh? Don't worry, I'll show you!

    [ParseChildren(true)]
    [PersistChildren(false)]
    public partial class ParentControl : UserControl
    {
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            NamedControls.ForEach(ConnectButtonToClick);
        }

        private void ConnectButtonToClick(ChildControlDefinition control)
        {
            Button foundControl;

            foundControl = Page.FindControl(control.ControlName) as Button;

            if (foundControl != null)
            {
                foundControl.OnClientClick = "alert('clicked'); return false;";
            }
        }

        public List<ChildControlDefinition> NamedControls { get; set; }
    }

See what I did there? SOMETHING COMPLETELY USELESS and yes you too can now have that power. However, there might be something worth taking home from that example. From the list of ChildControlDefinition I was able to get the control name that I wanted to attach the worthless alert script to and attach it. How was that done? Well I just iterated through the ChildControlDefinition list, used the Page.FindControl method to find the control, and then set the OnClientClick method.

Now this example is pretty stupid but I hope you can see the overall value of this. One would be a paging controller that has a list of paging control names that it iterated through and sets various events so they can all work in harmony like one great big continuation of the Hands Across America utopia that just didn't seem to make it.

Now to spin it Nintendo User Manual Style:

Think you are bad enough for Dynamic Controls? Take grab of the power within and dare to conquer! Take a chance, the world can be your for the taking! Dynamic is waiting...

• Add Controls to Control in ASP.Net (With Less Pulp)
• ASP.Net MVC: Create a link method… ie JUST GIVE ME THE STUPID URL
• Paging and the Entity Framework, Skip, and Take Part 4
• Ajax Control Library: Autocomplete Control to Scriptcontrol

So here's the problem, you have a UserControl/WebControl/ExtenderControl/ScriptControl/... (Seriously?) that you want to be able to add controls to in the markup like thus:

<SomeControl>
  <ControlList>
    <asp:Label />
    <asp:Label />
  </ControlList>
</SomeControl>

As you see here, the idea is that SomeControl actually can dynamically house controls based on the markup. Seems like this should be hard, but in reality it's pretty simple. First start with creating a user control, which I hope you know how to do. (I'm calling it ParentControl) Second open up the class file and let's add some stuff.

    [ParseChildren(true)]
    [PersistChildren(false)]
    public partial class ParentControl : UserControl
    {
        public ParentControl()
        {
            addedControls = new List<WebControl>();
        }

        private List<WebControl> addedControls;

        public List<WebControl> AddedControls
        {
            get
            {
                return addedControls;
            }
        }
    }

And honestly, that's the code needed but I'll give a literary once over to make sure things are clear.

So first off you have to add a list of controls to the eh... control and create a property that is used to access it and this can actually be done verbosely:

        //Field
        private List<WebControl> addedControls;

        //Instantiation on constructor
        public ParentControl()
        {
            addedControls = new List<WebControl>();
        }

        //Property to access
        public List<WebControl> AddedControls
        {
            get
            {
                return addedControls;
            }
        }

OR the easy way (Which is not what the original example showed:

        public List<WebControl>AddedControls { get; set; }

As you can see, the 2.0 auto property syntax will actually work for this. So if you like that, you can save yourself some typing.

Ok so now we have a property, and field if you choose, to handle this. Sounds way too easy right? Well the magic is in the attributes:

    [ParseChildren(true)]
    [PersistChildren(false)]
    public partial class ParentControl : UserControl

And you're all set. Now the markup:

    <userControl:ParentControl ID="ParentControl1" runat="server" >
        <AddedControls>
            <asp:Label ID="labelHi" runat="server" />
        </AddedControls>
    </userControl:ParentControl>

Still waiting for this to get complicated? Well you're going to waiting for a long time because that's it. When page load comes around will now have a list with the label in it. Pretty nice huh?

• Dynamic Markup Property Collection for a WebControl
• ASP.Net MVC: Create a link method… ie JUST GIVE ME THE STUPID URL
• Paging and the Entity Framework, Skip, and Take Part 4
• Make an Autocomplete Control a Webcontrol

This is a little off the current beaten path, but does deal with the current ScriptControl theme so I thought I'd put it in here.

Here's the problem: You have a script control, a button, and want to have the person confirm before it's allowed to postback. Easy right? If this were the non script control way you would do this:

Javascript:

    function ReturnFalse()
    {
      var confirmed = confirm('Is there anyone more awesomer that Sean?');
      return confirmed;
    }

Markup:

  <asp:Button ID="whoCares" runat="server" OnClientClick="return ReturnFalse();" >

Class Stuff:

  whoCares.Click += whoCares_Click;
  ...
  private void whoCares_Click(object sender, EventArgs e)
  {
    throw new NotImplementedException();
  }

Basically what I've done is made it so that if it doesn't return false, an exception is thrown. Easy test. Works in both browsers right? Brilliant.

Now for the script control:

  handleLnkDeleteButtonClick: function(e)
  {
      var confirmed = confirm('Is there anyone more awesomer that Sean?');
      return confirmed;
  },

 initialize: function()
 {
    this._lnkDeleteButton = $get(this._lnkDeleteButtonID);
    this._lnkDeleteButton.idpicker = this;

    //HOOK BEGINS HERE
    this._lnkDeleteButtonClick = Function.createDelegate(this, this.handleLnkDeleteButtonClick);
    $addHandler(this._lnkDeleteButton, "click", this._lnkDeleteButtonClick);
    //END HOOK HERE

    NDI.WebControls.Client.PersonalMessageTypePicker.callBaseMethod(this, 'initialize');
},

Now that looks ok right? The method pops up the confirmation button alert dialogue thingy and returns the answer but guess what, you're wrong. So wrong. In IE this works but in Firefox, sorry no deal. Firefox will ignore anything returned if the "return" keyword is not in the markup. Well from here there's no real markup so how the hell would I do that? Well yes Virginia there is a Santa Clause and he lives in e.preventDefault();

It's actually really simple, one small change in the handling method. You replace return X with e.preventDefault();

  handleLnkDeleteButtonClick: function(e)
  {
    var confirmed = confirm('This will delete the currery Message category
      and move all messages to the Oprhan cataegory.  Allow?');
    if (!confirmed)
    {
        e.preventDefault();
    }
  },

And now it works. Yes you can thank me with large donations of money or cheese.

• Javascript Anonymous Methods and How they help Ajax WebMethod
• Call Server Side methods With Javascript in ASP.Net… Yeah Ajax
• Ajax Control Library: Autocomplete Control to Scriptcontrol
• Handle Events and Add Controls to Script Controls (ASP.Net ScriptControl)

So in the last post I showed the easy way to use the Toolkit Autocomplete control, but it might have left you with some questions like: Do I have to keep adding a textbox everytime I want an autocomplete control? Is there an easy way to make a composite control? Is this guy an idiot?

The easy answer is: yes.

Now I'm not a huge fan of making web project controls (.ascx) unless there is heavy style formatting. For the most part if its going to be usable somewhere else and it is fairly simple to represent codewise, I'll put it in a class library as a WebControl or ScriptControl. So how is this done with the autocomplete?

For my examples, I'll be using the same root namespace as the Script Control examples, namely Test.Examples.AutoCompleteExample. Now that I have a wonderful folder created I'm going to go ahead and create a WebControl Class named AutoCompleteControl.

Now when I create this new control there are some things I will need:
-Has to inherit from at least WebControl (ScriptControl example I will do later)
-Has to have a textbox (The autocomplete needs a target control)
-I would strongly suggest a certain amount of properties to be exposed, basically reflecting the properties on the autocomplete
-I added the implementing of ITextControl mainly to relfect a .Text property but that isn't really needed. I just found this useful if you end up treating this control like a textbox for say validation purposes.

    public class AutoCompleteControl : WebControl, INamingContainer
    {
        private AutoCompleteExtender autoComplete;
        private TextBox textboxTarget;

        protected override void CreateChildControls()
        {
            base.CreateChildControls();

            autoComplete = new AutoCompleteExtender();
            autoComplete.ID = "autoCompleteMain";

            textboxTarget = new TextBox();
            textboxTarget.ID = "textboxTarget";

            Controls.Add(textboxTarget);
            Controls.Add(autoComplete);
        }

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

            autoComplete.TargetControlID = textboxTarget.ID;

            autoComplete.CompletionInterval = 5000;
            autoComplete.EnableCaching = EnableCaching;
            autoComplete.CompletionSetCount = CompletionSetCount;
            autoComplete.MinimumPrefixLength = MinimumPrefixLength;
            autoComplete.OnClientItemSelected = OnClientItemSelected;
            autoComplete.ServiceMethod = ServiceMethod;
            autoComplete.ServicePath = ServicePath;
        }

        public Int32 CompletionSetCount { get; set; }

        public Boolean EnableCaching { get; set; }

        public Int32 MinimumPrefixLength { get; set; }

        public String OnClientItemSelected { get; set; }

        public String ServiceMethod { get; set; }

        public String ServicePath { get; set; }

        public String Text
        {
            get
            {
                EnsureChildControls();
                return textboxTarget.Text;
            }
            set
            {
                EnsureChildControls();
                textboxTarget.Text = value;
            }
        }
    }

Well hell that was easy, wasn't it? All I had to do is create the class, add the textbox and autocomplete as controls, and set a few properties. Voila, we now have a working autocomplete control. Now if you had read the last post on this (Page 3) then you might have noticed this new property:

CompletionInterval

What is that? Well apparently it deals with the amount of time a particular item is highlighted when hovering over it. Found this out the other day. SURPRISE!!

Couple of points from this:

Why?
- Well if nothing else, you now have a compostite control to use. The markup will supply the service location and the method to use, everything else is taken care of with this control.

- On top of that, this can now be snug in a class library (assembly) for reuse thus removing it's need to be recopied everytime you need it in another web project.

- You can now inherit from this control to add fucntionality if you need.

- You can now convert this to a script control in order to access javascript events and other fun things.

So as you can see, this is a pretty good way to go.

Something else of note is the CreateChildControls/EnsureChildControls situation. CreateChildControls is a overridable method that is used to make sure that the controls themselves are created and handled. The nice thing about this is that you won't run into the timing issues you might if you try to initialize controls in other methods like OnInit. Also, it allows you the use of the EnsureChildControls method. When this method is called, the CreateChildControls method is either called or not depending if it's already been run. EnsureChildControls basically asks if CreateChildControls has been run. If it has then it doesn't call it again, if it hasn't then the method is called to create the controls. So as you can see, this makes it easy to guarantee that the controls have been created in order to access them. This becomes important with properties that are tied to controls as there is no guarantee that when a property is accessed the controls aren't null. Kind of nice, huh?

Also you might have noticed that I set all the control properties that were "attached" to the autocomplete in prerender. Usually for safety, I don't both setting any outward facing properties like that until prerender so that I know I have the latest and greatest values.

Just incase you needed the markup example:

<%@ Register Assembly="Test.Examples"
  Namespace="Test.Examples.AutoCompleteExample" TagPrefix="test" %>

<test:AutoCompleteControl ID="autoCompleteTest" runat="server"
  ServicePath="~/Service/AutocompleteWebControl.svc" ServiceMethod="GetUserNameList"
  CompletionSetCount="10" MinimumPrefixLength="1" />

HOLY SMOKES NO NEED FOR TEXTBOXES!!11

  using System.Web.UI;
  using System.Web.UI.WebControls;
  using AjaxControlToolkit;

• Ajax Control Library: Autocomplete Control to Scriptcontrol
• Ajax Control Toolkit Autocomplete – How to use… simple example.
• Paging and the Entity Framework, Skip, and Take Part 4
• Dynamic Markup Property Collection for a WebControl

So in my journey to create an autocomplete control, I had it working except something really screwy with the stylesheet and how to make it look... oh I don't know... not hideous. So on a whim I decided to give the Ajax Control Toolkit Autocomplete a try. I figured that if so many other people use it, why shouldn't I? Or when properly translated: I hate dealing with style sheet issues and someone already had a control that works in both Firefox and IE.

Introduction... Skip if you know what this is already and just want the stupid code.

So where to begin? Well the autocomplete control itself is free and comes along with the Toolkit assembly.

Sounds good so far, so what does it do? It's a "control", for lack of a better word... more on that later, that can be used to attach to a textbox and allow a user to type in parts of a word and get back dropdown list like item... list.

Pretty good huh? What's the catch? Well basically you need to use a web service to work with it, meaning either old school (.asmx?) or new school Communication Foundation services. For this example I will actually be doing it the "hard" way and use WCF. I've done it with both, but I figure I might as make it the more difficult of the two for fun. If I remember, the old web services are really easy to do this with. Another catch is that the web service has to be on the same server as the project.

So what isn't it? End of world hunger, world peace, or the meaning of life. Sorry, I can only give you one of those and the autocomplete doesn't cover that subject.

End Introduction and Begin the stupid code

Ok so you want to use the autocomplete control, huh? Well, you've come to the right place.

For this example, I'll be doing the most simple version of adding the autocomplete control. This basically means setting up the service and creating some markup. Really easy. Next post I will get into how to create a web control class in a non web assembly.

Right off the bat you'll need the toolkit assembly and create a project reference to it. Next you have to set up the WCF Service which is actually a lot easier than it sounds? Why? Because Microsoft was nice enough to create a default one for us. I've created a folder named Service (Brilliant!) and then I right clicked and chose Add New Item -> Ajax-Enabled WCF Service (I called it AutocompleteWebControl)... and boom already almost there.

You should now have a AutocompleteWebControl.svc.cs file in the folder and if you look at the code you get this:

namespace Test.Frontend.Service
{
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode =
      AspNetCompatibilityRequirementsMode.Allowed)]
    public class AutocompleteWebControl
    {
        // Add [WebGet] attribute to use HTTP GET
        [OperationContract]
        public void DoWork()
        {
            // Add your operation implementation here
            return;
        }
    }
}

Only thing of real importance at this point is the method with the [OperationContract] attribute. If you are going to expose a method to the autocomplete it has to have this tag. Now as you can see, we'll need a method. At this point though I have to note two things that for the method to be correct:

• It has to take in a String and an Integer. The first is the string that the user has typed in to search on, the second (If you choose to use it) is for limiting the number of items back. (This is set by the CompletionSetCount property on the control, more on this later.)
• The second thing is that without any changes to how the control works, you have to send back a list of strings. This could be a deal breaker if you need to send back more information. I think it's possible to do so, but I haven't gotten to that point yet.

Ok so let's create a quick method. My example is using the typical Linq to Sql stuff I've been using but I have faith you can figure out how to get some kind of needed information whether it's LInq to Sql, NHibernate, LLBLGEN, or Stored Procedures...

....
  [OperationContract]
  public String[] GetUserNameList(String prefixText, Int32 count)
  {
    String[] userNames;

    userNames = LinqData.DataClasses.User
        .GetUserListByLikeName(prefixText)
        .Select(currentUser => currentUser.UserName)
        .ToArray();

    return userNames;
  }
....

Now I didn't use the passed in integer, but I didn't need it for this situation. As you can see this method, however follows the two rules: Takes in a string and integer and returns a string array.

Now you have the servce set up, next up is the mark up and let me tell you, it's freakishly hard.

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit"
tagPrefix="controlkit" %>

<asp:ScriptManager ID="smMain" runat="server" />
<asp:TextBox ID="textboxTarget" runat="server" />
<ajax:AutoCompleteExtender ID="autoCompleteMain" runat="server"
  ServicePath="~/Service/AutocompleteWebControl.svc" ServiceMethod="GetUserNameList"
  CompletionSetCount="10" MinimumPrefixLength="1" TargetControlID="textboxTarget" />

So there it is. Now you have a working autocomplete. But just in case you need it, I'll run through this stuff.

ServicePath - This is where the web service is "located" relative to the project.

ServiceMethod - This is the name of the method it will call to fill itself.

CompletionSetCount - This is the other parameter passed into the web method and used if you want to limit the count of items returned.

MinimumPrefixLength - The minimum amount of characters needed to trigger the method call.

TargetControlID - Come on, honestly? You can't figure that one out?

At this point you're thinking this is great and all but what if you want to make a composite control? Well that's the next post and it's fairly easy.

• Ajax Control Library: Autocomplete Control to Scriptcontrol
• Make an Autocomplete Control a Webcontrol
• Handle Events and Add Controls to Script Controls (ASP.Net ScriptControl)
• Creating Script Controls And Love (ASP.Net ScriptControl)

Ok in the last post I went over the creation of a web control. Simple enough as you can see. Now it's time to screw around with Controls and how to capture their events client side. Something only a brilliant person like me could figure out... I so wish that were true. I could make millions.

Let's add a control to the eh... control. Say we want to throw an alert everytime a person focuses on a textbox. Yes, that's really stupid but it's easy so live with it. Let's use the class from the other post:

  public class ScriptControlExample : ScriptControl , INamingContainer
  {
     private TextBox textboxStupid;

     protected override void CreateChildControls()
     {
       base.CreateChildControls();

       textboxStupid = new TextBox();
       textboxStupid.ID = "textboxStupid";
       Controls.Add(textboxStupid);
     }

      protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
      {
        ScriptControlDescriptor desc = new ScriptControlDescriptor
          ("Test.Examples.Client.ScriptControlExample", ClientID);
        desc.AddProperty("textboxStupid", textboxStupid.ClientID);

        return new ScriptDescriptor[] { desc };
      }

      protected override IEnumerable<ScriptReference> GetScriptReferences()
      {
         return new ScriptReference[] { new ScriptReference
           ("Test.Examples.ScriptControlTemplate.ScriptControlExample.js", "Test.Examples") };
      }
    }

Notice anything new? I added a textbox, created it in the CreateChildControls method, then added soemthing new to the GetScriptDescriptors method. Remeber the GetScriptDescriptors method is used to send values to the client from the server. Here I am sending the clientID of the textbox... can you guess why? That's right, because I'm going to use it to find the control client side. Now for the JavaScript end.

  if (Type)
  {
    Type.registerNamespace("Test.Examples.Client");
  }

  NDI.WebControls.Client.GenericAutoComplete = function(element)
  {
      NDI.WebControls.Client.GenericAutoComplete.initializeBase(this, [element]);

      //Textbox ID value
      this._textboxStupidID = "";
      //Textbox Control
      this._textboxStupid = null;
      //Event Handler
      this._textboxStupidOnFocus = null;
  }

  Test.Examples.Client.ScriptControlExample.prototype =
  {
    //Properties for the _textboxStupidID field
    get_textboxStupidID : function()
    {
        return this._textboxStupidID;
    },

    set_textboxStupidID : function(value)
    {
        this._textboxStupidID = value;
    },

    //Method to be called on focus
    handleOnTextBoxFocus : function(e)
    {
        alert('hi');
    },    

     initialize: function()
    {
        //Find and set the textbox field using the passed in ID
        this._textboxStupid = $get(this._textboxStupidID);

        //Create a delegate to handle the onFocus event
        //Basically creating a means to call the handleOnTextBoxFocus method
        this._textboxStupidOnFocus = Function.createDelegate(this, this.handleOnTextBoxFocus);

        //Set the onFocus event to be handled
        $addHandler(this._textboxStupid, "focus", this._textboxStupidOnFocus);

        Test.Examples.Client.ScriptControlExample.callBaseMethod(this, 'initialize');
    },

    dispose: function()
    {
        //Remove the event handling when this is all said and done.  A clean up.
        $removeHandler(this._textboxStupid, "focus", this._textboxStupidOnFocus);
        Test.Examples.Client.ScriptControlExample.callBaseMethod(this, 'dispose');
    }
  }
  //Same as before
  Test.Examples.Client.ScriptControlExample.registerClass(
    'Test.Examples.Client.ScriptControlExample', Sys.UI.Control);

Oooooooooook So some added things, yes? Well I'll go through them:

  NDI.WebControls.Client.GenericAutoComplete = function(element)
  {
      NDI.WebControls.Client.GenericAutoComplete.initializeBase(this, [element]);

      //Textbox ID value
      this._textboxStupidID = "";
      //Textbox Control
      this._textboxStupid = null;
      //Event Handler
      this._textboxStupidOnFocus = null;
  }

This is basically declaring the fields for the class and setting their defaults. For this example we'll need the field to hold the ID in, a field to represent the textbox oject, and a field to represent the delegate later on used to hook up the onFocus Event.

Note: In the next bit you will notice that every method/property is followed by a comma. Do not forget that.

Next, let's look at the actual class definition. First we'll start at the properties:

  Test.Examples.Client.ScriptControlExample.prototype =
  {
    //Properties for the _textboxStupidID field
    get_textboxStupidID : function()
    {
        return this._textboxStupidID;
    },  //SEE COMMA

    set_textboxStupidID : function(value)
    {
        this._textboxStupidID = value;
    },  //ANOTHER COMMA

    .....

First thing you'll notice is the :fuction notation. This is used to declare both methods and properties. Nothing huge, just something to note.

Second thing you might notice is that the property names look a little hard coded and you would be right. Remember how the value send out from the class file was named "textboxStupidID"? Well guess what, for .net to be able to attach that value to a client property, you have to name the properties exactly the same with with either get_ or set_ preceding. Not perfect, but since I'm the only perfect thing in existence, I guess it will have to do.

Now onto the method we need:

    ....

    //Method to be called on focus
    handleOnTextBoxFocus : function(e)
    {
        alert('hi');
    },  

    ....

Wow... uh well it's a method and it takes in an argument. What the hell do you want from me?

Onto the intialization/Constructorish thing:

     initialize: function()
    {
        //Find and set the textbox field using the passed in ID
        this._textboxStupid = $get(this._textboxStupidID);

        //Create a delegate to handle the onFocus event
        //Basically creating a means to call the handleOnTextBoxFocus method
        this._textboxStupidOnFocus = Function.createDelegate(this, this.handleOnTextBoxFocus);

        //Set the onFocus event to be handled
        $addHandler(this._textboxStupid, "focus", this._textboxStupidOnFocus);

        Test.Examples.Client.ScriptControlExample.callBaseMethod(this, 'initialize');
    },

This might be the least easy part of the whole thing. The first commentented area:

    this._textboxStupid = $get(this._textboxStupidID);

Simple just gets the textbox by the passed in ID. I swear this will get more complicated.

    this._textboxStupidOnFocus = Function.createDelegate(this, this.handleOnTextBoxFocus);

This gives a variable that points to the method we want to use when the focus event fires. Still waiting for complicated...

   $addHandler(this._textboxStupid, "focus", this._textboxStupidOnFocus);

This assigns the method we want, through the delegate, to the focus event on the textbox. Hrm. Ok so not really complicated. Just messy looking. One this to note though is that the events on all the controls won't have the "on" prefix. So if you can't figure out why you're getting an error because it can't find the event, try dropping the "on".

And there you have it. Now you are free to run it and be really annoyed by how dumb this example was. Next will be using this for the power of evil by adding an autocomplete control with a processing image.

• Ajax Control Library: Autocomplete Control to Scriptcontrol
• Return False from a ScriptControl method and why I hate Firefox…
• Creating Script Controls And Love (ASP.Net ScriptControl)
• Child IFrame Page Interacting with Parent Page… Yeah I went there.

So this will be the first of a couple posts having to do with Script Controls, the Ajax Control Tool Kit AutoComplete control, and Javascript. Now to get started, what's a script control?

I'm glad you asked. Basically have you ever created a user control that required Javascript to go along with it? What if the control was in another assembly? Oh woe is you. Well you could require the .js file to be placed in the web project and included on the page. Meh. OR you could use a script control YAY! How does that help? Well it allows you to "attach" a javascript file to a control in a class library, no includes needed. Not only that, but you can pass values from the control to the client and use them with Javascript. (This includes ids of controls in the control.)

So what's needed? Well...
1. Create a class library, Call it Test and make the default Namespace Test.Examples

2. Create a folder to hold the class file and the JavaScript file. Let's call it ScriptControlTemplate for now.

2. Create the control class file and the needed JavaScript file. Call them both ScriptControlExample. (For right now it will be easier if they have the same name but they don't have to be.)

3. Right click the JavaScript Files -< Properties -< Build Action: Embedded Resource

4. Go to the Properties folder in the class Library and open the AssemblyInfo.cs. Add this line:

[assembly: WebResourceAttribute
    ("Test.ScriptControlTemplate.ScriptControlExample.js", "text/javascript")]

Now you might notice something, that almost looks like the actual folder location and it kind of is. In order for this line to work, it has to match the folder location like when Visual Studios creates a Namespace automatically. It uses the directory name as the final part of the namespace. Although to note, the Namespace of the class DOES NOT have to match this. It just has to reflect the directory structure of where the .js file is.

Ok so now we have a blank .cs file and a blank .js file. Woo hoo. Now what? Well first you need to have the class inherit from System.Web.UI.ScriptControl and override two protected methods

    public class ScriptControlExample : ScriptControl , INamingContainer
    {
        protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
        {
            ScriptControlDescriptor desc =
                 new ScriptControlDescriptor("Test.Examples.Client.ScriptControlExample", ClientID);
        }

        protected override IEnumerable<ScriptReference> GetScriptReferences()
        {
          return new ScriptReference[] {
              new ScriptReference("Test.Examples.ScriptControlTemplate.ScriptControlExample.js", "Test.Examples") };

        }
    }

Ok so I cheated a little and put in two lines that you will need anyhow. I figured it would save some time, mainly mine. Cause let's face it, I don't really care about yours.

The first method GetScriptDescriptors is where we will be putting any values we want to send to the Client. The second just tells the system where the JavaScript file is to load. For now you won't be doing anything with the second.

Ok now on to the Javascript file. Basically you have some cannon methods to add just to get the thing to work, and I'll be honest: It's extremely complicated and you probably won't be smart enough to figure it out.

//Set the namespace
if (Type)
{
    Type.registerNamespace("Test.Examples.Client");
}

//Won't be doing much with this for the examples I have
Test.Examples.Client.ScriptControlExample = function(element)
{
    Test.Examples.Client.ScriptControlExample.initializeBase(this, [element]);
}

//This is where you basically define the class
Test.Examples.Client.ScriptControlExample.prototype =
{
    //Where you want to place constructor like code
    initialize: function()
    {
        Test.Examples.Client.ScriptControlExample.callBaseMethod(this, 'initialize');
    },

    //Remove events and such here
    dispose: function()
    {
        Test.Examples.Client.ScriptControlExample.callBaseMethod(this, 'dispose');
    }
}
Test.Examples.Client.ScriptControlExample.registerClass('Test.Examples.Client.ScriptControlExample',
   Sys.UI.Control);

Phew that was complicated right?

Ok so now you have what you need to create a script control. Run it and well nothing will really happen except you shouldn't get errors.

Now just create a new page in a web application (Or project if you're a loser) and just do this realy quick:

<%@ Register Assembly="Test.Examples"
    Namespace="Test.Examples.ScriptControlTemplate" TagPrefix="test" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="smMain" runat="server" />
        <test:ScriptControlExample ID="sceTest" runat="server" />
    </div>
    </form>
</body>
</html>

Run it and.....NOTHING! Surprise! Actually there is something, just nothing visual yet. Next post will get to that. Sucker.

One thing you can take away from this: A drinking game. Take a drink everytime you see the word 'Ok' in this post. I dare you.

• Ajax Control Library: Autocomplete Control to Scriptcontrol
• Return False from a ScriptControl method and why I hate Firefox…
• Handle Events and Add Controls to Script Controls (ASP.Net ScriptControl)
• Ajax Webmethods, Javascript, and Anonymous Types… Booyah

protected void Page_Load(object sender, EventArgs e)
{
Bench benchList;
FoodIntake foodIntakeList;
Panel panelChartHolder;
 
panelChartHolder = new Panel();
Controls.Add(panelChartHolder);
 
benchList = Bench.GetAll();
AddNewCharts(benchList, panelChartHolder, GetBenchXValue, GetBenchYValue);
 
foodIntakeList = FoodIntake.GetAll();
AddNewCharts(foodIntakeList, panelChartHolder, GetFoodIntakeXValue, GetFoodIntakeYValue);
}

Ok so this first part is simple. Create a panel to hold the charts you are adding, get the lists you want represented by the charts and call the method to create the charts.

  private void AddNewCharts(T[] listToAdd, Panel panelToAddTo,
     Func<T, DateTime> xMethod, Func<T, Int32>)
  {

    ChartArea mainArea;
    Chart mainChart;
    Series mainSeries;

    mainChart = new Chart();
    mainSeries = new Series("MainSeries");

    for (Int32 loopCounter = 0; loopCounter < listToAdd.Length; loopCounter++)
    {
      mainSeries.Points.AddXY(xMethod(listToAdd[loopCounter]),
        yMethod(listToAdd[loopCounter]));
    }

    mainChart.Series.Add(mainSeries);
    mainArea = new ChartArea("MainArea");
    mainChart.ChartAreas.Add(mainArea);

    panelToAddTo.Controls.Add(mainChart);
  }

As you can see, I just created a new chart, added a series to it, and added a ChartArea to it. Next part is pretty much just looping through the collection and adding each item in it to the list itself. It uses the passed in delegate methods (Func) to get the X and Y values.

Last part holds the four methods responsible for getting the X and Y values from the two lists. Basically I did this to allow the chart creating method to be a generic as possible. Might be overkill.

  private DateTime GetBenchXValue(Bench currentBench)
  {
    return currentBench.DateLifted;
  }

  private Int32 GetBenchYValue(Bench currentBench)
  {
    return currentBench.BenchAmount;
  }

  private DateTime GetFoodIntakeXValue(FoodIntake currentIntake)
  {
    return currentIntake.DateEaten;
  }

  private Int32 GetFoodIntakeYValue(FoodIntake currentIntake)
  {
    return currentIntake.Calories;
  }

And so when you run this, you will get two graphs side by side. Mind you, they will be very plain as there are million different properties that can be set to improve the look. I guess the main point of this was to show that it's pretty easy to create graphs dynamically using any kind of object list. You know what? Screw you. This is my blog and I'll post whatever I want to. If you don't like that then you can just come back at a later time and read something else I post. Yeah so there.

  using System;
  using System.Web.UI.DataVisualization.Charting;
  using System.Web.UI.WebControls;

• Microsoft Charting Control: So easy an idiot can use it… And I have.
• The Switch Remover: Convert Switch Statements to Dictionaries
• ASP.Net MVC: Upload Image to Database and Show Image “Dynamically” Using a View
• jQuery: Slide Menu With Pop Up Divs. Yay!