Tuesday, July 14, 2009

Missing __doPostBack Method On ASP.NET Page

Sometimes, ASP.NET programming has called for a JavaScript call to .NET's JavaScript function __doPostBack. This function exists on (almost) every .aspx page with controls that would create a postback. Once in a while, however, you won't have a control that creates a postback (or for some other odd reason) and the __doPostBack function won't be available. In these situations, you can create your own custom method.
  1. Add two hidden fields to hold the postback information. You can add these anywhere on the page.

    <asp:HiddenField ID="__EVENTTARGET2" runat="server" />
    <asp:HiddenField ID="__EVENTARGUMENT2" runat="server" />

  2. Create a custom JavaScript __doPostBack method. I often call it __doPostBack2 just incase for some reason the original is created. Don't want to confuse the application. form1 is the form name. It might be ASPForm or something. Best way to find out is to view the source of the page and use that.

    function __doPostBack2(target,argument)
    {
    var f = document.getElementById('form1');
    document.getElementById('__EVENTTARGET2').value = target;
    document.getElementById('__EVENTARGUMENT2').value = argument;
    f.submit();
    }

  3. Add the postback function to the element in question.

    <input id="txt1" type="text" ondblclick="javascript:__doPostBack2(this.id,this.value);" />
Next up: Adding custom events to controls.

Thursday, July 09, 2009

Finding Programming Answers

Can't figure out a programming problem? Receiving an error message that gives you absolutely no clue what is actually wrong? Let me fill you in on a trade secret: Google it. Google everything. It's your best friend. That's right, copy the error message or a few keywords to describe your situation and slap that SOB into Google.

If that doesn't fix your problem, join a forum. There are plenty of free, useful forums. I like to use both Microsoft's MSDN forum and VBForums. Both have proven to be extremely helpful.

Tuesday, July 07, 2009

Moving Elements With Javascript

Moving HTML objects, or elements, is a very useful tool and can often replace annoying Flash. In this case, I'll be discussing sliding an element using JavaScript. I recently had to do this quite a bit while helping recreate my girlfriend's online portfolio and I decided to make a quick post about it.

There are two things you need to set up first:
  1. If necessary, give an ID to the element you wish to move (this is important if you're not using the element itself to initiate the moving process, which if you are, you can just use the "this" JavaScript keyword to pass a reference to the element).
  2. Set the element's CSS position property to absolute so it can be moved. Leaving it as default or relative will create some very frustrating times for you. Though you can set this in JavaScript when you call on the move function, I suggest setting up your page with the element already having this property since setting it at run time can screw up your page layout
Once they have been set up, moving an object really isn't that hard. Basically, you need to move the element a certain number of pixels every X number of milliseconds. Let's say you want an element to move 200 pixels to the right when clicked. You can use the following HTML:

<div style="width:200px;height:200px;background-color:blue;position:absolute;" onclick="javascript:Move(this);">


On click you can now fire this JavaScript function:

var currElem = null;
var intervalID = null;
var moveInterval = 10;
var totalMovement = 200;
var totalMoved = 0;

function Move(elem)
{
currElem = elem;
totalMoved = 0;
intervalID = setInterval('MoveElem()', 10);
}

function MoveElem()
{
if (totalMoved >= totalMovement)
{
cancelInterval(intervalID);
}
else
{
totalMoved += 10;
currElem.style.left = totalMoved + 'px';
}
}


We set the currElem global variable because you can't pass variables to a method using an interval or timer. Then, once the is set, it's just a matter of incrementing the left amount (pushing the element to the right) until it's greater than or equal to the total amount you want it to move. You can then increase or decrease the top to get a diagonal and many other things. Varying the timeout time (in this case 10 milliseconds) and the interval distance will make the movement clunkier or smoother, depending on what you're looking for.