Using JavaScript with asp.net pages

Question

I have probably very simple question.

I have copied that code to my asp.net web application project but i couln't minimize the box.

Is there anything special i should do to use javascript with asp.net projects?

I tried the code tree times.

Put script code in to head block
Put script code to just before div starts
Put script code to just before form tag closes

Javascript code

$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }
    $("#box").slideToggle();
});

html code

<div id="widnow">
    <div id="title_bar"> Basic information
        <div id="button"><img src="http://commons.wikimedia.org/wiki/File:Minus_in_circle.svg"></div>
    </div>
    <div id="box">
    </div>
</div>

css code

#widnow{
    width:400px;
    border:solid 1px;
}

#title_bar{
    background: #FEFEFE;
    height: 25px;
    width: 100%;
}
#button{
    border:solid 1px;
    width: 25px;
    height: 23px;
    float:right;
    cursor:pointer;
}
#box{
    height: 250px;
    background: #DFDFDF;
}

Works fine in the fiddle. Do you have the jQuery referenced in your project? — Darren
– Darren, Commented Sep 23, 2013 at 8:41
Did you include a path to jquery library? put <script src="code.jquery.com/jquery-1.10.2.min.js"></script> before your script. — Hossain Muctadir
– Hossain Muctadir, Commented Sep 23, 2013 at 8:42

Hossain Muctadir · Accepted Answer · 2013-09-23 08:52:00Z

2

I am assuming you are missing reference to jquery. Replacing your script part with this will solve the problem if that is the case.

<script src="code.jquery.com/jquery-1.10.2.min.js"></script>
// or use any version of jquery library..in your fiddle you used 1.7.2..Try the same instead..
<script>
$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }
    $("#box").slideToggle();
});
</script>

edited Sep 23, 2013 at 8:52

answered Sep 23, 2013 at 8:46

Hossain Muctadir

3,6361 gold badge21 silver badges33 bronze badges

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

Comments

iJade · Accepted Answer · 2013-09-23 08:59:54Z

1

Most probably you are missing the jquery file ....try this

<html>
<head runat="server">
    <title></title>
    <style>
        #widnow
        {
            width: 400px;
            border: solid 1px;
        }

        #title_bar
        {
            background: #FEFEFE;
            height: 25px;
            width: 100%;
        }
        #button
        {
            border: solid 1px;
            width: 25px;
            height: 23px;
            float: right;
            cursor: pointer;
        }
        #box
        {
            height: 250px;
            background: #DFDFDF;
        }
    </style>
    <script src="Scripts/jquery-1.10.1.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            $("#button").click(function () {
                if ($(this).html() == "-") {
                    $(this).html("+");
                }
                else {
                    $(this).html("-");
                }
                $("#box").slideToggle();
            });
        });
    </script>
</head>
<body>
    <div id="widnow">
        <div id="title_bar">
            Basic information
            <div id="button">
                <img src="http://commons.wikimedia.org/wiki/File:Minus_in_circle.svg"></div>
        </div>
        <div id="box">
        </div>
    </div>
</body>
</html>

edited Sep 23, 2013 at 8:59

answered Sep 23, 2013 at 8:48

iJade

23.9k58 gold badges163 silver badges250 bronze badges

1 Comment

Sefa Over a year ago

I found that problem was adding jquery files correctly. Thanks!

Collectives™ on Stack Overflow

Using JavaScript with asp.net pages

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related