ansaurus

Question

How to use multiple instances of a usercontrol (with jquery) on the same page

Answer 1

+1 A:

Your user control is using id="" on elements. Id's must be unique within a single html page. If you need to attach css styles or something to query via jquery, you need to use classes instead of id's so that the second control doesn't break the convention that id's must be unique.

David 2010-05-19 16:31:10

The ID is unique of the control itself, forgot to paste the whole mainpage code. Editted now and you see both of the usercontrols get their own ID.

Julian 2010-05-19 16:36:06

No, I mean the markup inside the usercontrol itself is setting id's on elements like <div id="shortly"></div>, you need to use classes like <div class="shortly"></div> then use jquery class selectors instead of id selectors

David 2010-05-19 16:38:04

I'm going to look into this, thanks! If somebody knows other ways to do the same thing, please still comment. David, you maybe got good example?

Julian 2010-05-19 16:42:00

Answers still needed people... cant figure the jquery classes out. And how to add a script to them.

Julian 2010-05-20 21:36:38

Answer 2

+4 A:

As David suggests, seeing as you are repeating the user controls and you are explicitly setting their id, you will end up with several controls that share the same id on the page. I imagine that $("#someid") will return the first element in the page and not necessarily the one you really wanted.

David is suggesting adding CSS classes to the elements in your user control (this has nothing to do with jQuery - although the jQuery you write will refer to them).

For example

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

[PS. note that you should probably remove your CSS from your user control as repeating each time the control appears on the page is bad practise e.g. include this either in your main page or a separate CSS file]

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

Your script can then be something like

$(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}'
    });
});

Chris F 2010-05-20 22:17:06

+1 Good job on providing a detailed example.

David 2010-05-21 14:55:53

Thanks man! Really appriciate this!

Julian 2010-05-28 10:55:50

ansaurus

tags:

views:

answers:

How to use multiple instances of a usercontrol (with jquery) on the same page

related questions