asp.net mvc - MVC; How do you avoid ID name collisions when using tabs? -
there lot commend mvc, 1 problem keep getting id name collisions. first noticed when generating grid using foreach loop. of found solution use editor templates. have same problem tabs. used reference find out how use tabs; http://blog.roonga.com.au/search?updated-max=2010-06-14t19:27:00%2b10:00&max-results=1
the problem tabs using date field date picker. in example above, id name collisions avoided referencing generated unique id of container element. datepicker, id of container irrelevant, id of date field matters. happens if create second tab same first, when update second tab, date on first updated. below view, , partial view displays date. when click "add absence 1 day button, create tab screen;
<%@ page title="" language="c#" masterpagefile="~/views/shared/adminaccounts.master" inherits="system.web.mvc.viewpage<shp.webui.models.absenceviewmodel>" %> <asp:content id="content1" contentplaceholderid="titlecontent" runat="server"> absenceforemployee </asp:content> <asp:content id="content2" contentplaceholderid="adminaccountscontent" runat="server"> <script type="text/javascript"> $(function () { $('#tabs').tabs( { cache: true }, { ajaxoptions: { cache: false, error: function (xhr, status, index, anchor) { $(anchor.hash).html("couldn't load tab."); }, data: {}, success: function (data, textstatus) { } }, add: function (event, ui) { //select new tab $('#tabs').tabs('select', '#' + ui.panel.id); } }); }); function addtab(title, uri) { var newtab = $("#tabs").tabs("add", uri, title); } function closetab() { var index = getselectedtabindex(); $("#tabs").tabs("remove", index) } function getselectedtabindex() { return $("#tabs").tabs('option', 'selected'); } function refreshlist() { $('#frmabsencelist').submit(); } </script> <% using (html.beginform()) {%> <%: html.antiforgerytoken() %> <fieldset> <legend>select employee edit absence record</legend> <div style="padding-bottom:30px;padding-left:10px;"> <div class="span-7"><b>name:</b> <%: model.employee.getname() %></div> <div class="span-6"><b>division:</b><%: model.divisionname %></div> <div class="span-6"><b>department:</b> <%: model.departmentname %></div></div> <p>attendance record year <%: html.dropdownlistfor(model => model.selectedyearid, model.yearlist, new { onchange = "this.form.submit();" })%></p> <div id="tabs"> <ul> <li><a href="#tabs-1">absence list</a></li> </ul> <div id="tabs-1"> <input id="btnaddonedaytab" type="button" onclick="addtab('add absence (1 day)','<%= url.action("addabsenceoneday", "employee") %>')" value='add absence 1 day' /> <input id="btnadddaterangetab" type="button" onclick="addtab('add absence (date range)','<%= url.action("addabsencedaterange", "employee") %>')" value='add absence range of dates' /> <hr /> <% html.renderpartial("listabsence", model.listemployeeabsencethisyear); %> </div> </div> </fieldset> <% } %> add new date partial view ...
<%@ control language="c#" inherits="system.web.mvc.viewusercontrol<shp.models.employeeotherleaf>" %> <% var unique = datetime.now.ticks.tostring(); %> <script language="javascript" type="text/javascript"> $(document).ready(function () { $('#frmaddabsenceoneday<%= unique %> #nullableotherleavedate').datepicker({ dateformat: 'dd-mm-yy' }); $('#frmaddabsenceoneday<%= unique %> #morningonlyflag').click(function () { $('#frmaddabsenceoneday<%= unique %> #afternoononlyflag').attr('checked', false); }) $('#frmaddabsenceoneday<%= unique %> #afternoononlyflag').click(function () { $('#frmaddabsenceoneday<%= unique %> #morningonlyflag').attr('checked', false); }) }); var options = { target: '#frmaddabsenceoneday<%= unique %>', success: refreshlist }; $(document).ready(function () { $('#frmaddabsenceoneday<%= unique %>').ajaxform(options); }); </script> <div id="addabsenceonday<%= unique %>"> <% using (html.beginform("addabsenceoneday", "employee", formmethod.post, new { id = "frmaddabsenceoneday" + unique })) { %> <%: html.validationsummary(true) %> <fieldset> <legend>add absence day or half day</legend> <table> <tr> <td><%: html.labelfor(model => model.otherleaveid)%></td> <td> <%: html.dropdownlistfor(model => model.otherleaveid, model.selectleavetypelist, "<--select-->")%> <%: html.validationmessagefor(model => model.otherleaveid)%> </td> </tr> <tr> <td> <%: html.labelfor(model => model.nullableotherleavedate)%> </td> <td> <%: html.editorfor(model => model.nullableotherleavedate)%> <%: html.validationmessagefor(model => model.nullableotherleavedate)%> <%if (viewdata["errordatemessage"] != null && viewdata["errordatemessage"].tostring().length > 0) { %> <p class="error"> @ <% response.write(datetime.now.tostring("t")); %>. <%: viewdata["errordatemessage"]%>. </p> <%} %> </td> </tr> <tr> <td> <%: html.labelfor(model => model.morningonlyflag)%> </td> <td> <%: html.checkboxfor(model => model.morningonlyflag)%> <%: html.validationmessagefor(model => model.morningonlyflag)%> </td> </tr> <tr> <td> <%: html.labelfor(model => model.afternoononlyflag)%> </td> <td> <%: html.checkboxfor(model => model.afternoononlyflag)%> <%: html.validationmessagefor(model => model.afternoononlyflag)%> </td> </tr> </table> <p> <span style="padding-right:10px;"><input type="submit" value="create" /></span><input type="button" value="close" onclick="closetab()" /> </p> </fieldset> <% } %> </div> you can see id of date in following html firebug
<div id="main"> <div id="adminaccounts"> <table> <tbody><tr> <td> <div style="padding-top: 15px;"> // menu removed </div> </td> <td> <script type="text/javascript"> $(function () { $('#tabs').tabs( { cache: true }, { ajaxoptions: { cache: false, error: function (xhr, status, index, anchor) { $(anchor.hash).html("couldn't load tab."); }, data: {}, success: function (data, textstatus) { } }, add: function (event, ui) { //select new tab $('#tabs').tabs('select', '#' + ui.panel.id); } }); }); function addtab(title, uri) { var newtab = $("#tabs").tabs("add", uri, title); } function closetab() { var index = getselectedtabindex(); $("#tabs").tabs("remove", index) } function getselectedtabindex() { return $("#tabs").tabs('option', 'selected'); } function refreshlist() { $('#frmabsencelist').submit(); } </script> <form method="post" action="/employee/absenceforemployee?employeeid=1"><input type="hidden" value="8ygn2w+fgqsrsho/d+7fmnpwbttbu96x4u1t/jf6+4ndsnjhopeq7it9cedajrziak/dgbnx6idttd94xubm5w==" name="__requestverificationtoken"> <fieldset> <legend>select employee edit absence record</legend> <div style="padding-bottom: 30px; padding-left: 10px;"> <div class="span-7"><b>name:</b> xaviar caviar</div> <div class="span-6"><b>division:</b>ict</div> <div class="span-6"><b>department:</b> ict</div></div> <p>absence leave record year <select onchange="this.form.submit();" name="selectedyearid" id="selectedyearid"><option value="2" selected="selected">2010/11</option> </select></p> <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> <li class="ui-state-default ui-corner-top"><a href="#tabs-1">absence list</a></li> <li class="ui-state-default ui-corner-top"><a href="#ui-tabs-2"><span>add absence (1 day)</span></a></li><li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#ui-tabs-4"><span>add absence (1 day)</span></a></li></ul> <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"> <input type="button" value="add absence 1 day" onclick="addtab('add absence (1 day)','/employee/addabsenceoneday')" id="btnaddonedaytab"> <input type="button" value="add absence range of dates" onclick="addtab('add absence (date range)','/employee/addabsencedaterange')" id="btnadddaterangetab"> <hr> <script type="text/javascript"> var options = { target: '#absencelist' }; $(document).ready(function() { $('#frmabsencelist').ajaxform(options); }); </script> <div id="absencelist"> <table class="grid"><thead><tr><th class="sort_asc"><a href="/employee/absenceforemployee?direction=descending&employeeid=1"></a></th><th><a href="/employee/absenceforemployee?column=otherleavename&direction=ascending&employeeid=1">leave type</a></th><th><a href="/employee/absenceforemployee?column=morningonlyflag&direction=ascending&employeeid=1">morning only</a></th><th><a href="/employee/absenceforemployee?column=afternoononlyflag&direction=ascending&employeeid=1">afternoon only</a></th><th><a href="/employee/absenceforemployee?column=dayamount&direction=ascending&employeeid=1">day amount</a></th><th><a href="/employee/absenceforemployee?column=otherleavedate&direction=ascending&employeeid=1">date</a></th></tr></thead><tbody><tr class="gridrow"><td><a href="/employee/deleteabsence?_employeeotherleaveid=60">delete</a></td><td>sickness</td><td>false</td><td>false</td><td>1</td><td>04/11/2010</td></tr><tr class="gridrow_alternate"><td><a href="/employee/deleteabsence?_employeeotherleaveid=51">delete</a></td><td>unpaid sickness</td><td>false</td><td>false</td><td>1</td><td>08/11/2010</td></tr><tr class="gridrow"><td><a href="/employee/deleteabsence?_employeeotherleaveid=54">delete</a></td><td>unpaid compassionate</td><td>false</td><td>false</td><td>1</td><td>09/11/2010</td></tr><tr class="gridrow_alternate"><td><a href="/employee/deleteabsence?_employeeotherleaveid=45">delete</a></td><td>compassionate</td><td>false</td><td>false</td><td>1</td><td>10/11/2010</td></tr><tr class="gridrow"><td><a href="/employee/deleteabsence?_employeeotherleaveid=43">delete</a></td><td>compassionate</td><td>false</td><td>false</td><td>1</td><td>15/11/2010</td></tr><tr class="gridrow_alternate"><td><a href="/employee/deleteabsence?_employeeotherleaveid=55">delete</a></td><td>unpaid sickness</td><td>false</td><td>false</td><td>1</td><td>16/11/2010</td></tr><tr class="gridrow"><td><a href="/employee/deleteabsence?_employeeotherleaveid=56">delete</a></td><td>compassionate</td><td>false</td><td>false</td><td>1</td><td>17/11/2010</td></tr><tr class="gridrow_alternate"><td><a href="/employee/deleteabsence?_employeeotherleaveid=44">delete</a></td><td>compassionate</td><td>false</td><td>false</td><td>1</td><td>22/11/2010</td></tr><tr class="gridrow"><td><a href="/employee/deleteabsence?_employeeotherleaveid=37">delete</a></td><td>unpaid sickness</td><td>false</td><td>false</td><td>1</td><td>24/11/2010</td></tr><tr class="gridrow_alternate"><td><a href="/employee/deleteabsence?_employeeotherleaveid=36">delete</a></td><td>sickness</td><td>false</td><td>false</td><td>1</td><td>25/11/2010</td></tr><tr class="gridrow"><td><a href="/employee/deleteabsence?_employeeotherleaveid=48">delete</a></td><td>unpaid sickness</td><td>false</td><td>false</td><td>1</td><td>26/11/2010</td></tr><tr class="gridrow_alternate"><td><a href="/employee/deleteabsence?_employeeotherleaveid=38">delete</a></td><td>unpaid sickness</td><td>false</td><td>false</td><td>1</td><td>29/11/2010</td></tr><tr class="gridrow"><td><a href="/employee/deleteabsence?_employeeotherleaveid=5">delete</a></td><td>compassionate</td><td>false</td><td>false</td><td>1</td><td>30/11/2010</td></tr><tr class="gridrow_alternate"><td><a href="/employee/deleteabsence?_employeeotherleaveid=46">delete</a></td><td>unpaid sickness</td><td>false</td><td>false</td><td>1</td><td>13/12/2010</td></tr><tr class="gridrow"><td><a href="/employee/deleteabsence?_employeeotherleaveid=61">delete</a></td><td>compassionate</td><td>false</td><td>false</td><td>1</td><td>26/12/2010</td></tr></tbody></table> <p></p><div class="pagination"><span class="paginationleft">showing 1 - 15 of 21 </span><span class="paginationright">first | prev | <a href="/employee/absenceforemployee?page=2&employeeid=1">next</a> | <a href="/employee/absenceforemployee?page=2&employeeid=1">last</a></span></div> </div> </div><div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"> <div id="addabsenceonday634255177533718544"> <form method="post" id="frmaddabsenceoneday634255177533718544" action="/employee/addabsenceoneday"> <fieldset> <legend>add absence day or half day</legend> <table> <tbody><tr> <td><label for="otherleaveid">leave type</label></td> <td> <select name="otherleaveid" id="otherleaveid"><option value=""><--select--></option> <option value="1">sickness</option> <option value="2">unpaid sickness</option> <option value="6">compassionate</option> <option value="7">unpaid compassionate</option> <option value="8">unauthorised</option> <option value="9">unpaid unauthorised</option> <option value="10">other</option> <option value="11">unpaid other</option> </select> </td> </tr> <tr> <td> <label for="nullableotherleavedate">date</label> </td> <td> <input type="text" value="" name="nullableotherleavedate" id="nullableotherleavedate" class="datepicker hasdatepicker"> </td> </tr> <tr> <td> <label for="morningonlyflag">morning only</label> </td> <td> <input type="checkbox" value="true" name="morningonlyflag" id="morningonlyflag"><input type="hidden" value="false" name="morningonlyflag"> </td> </tr> <tr> <td> <label for="afternoononlyflag">afternoon only</label> </td> <td> <input type="checkbox" value="true" name="afternoononlyflag" id="afternoononlyflag"><input type="hidden" value="false" name="afternoononlyflag"> </td> </tr> </tbody></table> <p> <span style="padding-right: 10px;"><input type="submit" value="create"></span><input type="button" onclick="closetab()" value="close"> </p> </fieldset> </form> </div> </div><div id="ui-tabs-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom"> <div id="addabsenceonday634255177583860349"> <form method="post" id="frmaddabsenceoneday634255177583860349" action="/employee/addabsenceoneday"> <fieldset> <legend>add absence day or half day</legend> <table> <tbody><tr> <td><label for="otherleaveid">leave type</label></td> <td> <select name="otherleaveid" id="otherleaveid"><option value=""><--select--></option> <option value="1">sickness</option> <option value="2">unpaid sickness</option> <option value="6">compassionate</option> <option value="7">unpaid compassionate</option> <option value="8">unauthorised</option> <option value="9">unpaid unauthorised</option> <option value="10">other</option> <option value="11">unpaid other</option> </select> </td> </tr> <tr> <td> <label for="nullableotherleavedate">date</label> </td> <td> <input type="text" value="" name="nullableotherleavedate" id="nullableotherleavedate" class="datepicker hasdatepicker"> </td> </tr> <tr> <td> <label for="morningonlyflag">morning only</label> </td> <td> <input type="checkbox" value="true" name="morningonlyflag" id="morningonlyflag"><input type="hidden" value="false" name="morningonlyflag"> </td> </tr> <tr> <td> <label for="afternoononlyflag">afternoon only</label> </td> <td> <input type="checkbox" value="true" name="afternoononlyflag" id="afternoononlyflag"><input type="hidden" value="false" name="afternoononlyflag"> </td> </tr> </tbody></table> <p> <span style="padding-right: 10px;"><input type="submit" value="create"></span><input type="button" onclick="closetab()" value="close"> </p> </fieldset> </form> </div> </div> <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div><div id="ui-tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div></div> </fieldset> </form></td> </tr> </tbody></table></div> <div id="footer"> </div> </div> if have got far(!), have been asked controller, here is.
[authorize(roles = "administrator, adminaccounts, manageraccounts")] public actionresult addabsenceoneday() { return view(new employeeotherleaf()); } [httppost] [authorize(roles = "administrator, adminaccounts, manageraccounts")] public actionresult addabsenceoneday(employeeotherleaf _absence) { if (modelstate.isvalid) { _absence.employeeid = sessionobjects.employeeid; _absence.otherleavedate = _absence.nullableotherleavedate.getvalueordefault(datetime.today); tuple<bool, string> errorinfo = _absence.isdatevalid(); if (errorinfo.item1 == true) { _absence.addandsave(); viewdata["successmessage"] = "successfully added."; return view("editabsenceoneday", _absence); } else { viewdata["errordatemessage"] = errorinfo.item2; return view(_absence); } } else { return view(_absence); } }
the problem seems dom has 1 entry nullableotherleavedate. seems logical because of use of id. can add hash id well. if need match id jquery can use partial selectors this:
$('input[id*=nullableotherleavedate]') see jquery partial selectors more that. how modal binder bind i'm not sure can implement partial matching in c# no problems. if want please post relevant code of action.
Comments
Post a Comment