jquery - simplemodal not displaying <div> content with ASP.NET and VB -
i beyond knowledge here. has obvious missing. i'm trying use jquery simplemodal display confirmation record added database.
i've managed figure out how modal display; however, background of modal displaying. content within div not displaying in modal. in fact, nothing displaying in modal.
background:
i use master page , default asp.net css site settings. i've disabled sites css (as you'll see screenshot) , using css simplemodal. can not life of me show content.
see screenshot appearing: 
here aspx:
`<%@ page title="" language="vb" masterpagefile="~/site.master" autoeventwireup="false" codefile="createdoctype.aspx.vb" inherits="admin_createdoctype" %>
<%@ register assembly="ajaxcontroltoolkit" namespace="ajaxcontroltoolkit" tagprefix="asp" %> <asp:content id="content1" contentplaceholderid="headcontent" runat="server"> </asp:content> <asp:content id="content2" contentplaceholderid="maincontent" runat="server"> <asp:toolkitscriptmanager id="toolkitscriptmanager1" runat="server"> </asp:toolkitscriptmanager> <script src="../scripts/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="../scripts/jquery.simplemodal-1.4.2.js" type="text/javascript"></script> <h3>create new document type</h3> <div> <asp:table id="tbldoctype" runat="server"> <asp:tablerow> <asp:tablecell> <asp:label id="lbltype" runat="server" text="type/name:"></asp:label> </asp:tablecell> <asp:tablecell> <asp:textbox id="txttype" runat="server"></asp:textbox> </asp:tablecell> </asp:tablerow> <asp:tablerow> <asp:tablecell> <asp:label id="lbldescription" runat="server" text="description:"></asp:label> </asp:tablecell> <asp:tablecell> <asp:textbox id="txtdescription" runat="server" textmode="multiline" height="40"></asp:textbox> </asp:tablecell> </asp:tablerow> <asp:tablerow> <asp:tablecell> <asp:label id="lblautonumber" runat="server" text="auto number:"></asp:label> </asp:tablecell> <asp:tablecell> <asp:dropdownlist id="ddlautonumber" runat="server" autopostback="true"> <asp:listitem value="0">n</asp:listitem> <asp:listitem value="1">y</asp:listitem> </asp:dropdownlist> </asp:tablecell> </asp:tablerow> <asp:tablerow> <asp:tablecell> <asp:label id="lblprefix" runat="server" text="prefix:"></asp:label> </asp:tablecell> <asp:tablecell> <asp:textbox id="txtprefix" runat="server"></asp:textbox> </asp:tablecell> </asp:tablerow> <asp:tablerow> <asp:tablecell> <asp:label id="lblsuffix" runat="server" text="suffix:"></asp:label> </asp:tablecell> <asp:tablecell> <asp:textbox id="txtsuffix" runat="server"></asp:textbox> </asp:tablecell> </asp:tablerow> <asp:tablerow> <asp:tablecell> <asp:label id="lblprrequired" runat="server" text="periodic review:"></asp:label> </asp:tablecell> <asp:tablecell> <asp:dropdownlist id="ddlprrequired" runat="server" autopostback="true"> <asp:listitem value="0">n</asp:listitem> <asp:listitem value="1">y</asp:listitem> </asp:dropdownlist> </asp:tablecell> </asp:tablerow> <asp:tablerow> <asp:tablecell> <asp:label id="lblprinterval" runat="server" text="review interval (months):"></asp:label> </asp:tablecell> <asp:tablecell> <asp:textbox id="txtprinterval" runat="server"></asp:textbox> </asp:tablecell> </asp:tablerow> <asp:tablerow> <asp:tablecell> <asp:label id="lblsend_lms" runat="server" text="send lms:"></asp:label> </asp:tablecell> <asp:tablecell> <asp:dropdownlist id="ddlsend_lms" runat="server" autopostback="true"> <asp:listitem value="0">n</asp:listitem> <asp:listitem value="1">y</asp:listitem> </asp:dropdownlist> </asp:tablecell> </asp:tablerow> <asp:tablerow> <asp:tablecell> <asp:label id="lbllmscatalog" runat="server" text="lms catalog:"></asp:label> </asp:tablecell> <asp:tablecell> <asp:textbox id="txtcatalog" runat="server"></asp:textbox> </asp:tablecell> </asp:tablerow> <asp:tablerow> <asp:tablecell> <asp:label id="lblactive" runat="server" text="active:"></asp:label> </asp:tablecell> <asp:tablecell> <asp:dropdownlist id="ddlactive" runat="server"> <asp:listitem value="0">n</asp:listitem> <asp:listitem value="1">y</asp:listitem> </asp:dropdownlist> </asp:tablecell> </asp:tablerow> </asp:table> <asp:button id="btnsubmit" runat="server" text="submit" cssclass="submitbutton" /> </div> *<div id="basic-modal-content" > <h3>basic modal dialog</h3> <p>for demo, simplemodal using "hidden" data content. can populate modal dialog ajax response, standard html or dom element(s).</p> <p>examples:</p> <p><code>$('#basicmodalcontent').modal(); // jquery object - demo</code></p> <p><code>$.modal(document.getelementbyid('basicmodalcontent')); // dom</code></p> <p><code>$.modal('<p><b>html</b> elements</p>'); // html</code></p> <p><code>$('<div></div>').load('page.html').modal(); // ajax</code></p> <p><a href='http://www.ericmmartin.com/projects/simplemodal/'>more details...</a></p> </div>* <asp:label id="lbladdstatus" runat="server" text="set @ runtime" visible="false"></asp:label> <asp:requiredfieldvalidator id="rfvdoctype" runat="server" display="none" errormessage="type/name required!" controltovalidate="txttype"></asp:requiredfieldvalidator> <asp:validatorcalloutextender id="rfvdoctype_validatorcalloutextender" runat="server" enabled="true" targetcontrolid="rfvdoctype"> </asp:validatorcalloutextender> <asp:requiredfieldvalidator id="rfvdescription" runat="server" display="none" errormessage="description required!" controltovalidate="txtdescription"></asp:requiredfieldvalidator> <asp:validatorcalloutextender id="rfvdescription_validatorcalloutextender" runat="server" enabled="true" targetcontrolid="rfvdescription"> </asp:validatorcalloutextender> <asp:requiredfieldvalidator id="rfvprefix" runat="server" display="none" errormessage="prefix required when using auto number!" controltovalidate="txtprefix"></asp:requiredfieldvalidator> <asp:validatorcalloutextender id="rfvprefix_validatorcalloutextender" runat="server" enabled="true" targetcontrolid="rfvprefix"> </asp:validatorcalloutextender> </asp:content>` here code behind:
protected sub btnsubmit_click(sender object, e system.eventargs) handles btnsubmit.click dim objdoctype new doctype objdoctype .active = ddlactive.selectedvalue .autonumber = ddlautonumber.selectedvalue .created = datetime.now() .description = txtdescription.text .lastmodified = datetime.now() .lms_catalog = txtcatalog.text .nextdocnumber = 1 'set default of 1 .periodicreview = ddlprrequired.selectedvalue if ddlprrequired.selectedvalue = "y" .periodicreview_interval = cint(txtprinterval.text) else .periodicreview_interval = 0 end if .prefix = txtprefix.text .send_to_lms = ddlsend_lms.selectedvalue .suffix = txtsuffix.text .type = txttype.text end if docdb.createnewdocumenttype(objdoctype) lbladdstatus .text = "document type added successfully" .visible = true end scriptmanager.registerstartupscript(me.page, gettype(string), "showsuccess", "$('#basicmodalcontent').modal();", true) else lbladdstatus .text = "there error creating document type" .visible = true end end if end sub and css:
#basic-modal-content {display:none;} /* overlay */ #simplemodal-overlay {background-color:#000; cursor:wait;} /* container */ #simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;} #simplemodal-container .simplemodal-data {padding:8px;} #simplemodal-container code {background:#141414; border-left:3px solid #65b43d; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;} #simplemodal-container {color:#ddd;} #simplemodal-container a.modalcloseimg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;} #simplemodal-container h3 {color:#84b8d9;} i have tried possibly can narrow down without luck. ideas can try?
well figured out. stupid. in using tutorials kept listing #basicmodalcontent selector when div had id of basic-modal-content.
so in registerstartupscript line:
scriptmanager.registerstartupscript(me.page, gettype(string), "showsuccess", "$('#basicmodalcontent').modal();", true) the #basicmodalcontent not correct. issue selector has match div id. changing line to:
scriptmanager.registerstartupscript(me.page, gettype(string), "showsuccess", "$('#basic-modal-content').modal();", true) makes work. i'm not sure how it's working in demo because copied piece-by-piece , doesn't work on side. i've had have missed something.
oh - it's working. letting me put here , looking @ it!
Comments
Post a Comment