How to keep css chnages made using jquery even after same button click event whuich is servwer side

Question

3.00/5 (1 vote)

See more:

Hi ,

I have one asp button which fires server event of clik ,

what i am douing is , using jquery on clicking of this button i am chnaging the class , but then when the server event gets fired , all the css class i have chnaged on the click event of this button using jquery , gets vanish .

XML

<script type="text/javascript">
    $(document).ready(function () {
        debugger;
        $("input[id*='Button1']").removeClass('graph').addClass('graphActive');

        $("input[id*='Button1']").click(function () {
            alert("Hii");
            $("input[id*='Button1']").removeClass('graph').addClass('graphActive');
            $("input[id*='Button2']").removeClass('graph1Active').addClass('graph1');
        });

        $("input[id*='Button2']").click(function () {
            alert("Hii");
            $("input[id*='Button2']").removeClass('graph1').addClass('graph1Active');
            $("input[id*='Button1']").removeClass('graphActive').addClass('graph');
        });
    });
</script>

Please suggest

Posted 18-May-15 18:22pm

Torakami

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2015-05-18T19:07:00

I guess "same button click event" is irrelevant. Most likely, you are talking about the following situation: you are changing the styles in some button click or other event, but that action is followed by some postback (on the same click or some other event; this is not quite clear from your question and does not matter). It does not matter what happens to the server, the only relevant thing is that you might reload your page which sets up the same styles you had before.

Isn't that obvious from your code? You demonstrated that the styles are set on the document ready event, and that the styles are fixed. So, not matter what you did before, you will get the same set of styles. Unfortunately, you only show the styles set on this event and tell us nothing about what you do on your click event. This is weird, but does not change the idea. Let me assume you change the styles compared to what you do on document ready; for example, you remove those classes and add a different set of classes. It does not matter what exactly you do.

There are different approaches to your problem. One could be ASP.NET-specific. You can use Ajax and avoid reloading the page, only refresh it partially. But I don't know your server-side activity, so I cannot give you much detail. I only can tell you that if you can refresh the page partially, and it may not touch the styles you modified on the click. Now, let's suppose that this is not what you do; so you have to refresh the part of page using these styles. But then you can pass the styles to the server side in your Ajax request. In this case, you should use this data passed via Ajax to generate some JavaScript code in HTTP response, but not constant as in your code sample, but with the code blocks using ASP.NET code-behind syntax (such as Razor). The purpose of it is to make the classes you use depending on the style data you passed before the postback.

Another solution is more universal and is based on the client side only. Use JavaScript handling the document ready event, but also not constant. Instead, read the CSS class information from Web storage, more exacly, using sessionStorage (not localStorage) object:
http://en.wikipedia.org/wiki/Web_storage[^],
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage[^].

You can find explanation of this technique and the sample code in my article JavaScript Calculator[^].

This solution also uses JSON native object to serialize the data stored in the Web storage; in your case, this will be the style data (names of the classes or whatever else you need). You serialize the style data and store it in the session storage. After page refresh, your document ready handler will take this data, deserialize it and apply to your style. Please see:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON[^].

—SA