ByATool.com Readers... Amy.

Amy... ByATool.com Readers.

Amy is a magnificent geek and almost 10 year veteran of server administration and software development. She has worked at IBM, Concurrent Technologies Corporation, and University of Pittsburgh Medical Center. Currently, she is doing custom SharePoint development connected with Team Foundation Server and the ASP.NET MVC framework development using the Entity Framework, C#, and jQuery. She is currently living in Pittsburgh and not happy at all about commuting into a city with 3 rivers because of the many bridges and no serious commuter subway systems... Who plans this stuff?

Welcome Amy!

• Data Annotations, MVC, and Why You Might Like Them
• ASP.Net MVC: Quick Overview of Controller Structure
• ASP.Net MVC: Is the Use of jQuery/Asynchronous calls a Must?
• Are jQuery and Asynchronous Calls against MVC?

File this under "Why?" but I wanted to see if a child could talk to a parent and then receive information back from the parent to update itself with. As usual, my lack of intelligent wording probably has you scratching your head... if you do that. Personally I don't get that expression as when I'm confused I more than likely will grab a jar of peanut butter and start lathering up with it, but to each his own.

So here's the idea, and this post is only the start.

You have a parent page, Parent.htm, with an iframe and you want the parent to do something and alert the child that something happened. For now, it's actually really simple.

On the parent I have a method:

  function callMethod(text, methodDelgate) {
    if (methodDelgate != null) {
      methodDelgate(text);
    }
  }

And this simple markup:

  <iframe id="myFrame" src="Child.htm"></iframe>

Wow huh? Well on the child I have this:

  function callParent(text) {
    if (top.callMethod != null) {
	  top.callMethod(text, changeText);
    }
  }

This is easy. If the parent has the method, send the text through and a method to call when finished. What is this method? Well its:

  function changeText(text) {
    jQuery('#returnText').text(text);
  }

Which simply sets the text on some div to show it actually worked.

What happens when I click a button that calls callParent? It talks to the parent, the parent calls the passed in method, and the child updates itself.

Not sure this is rocket science, but there will be more on it as I add in the idea of a dynamically created pop up on the parent being used by the child. Until then, try not to be yourself. You embarrass your mother.

• jQuery Validation – How to Use to Get Rid Of Even The Toughest Stains
• jQuery: Add a Pop Up Div to a Link Dynamically
• JQuery, Position : Absolute, and How to Make It All Work
• ByATool.com gets a shiny new tool!

