CODEWITHSUNDEEP
phpjqueryhtmlcss
gurudev265
gurudev265

Reputation: 3

Changing class type using Jquery

I am using this code to fetch the data from startup.php.The response of the PHP file is JSON with 3 fields. One of the field in JSON response is a status message. How to change the value of div class .content based on the status message. I need to do that to change the color of the text displayed in the content DIV based on the status message. .content is the class name of the DIV

var loadinggif = '../img/loading.gif';
$(document).ready(function(){  
    // set up the click event
        $('body').on('click','.btnbg', function() {
                var toLoad = '../vr/startup.php';
                $('.content').empty();
                $('.content').slideUp('slow', loadContent);
                $('#load').remove();
                $('#waiting').append('<div id="load"><img src="' + loadinggif + '" alt="Loading" /></div>');
                $('#load').fadeIn('normal');
                function loadContent() {

                    var userName = $('#userName').val();                    
                    var remote_addr = $('#remote_addr').val(); 
                    var forwarded_for = $('#forwarded_for').val();
                    var url = $('#url').val();
                    //$('#forwarded_for1').val()'';
  var _post = {'userName': userName, 'ipAddr1':remote_addr,'ipAddr2':forwarded_for, 'url':url};

   $('.content').load(toLoad, _post , function(response, status, xhr) 


if (status == 'error') {
                        var msg = "Sorry but there was an error: ";
                        $(".content").html(msg + xhr.status + " " + xhr.statusText);
                    }            
            }).slideDown('slow', hideLoader());
                }
                function hideLoader() {
                        $('#load').fadeOut('normal');
                }
                return false;
        });

Upvotes: 1

Views: 88

Answers (2)

Rafael Umbelino
Rafael Umbelino

Reputation: 810

Use removeClass() and addClass().

Here is an example:

$('.content').removeClass("styleOne").addClass("styleTwo");

Edit

if(response == "Worked Fine"){ 
    $('.content').removeClass("default").addClass("styleGreen");
}else{
     $('.content').removeClass("default").addClass("styleRed");
}

Upvotes: 1

Nicolas
Nicolas

Reputation: 8670

You can use the css() function in Jquery :

$(".content").css({'background-color': 'red'});

Edit

I red your question wrong. To change class you can use $('.content').removeClass('classOne').addClass('classTwo');
If you have a class like has-error, you can use toggleClass() to toggle it, it will remove it if it's present or add it if not :
$('.content').toggleClass('has-error');

for your if elseprobleme, simply do : 

if(condition) {
   $('.content').removeClass('class2 class3').addClass('class1');
} else if(condition2) {
   $('.content').removeClass('class1 class3').addClass('class2');
} else {
   $('.content').removeClass('class1 class2').addClass('class3');
}

Upvotes: 1

Related Questions