This ASP.NET user control is a JQuery based AJAX ready Editable Label.

It presents itself like a normal label, but it becomes editable when you click on it. Since it’s a component it’s highly reusable.

Improvement will come, like fine grain support for styles.

Enjoy and follow my new blog… raphael.reevolvers.net

The problem: I have an asp.net (content) page that’s using a master page. In this content page I have an update panel. Everything is working fine until I add an UpdateProgress. Opening the page i get a friendly Script controls may not be registered before PreRender .

Before trying some voodoo stuff…check the OnPreRender event. Does it call the same event in the base page?

base.OnPreRender(e);

Is it working now?

Keep coding and happy new beer to all of you.

Option 1: set the status of facebook, skype, LinkedIn, twitter…

That’s maybe the fastest way to wish everybody a happy Christmas with the less effort, but…does it really mean a thing? Wishes might be something personal, probably less than 10% of my network will read my status, and no one of this 10% will care about it because it’s not directly written for them. So : Method 1 REJECTED!

Option 2: write to everybody, one by one, a nice and personal message.

Ok, that’s the way it’s meant to be…but…what if your network is composed of hundreds of connections? And I’m still a “beginner”…serious networkers can boast thousands and thousands of connections, and many of those connections are just names on a list! No relationship, no knowledge of each other but for the name (or alias) and a small picture on the profile. So it’s not that good, and plus, today it’s the 24th…there’s not too much time left! Method 2 Partly REJECTED!

Option 2.1: write some templates, group somehow your contacts, and send the appropriate template.

Well, it’s getting better, for those I don’t know a “Merry Christmas and all the best in 2010″ will be enough, maybe adding some marketing/branding stuff. For my friends…well…I don’t really like those templates sent by friends, but yesterday an old friend of mine, Federico, tagged me on a kind of “Christmas Card” on facebook, along with many other people! That’s nice, but for the spam generated from the comments of other people. There’s another problem with grouping your contacts: do you really know if they do care about Christmas? Many social networks don’t show the religion on profiles, so what’s the point in wishing an happy merry Christmas to a muslim, or to an atheist (like I am, so I wonder why I’m writing that…maybe ’cause I’m Italian, and it’s hard to get rid of traditions). And that consideration will lead to my final decision. Method 2.1 Partly REJECTED.

Option 3: write a really meaningless message, and send to EVERYBODY!

The message I’m talking about is something you would write in the option 1, something impersonal, short…the only difference is that your people will get it in their mailbox, and will trash it straight away! That really sucks, REJECTED!

Bonus option: Pretend you forgot that it’s Christmas and you should do something.

Not that nice, even because this time give us ([open] networkers) a good reason to use our imagination and say to the others: I’m alive, and I’m not just using an automated API based program to wish you all the best. So, this bonus method is REJECTED, along with the other 4.

So…what am I gonna do?

Analyzing the situation, the problem is still unsolved, and since I’m a problem solver, that’s the solution, the ultimate solution to Christmas, New Year, and everything: Don’t panic!

I said that it’s already late to dispatch some hundreds e-mail, that I don’t like impersonal messages, and that I don’t know habits and religion of all my connections, so…I’ll take time and wish everybody an amazing happy new year, and I’ll do it in time…

For now, I’ll go thru my Facebook people (people I do know personally), make some sweet, sexy, finger licking virtual card, tag them there (copying what Federico did) and let the spam flow go! Then I will get my Twitters…those who aren’t on FB, and write them a 140 character message, pick up my gmail address book and write to those who are still missing in action, and if somebody pops up on skype…then merry Christmas to them as well!!!

It doesn’t matter if it’s Christmas or not! Best wishes to everybody, keep a positive attitude, and don’t forget that it’s always time to donate money to some worthy project!

In this pill : I will add a droppable object and I will animate the menu to allow only one group to be visible at once.

Well, the HTML in this case is pretty simple! It’s just a div…


<div id="dropArea" class="drop">
</div>


All the work is carried out by JQuery.

Again, I will point to this object selecting it by style class, and then I’ll define the droppable behavior. In fact, the code has already been written in the previous post but let’s refresh it:


$(".drop").droppable({
accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: dropAction
});


function dropAction(ev, ui) {
var lid = $(ui.draggable).clone();
$(lid).addClass('block_dropped');
var removeLink = document.createElement("img");
$(removeLink).attr("src", "img/delete_icon.png");
$(removeLink).attr('title', 'remove');
$(removeLink).css('cursor', 'pointer');
removeLink.onclick = function() {
$(this).parent().remove();
}
$(lid).prepend(removeLink);
$(this).append(lid);
}


