Note that there are some explanatory texts on larger screens.

plurals
  1. POtrying to reference javascript from asp.net
    primarykey
    data
    text
    <p>I have a web page in ASP.net and C# (I'm using visual studio 2010 if that helps at all), and I wanted to get a modal popup box going after a button click event. I can't use AJAX because I'm not allowed to install the extension on the server...so I have tried out the javascript method provided by <a href="http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/" rel="nofollow">yensdesign</a>.</p> <p>The problem I have is that the button I've set up just doesn't do anything...I am guessing that since I am calling this from an asp.net web page instead of standard html I need to do something extra but a day of googling, asking everyone I know, and trial and error have not yielded any results so here I am...</p> <p>I have the following in my 'scripts' folder called popupAdminTasks.js:</p> <pre><code>/***************************/ //@Author: Adrian "yEnS" Mato Gondelle //@website: www.yensdesign.com //@email: yensamg@gmail.com //@license: Feel free to use it, but keep this credits please! /***************************/ //SETTING UP OUR POPUP //0 means disabled; 1 means enabled; var popupStatus = 0; //loading popup with jQuery magic! function loadPopup() { //loads popup only if it is disabled if (popupStatus == 0) { $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; } } //disabling popup with jQuery magic! function disablePopup() { //disables popup only if it is enabled if (popupStatus == 1) { $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; } } //centering popup function centerPopup() { //request data for centering var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $("#popupContact").height(); var popupWidth = $("#popupContact").width(); //centering $("#popupContact").css({ "position": "absolute", "top": windowHeight / 2 - popupHeight / 2, "left": windowWidth / 2 - popupWidth / 2 }); //only need force for IE6 $("#backgroundPopup").css({ "height": windowHeight }); } //CONTROLLING EVENTS IN jQuery $(document).ready(function () { //LOADING POPUP //Click the button event! $("#btnViewTimesheet").click(function () { //centering with css centerPopup(); //load popup loadPopup(); }); //CLOSING POPUP //Click the x event! $("#popupBtnClose").click(function () { disablePopup(); }); //Click out event! $("#backgroundPopupAdminTasks").click(function () { disablePopup(); }); //Press Escape event! $(document).keypress(function (e) { if (e.keyCode == 27 &amp;&amp; popupStatus == 1) { disablePopup(); } }); }); </code></pre> <p>So that's great. I then have my css file which has all the normal stuff in it, with the extras at the bottom as follows:</p> <pre><code>/* POPUP BOX ----------------------------------------------------------*/ #backgroundPopup { display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background:#000000; border:1px solid #cecece; z-index:1; } #popupAdminTasks { display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:384px; width:408px; background:#FFFFFF; border:2px solid #cecece; z-index:2; padding:12px; font-size:13px; } #popupAdminTasks h1 { text-align:left; color:#6FA5FD; font-size:22px; font-weight:700; border-bottom:1px dotted #D3D3D3; padding-bottom:2px; margin-bottom:20px; } #popupBtnClose { font-size:14px; line-height:14px; right:6px; top:4px; position:absolute; color:#6fa5fd; font-weight:700; display:block; } #btnViewTimesheet { margin:100px; } </code></pre> <p>Wonderful. So now we come to the actual aspx file...well this is a bit more tricky as obviously I'm not just doing a test project so instead of having a head section, I have a headcontent section etc...anyway, here's the relevant bits and bobs:</p> <pre><code>&lt;asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"&gt; &lt;link rel="stylesheet" href="../Styles/AdminPage.css" type="text/css" media="screen" /&gt; &lt;script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="../Scripts/popupAdminTasks.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/asp:Content&gt; &lt;asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"&gt; &lt;div id="btnViewTimesheet"&gt; &lt;input type="submit" value="View/Edit Timesheet" /&gt; &lt;/div&gt; &lt;div id="popupAdminTasks" runat="server"&gt; &lt;a id="popupBtnClose"&gt;X&lt;/a&gt; &lt;h1&gt;What would you like to do?&lt;/h1&gt; &lt;p id="popupAdminTasksBody"&gt; &lt;asp:ImageButton ID="imgBtnCalendar" runat="server" Height="70px" Width="65px" ImageUrl="~/Images/calendar.png" AlternateText="View/Edit Timesheet" /&gt; &lt;/p&gt; &lt;/div&gt; &lt;div id="backgroundPopupAdminTasks"&gt; &lt;/div&gt; &lt;/asp:Content&gt; </code></pre> <p>So...This all builds without error, but I press the button <code>btnViewTimesheet</code> and nothing happens...any ideas?? The thing I keep thinking is that I don't have an on-click event in the C# code and I would have thought I would need this, and point to the js code from that event but everything I have read and people I've spoken to have told me that no, I shouldn't need this, because the javascript should do it.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload