CODEWITHSUNDEEP
javascriptjqueryasp.netupdatepaneldatalist
t3 nano
t3 nano

Reputation: 71

UpdatePanel Breaks JQuery Script on datalist

I have an update panel and inside the update panel I have a datalist.

On the datalist I have multi div

<div class="prod_details_tab">
    <div class="prod_details_sell">
        <a href="Handler.ashx?action=addToBasket&productID=4" onclick="return false;">
            <img src="images/cart.gif" alt='<%#String.Format("{0}", Eval("k_name1")) %>'
                width="16" height="16" id='<%#String.Format("{0}", Eval("k_name1")) %>'
                class="left_IB" />
        </a>
    </div>
</div>

I write a jQuery code that when a person click on cart.gif pic run the jQuery 

 $(".prod_details_sell a img").click(function () {
        //some code is here
});

On the first page of datalist jquery run good and all thing is ok.

But on the second page when I click on cart.gif pic jQuery does not run.

Please help me to fix it

Thanks

Edit: I write next button and prev button click in here

   protected void cmdNext_Click(object sender, EventArgs e)
   {
        // Set viewstate variable to the previous page
        CurrentPage += 1;

        PagedDataSource pagedDS = new PagedDataSource();
        pagedDS.DataSource = ((DataTable)Cache["DataTable-cach"]).DefaultView;// cacheItem.DefaultView;
        pagedDS.AllowPaging = true;
        pagedDS.PageSize = 6;
        pagedDS.CurrentPageIndex = CurrentPage;

        dlPaging.DataSource = pagedDS;
        dlPaging.DataBind();

        // Disable Prev or Next buttons if necessary
        cmdPrev.Enabled = !pagedDS.IsFirstPage;
        cmdNext.Enabled = !pagedDS.IsLastPage;
    }

   protected void cmdPrev_Click(object sender, EventArgs e)
    {
        // Set viewstate variable to the previous page
        CurrentPage -= 1;
            PagedDataSource pagedDS = new PagedDataSource();
            pagedDS.DataSource = ((DataTable)Cache["DataTable-cach"]).DefaultView;// cacheItem.DefaultView;
            pagedDS.AllowPaging = true;
            pagedDS.PageSize = 6;
            pagedDS.CurrentPageIndex = CurrentPage;
            dlPaging.DataSource = pagedDS;
            dlPaging.DataBind();
            lblCurrentPage.Text = pagedDS.PageCount.ToString() + " صفحه    " + (CurrentPage + 1).ToString() + " از ";
            // Disable Prev or Next buttons if necessary
            cmdPrev.Enabled = !pagedDS.IsFirstPage;
            cmdNext.Enabled = !pagedDS.IsLastPage;

    }
     public int CurrentPage
    {
        get
        {
            // look for current page in ViewState
            object o = this.ViewState["_CurrentPage"];
            if (o == null)
                return 0; // default page index of 0
            else
                return (int)o;
        }

        set
        {
            this.ViewState["_CurrentPage"] = value;
        }
    }

Upvotes: 1

Views: 180

Answers (3)

t3 nano
t3 nano

Reputation: 71

thank you friends
I edit html file 

 <ContentTemplate>
              <script type="text/javascript">
                  Sys.Application.add_load(BindEvents);
               </script>
               .
               .
               .

and edit my jquery file

function BindEvents() {
//my jquery codes
}

Be Happy

Upvotes: 1

Moshtaf
Moshtaf

Reputation: 4903

Just replace this:

$(".prod_details_sell a img").click(function () {
        //some code is here
});


with this:

Sys.Application.add_load(initJavaScripts);
function initJavaScripts() {
    $(".prod_details_sell a img").click(function () {
        //some code is here
    });
}

Upvotes: 0

pmtamal
pmtamal

Reputation: 2207

When you go to next page of data list the onclick event gets unbinded as update panel refresh the content inside div. So onclick event must be added again to get the expected result. Try the following in cs page below your datalist bind code.

ScriptManager.RegisterClientScriptBlock(id of update panel, 
                    typeof(UpdatePanel), "string", 
                    "$(function () {$('.prod_details_sell a img').click(function () {
                   //some code is here
                   });)", true);

Upvotes: 0

Related Questions