in the “ready” event of document, the selector $(“.drop”) gets my droppable area (the div), and adds to it the droppable plugin. This is part of the jquery-ui standard package. What happens when the code is executed is that, whenever a draggable object (that has the block style class) is dropped on my div, the function dropAction is triggered (I really hate this text editor!).

Now I want to animate my toolbox. Again, JQuery will to all the job.


function prepareToolbox() {
$("#accordion div[name*='menuItem']").css('display', 'none');
$("#accordion div:first").show('fast');
$("#accordion h3").click(function() {
if ($(this).next().css('display') == 'none') {
$("#accordion div[name*='menuItem']").hide('fast');
$(this).next().show('fast');
}
});
}

Line 1 : selects all the div, children of accordion, where the attribute name contains menuItem, and manipulate their visibility.

Line 2 : gets the first child div of accordion and shows it, making the animation fast!

Line 3 : defines the event handler to hide/show menuItems when the user clicks the header.

This function has to be called in the body of the ready event for the page.

There’s a widget called accordion in the standard jquery-ui library, but unfortunately it’s not working well when I have to drag objects from there.

Have a look at: http://www.jqueryui.com/

In the next pill: I’ll add a button that creates droppable elements that will be placed in a wider area.

The project

Realize a visual frontend that allows me to drag tools from a tool box, and drop them in a content panel…like it happens in Visual Studio.

Include: in order to make everything work, the web page must include the jquery.js file, it can be downloaded at http://jquery.com/ it’s possible to obtain a “production” package, but I kindly recommend to use the development, of course…ours are development purposes! Also, in this example some elements will be draggable, so you need to include also the jqyery-ui package :  www.jqueryui.com

In this pill : I will prepare the toolbox. It will be composed of 2 groups of draggable tools.

In this example I select elements referencing them by class (css class).

Writing $(“.block”) I get at once all the elements that have block as style class.

Other selectors

