javascript - Styling issue in ASPX page -
i have aspx page suppose output 5 instances of 1 custom control (basically table data grabbed database). relatively new asp.net javascript, having difficulty fixing styling issue.
my problem that, styling on custom control (the table) being applied first instance of control. not sure why is. have put code (i renamed lot of things keep generic). how go making styling apply 5 instances?
<%@ register assembly="system.web.extensions, version=3.5.0.0, culture=neutral, publickeytoken=xxxxxxxxxxxxxx" namespace="system.web.ui" tagprefix="asp" %> <%@ register tagprefix="company" tagname="control3" src="~/common/controls/control3.ascx" %> <asp:content id="content1" contentplaceholderid="head" runat="server"> <link type="text/css" rel="stylesheet" href="<%=resolveurl("~/project/css/dashboard.css") %>" /> </asp:content> <asp:content id="content2" contentplaceholderid="maincontent" runat="server"> <div id="dashboardcontent"> <div id="id1"> <%-- id1 --%> <div class="roundedtop"> <asp:label id="lblid1" runat="server" cssclass="inputheader" meta:resourcekey="lblid1" /> </div> <div class="roundedmain"><!--<![endif]--> <company:control3 id="control3first" runat="server" meta:resourcekey="control3first" filter="" /> </div> </div> <div id="id2"> <%-- id2 --%> <div class="roundedtop"> <asp:label id="lblid2" runat="server" cssclass="inputheader" meta:resourcekey="lblid2" /> </div> <div class="roundedmain"><!--<![endif]--> <company:control3 id="control3second" runat="server" meta:resourcekey="control3second" filter="" /> </div> </div> <div id="id3"> <%-- id3 --%> <div class="roundedtop"> <asp:label id="lblid3" runat="server" cssclass="inputheader" meta:resourcekey="lblid3" /> </div> <div class="roundedmain"><!--<![endif]--> <company:control3 id="control3third" runat="server" meta:resourcekey="control3third" filter="" /> </div> </div> <div id="id4"> <%-- id4 --%> <div class="roundedtop"> <asp:label id="lblid4" runat="server" cssclass="inputheader" meta:resourcekey="lblid4" /> </div> <div class="roundedmain"><!--<![endif]--> <company:control3 id="control3forth" runat="server" meta:resourcekey="control3forth" filter="" /> </div> </div> <div id="id5"> <%-- id5 --%> <div class="roundedtop"> <asp:label id="lblid5" runat="server" cssclass="inputheader" meta:resourcekey="lblid5" /> </div> <div class="roundedmain"><!--<![endif]--> <company:control3 id="control3fifth" runat="server" meta:resourcekey="control3fifth" filter="" /> </div> </div> </div> <asp:timer id="tupdatetimer" runat="server" ontick="tupdatetimer_tick"></asp:timer> <asp:updatepanel id="uptimer" runat="server" updatemode="conditional"> <contenttemplate /> <triggers><asp:asyncpostbacktrigger controlid="tupdatetimer" eventname="tick" /></triggers> </asp:updatepanel> </asp:content> <asp:content id="content3" contentplaceholderid="javascriptcontent" runat="server"> <script type="text/javascript"> var tblsomething = null; var tblhostconnection = null; function pageload(sender, args) { attachdatatablestosomethingtable(); attachdatatablestohostconnectiontable(); } function attachdatatablestosomethingtable() { tblsomething = $('#tblsomething').datatable({ "bretrieve": true, "bserverside": false, "bpaginate": false, "bfilter": false, "bsort": false, "bjqueryui": true, "sscrolly": "230px", "sscrollx": "100%", "olanguage": { "semptytable": '<%= getlocalresourceobject("tblsomething.empty").tostring() %>', "sprocessing": '<img id="imganim" src="<%= resolveurl(resources.siteicons.loader) %>" />', "sinfo": '<%= getlocalresourceobject("sinfo.showing").tostring() %>' + ' _start_ ' + '<%= getlocalresourceobject("sinfo.to").tostring() %>' + ' _end_ ' + '<%= getlocalresourceobject("sinfo.of").tostring() %>' + ' _total_ ' + '<%= getlocalresourceobject("sinfo.entries").tostring() %>' } }); } function attachdatatablestohostconnectiontable() { tblhostconnection = $('#tblhostconnection').datatable({ "bretrieve": true, "bserverside": false, "bpaginate": false, "bfilter": false, "bsort": false, "bjqueryui": true, "sscrolly": "100%", "sscrollx": "100%", "olanguage": { "semptytable": '<%= getlocalresourceobject("tblhostconnection.empty").tostring() %>', "sprocessing": '<img id="imganim" src="<%= resolveurl(resources.siteicons.loader) %>" />', "sinfo": '' } }); } </script> </asp:content> from bit of playing around, if commented out attachdatatablestosomethingtable() javascript call @ bottom, no styling applied table, assume function applies/calls styling. again, inexperienced asp.net , javascript, if shed light, awesome.
i'll agree @lucuma's comment question. so, may suggest implement unique id table of each custom control instance. can achieved implementing public property 'tableid' in custom control, can configured each custom control instance.
the below parts go user custom control implementation:
code behind:
public string tableid { get; set; } markup:
<table id='<%=tableid %>'> configure tableid property each custom control instance in aspx page:
<company:control3 id="control3first" runat="server" meta:resourcekey="control3first" filter="" tableid='mytable1' /> <company:control3 id="control3second" runat="server" meta:resourcekey="control3second" filter="" tableid='mytable2' /> and finally, wire jquery plug-in each table...
mytable1 = $('#mytable1').datatable(...); mytable2 = $('#mytable2').datatable(...); hope helps...
Comments
Post a Comment