So here's the issue:  You have a date picker, a modal dialog, and you can't see the calendar when you click on the icon and/or textbox. First thought, 'WHY DOES THIS HAPPEN TO ME???!?!' Second though, 'I wonder if that tool knows how to get past this.' Good news! I do. Turns out it has to do with the z-index. The modal dialog by default has a z-index of 1000ish when showing. (And any modal dialog "above that" will increase it's z-index to match.) If the calendar isn't higher than that, no go.

Now you might be using the jquery styles from the jquery site and might be putting your through your keyboard thinking about having to deal with that mess. However, it's actually a simple fix in there... there being the ui.datepicker.css file.

  .ui-datepicker { width: 17em; padding: .2em .2em 0; z-index:9000; }

And there you have it. Now the calendar will show up in front of anything lower than 9000, and as everyone knows: Anything over 9000 is impossible.

• ByATool.com gets a shiny new tool!
• Child IFrame Page Interacting with Parent Page… Yeah I went there.
• jQuery Modal Dialog : Hide That Stupid X Button / Windows Close Button
• jQuery – Check All Checkboxes Toggle Method Thingy

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

Hello again, my wonderful audience, I have something great and fun planned for this post. If you read this post you might have been left wondering how to add custom messages to the error holder. It's ok if you did, there's nothing wrong with being confused all the time. It's what makes you so adorable.

Say you have a form like this, and if you don't I cry endlessly for your loss. My heart goes out to you.

<form id="ILoveEverythingForm">
    <div id="NotSoNiceThingsDiv" style="display:none;"></div>
	...
</form>

As you can see, there is an error div to hold mean things that we have to print out because the system just doesn't like the user. As we both know, the user can't help but be dumb. It's just in his cute little nature. And that nature is just so darned cute.

Now let's assume that you have something that sent back a bunch of mean messages when you tried to validate server side after all the cute client side validation was done. You might have a method to take in those jerk face messages. How do you display them in the bad place?

  function updateErrorDivContentWithLove(messages)
  {
    if(messages.length > 0)
    {
      var validator = jQuery('#ILoveEverythingForm').validate();

      for(var loopCounter = 0; loopCounter < messages.length; loopCounter ++)
      {
        validator.showErrors
        (
          {
             'SomeWonderfulElementName' : messages[loopCounter].Message
          }
        );
      }
    }
  }

Awwww kitties!

Only thing that may seem odd (And if it doesn't, don't worry you are still very special and loved in this world):

  'SomeElementName' : messages[loopCounter].Message

Not sure what element really needs to be here, basically anything in the form with a name tag. So if you're good like I know you are, you have at least one element in that little old form with a name property set. I would say that this is pretty useless in situations where all the errors are shown in one div, as opposed to right next to the element, but that would be mean and I don't do that.

Now I know you wanted something special from this post so I just wanted you to know that even though most of the world considers you hideous, I say you should be proud of being hideous because it makes you who you are. A unique miracle that only really has issues with dogs and small children. Embrace yourself in whatever way you take that!

• jQuery Validation – How to Use to Get Rid Of Even The Toughest Stains
• 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

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

What is it? Something that was added to the holy jquery site and is an easy way to validate input from users. Now this should in no way take over for server side validation, but it helps to at least catch a few things without having to send anything to the server. So how do ya do it?

Well to start, you need some files:

jquery-1.3.2.js and jquery.validate.js.

Now oddly enough the validation file isn't hosted on the holy jquery site but how to use it is.

Ok now you have the files, what's next? Well you need form, and I can do that for you.

So basically it's a simple form with one input that is required.

jQuery(document).ready
    (
      function()
      {
        jQuery("#PrimaryForm").validate
        (
          {
            errorLabelContainer: "#ErrorDiv",
            wrapper: "div",
            rules:
            {
              FirstName :
              {
                required : true
              }
            },
            messages:
            {
              FirstName:
              {
                required : 'First Name is required.'
              }
            },
            onfocusout : false,
            onkeyup: false,
            submitHandler: function(label)
            {
              postSubmit();
            }
          }
        );
      }

jQuery("#PrimaryForm").validate

Real simple, just setting the validator to the primary form on the page.

 errorLabelContainer: "#ErrorDiv",

This sets the errors to show up in the ErrorDiv. Now this is optional, as you can have it show the errors next to the FirstName text box but personally I think that looks horrible. Setting up the ErrorDiv puts all the errors in one central location and allows for styling the actual div.

 rules:
 {
    FirstName :
    {
      required : true
    }
  },

This matches an element with the id of FirstName to the required rule, meaning that FirstName is required. Rocket science.

  messages:
  {
    FirstName:
    {
       required : 'First Name is required.'
    }
  },

If you can't figure this out, I hear circus is hiring for the "World's Dumbest Person". You'll fit in with Jub Jub the Dog Boy.

  onfocusout : false,
  onkeyup: false,

Basically this prevents the validation when leaving the textbox or on every key press. This is just another preference.

  submitHandler: function(label)
  {
    postSubmit();
  }

If the submit is successful, call this method.

But... BUT WHAT IF IT'S AN EMAIL?!??! WHAT WILL I DO???!?!?

Well for one, stop being such a child. And two, look here.

Some what different, as you can see it's now email and there is one extra requirement in the rules:

  rules:
  {
    EmailAddress :
    {
      email : true,
      required : true
    }
  },
  messages:
  {
    EmailAddress:
    {
      required : 'Yo, email fool.',
      email : 'So not an email address.'
    },
  },

See? It has nice built in rule for email. Simple.

BUT WHAT IF I NEED A REGULAR EXPRESSION?!??! WHAT WILL I DO???!?!?

I swear if you don't stop that, I'm turning this post around and going home.

Fine here it is.

  jQuery.validator.addMethod
  (
    "isZipCode",
    function(value, element)
    {
      return value.match(new RegExp(/(^\d{5}$)|(^\d{5}-\d{4}$)/));
    }
  );

Just have to create a method and "add it" to the validator itself. And then there's the use:

  rules:
  {
    ZipCode :
    {
      required : true,
      isZipCode : true
    }
  },
  messages:
  {
    ZipCode:
    {
      required : 'For the love of me, enter a zip code!.',
      isZipCode : 'Serioulsy?  Do you know what a zip code is?'
    },
  },

Woo hoo right?

Don't do it... Don't you yell.

But what if one input depends on another?

Much better. Well that's not as hard as it may seem and here's the example.

  rules:
  {
    InputB :
    {
      required :
      {
        depends : function(element) { return jQuery('#InputA').val() != "" }
      }
    }
  },

As you can see, you can change how the required method works by adding in a depends handler. Works out pretty well.

Yes I will show you how to make sure two inputs match. I swear you ask for a lot.

  rules:
  {
    Password :
    {
      equalTo : "#ConfirmPassword"
    },
  },

Couldn't be easier unless I wrote it out for you. Wait, I did.

So here you've either learned a bit about jQuery validation or have just spent the last few minutes drooling uncontrollably. Either way, I'm done with this post and you're left to do whatever it is you do, you sick f---.

Side note: I haven't actually been to Htmlgoodies since eh college? but wow did that place sell out. How fitting that an introduction to html page now looks like it was designed by someone just starting out... in the 90s.

• Child IFrame Page Interacting with Parent Page… Yeah I went there.
• jQuery Validation: Adding Errors to the Error Containter… With Love!
• jQuery: Add a Pop Up Div to a Link Dynamically
• JQuery, Position : Absolute, and How to Make It All Work

When I started using MVC, I had some issues on figuring out how to build controllers so that they made sense from a structural point of view. I slightly touched on it but I wanted to show where I progressed to in the vain hope that I can help prevent stumbling on your part.

One thing to be noted is the asynchronous part. I've become a firm believer that MVC is pointless without asynchronous operations. Why? Simply put, you can use them or you can come up with some annoying post and redirect for any create, update, or delete operations. If you're going to do that, you might as well just be institutionalized because you are one masochistic mother f---er. For everyone else in the happy world, go with something like jQuery that makes it real easy to perform said operations.

With the last paragraph in mind, the part I had trouble with the most was figuring out where the actions go. You see, when I started using MVC, I grouped stuff in an ultra simple manor. Say I have a site for handling pictures. Well there would be a view controller that would have anything to do with viewing images and an admin controller that took care of the uploading, changing, deleting, ecting. As you can imagine, this was not what you might call ideal.

Once I got a feeling for MVC and how it worked, I started having things a little more separated but still didn't feel right. I had actions for viewing a list of images on the image controller no matter if public or admin side which wasn't really ideal to me since it kind of blurred what was public and what was restricted from a conceptual point of view.

It wasn't until I started thinking in terms of unit testing that it started to make more sense. If I were creating controllers as if they were classes instead of pages like with WebForms, maybe it would work out better. Seems real profound right? Well it was at the time since I still had WebForms state of mind. All of a sudden, it made way more sense on how the controllers should be set up. In an odd way, the controllers almost became almost business layer like. If I wanted to update an Image, there would be an Update method on the image controller responsible for taking in the changes, validating, and dealing with the entity objects. Everything that had to do strictly with displaying information would be handled by a display controller like the before mentioned Admin controller. So something like:

As you can see, the Admin controller has something to show all users. The User controller has the methods for things like updating, creating, and validation. Basically anything that would change an image is on one controller. Anything for showing it on the main section controller. That is, a controller that embodies an overall concept like say an Admin section of a site or possibly a controller for viewing galleries.

The sequence of events (bad word choice...) would be something like:

Open Admin/UserList/
Admin controller uses User Entity to retrieve list
Admin View shows User List
User clicks delete button/link on Admin View
Javascript/jQuery method invoked to send id to User/Delete
User controller receives id
User controller validates id to make sure it is valid
User controller validates current user to see if allowed to delete
User entity Delete method invoked by User Controller
Result of Delete Method is returned by User Controller (JSon preferably)
Admin View displays the result

Treating controllers like classes (and the use of anonymous actions) allows a very clean separation of actions resulting in a nice logical layout. Beyond this, it also allows for a greater separation between controllers which means its possible to do multiple parts of the entire project in parallel.

Maybe this is just stating the obvious, something I'm pretty good at, but my hope was to give a quick over view of laying out controllers for those who are just starting out.

• ByATool.com gets a shiny new tool!
• ASP.Net MVC: Is the Use of jQuery/Asynchronous calls a Must?
• Are jQuery and Asynchronous Calls against MVC?
• Spark View Engine, ASP.Net MVC, and You

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

So one of the things I ran into some what recently was a grid... a grid with a death wish and a thirst for revenge. It also has a bunch of check boxes to allow multiple row deletes as seen here:

Now there might be a moment of panic and doubt (Or doubt and panic, everyone reacts differently) when you realize you no longer have those cushy grid postback events. WHAT ARE YOU GOING TO DO???? Well first you're going to feel disgust over your profuse sweating, cause lets be honest you're pretty gross. Then you're going to read on and find that all your panic, fun as it can be, was for nothing. Why? Because you have me... and not in some weird love kind of way because I don't even know you. More of a "You can count on me because I'm like that cool older brother you never had and because of which you ended up a social degenerate ie a programmer" kind of way.

Now to start I've already hosted both the code and a working example:

Actual running thing on teh webz.

Hosted code

Because I'm such a nice guy. (And that's true, I can list at least five people who aren't my mom who can attest to that.) However, I wouldn't be the nice guy that I am if I weren't going to at least explain some of the code.

There are two ways I handle this situation in the example I hosted, one is with a form, action, and post back. The other is with jquery and an asynchronous call. Both are actually pretty easy to pull off.

First let's look at the post back version. The mark up looks a little somethin' like dis:

  <form action="/Test/CheckForIds/" method="post">
    <div>
      <input type="checkbox" name="IdList" value="1"  />
      <input type="checkbox" name="IdList" value="2" />
      <input type="checkbox" name="IdList" value="3" />
      <input type="checkbox" name="IdList" value="4" />
    </div>
    <div>
      <input type="submit" value="go" />
    </div>
  </form>

Looks like your standard form and if you've used MVC at all, you should be used to seeing something like that. The only thing of interest is that the checkboxes don't have ids and do share the same name. There's a good reason for the second one. Here's the action method:

  [AcceptVerbs(HttpVerbs.Post)]
  public ActionResult CheckForIds(Int32[] idList)
  {
     return View(idList);
  }

Now it makes more sense, doesn't it? The name attribute on the checkbox directly corresponds to the name of the array parameter. THAT'S AMAZING!!!1 Actually, kidding aside it is kind of nice. Not only does it match the checkboxes to the parameter, it also treats the values of the checkboxes (Checked ones) as a list of integers. Pretty slick.

And honestly, that's about all it takes for traditional posting.

Now for the jQuery part:

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

Wow, looks about the same. Go figure. Well that's pretty much because the way hard part is the javascript itself.

  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;
      }
    );
    //Send the list off
    jQuery.getJSON("/Test/CheckForIdsJson/", { idList: idList }, idsGotten);
  }

