Link to home
Start Free TrialLog in
Avatar of Stanton_Roux
Stanton_RouxFlag for South Africa

asked on

JQUERY not working after partial postback

HI There

I have a user control that has some jquery code inside it.
After I do a partial postback the JQUERY code no longer works.

Is there a way to re-enable that code so that it continues to work for that usercontrol only after I do a partial postback.

I dont want to refresh the entire page again.I only want the code within the user control to continue to work.

See code below.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="showcase.ascx.cs" Inherits="Controls_showcase" %>
<script type="text/javascript">

    $(document).ready(function () {



        var step = 2;
        var current = 0;
        var maximum = $('.showcaseSlider ul li').size();
        var visible = 2;
        var speed = 2000;
        var liSize = 210;
        var carousel_height = 600;


        //TODO WORK OUT SIZE OF UL 
        // var ulSize = liSize * maximum;

        var ulSize = 1000;
        var divSize = liSize * visible;

        


        $('.showcaseSlider ul').css("width", ulSize + "px").css("left", -(current * liSize)).css("position", "absolute");

        $('.showcaseSlider').css("visibility", "visible").css("overflow", "hidden").css("position", "relative");

        $('#btnNext').click(function () {

            
            if (current + step < 0 || current + step > maximum - visible) { return; }
            else {
                current = current + step;
                $('.showcaseSlider ul').animate({ left: -((liSize * current)) }, speed, null);
            }
            return false;
        });

        $('#btnPrev').click(function () {
            if (current - step < 0 || current - step > maximum - visible) { return; }
            else {
                current = current - step;
                $('.showcaseSlider ul').animate({ left: -((liSize * current)) }, speed, null);
            }
            return false;
        });




    });

</script>
<div class="showCaseWrapper">
    <div class="showcaseHeading">
        <h2>
            <asp:Label ID="lblShowcase" runat="server">Showcase</asp:Label></h2>
    </div>
    <div class="clear">
    </div>
    <div class="showcasescrollbuttons">
        <div id="btnPrev">
            PREV</div>
        <div id="btnNext">
            NEXT</div>
    </div>
    <div class="clear">
    </div>
    <div class="showcaseContent">
        <div class="showcaseSlider">
            <asp:Literal ID="litContent" runat="server"></asp:Literal></div>
    </div>
    <div class="showcaseNav tabs">
        <ul class="nav tabs">
            <li id="liShowcase" class="selected" runat="server">
                <asp:LinkButton ID="hpShowCase" class="lbNav" runat="server" OnClick="hpShowCase_Click"><span></span><strong>Showcase</strong></asp:LinkButton>
            </li>
            <li id="liDesign" class="" runat="server">
                <asp:LinkButton ID="hpDesign" class="lbNav" runat="server" OnClick="hpDesign_Click"><span></span><strong>Design</strong></asp:LinkButton>
            </li>
            <li id="liOutdoor" class="" runat="server">
                <asp:LinkButton ID="hpOutdoor" class="lbNav" runat="server" OnClick="hpOutdoor_Click"><span></span><strong>Event</strong></asp:LinkButton>
            </li>
            <li id="liPrint" class="" runat="server">
                <asp:LinkButton ID="hpPrint" class="lbNav" runat="server" OnClick="hpPrint_Click"><span></span><strong>Print</strong></asp:LinkButton>
            </li>
            <li id="liRadio" class="" runat="server">
                <asp:LinkButton ID="hpRadio" class="lbNav" runat="server" OnClick="hpRadio_Click"><span></span><strong>Radio</strong></asp:LinkButton>
            </li>
            <li id="liTV" class="" runat="server">
                <asp:LinkButton ID="hpTV" class="lbNav" runat="server" OnClick="hpTV_Click"><span></span><strong>TV</strong></asp:LinkButton>
            </li>
            <li id="liDigital" class="" runat="server">
                <asp:LinkButton ID="hpDigital" class="lbNav" runat="server" OnClick="hpDigital_Click"><span></span><strong>Digital</strong></asp:LinkButton>
            </li>
        </ul>
    </div>
</div>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Deja Anbu
Deja Anbu
Flag of Oman image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial