how to add jquery tabcontrol in jquery dialog that open from other jquery dialog have a tab control -
i have jquery dialog form contains jquery tabcontrol.
$(document).ready(function () { var dialog = $("#createform").parentsuntil(".ui-dialog"); dialog[0]["validatefilter"] = { ignore: "" }; dialog[0]["forminvalidcallback"] = function () { $("#persontab").tabs("select", $("form .input-validation-error").closest(".ui-tabs-panel").get(0).id); }; $(dialog).parent().find(".ui-dialog-content").addclass("dialog-content-nopadding"); dialog.find("#persontab").tabs({ "show": function (event, ui) { if (!$(dialog)[0].dragged) dialog.dialog('option', 'position', 'center'); var otable = $('div.datatables_scrollbody>table.display', ui.panel).datatable(); if (otable.length > 0) { otable.fnadjustcolumnsizing(); } } }); });
@using (html.beginform(null, null, formmethod.post, new { id = "createform" })) { @html.antiforgerytoken() @html.validationsummary(true) <fieldset style="min-width:550px"> <div> <div id="persontab" class="tabs"> <ul> <li><a href="#general-tab">@html.statictext("person_general_tab")</a></li> <li><a href="#prefermentjob-tab">@html.statictext("jobtperson_prefermentjob_tab")</a></li> <li><a href="#justifyjob-tab">@html.statictext("jobtperson_justifyjob_tab")</a></li> </ul> <div id="general-tab"> @html.partial("details") </div> <div id="prefermentjob-tab"> @html.partial("prefermentjoblist") </div> <div id="justifyjob-tab"> @html.partial("justifyjoblist") </div> </div> </div> </fieldset> }
this tabcontrol opens jquery dialog. , new jquery dialog has jquery tabcontrol itself.
$(document).ready(function () { var dialog = $("#createjobform").parentsuntil(".ui-dialog"); dialog[0]["validatefilter"] = { ignore: "" }; dialog[0]["forminvalidcallback"] = function () { $("#jobtab").tabs("select", $("form .input-validation-error").closest(".ui-tabs-panel").get(0).id); }; $(dialog).parent().find(".ui-dialog-content").addclass("dialog-content-nopadding"); dialog.find("#jobtab").tabs({ "show": function (event, ui) { if (!$(dialog)[0].dragged) dialog.dialog('option', 'position', 'center'); var otable = $('div.datatables_scrollbody>table.display', ui.panel).datatable(); if (otable.length > 0) { otable.fnadjustcolumnsizing(); } } }); });
@using (html.beginform(null, null, formmethod.post, new { id = "createjobform" })) { @html.antiforgerytoken() @html.validationsummary(true) <fieldset style="min-width:550px"> <div> <div id="jobtab" class="tabs"> <ul > <li><a href="#general-tab">@html.statictext("job_general_tab")</a></li> <li><a href="#education-tab">@html.statictext("job_jobeducationlist_tab")</a></li> <li><a href="#indicator-tab">@html.statictext("job_jobindicatorlist_tab")</a></li> </ul> <div id="general-tab"> @html.partial("detailsjob") </div> <div id="education-tab"> @html.partial("jobeducationlist") </div> <div id="indicator-tab"> @html.partial("jobindicatorlist") </div> </div> </div> </fieldset> }
my problem new jquery tabcontrol(the second one) doesn't have actual behavior.
can me. thanks.
Comments
Post a Comment