Link Button in Updatepanel causes page refresh

Question

I am working on web app. I want a link button in repeater control. This repeater control is in update panel. Now clicking on linkbutton causes refresh.

I found solution for that is need to add ClientIDMODE="AutoID". It works fine. But my other javascript stops working. So is there any alternative so that both works fine?

Code for jquery which is not working because of ClientIDMODE="AutoID".

function setPage() {
            var page = document.location.pathname.match(/[^\/]+$/)[0];
            var pageName = page.split('.')[0];
            if (pageName != 'Default') {
                if ($('#' + pageName).hasClass('main')) {
                    $('#' + pageName).addClass('active');
                    var content = '<li><div class="sidebar-toggler hidden-phone"></div></li><li><a href="/Default.aspx">Dashboard<i class="icon-"></i></a></li>' + $('#' + pageName).children('ul').html();
                    $('#leftNavigation').append(content);
                    var currentActive = $('.nav ul li ul li.active');
                    if (currentActive != null) {
                        currentActive.removeClass('active');
                        currentActive.closest('ul').closest('li').removeClass('active');
                    }
                }
                else {
                    if ($('#' + pageName) != null) {
                        if ($('#' + pageName).closest('ul').html() != null) {

                            $('#' + pageName).closest('ul').closest('li').addClass('active');
                            $('#' + pageName).addClass('active');
                            var listItems = '<li><div class="sidebar-toggler hidden-phone"></div></li><li><a href="/Default.aspx">Dashboard<i class="icon-"></i></a></li>' + $('#' + pageName).closest('ul').html();
                            $('#leftNavigation').append(listItems);
                            var currentActive = $('.nav ul li ul li.active');
                            if (currentActive != null) {
                                currentActive.removeClass('active');
                                currentActive.closest('ul').closest('li').removeClass('active');
                            }
                        }

                        else {
                            var directory = document.location.pathname.substring(1, document.location.pathname.lastIndexOf('/'));
                            var dir_name = directory.toLowerCase() + '_main'
                            if (directory != null || '/') {
                                $('#' + dir_name).addClass('active');
                                var content = '<li><div class="sidebar-toggler hidden-phone"></div></li><li><a href="/Default.aspx">Dashboard<i class="icon-"></i></a></li>' + $('#' + dir_name).children('ul').html();
                                $('#leftNavigation').append(content);
                                var currentActive = $('.nav ul li ul li.active');
                                if (currentActive != null) {
                                    currentActive.removeClass('active');
                                    currentActive.closest('ul').closest('li').removeClass('active');
                                }
                            }
                        }
                    }
                }
            }
            else {
                var listItems = '<li><div class="sidebar-toggler hidden-phone"></div></li><li class="active"><a href="/Default.aspx">Dashboard<i class="icon-"></i></a></li>';
                $('#leftNavigation').append(listItems);
            }
        }

Answer 1

Actually I tried a different scenario to solve this issue. I used classname instead of id to identify element.

So use . instead of # in jquery and add classname same as id in html code.

So now Jquery code is:

function setPage() {
            var page = document.location.pathname.match(/[^\/]+$/)[0];
            var pageName = page.split('.')[0];
            if (pageName != 'Default') {
                if ($("."+pageName).hasClass('main')) {
                    $('.' + pageName).addClass('active');
                    var content = '<li><div class="sidebar-toggler hidden-phone"></div></li><li><a href="/Default.aspx">Dashboard<i class="icon-"></i></a></li>' + $('.' + pageName).children('ul').html();
                    $('#leftNavigation').append(content);
                    var currentActive = $('.nav ul li ul li.active');
                    if (currentActive != null) {
                        currentActive.removeClass('active');
                        currentActive.closest('ul').closest('li').removeClass('active');
                    }
                }
                else {
                    if ($('.' + pageName) != null) {
                        if ($('.' + pageName).closest('ul').html() != null) {

                            $('.' + pageName).closest('ul').closest('li').addClass('active');
                            $('.' + pageName).addClass('active');
                            var listItems = '<li><div class="sidebar-toggler hidden-phone"></div></li><li><a href="/Default.aspx">Dashboard<i class="icon-"></i></a></li>' + $('.' + pageName).closest('ul').html();
                            $('#leftNavigation').append(listItems);
                            var currentActive = $('.nav ul li ul li.active');
                            if (currentActive != null) {
                                currentActive.removeClass('active');
                                currentActive.closest('ul').closest('li').removeClass('active');
                            }
                        }

                        else {
                            var directory = document.location.pathname.substring(1, document.location.pathname.lastIndexOf('/'));
                            var dir_name = directory.toLowerCase() + '_main'
                            if (directory != null || '/') {
                                $('.' + dir_name).addClass('active');
                                var content = '<li><div class="sidebar-toggler hidden-phone"></div></li><li><a href="/Default.aspx">Dashboard<i class="icon-"></i></a></li>' + $('.' + dir_name).children('ul').html();
                                $('#leftNavigation').append(content);
                                var currentActive = $('.nav ul li ul li.active');
                                if (currentActive != null) {
                                    currentActive.removeClass('active');
                                    currentActive.closest('ul').closest('li').removeClass('active');
                                }
                            }
                        }
                    }
                }
            }
            else {
                var listItems = '<li><div class="sidebar-toggler hidden-phone"></div></li><li class="active"><a href="/Default.aspx">Dashboard<i class="icon-"></i></a></li>';
                $('#leftNavigation').append(listItems);
            }
        }

Answer 2

Whenever you reference the item that you need that has clientid mode set to auto you need to reference the ClientID of the control and not the ID. You can do this like so:

$("#<%= mycontrol.ClientID %>").dosomething();

This writes out the unique id that is generated for client-side scripting of any control with runat="server" on it.