User Control can't execute js methodes in my js file

Question

0.00/5 (No votes)

See more:

, +

Hello my friends.
I have a page here that include a js file and it works fine, i used it for make an animated div for its size dynamically. but the problem is when i make a user control it doesn't work, means my jquery codes becomes unusable and cant animate related Div.
Thanks for your attention. this is code of my page:

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ArticelCtrl.aspx.cs" Inherits="ArticelCtrl" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="App_Themes/Theme1/91-05-16/CSS/StyleSheet.css" rel="stylesheet" type="text/css" />
    <script src="App_Themes/Theme1/91-05-16/Script/jquery-1.6.js" type="text/javascript"></script>
<script type="text/javascript" >
    $(document).ready(function () {
  
        var h = ($("#AbstractText").innerHeight() + 50) + "px";
        var p = $("#AbstractText").innerHeight();
        p > 400 ? p = p + 600 : p = p + 400;
        
        $("#OpenCloseButton").toggle(function () {
            $("#OpenCloseButton").attr("src", "App_Themes/Theme1/91-05-16/Images/Icons/Close.png");
            $("#OpenCloseButton").attr("title", "Close");
            $("#DotDiv").animate({ opacity: "0" }, 100);
            $("#AnimatedArticleDiv").animate({ height: h }, p);
        }, function () {
            $("#OpenCloseButton").attr("src", "App_Themes/Theme1/91-05-16/Images/Icons/Open.png");
            $("#OpenCloseButton").attr("title", "More");
            $("#AnimatedArticleDiv").animate({ height: "66px" }, p);
            $("#DotDiv").show();
            $("#DotDiv").animate({ opacity: "1" }, 1000);
        });
        $("#OpenCloseButton").mouseenter(function () {
            $("#OpenCloseButton").animate({ width: "22px", height: "22px" }, 100);
        });
        $("#OpenCloseButton").mouseleave(function () {
            $("#OpenCloseButton").animate({ width: "20px", height: "20px" }, 150);
        });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <div id="AnimatedArticleDiv" class="AnimatedArticleDiv">
            <div style="margin-removed-6px;">
                <asp:Label ID="AbstractHeader" runat="server" Text="Article title" style="direction:rtl;"></asp:Label>
            </div>
            <div style="padding:10px 10px 10px 10px;">
                <asp:Label ID="AbstractText" runat="server" style="direction:rtl;"
                    Text="Some text are here"></asp:Label>
            </div>
            <asp:ImageButton ID="OpenCloseButton" runat="server" 
                style="position:absolute; left:13px; bottom:2px;z-index:900;" 
                ImageUrl="~/App_Themes/Theme1/91-05-16/Images/Icons/Open.png" ToolTip="More" />
                <div id="DotDiv" style="removed:absolute; removed8px;removed0;background-color: #DFFFEA;color: #003300;padding: 0 2px 5px 30px;">. . . .</div>
            </div>
        </div>
    </form>
</body>
</html>

how can i make it a user control without any problem?

Posted 3-Sep-12 22:50pm

Abolfazl Beigi

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sandeep Mewara · Answer 1 · 2012-09-03T22:55:00

Solution 1

Ok. So, if I understand correctly, your Javascript/jQuery code does not work when you convert the existing working code into a user control, right?

If so, it might be because of bad reference. JavaScript files might not be at the location you define in your usercontrol.
2 options:
1. Correct the relative URL to point at correct location
2. Specify an absolute path.

Option 1 is what is suggested and generally preferred. For it, I would suggest you to use this Tip and resolve the path correctly before setting the source of the file: Resolving Paths in a Multi-Folder WebSite[^]

Posted 3-Sep-12 22:55pm

Sandeep Mewara

Comments

Abolfazl Beigi 4-Sep-12 7:14am

Thanks for your answer.
i moved all items in the root of my project but the result was same. i'm boring to think about this.i'm working in this part all day long and my brain is so heavy.

Abolfazl Beigi 4-Sep-12 8:06am

I tested every thing else like css and images, they are included without any problem, js file is like them included but dose not work in user control.

Sandeep Mewara 4-Sep-12 8:08am

Difficult to comment then. Try Javascript DEBUGGING and see how the execution flow goes.

Abolfazl Beigi 4-Sep-12 8:09am

I'm sure the problem is not for js path, i added my control to the page that have some code exactly like user control code but my simple code works fine and user control no.

Sandeep Mewara 4-Sep-12 8:13am

Whatever it is, your debugging should help. Further, look for any logs if you see anything.

Abolfazl Beigi 4-Sep-12 8:14am

OK i'll test it.

User Control can't execute js methodes in my js file

1 solution

Solution 1

Add your solution here

Preview 0

User Control can't execute js methodes in my js file

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us