Ok maybe it wasn't that hard or hard at all. But um... And here's the action method:

  [AcceptVerbs(HttpVerbs.Get)]
  public ActionResult CheckForIdsJson(Int32[] idList)
  {
    JsonResult result = new JsonResult();
    result.Data = idList;

    return result;
  }

So again, the same signature. Amazing huh?

Side note:

When I was eating this morning in front of the television (Chocolate shredded mini wheats if you must know.) I came upon the good ole classic Iron Eagle. I never really thought about how utterly f-ing insane that movie was until now though, mostly because I haven't seen it since I was a kid. I guess back then I could completely buy into the idea of some 17 year old, who can't make it into the Air Force Academy, suiting up and learning to use (At the time) the most complicated fighter the US had to offer within what? one whole montage, steal a 18 million dollar plane (Planes were cheap back then), fly into crazy dangerous territory, get past who knows how many trained professionals, save his dad, and nothing really comes of it. Actually I think if I remember (as I didn't get to watch the whole thing this time) he gets a place in the academy from this. IT'S A COMPLETELY BELIEVABLE STORY! The best part about it is that apparently between the time of the first and second movie his skills had depleted so fast that he gets popped at the beginning of the second one. I guess without the Saving Dad mojo, he's just not the same. Tip your glass to good ole Thumper.

I really miss the 80s where movies didn't really need to make any sense as long as they had some soundtrack filled with crazy obscure bands playing at random times in the movies itself followed by the movie characters commenting how great the music is.

• 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

function showPicture(imageHolder, id)
{
  jQuery(imageHolder).attr("src", "/Photo/ShowPhoto/" + id);
}

And you can't forget to try:

<img id="holder" alt="" />
<div onclick="showPicture('#holder', '79');">Show!</div>

And with that your life will be far better than it was before. You can once again start enjoying the simple things in life. Enjoy the birds singing, the sun setting, and those noisy little things that run around your house.

Disclaimer: Id may vary. Image results also very. Though proven to be better when tested again a placebo, Jquepictuax may not improve your self esteem or make you more popular. Jquepictuax is not guaranteed to improve your life in any way. Use Jquepictuax in small quantities. People with low blood pressure or who are pregnant should avoid using Jquepictuax. If you consume more than 3 alcoholic drinks per day, please seek medical attention before use. May cause certain side effects such as dizziness, nausea, overwhelming chills, headaches, muscle soreness, dry mouth, light headedness, sleepiness, drop in appetite, and death. If you notice any these side effects, stop use of Jquepictuax immediately and seek medical attention. Please consult physician before Jquepictuax use.

You happiness is right around the corner, why not turn it with Jquepictuax?

• 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

I bet that made sense!

Here's the situation, I have a blog thing I'm working on and it allows for multiple blogs per site. The "splash" page, if you will, looks like this:

And when you click "Newest" it looks like this:

As you can see, Newest brings up a pop out div thing that shows the latest post.

Side note, I was going to have it just show the first X characters of the post as a teaser, but turns out that if there is any broken HTML because of that, IT'S A HUGE PAIN TO FIX. Something like <div> this is something that <di... OH SNAP THE DIV IS BROKEN! ALERT! ALERT! So this was a "solution".

Originally I had it loading the needed post in it's respective pop out div and just hiding all of them. Then it would show the post when the Newest "button" was clicked. Then it dawned on me that this might be silly since only one is going to be open at a time. Why send the client a ton of unneeded html? So, I moved on to using jQuery/Json to grab the needed post data when the Newest "button" is clicked. Then I just populate the pop out div with the returned information as it opens... or whenever it gets back to the client. Can't always assume it will be there immediately. Interweb can be slow at times.

Anyways, this brings up an issue: Am I better off with the first or second solution? Given that all things are equal, it seems like a better idea to have the jQuery solution due to the fact you aren't sending useless html to the client. This will most definitely help with initial load time for the client. Only problem is, that jQuery method is run every time one of the Newest "buttons" is pressed meaning you could have an infinite amount of requests per person. I suppose this is a matter of gambling really.

Do I go with full html and because I assume the user will look at all the latest posts anyhow and therefore cut down the needed requests?

Do I go with the jQuery method because more often than not, users will not look at all the latest posts OR at least will take some time in between the Newest "button" pressing so that it's ok there might be a ton of requests over time?

At this point I think the second is the way to go, but it's most likely situational. Time will tell.

• 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

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

Here's the situation: I have a site that I made a while back (Basically a phone friendly chat room emulator) that was kind of experiment on a couple levels, one being the use of Entity Framework and WebForms. (It's here if you are curious... right now you have to make an account though. Never got around to allowing non logged in users.) Another part was to see if I could make a multi phone compliant page that had to be fast and work on as many phones as possible. (Anything with a browser at least) And had to be touch friendly. (No links, just buttons)

