jQuery addClass() with Bootstrap

Question

I'm using Bootstrap to develop my php platform.

When i try to use this javascript snippet

if(result == "OK"){
    // If the result is OK applies some effects
    $("#signup" + item).removeClass("error");
    $("#signup" + item).addClass("success");
} else {
    // Applies some effects and shows the error
    $("#signup" + item).removeClass("success");
    $("#signup" + item).addClass("error");
}

with this html code

<input class="xlarge" id="signupUsername" name="signupUsername" size="30" type="text">

Nothing happens. The "error" or "success" effects are not applied.

Are you sure the code is executed? Did you include the right CSS? Did you define the "error" and "success" CSS classes? Does "item" contain the right value? ... — Philippe Leybaert
– Philippe Leybaert, Commented Dec 22, 2011 at 11:09
The css is correctly included because the page is correctly styled. Error and success classes are defined in the Bootstrap .less files that are correctly compiled by less. — siannone
– siannone, Commented Dec 22, 2011 at 11:11

socha23 · Accepted Answer · 2011-12-23 01:53:51Z

4

error and success classes shouldn't be applied to <input>, but to containing <div> with class clearfix:

<div class="clearfix error">
    <input id="errorInput" class="xlarge" type="text" size="30" name="errorInput"/>
</div>

<div class="clearfix success">
    <input id="successInput" class="xlarge" type="text" size="30" name="successInput"/>
</div>

Try changing your code to add/remove classes to parent div.clearfix and see if it works then.

HTML:

<div class="clearfix">
    <input class="xlarge" id="signupUsername" name="signupUsername" size="30" type="text">
</div>

JS:

var div = $("#signup" + item).parent("div.clearfix");
if(result == "OK"){
    div.removeClass("error");
    div.addClass("success");
} else {
    div.removeClass("success");
    div.addClass("error");
}

edited Dec 23, 2011 at 1:53

answered Dec 22, 2011 at 11:14

socha23

10.3k3 gold badges31 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery addClass() with Bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related