$(“#objectID”) gets a specific objects, like document.getElementById(objectID)

$(“div”) gets all the objects of type div

$(“div, .className”) combines selectors, it will get all div and all element having class = className

That’s only the surface. Really useful are those getting objects going thru the hierarchy.

$(“#myObject”).children(“img”) this will get all the images children of myObject.

Mandatory is the knowledge of attribute filters. With these selectors I can inspect the value of objects’ attributes and get those that meet my requirement

$(“img[name*='icon']“) this will get all the images which name contains the string icon.

I’ve listed just those I found more useful, but there are a lot of them. Have a look at http://visualjquery.com

Ok but…what happens when I get a collection of objects?

To iterate thru this collection JQuery exposes each(function). Function will be the code used to manipulate the current object, this.


$("div").each(function(){

$(this).addClass('anotherClass');

});

The code above goes thru all the div in a document and adds the style class anotherClass to them.

To the project…

JQuery

$(document).ready(function() {


$(".block").draggable({helper:'clone'});.


$(".drop").droppable({
accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: dropAction
});


});


HTML

<div id="accordion">
<h3><a href="#">DEVICES</a></h3>
<div name="menuItem">
<div class="block" >
<img id="imgBT" src="img/n_bluetooth.png" alt="bluetooth" /> bluetooth
</div>
<div class="block" >
<img id="imgET" src="img/n_ethernet.png" alt="ethernet" /> ethernet
</div>
<div class="block" >
<img id="imgIN" src="img/n_internet.png" alt="internet" /> internet
</div>
<div class="block" >
<img id="imgSA" src="img/n_satellite.png" alt="satellite" /> satellite
</div>
<div class="block" >
<img  id="imgSI" src="img/n_signal.png" alt="signal" /> signal
</div>
<div>
<img id="imgWI" src="img/n_<span class=" alt="" />wifi.png" alt="wifi" /> wifi
</div>
</div>
<h3><a href="#">SERVICES</a></h3>
<div name="menuItem" >
<div class="block" >
<img id="imgAP" src="img/s_applications.png" alt="applications" /> applications
</div>
<div class="block" >
<img id="imgFO" src="img/s_folder.png" alt="shared folders" /> shared folders
</div>
<div class="block" >
<img id="imgVO" src="img/s_voip.png" alt="VoIP" /> VoIP
</div>
<div class="block" >
<img id="imgWE" src="img/s_<span class=" alt="" />webcamera.png" alt="webcamera" /> webcamera
</div>
</div>
</div>

Have a look at:

http://visualjquery.com is a great reference guide to get what you need in a few clicks.

In the next pill: I will prepare the droppable area, so that the drag and drop functionality can be performed, and I will animate the tool box to allow only one tool group to be shown.

Does anyone want a GoogleWave invitation? I have few spare ones.

Here I suggest some places worthy of our euros, dollars, czech crowns, or whatever…

Wikipedia : http://wikimediafoundation.org/wiki/Support_Wikipedia/en

MIT OpenCoursWare : https://giving.mit.edu/givenow/ocw/MakeGift.dyn

I welcome sincere suggestions (open source projects, crowdsourced activities…whatever)

For the Cirrus Logic CS4206A I’ve installed this one : http://www.box.net/shared/huhcqg23y0

Now the sound is much louder…but Skype 4.1 still doesn’t get the microphone!!! That pisses me off!!!

In my case, for facebook I’m quite strict : if I’ve never met the person, or I’ve never had the minimum contact with him/her/it, I refuse the “friendship request”…generally. On LinkedIn I do quite the opposite : I accept all kinds of invitation, and I invite people usually targeting them by location and field of expertise. It can be useful to have headhunters in your contact list : the closer you are to a recruiter, the more visible you are to job opportunities.

But that’s not the only goal in open networking. In my opinion it’s probably the less interesting one.

Stumble across…

Many people talk about “Quality Network” when they boast having only “well-known contacts” in their lists. I’m sure that if you personally know your “contacts” it’s better, but there are also ways to make your open network a valuable knowledge base.

Many people are writing articles, or linking interesting material, and sometime you just stumble across something inspiring or giving the piece of information you were looking for. It can happen that somebody invites you and gives you information about his business, or is interested in what you do to see if there might be a chance for a joint venture.

LinkedIn is not the only Open Networking Arena, potentially every social networking platform can be turned into that. Think about twitter : you randomly follow people (that are not taking seriously the “what are you doing” question) and somehow you come across some really good stuff. Is it matter of luck? Well…I think yes! When I get the weekly digest from a LinkedIn group I can just skim through it, as I do with a newspaper, and if something captures my attention, or accidentally my mouse clicks on it…

Always keep in mind…

Your open network is composed of people, so treat them as people. When you invite somebody, and you are willing to have a targeted open network, at least have a look at the profile of the potential “new contact”, and write the invitation showing that you have spent some minutes for that : it’s not facade, how can you target people, if you don’t have a target?

People can discern what’s spam and what’s a genuinely written invitation/comment/whatever : spamming your connections won’t help you that much.

If the acquisition of the new connection goes further than a simple “Accept friendship/invitation/whatever”, keep track of what has happened.

Does it take time? Yes, but it can be worthy.

This version doesn’t work with MS AJAX, see my changes below to make it working in ajax as well.

http://www.aspnettutorials.com/tutorials/controls/gridviewscroll-aspnet2-csharp.aspx

THE SERVER SIDE CODE

using System.Data.SqlClient;

protected void Page_Load(object sender, EventArgs e)
{

}

THE “CLIENT SIDE” CODE

<script type=”text/javascript”>
function s()
{

}
window.onload = s
</script>

<table width=”600″ border=”0″ align=”center” cellpadding=”5″ cellspacing=”1″ bgcolor=”#cccccc”>

</table>

OK, and now let’s make it working in AJAX too.

Basically we have to amend only the aspx code. The script has to be moved after the ScripManager, and the PageRequestManager object has to be used to register the event we need

…

…

<body>
<form id=”form1″ runat=”server”>
ScriptManager ID=”ScriptManager2″ runat=”server” EnablePartialRendering=”true” >
</asp:ScriptManager>

<script type=”text/javascript”>

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(s);
function s(sender, args)
{

}
window.onload = s
</script>

<table width=”600″ border=”0″ align=”center” cellpadding=”5″ cellspacing=”1″ bgcolor=”#cccccc”>

</table>

…

…

To have a better understanding of the client side LifeCycle, have a look here : http://www.asp.net/ajax/documentation/live/overview/AJAXClientEvents.aspx

A look here can be a guide for this specific case : http://www.asp.net/ajax/documentation/live/ClientReference/Sys.WebForms/PageRequestManagerClass/PageRequestManagerEndRequestEvent.aspx

You may want to have a look also at my EditableLabel control.