asp.net - UpdatePanel issue when using javascript only controls -
included below markup page have using fineuploader control. i've abridged code include important parts. page 2 parts both reside in updatepanel. first part simple table contains rows of data, last column of each row asp:linkbutton. second part nested updatepanel contains div in fineuploader control rendered when page first loaded (because fineuploader control strictly javascript , not further exist in code-behind). also, when linkbutton pressed this.page.ispostback false.
the problem time linkbutton in first part of page pressed, fineuploader control disappears. cannot code re-render code-behind (with things clientscript.registerstartupscript/registerclientscriptblock). i've tried various setups wrapping part 1 updatepanel still wipes out fineuploader control. i'm thinking i'm using update panels incorrectly, not sure (asp.net not work in).
as added detail, if click button inside part 2 nested updatepanel, fineuploader control magically reappears.
markup (for visibility important parts marked multi-line, empty comment blocks):
<%@ page title="" language="c#" masterpagefile="~/site.master" autoeventwireup="true" codebehind="setup.aspx.cs" inherits="some_portal.pages.setup" %> <asp:content id="content2" contentplaceholderid="contentplaceholder1" runat="server"> <div id="locationinfo"> <br class="clearfloat" /> <!-- main screen display breaking down types of information --> <asp:updatepanel runat="server" id="updextensions"> <triggers> <asp:postbacktrigger controlid="btndownloadcall" /> </triggers> <contenttemplate> <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> <style type='text/css'> .filename { visibility: hidden; height: 0; width: 0; display: block; } </style> <!-- portion enable file uploader: --> <link href="../js/fineuploader/fineuploader-3.5.0.css" rel="stylesheet"> <script type="text/javascript" src="../js/fineuploader/fineuploader-3.5.0.js"></script> <script type="text/javascript"> $(document).ready(function () { var uploader = new qq.fineuploader({ element: $('#fine-uploader')[0], request: { endpoint: 'accountsetup.aspx' }, autoupload: true, multiple: false, text: { uploadbutton: '<asp:button id="fineuploadbutton" runat="server" cssclass="button" style="width:6;5" text="browse" />' }, validation: { allowedextensions: ['mp3', 'wav'] } }); }); </script> <!-- --> <!-- --> <!-- part 1 --> <!-- --> <!-- --> <table width="100%" cellpadding="0" border="0px" style="border-color:white;"> <tr> <th>extensions</th> </tr> <tr> <td style="width: 100%; border:0; border-bottom-color:white; border-bottom-style:none;"> <asp:datagrid id="dgextensions" runat="server" allowsorting="true" allowpaging="true" pagerstyle-borderstyle="none" pagerstyle-bordercolor="white" pagerstyle-borderwidth="0px" autogeneratecolumns="false" pagesize="10" datakeyfield="id" onpageindexchanged="dgextensions_onpageindexchanged" pagerstyle-mode="numericpages" pagerstyle-horizontalalign="right" onsortcommand="dgextensions_onsortcommand" width="100%" bordercolor="white" headerstyle-cssclass="gridheader" itemstyle-cssclass="griditem" alternatingitemstyle-cssclass="gridaltitem"> <columns> <asp:boundcolumn datafield="number" headertext="number" sortexpression="number"> <itemstyle horizontalalign="center" width="8%" /> <headerstyle horizontalalign="center" width="8%" /> </asp:boundcolumn> <asp:boundcolumn datafield="extensiontype" headertext="type" sortexpression="extensiontype"> <itemstyle horizontalalign="center" width="18%" /> <headerstyle horizontalalign="center" width="18%" /> </asp:boundcolumn> <asp:templatecolumn headertext="description" sortexpression="description"> <headerstyle width="25%" cssclass="dgleftpad" /> <itemstyle width="25%" cssclass="dgleftpad" /> <itemtemplate> <asp:literal runat="server" id="litextensiondescription" text='<%# eval("description").tostring() %>' /> <asp:hiddenfield runat="server" id="hidextensionid" value='<%# eval("id").tostring() %>' /> <asp:hiddenfield runat="server" id="hidextensiontypeid" value='<%# eval("extensiontypeid").tostring() %>' /> <asp:hiddenfield runat="server" id="hidprevdescription" value='<%# eval("description").tostring() %>' /> </itemtemplate> </asp:templatecolumn> <asp:boundcolumn datafield="status" headertext="status" sortexpression="status"> <itemstyle horizontalalign="center" width="24%" /> <headerstyle horizontalalign="center" width="24%" /> </asp:boundcolumn> <asp:templatecolumn headertext=""> <headerstyle width="10%" /> <itemstyle width="10%" horizontalalign="center" /> <itemtemplate> <!-- --> <!-- --> <!-- clicking makes fine --> <!-- uploader control go away. --> <!-- --> <!-- --> <asp:linkbutton runat="server" id="lbeditextension" commandargument='<%# eval("id").tostring() %>' oncommand="editextension" text="edit" visible='<%# seteditenabled(eval("extensiontypeid").tostring()) %>'/> </itemtemplate> </asp:templatecolumn> </columns> <headerstyle backcolor="#eeeeee" /> <pagerstyle horizontalalign="right" mode="numericpages" /> </asp:datagrid> </td> </tr> <tr> <asp:panel runat="server" id="pnlnoextensions"> <td colspan="3" align="center" style="color: red;"> there no extensions established account </td> </asp:panel> </tr> </table> <br /> <!-- --> <!-- --> <!-- part 2 --> <!-- --> <!-- --> <asp:panel runat="server" id="panel1" width="100%"> <asp:updatepanel runat="server" id="updroutegroup" updatemode="conditional"> <triggers> <asp:postbacktrigger controlid="btndisableonhold" /> </triggers> <contenttemplate> <asp:panel id="pnlimpexcel" runat="server" > <div style="width:100%"> <table colspan="0" width="100%" cellpadding="0" cellspacing="0"> <tr> <th colspan="3"> on hold music </th> </tr> <tr> <!-- --> <!-- fineuploader control --> <!-- --> <td align="left" valign="middle"><div id="fine-uploader"></div></td> <td align="center" valign="middle"><asp:label id="lblonholdfile" runat="server" text="current file: none"/></td> <td align="right" valign="middle"><asp:button id="btndisableonhold" runat="server" style="margin-right:7px;width:87px;" text="disable hold music" cssclass="button" onclick="btndisableonhold_onclick" /></td> </tr> <tr><td colspan ="2" align="center"><asp:label runat="server" id="lbluploaderror" style="color: red;" visible="false" /></td></tr> </table> </div> </asp:panel> </contenttemplate> </asp:updatepanel> </asp:panel> <!-- operator extension panel --> <asp:panel runat="server" id="panel2"> <asp:updatepanel runat="server" id="updatepanel1" updatemode="conditional"> <triggers> <asp:postbacktrigger controlid="btnoperatorupdate" /> </triggers> <contenttemplate> <asp:panel id="panel3" runat="server" > <div> <table colspan="0" width="100%" cellpadding="0" cellspacing="0"> <tr> <th colspan="3"> operator extension <asp:button id="btnoperatorupdate" runat="server" text="save" cssclass="button" style="margin-right:2px;width:87px;float:right;padding-right:10px;" onclick="btnoperatorupdate_onclick" /> <asp:dropdownlist runat="server" id="ddloperatorextension" style="float:right;margin-right:10px;" width="250px" autopostback="false" /> </th> </tr> </table> <br /> </div> </asp:panel> </contenttemplate> </asp:updatepanel> </asp:panel> </contenttemplate> </asp:updatepanel> </div> </asp:content> how can make fineuploader control stay visible?
edit 1: considering might page life cycle issue, attempted manual render of control adding following:
protected void page_init(object sender, eventargs e) { string script = "<script type=\"text/javascript\">" + " alert('oh hey');" + " $(document).ready(function () {" + " var uploader = new qq.fineuploader({" + " element: $('#fine-uploader')[0]," + " request: {" + " endpoint: 'accountsetup.aspx'" + " }," + " autoupload: true," + " multiple: false," + " text: {" + " uploadbutton: '<asp:button id=\"fineuploadbutton\" runat=\"server\" cssclass=\"button\" style=\"width:6;5\" text=\"browse\" />'" + " }," + " validation: {" + " allowedextensions: ['mp3', 'wav']" + " }" + " });" + " });" + "</script>"; clientscript.registerclientscriptblock(this.gettype(), "hideonpostback", script, false); system.diagnostics.debug.writeline("page_init() run"); } the result if click "edit" linkbutton in part 1, see "page_init() run" in debug output, control still goes away , "oh hey" js alert never displayed. however, if click other button in part 2, see "page_init() run" in debug output, see "oh hey" alert , fineuploader button remains visible.
i believe experiencing issue because loading fineuploader control late in page lifecycle load viewstate. clicking button triggering postback restarts lifecycle page. viewstate loaded before page_load() try add control page during page_init() instead viewstate can loaded.
Comments
Post a Comment