Jquery solution for Radio Group in Umbraco mc_ed_form

Just tried Umbraco a dot net based open source system. following are some of my experience on that.

  • I am totally new to dot net platform so i faced lots of problem to install Umbraco on shared server. After lots of research i  found Umbraco is not compatible with networksolution and aplus.net shared hosting. Then i choosed Softsys. All thing set with softsys.
  • Surprised to see a nice cms. take 3-4 days to try after that i am successfully deploy my first website in Umbraco.
  • I found a beautiful way to manage the content from Umbraco.


As i am not very much familiar to dot net i did,not try to modify .net macro. i played lots of with xslt to achive desired result.

My client  need personalized form and each  form have multiple radio group. i searched on net to find a solution. I found a solution mc_ed_form from forum of Umbraco but that not support Radio groups. So i tried a solution from my way , I write a jquery code to transform all drop down list to Radio group. 🙂

Following are the Unobstructive jquery code which i used in page where form is there

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
function setid(){

arr=$('select');//call all list item in a array

jQuery.each(arr, function(count, item) {

$(this).attr("id", 'lisi'+count);//changed all select to my desired id

convertit(count);// Apply the function

$(this).hide();// hide the select element on page

});

}

function convertit(co){

var $dd = $('#lisi'+co);

if ($dd.length > 0) {

var selectedVal = $dd.val();

var $options = $('option', $dd);

var arrVals = [];

$options.each(function(){

arrVals.push({

val: $(this).val(),

text: $(this).text()

});

});

}

var arr = arrVals;

$.each(arr, function(count, item) {

if(arrVals[count].val!==""){

var pg='';

var lname="#lisi"+co;

var div=$("<div></div>").addClass("wrap2");

var rname='rad'+co;

radio = $('
<input />'
).attr({  type: 'radio', name: rname, value: arrVals[count].val, id: rname, checked:pg});

label=$('<label>'+arrVals[count].val+'</label>');

$(label).prepend(radio);

$(div).append(label);

var oc=true;

$(label).bind("click", function(){

var sv=$("input[name="+rname+"]:checked").val();

$("#lisi"+co).val(sv);

});

$(lname).parent().append(div);

}

});

}

$(document).ready(function(){

setid();

});

If you found any problem with code or any modification suggestion Please let me know. I know this is not a good way to proceed but this solved my purpose. I am finding a dot net way to do it.

Google’s New Products for this April

Following Are some new product from Google for April First 2009.

you can access their previous hi-tech product by following links.

I think you enjoyed. please comment. also let me know if i missed any product 🙂

Jquery Image rollover with demo

I have given a code in my earlier post for jquery image rollover. Now here are the final code and guide how to use this code.

  1. you need to creative two image ie: one for normal state and one for active/rollover state. name it like imagename.gif and imagename_active.gif.
  2. put your image in your HTML document.
  3. put all your image in normal state. remember to keep the active state image in same folder.
  4. include jquery latest script from jquery website and include script on your head section.
  5. copy below code and paste after jquery include. (you can put this code in common include file and include after jquery include.)
  6. don’t forget to change “#nav td” with your a element parent element in below script.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function getLeaf(url) {
var splited=url.split('?');// remove all the parameter from url
url=splited[0];
return url.substring(url.lastIndexOf("/")+1);// return file name without domain and path
}  
jQuery.fn.extend({
enter: function() {//plugins creation
return this.each(function() {
var pth = $(this).find("img")[0];
//alert($(this).children().attr("href"));
if($(this).children().attr("href")==getLeaf(document.location.href)){// check that the link url and document url is same
$(pth).attr("src",pth.src.replace(/.gif/g, '_active.gif'));
} else{
$(this).hover(function(){
$(pth).attr("src",pth.src.replace(/.gif/g, '_active.gif'));// mouse over Image
},function(){
$(pth).attr("src",pth.src.replace(/_active.gif/g, '.gif'));// mouse out image
});
}
});
}
});
$(function(){  // Document is ready
$("#nav td").enter();// call the function
});

Jquery Image rollover demo download Let me know if you are not able to implement this code. I will happy to assist you.