Adding CSS in AJAX function

Question

I have an AJAX function to hide and show fields of a form in HTML. I want to add some CSS in the AJAX function.

<script>
    $(function() {

        $('#advo_other').hide();
        $('#advocate').change(function() {

            var val = $(this).val();

            $('#advo_other').hide();

            switch (val) {
                case 'Other':
                    $('#advocate') // want to add css there......
                    $('#advo_other').show();
                    break; 
            }
        });
    });
</script>

and the style is below:

<style type="text/css">
    .fade {
        color: #CCC;
        border-color:#CCC;
    }
</style>

The first step should be to have a look at the jQuery documentation: api.jquery.com/category/css. — Felix Kling
– Felix Kling, Commented Sep 8, 2012 at 11:37
OMG o_O I don't know why.. but it has nothing to do with ajax.. O_o — Harsh Baid
– Harsh Baid, Commented Sep 8, 2012 at 11:43

David Barker · Accepted Answer · 2012-09-08 11:33:55Z

2

You can add CSS with Jquery to any element like this:

$('#advocate').css('color', '#005DAA');

Alternatively you can add a class with styling rules to the element

$('#advocate').addClass('fade');

answered Sep 8, 2012 at 11:33

David Barker

14.6k3 gold badges51 silver badges77 bronze badges

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

Comments

Littm · Accepted Answer · 2012-09-08 12:23:45Z

1

Use the addClass functionnality.

So you will have:

<script>
    $(function() {

        $('#advo_other').hide();
        $('#advocate').change(function() {

            var val = $(this).val();

            $('#advo_other').hide();

            switch (val) {
                case 'Other':
                    $('#advocate').addClass("fade");
                    $('#advo_other').show();
                    break; 
            }
        });
    });
</script>

edited Sep 8, 2012 at 12:23

answered Sep 8, 2012 at 11:35

Littm

4,9454 gold badges33 silver badges40 bronze badges

Comments

Alfred · Accepted Answer · 2012-09-08 11:37:57Z

Try;

$(function() {
  $('#advo_other').hide();
  $('#advocate').change(function() {
    var val = $(this).val();
    $('#advo_other').hide();
    switch (val){
      case 'Other':
      $('#advocate').addClass("fade");
      $('#advo_other').show();
      break;
    }
  });
});

$('#advocate') is used to select an element with id advocate. You may create classed in your CSS to style elements. Use addClass("class_name") to add some class styling to your element and .removeClass("class_name") to remove class styling.

Collectives™ on Stack Overflow

Adding CSS in AJAX function

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related