trying to reference javascript from asp.net

Question

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 yensdesign.

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...

I have the following in my 'scripts' folder called popupAdminTasks.js:

/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: [email protected]
//@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 && popupStatus == 1) {
            disablePopup();
        }
    });

});

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:

/* 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;  
}

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:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <link rel="stylesheet" href="../Styles/AdminPage.css" type="text/css" media="screen" />
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>  
    <script src="../Scripts/popupAdminTasks.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="btnViewTimesheet">
        <input type="submit" value="View/Edit Timesheet" />
    </div>
    <div id="popupAdminTasks" runat="server">
        <a id="popupBtnClose">X</a>
        <h1>What would you like to do?</h1>
        <p id="popupAdminTasksBody">
            <asp:ImageButton ID="imgBtnCalendar" runat="server" Height="70px" Width="65px"
                ImageUrl="~/Images/calendar.png" AlternateText="View/Edit Timesheet" />
        </p>
    </div>
    <div id="backgroundPopupAdminTasks">
    </div>
</asp:Content>

So...This all builds without error, but I press the button btnViewTimesheet 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.

I haven't studied your code, but I'm thinking it might have to do with runat=server tags and NamingContainers renaming the id's of controls. — Dave Zych
– Dave Zych, Commented Oct 10, 2012 at 14:48
.NET wants to own all of the element IDs. If you are hooking up event handlers in JS, use CSS class names instead. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Oct 10, 2012 at 14:49
can you show your popup markup? Most, it not all of the selectors in your jquery don't seem to exist in your current markup sample. Where's the markup for #backgroundPopup and #popupContact?? These are the elements being shown when you click the button. — KP.
– KP., Commented Oct 10, 2012 at 14:52

EdSF · Accepted Answer · 2012-10-10 14:58:04Z

3

I can't use AJAX because I'm not allowed to install the extension on the server...

AJAX isn't installed on any server. Its just Javascript. I haven't used ASP.Net AJAX extensions in years, so I forget if even that needs to be installed at all or just bin-deployed. Regardless, taking advantage of "Ajax" isn't dependent on any extension/library - they make things easier, but they are not "required".

#

Your id is for the <div /> not the input
Your <input /> is a submit, while you can still use that, try a button instead to make things easier

answered Oct 10, 2012 at 14:58

EdSF

12.5k6 gold badges45 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Elatesummer Over a year ago

I have also tried a button - tried the submit as another approach. Neither of them worked...but thank you for the suggestion

Elatesummer Over a year ago

marked this as the answer...if the extensions aren't required, I will just use AJAX...it isn't really the solution to my question but this answer enabled me to get the end result - thanks, EdSF

Biff MaGriff · Accepted Answer · 2012-10-12 14:39:14Z

1

The problem is that you have the wrong element ID's in your jQuery selector.

You should change backgroundPopup to popupAdminTasks and popupContact to something else.

http://jsfiddle.net/2mSkM/

answered Oct 12, 2012 at 14:39

Biff MaGriff

8,2619 gold badges65 silver badges100 bronze badges

1 Comment

Elatesummer Over a year ago

Thank you - I see you also added this as a comment but I'm glad you proposed this as an answer so I could upvote and accept. I tried this and it did indeed resolve my issue - also thank you for bearing with me throughout this!

03Usr · Accepted Answer · 2012-10-10 15:22:26Z

1

What happens if you do the following?

<asp:button runat="server" text="Click Me" OnClientClick="javascript:loadPopup()" id="myButton"></asp:button>

answered Oct 10, 2012 at 15:22

03Usr

3,4456 gold badges43 silver badges64 bronze badges

1 Comment

Elatesummer Over a year ago

I tried this and still nothing happens...then I tried changing the OnClientClick to: OnClientClick="javascript:loadPopup(); return false;" as per the comments on the main post but still doesn't work...no action following the click

Collectives™ on Stack Overflow

trying to reference javascript from asp.net

3 Answers 3

#

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

#

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related