Help with JQuery, Please

Question

4.00/5 (1 vote)

See more:

I have a simple web page with one Button object. The background color of the
button is Red, set with CSS. When the button is clicked it should change to blue. The button does change to blue but immediatlly turns back to red. Can anyone explain to me why this is happening and how to fix it?
Sample code is include.

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyWebForm.aspx.cs" Inherits="JQueryTest.MyWebForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" src="Script/jquery-1.7.2.min.js"></script>
    <link href="css/Test.css" rel="Stylesheet" type="text/css" />
    <script type="text/javascript" src="Script/MyScript.js"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div id='banner'>
        <asp:Button CssClass="buttonRed" ID="Button1" OnClientClick='ChangeToBlue();' runat="server"
            Text="Button" />
    </div>
    </form>
</body>
</html>

// MyScript.js
//
java script function

JavaScript

function ChangeToBlue() {
   var button1 = $('#Button1').addClass('buttonBlue');
}


// Test.css
//
body
{
}


 .buttonRed {
 background-color: red;
 color: white;
 border: 3px red solid;
 }

 .buttonBlue {
 background-color: blue;
 color: white;
 border: 3px red solid;
 }

Posted 1-Aug-12 9:11am

Member 7969139

Updated 1-Aug-12 9:13am

Kenneth Haugland

v2

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 · Accepted Answer · 2012-08-01T09:15:00

Solution 1

Probably it happens due to postback. So, the problem is not in your jQuery per se. Each time you click, the color is changed, but then the control is reloaded from the server part. That should explain why the color comes back: because so is described in its original style. To resolve it, the change in the color should be included in the post and taken into account by the code on server part.

—SA

Posted 1-Aug-12 9:15am

Sergey Alexandrovich Kryukov

Updated 2-Aug-12 6:49am

v4

Comments

Member 7969139 1-Aug-12 15:24pm

The whole purpose of this test was to be able to change the color using JQuery so it seems to me that I need to prevent the postback. Does that make sense? If so how do I do that in javascript.

Sergey Alexandrovich Kryukov 1-Aug-12 17:29pm

I don't know why do you need it. In you don't need to do it at all, simply remove all related "asp" tags, replace it with HTML "input" or "button" element with id="Button1" (look, fix your naming; not "Button1", etc., give it all normal semantic names, without any numerals, ever).
This quite simple.
--SA

Member 7969139 1-Aug-12 15:34pm

Okay I got it. I changed the button cssclass in the click event and
the color changed properly

Sergey Alexandrovich Kryukov 1-Aug-12 17:30pm

I suggested even simpler thing. Your problem was not related to ASP.NET, so you would not need "asp" tags. Anyway, I hope the problem solved.
Good luck,
--SA