c# - Set textbox fields with values inside jquery dialog -
we have simple asp.net grid view shows data , imagebutton edit data.
upon clicking imagebutton call rowcommand
event (server side event) allow edit of data. edit of data comes unfortunately in form of assigning values textbox controls inside jquery dialog.
now code understand it:
in grid view rowcommand event:
protected void gvactions_rowcommand(object sender, gridviewcommandeventargs e) { var db = new dataclasses1datacontext(); gridviewrow row = (gridviewrow)((control)e.commandsource).namingcontainer; switch (e.commandname) { case "edit": //wants edit action item hdnopendialogactions.value = "1"; ////set fields inside grid label id = (label)row.findcontrol("lblissueactionid"); var rec = db.issueactions.single(x => x.issueactionid == convert.toint32(id.text)); if (rec == null) return; //assign textboxes located inside of jquery grid. lblissueactionid.text = id.text; //assign id of action item lbldialogopendatevalue.text = rec.opendate.toshortdatestring(); txtdialogtargetdatevalue.text = rec.targetdate.toshortdatestring(); txtdialogcloseddatevalue.text = rec.closeddate.tostring(); hdnactiontext.value = rec.issueaction1; txtactionhtml.value = rec.issueactionhtml; hdnactionresolutiontext.value = rec.issueactionresolution; txtactionresolutionhtml.value = rec.issueactionresolutionhtml; hdnresponsiblevalue.value = rec.responsibleid.tostring(); lblresponsiblevalue.text = rec.responsiblecontact.fullname; break; } }
the hdnopendialogactions
used ensure dialog open. here of jquery, see hide it:
$("#dialogactions").hide(); $("#dialogactions").dialog({ autoopen: false, appendto: "form:first", width: 'auto', height: 'auto', modal: true, open: function (event, ui) { $('#dialogactions').css('overflow', 'hidden'); //this line actual hiding }, close: function (event, ui) { //if x's out (closes dialog) better make sure //set hidden field 0 dialog doesn't open again on post $("#maincontent_hdnopendialogactions").val("0"); } });
here's function keeps open (when set hidden field 1 means open dialog):
if ($("#maincontent_hdnopendialogactions").val() === "1") { $("#dialogactions").dialog("open"); $("#maincontent_txtactionhtml").focus(); } else { $("#dialogactions").hide(); }
here actual jquery grid (sorry table use :)):
<asp:updatepanel runat="server" id="updatepanel1" updatemode="always" childrenastriggers="true"> <contenttemplate> <div id="dialogactions" title="issue owner"> <table> <tr> <td class="labelfield"><asp:label id="lbldba" runat="server" text="open"></asp:label></td> <td class="valuefield"> <asp:label id="lbldialogopendatevalue" runat="server"></asp:label> <asp:label id="lblissueactionid" runat="server" visible="false"></asp:label> <asp:hiddenfield id="hiddenfield1" runat="server" /> </td> <td class="labelfield"> <asp:label id="lbldregion0" runat="server" text="responsible:"></asp:label> </td> <td class="valuefield"> <asp:label id="lblresponsiblevalue" runat="server" tooltip="responsible"></asp:label> <asp:hyperlink id="hlopenresponsible" runat="server" navigateurl="#" text="<img src="../../images/edit.png" alt="click edit."/>" tooltip="click change user reports to..."></asp:hyperlink> | <asp:hyperlink id="hlclearresponsible" runat="server" navigateurl="#" text="<img src="../../images/delete.png" alt="click clear selection."/>" tooltip="click clear selection."></asp:hyperlink> <asp:hiddenfield id="hdnresponsiblevalue" runat="server" /> <asp:hiddenfield id="hdnopenresponsible" runat="server" value="0" /> </td> </tr> <tr> <td class="labelfield"> <asp:label id="lbldregion" runat="server" text="target:"></asp:label> </td> <td class="valuefield"> <asp:textbox id="txtdialogtargetdatevalue" runat="server" cssclass="datepicker"></asp:textbox> </td> <td class="labelfield"><asp:label id="lbldpmissue" runat="server" text="closed:"></asp:label></td> <td class="valuefield"> <asp:textbox id="txtdialogcloseddatevalue" runat="server" cssclass="datepicker"></asp:textbox> </td> </tr> <tr> <td class="labelfield"> <asp:label id="lbldpmissue0" runat="server" text="action:"></asp:label> </td> <td class="valuefield" colspan="3"> <textarea id="txtactionhtml" runat="server" class="tinyeditor" cols="5" rows="5" title="enter action item."></textarea><asp:hiddenfield id="hdnactiontext" runat="server" /> <asp:hiddenfield id="hdnactionhtml" runat="server" /> </td> </tr> <tr> <td class="labelfield"> <asp:label id="lbldpmissue1" runat="server" text="resolution:"></asp:label> </td> <td class="valuefield" colspan="3"> <textarea id="txtactionresolutionhtml" runat="server" class="tinyeditor" cols="5" rows="5" title="enter action item resolution."></textarea><asp:hiddenfield id="hdnactionresolutiontext" runat="server" /> <asp:hiddenfield id="hdnactionresolutionhtml" runat="server" /> </td> </tr> <tr> <td class="labelfield" colspan="4"> <asp:button id="btnsaveaction" runat="server" text="submit" onclientclick="submitcontent();" tooltip="submit / save changes?" onclick="btnsaveaction_click" /> </td> </tr> </table> </div> </contenttemplate> </asp:updatepanel>
i set breakpoint , can see code setting textboxes dialog opens not updated. textboxes empty etc...even though code behind showing getting values.
my front end skills pretty bad, if can let me know why happening (could due being server side control , causing post after row command event)?
the answer combination of 2 other answers , client-side help. macoms code shows key element change on aspx page, updatemode=conditional
<asp:updatepanel runat="server" id="updatepanel1" updatemode="conditional">
and, might need add asynchronous trigger each , every edit button
scriptmanager.getcurrent(page).registerasyncpostbackcontrol(edit_control);
and need bound in onitemdatabound event can find more information on here if need it.
lastly, need refresh update panel once finished in edit command gbs points out using update() command
lblresponsiblevalue.text = rec.responsiblecontact.fullname; updatepanel1.update(); break; }
as webforms client-side guy put update panels inside jquery object rather other way around. you'll encounter less grief. looks might issue too. updatepanel staying put, jquery append moving dialog , not update panel. move updatepanel inside div.
<div id="dialogactions" title="issue owner"> <asp:updatepanel runat="server" id="updatepanel1" updatemode="conditional"> <contenttemplate> <table>
that should fix up.
Comments
Post a Comment