0

I have a javascript by which I am dynamically changing css class of a list.

My List :

 <div class="BreadCrumbDiv">
            <ul id="breadcrumbs-two">
                <li><a href="#" onclick="changeClass(a1);" class="current1" id="a1">Step1
                    and user</a></li>
                <li><a href="#" onclick="changeClass('a1');" id="a2">Step2</a></li>
                <li><a href="#" onclick="changeClass('a1');" id="a3">Step3</a></li>
                <li><a href="#" onclick="changeClass('a1');" id="a4">Step4</a></li>

            </ul>
        </div>

Java script :

   function changeClass(elementid) {
        var lis = document.getElementById(elementid);
        lis.className = "current";
        lis.className = "current1";
    }

Now from my button I am calling the javascript like this

 <asp:button id="btnNextODCDetails" runat="server" text="Next" cssclass="Button" onclientclick="changeClass('a2');"/>

But changed css style is not working once the post back is happening. I dont want to use update panel. Please someone help me.

Thanks in Advance Gulrej

5
  • Can u post the css as well
    – Sasidharan
    Sep 26, 2013 at 11:09
  • First change onclick="changeClass(a1);" to onclick="changeClass('a1');"
    – Voonic
    Sep 26, 2013 at 11:10
  • are you doing server side processing too? If you are your page will post back and refresh
    – Pete
    Sep 26, 2013 at 11:18
  • Yes Pate, on click of the button I have some serverside code also.
    – Gulrej
    Sep 26, 2013 at 11:20
  • Hi Shado, I have changed that but still not working.
    – Gulrej
    Sep 26, 2013 at 11:21

4 Answers 4

1

When you postback data, the control tree will be created again from the aspx mark up. So whatever the changes you make to the html elements at the Client Side would be lost.

1
  • Correct, but is there any way to retain the css.
    – Gulrej
    Sep 26, 2013 at 11:19
0

You will lose all your client side code(JS) changes when the page is completely posted and rendered again.

If you still need, then persist the information somehow using Hidden field or something and check the same whenever the page is loaded and set it in client side.

You can do this client side code using

jQuery:

 $(document).ready(function(){ // your checking});

JavaScript: DOMContentLoaded

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>

IE:

object.addEventListener("DOMContentLoaded", handler, useCapture) //IE model
1
  • Hi Murli, Can you please send me some example link. actually I didnt understand.
    – Gulrej
    Sep 27, 2013 at 4:03
0

I got the answer. I have changed my script little bit. And I called the script on click of my button event.

  string script = " $(document).ready(function () { $('#breadcrumbs-two li #a2').addClass('current');  $('#breadcrumbs-two li #a2').removeClass('current');  $('#breadcrumbs-two li #a2').addClass('current1');  });";
        ClientScript.RegisterClientScriptBlock(this.GetType(), "function", script, true);

Gulrej

0

Use this code on client side just after Page_Load: It worked for me actually.

ScriptManager.RegisterStartupScript(Me.Page, GetType(Page), String.Format("StartupScript"), "<script type=""text/javascript""> GetAttributeName(); </script>", False)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.