December « 2010 « Marius’ Blog

Me, jQuery, UpdatePanel and Frank Sinatra

December 18, 2010

It was decided that I have to suffer that Sunday. A cold, dark Sunday. A Sunday when each responsible creature on Earth should silencefully rest, hidden behind the frige and drinking something usefull for his own health. Tip for today: red wine.

Anyway. Forget about wine, ok?
Ok….
I’m not sure who answered, but shame on him.

Now, let overview what we got until now: it was a cold Sunday and no red wine around.
Here we go.
I will not mention the reason for which it was a bloody need to use a CheckBoxList on an unlucky web-page, having the following really funny behaviour: when checking an item, then the related label should be displayed bolded.

Css and some jQuery, right?
Nope guys. My control is placed inside of an UpdatePanel, and, of course, after a “partial” postback it has lost all jQuery prescripted behaviour.

So, I’m happy to popularize the solution for this crazy problem. It offered me the opportunity to experiment how the hell might be, and I had also the chance to understand what I would be capable for in moments of insanity. I discovered, during the two hours I have dig on this, my native talent on cursing, yielling and on producing of a lot of new words starting with our mutual favourite, f***.

Anyway, have here bellow a complete solution. Hope you read this after your two hour for experiencing the madness …
CSS

.ctglist{font-family:Arial;}
.ctglist td{ padding-right:10px;}

ASPX code

………….
<script src=”jquery.min.js” type=”text/javascript”></script>
<script src=”myjquery.js” type=”text/javascript”></script>
………….
<asp:UpdatePanel/>
<asp:ContentTemplate/>
…………………………………
<asp:CheckBoxList ID="ctl00_HovedCP_cblC’" runat="server" CssClass="ctglist” />
…………………………………
<asp:Button ID=”btnSelect” runat=”server” Text=”Do postback, dude!” onclick=”VeryCleverStuff” />
<asp:ContentTemplate/>
<asp:UpdatePanel/>
………….

myjquery.js

$(document).ready(function() {
if ($(‘#ctl00_HovedCP_cblC’).length)
{
var sub = $(this).parent().find(‘label’);
$(‘.ctglist input:checkbox’).each(function(){
if( $(this).attr(‘checked’)){
sub.css({ ‘font-weight’ : ‘bold’ });
}
else
{
sub.css(‘font-weight’,'normal’) ;
}
});

$(‘.ctglist input:checkbox’).click(function(){
var sub = $(this).parent().find(‘label’);

if( $(this).attr(‘checked’) && sub != null){

sub.css({ ‘font-weight’ : ‘bold’ });

}
else
{
sub.css(‘font-weight’,'normal’) ;
}

});

}
});
ref.: http://www.dotnetfunda.com/articles/article471-jquery-and-aspnet-ajax-updatepanel-.aspx

function pageLoad(sender, args)
{
if(args.get_isPartialLoad()){
DoCheckListBoxStuff();
}
}

$(‘.ctglist input:checkbox’).click(function(){
var sub = $(this).parent().find(‘label’);

if( $(this).attr(‘checked’) && sub != null){

sub.css({ ‘font-weight’ : ‘bold’ });

}
else
{
sub.css(‘font-weight’,'normal’) ;
}

});

}
}

Let drink now, what the f***!

…And what about Frank Sinatra? , will ask a reader (99% a lady, 99,999% a blondie one).

Nothing special, my beloved reader, we just had to be 4, like in Beatles, right?….So, let it be… let it beeeeeee…
Cheers! Happy New Controls!