Kirtesh
Kirtesh

Reputation: 117

Object in next result set of Jscroll doenot bind to javascript

I have implemented jquery jscroll on first page load all data is showing perfectly with the perfect respective animation but on 2nd data set animations are not working. What I am doing is i have made a partial page which loads all time the data set comes and set all javascript in main page.

This is my MainPage code

<script src="~/Content/JavaScript/Caption.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        //for each description div...
        $('div.description').each(function () {
            //...set the opacity to 0...
            $(this).css('opacity', 0);
            //..set width same as the image...
            $(this).css('width', $(this).siblings('img').width());
            //...get the parent (the wrapper) and set it's width same as the image width... '
            $(this).parent().css('width', $(this).siblings('img').width());
            //...set the display to block
            $(this).css('display', 'block');
        });

        $('div.wrapper').hover(function () {
            //when mouse hover over the wrapper div
            //get it's children elements with class descriptio
            //and show it using fadeTo
            $(this).children('.description').stop().fadeTo(500, 0.7);
        }, function () {
            //when mouse out of the wrapper div
            //use fadeTo to hide the div
            $(this).children('.description').stop().fadeTo(500, 0);
        });

    });

</script>
<style>
    div.wrapper {
        position: relative; /* important(so we can absolutely position the description div */
    }

    div.description {
        position: absolute; /* absolute position (so we can position it where we want)*/
        bottom: 0px; /* position will be on bottom */
        left: 0px;
        width: 100%;
        display: none; /* hide it */
        /* styling bellow */
        background-color: black;
        font-family: 'tahoma';
        font-size: 15px;
        color: white;
    }

    div.description_content {
        padding: 10px;
    }
</style>



<div class="row">

        <div class="scroll">
            @Html.Partial("_Products")
        </div>

    </div> <!-- .main-content -->

<script src="~/Content/JavaScript/jquery.js"></script>
<script src="~/Content/JavaScript/jqueryui/jquery-ui-1.10.4.custom.min.js"></script>
<script src="~/Content/JavaScript/jquery.jscroll.js"></script>
<script type="text/javascript">
    var i = 0;

    //Get Value From Query String
    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    function Filter() {
        var goto = updateTextArea();
        var addpricerangefilter = UpdateQueryString("price_range", document.getElementById('PriceRangeFrom').value +'-'+ document.getElementById('PriceRangeTo').value, goto)
        window.location = addpricerangefilter
    }
    $(function () {
        $('.scroll').jscroll({
            debug: true,
            autoTrigger: false
        });
    });

</script>

Partial Page

@Code
    Dim i As Integer = 1
    Dim CurrencyCODE As String = "INR"
    Dim CurrencyRATE As String = 1
    Try
        CurrencyCODE = Request.Cookies("currency_code").Value.ToString
        CurrencyRATE = Val(Request.Cookies("currency_rate").Value.ToString)
    Catch ex As Exception
    End Try
End Code
    @For Each AllProducts In ViewBag.lstProducts
        @<div class="col-sm-4">
            <div class="single-item">
                @If AllProducts.ItemTag <> "" Then
                    @<div class="ribbon-wrapper"><div style="background-color:@AllProducts.ItemTagColor;" class="ribbon">@AllProducts.ItemTag</div></div>
                End If
                <div class="single-item-header wrapper">
                    @Code
                        Dim ImagePath = AllProducts.SKUID &"00.jpg"
                    End Code
                    <a href="/SingleProduct/[email protected]"><img src="/Content/Images/ProductImage/@ImagePath" class="image270320" alt="@AllProducts.ItemShortDesc"></a>
                    <div class="description">
                        <div class="description_content">
                                @AllProducts.ItemShortDesc
                            <a class="add-to-cart pull-right auto-width-right" href="#" onclick="AddToCart('@AllProducts.SKUID','1')"><i class="fa fa-shopping-cart shopcart"></i></a>
                            <a class="add-to-cart pull-right auto-width-right" href="#" onclick="AddToWishList('@AllProducts.SKUID')"><i class="fa fa-heart favorlist"></i></a>
                        </div>
                    </div>
                </div>
                <div class="single-item-body">
                    <p class="single-item-title">
                        @AllProducts.SKUID
                    </p>
                    <p class="single-item-price">
                        @If AllProducts.ItemDiscountedPrice <> "0" And AllProducts.ItemDiscountedPrice <> "" Then
                            @<span class="flash-del">@CurrencyCODE @Math.Round(CurrencyRATE * AllProducts.ItemOrignalPrice, 2, MidpointRounding.AwayFromZero)</span>
                            @<span class="flash-sale">@CurrencyCODE @Math.Round(CurrencyRATE * AllProducts.ItemDiscountedPrice, 2, MidpointRounding.AwayFromZero)</span>
                        Else
                            @<span>@CurrencyCODE @Math.Round(CurrencyRATE * AllProducts.ItemOrignalPrice, 2, MidpointRounding.AwayFromZero)</span>
                        End If

                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        If i = 3 Then
            @<div class="space40">&nbsp;</div>
            i=0
        End If
        i = i + 1
    Next
@If ViewBag.lstProducts.Count > 0 Then
@<div style="position:absolute;bottom:0px;height :5px;margin-top :5px;padding-left:400px">
     <a href="/Product/[email protected]("category_id")&[email protected]("order_by")&[email protected]("group_name")&[email protected]&[email protected]("detail_id")&[email protected]("price_range")&[email protected]("sku")">Load More Products...</a>
</div>
Else
@<div style="position:absolute;bottom:0px;height :5px;margin-top :5px;padding-left:400px">
    Oops we are at the end of product list!!!
</div>
End If

What I try is copying all scripts in partial page but it won't work

Upvotes: 0

Views: 172

Answers (0)

Related Questions