A week back I decided, after trying to make new sites with MVC, to take an existing work and really give MVC a rugged test. Eythere was just that site. Now personally I thought this would be pretty simple since MVC seemed really good at simple, non business sites. What could be more simple than a chat room emulating site that has no javascript? (Aside from whatever Javascript WebForms use for postbacks) I mean in the end, it's just a bunch of buttons right?

Yeah turns out what those buttons did was at the heart of my issues. You see, with WebForms, everything done on a page is meant for that page. Sure you can defer how things are handled from the page to another tier, but the action itself belongs to the page. For example, say that a user wanted to make a room a favorite, well there's a button named favorite that he/she clicks to do so.

In webforms, the Room.aspx page would handle the Favorite button click and the current user's favorite list would have the room removed or added depending. But the call to the add/remove would be handled by the button's click event and then the page would be reloaded. Something we in the know call "easy". (Like that word? Use it. It's free because I'm such a nice guy)

Now with MVC it's a whole new ballpark. With controllers, it becomes of question of what controller should handle this. It could go onto the room controller, but in the end it deals with a user and adding something to the user. So it's fair to say that this is probably a job for Superman if Superman happens to be a UserController or you'll most likely end up repeating code.

Now the issue: How is this handled? Whether link or button, something has to be posted to the user controller. Posting to the controller means that the controller, on finish, has to create a model and send it to a view. Well this kind of sucks doesn't it? The user clicks the + Favorite button and bam is taken to a whole new page.

SURPRISE IT'S BEEN ADDED TO YOUR FAVORITES!

Not what I would call fluid. The other thought it to have a redirect, which in the end is more fluid in that it takes the user back to the original page BUT with that you have to send a lot of information back and forth. After all, in MVC a lot of the information for a given "page" is passed using get. So for instance you have a room with a roomid and a page number and a count of items to show and possibly a sort you're looking at:

/Room/1/?pageNumber=1&amountToShow=5&sort=Date

Which means all of that has to be sent to the User controller in order to save the state, has to be put in session/some kind of user cache, or you just send the entire url. In any case, something has to be tossed around for this to work. More seamless than the other way but it is a lot of work for something so simple.

When it comes to ease of UI design, jQuery/asynchronous operations are a must.

Something I think that the MVC idea fails at it in a UI sense it was makes it strong in a programming sense, logical separation of tasks. Right off the bat, I hated the way WebForms handled AJAX "web methods". Having to repeat methods per page so they could be "registered" was ugly and a pain. MVC and it's separation/REST ways makes asynchronous calls so easy. However, what used to be a simple operation in WebForms has now become cumbersome without outside help. Straight up, it seems impossible to do non drill down design without using jQuery or some kind of javascript library equivalent without killing the separation that MVC seems to embrace.

Why is this a problem? For the most part it isn't. Most people aren't going to try something like EyThere (Wouldn't recommend it, it was a pain) since how many people create sites with multiple phones in mind? However, it does serve to show what seems to be a glaring annoyance with MVC. Either use asynchronous calls or just sink.

• ByATool.com gets a shiny new tool!
• ASP.Net MVC: Quick Overview of Controller Structure
• Are jQuery and Asynchronous Calls against MVC?
• Spark View Engine, ASP.Net MVC, and You

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

But wait, here comes jQuery, Json, and Asynchronous Calls. Now I can do crazy things with the view that I could never do before. Remember that grid of users? Well you don't really have to go to another page to edit. Hell, just click this link and a form can appear to take in what you need to change. Even better, the grid itself will change and allow you to edit any row you want, and when you're done the grid will come back all new an refreshed. What a crazy party this is now. Kind of sounds familiar right? Yeah WebForms. With these three helpers we've now cut out the middle man in the Model and passed the savings onto you. Essentially the whole idea has been chucked and jQuery has allowed us to invoke the same event model WebForms was chastised for. In fact, you could go to the logical end and have one page once again that controls everything. The View once again has the power much like it did in WebForms (provided you look at the Page and code behind being more like a View than separate entities). Isn't that the whole thing we were trying to get away from?

I suppose you could make the argument that no one is putting a gun to your head to use jQuery for anything other that simple things like UI manipulation (date pickers, sliding controls, drag drop, ect) but that wouldn't be the situation being argued here, now would it?

• ByATool.com gets a shiny new tool!
• ASP.Net MVC: Quick Overview of Controller Structure
• ASP.Net MVC: Is the Use of jQuery/Asynchronous calls a Must?
• Spark View Engine, ASP.Net MVC, and You

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

<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

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