jquery tabs inside modal popup using MVChelper class - asp.net-mvc

Question

I am using a MVC helper class to display modal popup . my requirement is to show tabs inside this modal popup... here is what is did
My helper class
public static MvcHtmlString DialogROFormLink(this HtmlHelper htmlHelper, string linkText, string dialogContentUrl,
string dialogTitle, string updateTargetId, string updateUrl, string l_intHeight, string l_intWidth, string l_strFrmLinkPost )
{
TagBuilder builder = new TagBuilder("a");
builder.SetInnerText(linkText);
builder.Attributes.Add("href", dialogContentUrl);
builder.Attributes.Add("data-dialog-title", dialogTitle);
builder.Attributes.Add("data-update-target-id", updateTargetId);
builder.Attributes.Add("data-update-url", updateUrl);
builder.Attributes.Add("data-dialog-height", l_intHeight );
builder.Attributes.Add("data-dialog-width", l_intWidth );
builder.Attributes.Add("data-dialog-frmLink", l_strFrmLinkPost);
// Add a css class named dialogLink that will be
// used to identify the anchor tag and to wire up
// the jQuery functions
builder.AddCssClass("ROdialogLink");
return new MvcHtmlString(builder.ToString());
}
The JS file
$(function () {
// Don't allow browser caching of forms
$.ajaxSetup({ cache: false });
// Wire up the click event of any current or future dialog links
$('.ROdialogLink').live('click', function () {
var element = $(this);
// Retrieve values from the HTML5 data attributes of the link
var dialogTitle = element.attr('data-dialog-title');
var updateTargetId = '#' + element.attr('data-update-target-id');
var updateUrl = element.attr('data-update-url') + "?id=" + Math.floor(Math.random() * 1000);
// Generate a unique id for the dialog div
var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
var dialogDiv = "<div id='" + dialogId + "'></div>";
var lheight = element.attr('data-dialog-height');
var lwidth = element.attr('data-dialog-width');
var l_frmPost = element.attr('data-dialog-frmLink');
// Load the form into the dialog div
$(dialogDiv).load(this.href, function () {
$(this).dialog(
{
modal: true,
resizable: false,
width: lwidth,
height: lheight,
title: dialogTitle,
cache: false,
type: 'get',
buttons:
{
"Save": function () {
// Manually submit the form
var form = $('form', this);
$(form).submit();
},
"Cancel": function ()
{ $(this).dialog('destroy'); }
},
show: {
effect: "blind",
duration: 200
},
hide: {
effect: "blind",
duration: 200
}
})
// Enable client side validation
$.validator.unobtrusive.parse(this);
// Setup the ajax submit logic
wireUpForm(this, updateTargetId, updateUrl, l_frmPost);
});
return false;
});
});
function wireUpForm(dialog, updateTargetId, updateUrl, l_frmPost) {
$('form', dialog).submit(function () {
// Do not submit if the form
// does not pass client side validation
if (!$(this).valid())
return false;
$(dialog).dialog('close');
// Client side validation passed, submit the form
// using the jQuery.ajax form
return false;
});
}
Here is my view in which I have added the tabs script
<script>
$(function () {
$("CalendarTabs").tabs();
});
</script>
#using (Html.BeginForm())
{
<div id="CalendarTabs">
<ul>
<li>Estimate</li>
<li>Address/Phone/Insurance</li>
</ul>
<div id="CalTab-1">
</div>
<div id="CalTab-2">
</div>
</div>
}
I tried to show modal popup without using helper class to show popup including tabs and works fine. But fails in this case.
Please Help me! Thanks