Как использовать несколько экземпляров usercontrol (с jquery) на одной странице - PullRequest
0 голосов
/ 19 мая 2010

Я работал над пользовательским контролем с таймером jquery. Сначала у меня был jquery в пользовательском контроле. Но когда я добавляю 2 из этих элементов управления на свою страницу, второй пользовательский элемент управления не очень хорошо показывает свои данные.

Теперь я поместил jquery на главную страницу, а usercontrol использует только идентификаторы jquery.

Вот мой пользовательский контроль:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs"
    Inherits="WebUserControl" %>
<style type="text/css">
    #mainpanel
    {
        width: 145px;
        height: 123px;
    }
</style>
<div id="mainpanel">
    <div>
        test</div>
    <div id="shortly" style="background-color: #FFFFFF">
    </div>
    <button id="resetButton">
        Reset
    </button>
</div>

Главная:

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

    <%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %>
    <!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>hoi</title>
        <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
        <link href="Css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery.countdown.js"></script>
        <script type="text/javascript">


            $(document).ready(function () {

            $(function() {
            $("#mainpanel");
        });

                shortly = new Date();
                shortly.setSeconds(shortly.getSeconds() + 5.5);
                $('#shortly').countdown({ until: shortly,
                    onExpiry: liftOff, layout: '{sn}', 
                });
                $('#resetButton').click(function () {
                 $('#mainpanel').effect("highlight", {}, 700 );
                 $('#shortly').effect("highlight", {}, 700 );
                    shortly = new Date();
                    shortly.setSeconds(shortly.getSeconds() + 5.5);
                    $('#shortly').countdown('change', { until: shortly });

                });


                function liftOff() {
                    // refresh the page  
                    window.location = window.location;
                }


            });

        </script>
    </head>
    <body>
        <uc1:WebUserControl ID="WebUserControl1" runat="server" />
<uc1:WebUserControl ID="WebUserControl2" runat="server" />

    </body>
    </html>

Но, тем не менее, мои пользовательские контроллеры ведут себя странно, теперь мой вопрос: «Как я могу заставить ОДНО ЖЕ пользовательские контроллеры работать правильно на ОДНОЙ странице?»

Оба из них используют один и тот же код jquery, но кнопки и т. Д. Должны работать только в самом пользовательском контроле.

Ответы [ 2 ]

4 голосов
/ 21 мая 2010

Как предполагает Дэвид, поскольку вы повторяете пользовательские элементы управления и явно устанавливаете их id, вы получите несколько элементов управления с одинаковым id на странице. Я полагаю, что $("#someid") вернет первый элемент на странице и не обязательно тот, который вы действительно хотели.

Дэвид предлагает добавить классы CSS к элементам в вашем пользовательском элементе управления (это не имеет ничего общего с jQuery - хотя написанный вами jQuery будет ссылаться на них).

Например

<%@ Control Language="C#"  %>
<div class="mainpanel">
    <div>
        test
    </div>
    <div class="shortly">
        ??
    </div>
    <button class="resetButton">
        Reset
    </button>
</div>

[PS. обратите внимание, что вы, вероятно, должны удалить свой CSS из своего пользовательского элемента управления, поскольку повторение каждый раз, когда элемент управления появляется на странице, является плохой практикой, например. включите это либо в свою главную страницу, либо в отдельный файл CSS]

<style type="text/css">
    #mainpanel
    {
        width: 145px;
        height: 123px;
    }
    #shortly
    {
        background-color: #FFFFFF
    }
</style>

Ваш сценарий может быть чем-то вроде

$(function () { 
    // function that does something exciting?
    var liftOff = function() { 
        // .... 
    };

    // Get a date that is some (short) time in the future
    var getDeadline = function() {
        var shortly = new Date();
        shortly.setSeconds(shortly.getSeconds() + 5.5);
        return shortly;
    };

    // Attach click handler to all our buttons
    $("div.mainpanel button.resetButton").click(function(event){

        // I am assuming that you will not be nesting these controls?
        var $mainpanel = $(this).parents("div.mainpanel")   // this will find the mainpanel div that contains the pressed button
                .effect("highlight", {}, 700 );

        $("div.shortly", $mainpanel) // this will find any div with the class = shortly inside mainpanel
                .countdown('change', { until: getDeadline() });    
    });

    // Start all countdowns going on page load
    $('#shortly').countdown({ 
        until: getDeadline(),
        onExpiry: liftOff, 
        layout: '{sn}'
    });
});
1 голос
/ 19 мая 2010

Ваш пользовательский элемент управления использует id = "" для элементов.Идентификаторы должны быть уникальными в пределах одной HTML-страницы.Если вам нужно прикрепить стили css или что-то к запросу через jquery, вам нужно использовать классы вместо идентификаторов, чтобы второй элемент управления не нарушал соглашение, что идентификаторы должны быть уникальными.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...