ajax/jquery/javascript

Question

I have a function that toggles a button: now I would like to display the text next to the button in 2 different colors based on the response.

This is my code:

function toggleMustHave(){
    $.ajax({
        type: "POST",
        dataType: "json",
        url: '{$ajaxUrl}&act=toggleMustHave',
        data: 'storeId={$storeId}',
        success: function(data){
            $('#mustHave').html('<span id="mustHave" >'+data['mustHaveButtonText']+ '&nbsp;&nbsp;-->&nbsp;&nbsp;'+'</span>');
            $('#mustHaveButton').text(data['mustHaveButtonText']);
        }
    });
}

After executing success you'll have two elements with id of 'mustHave'; the span you create, and its parent. This may cause errors later on. — socha23
– socha23, Commented Dec 6, 2011 at 13:41

socha23 · Accepted Answer · 2011-12-06 13:38:33Z

1

Change CSS class of your #mustHaveText in your success handler.

success: function(data){
    $('#mustHave').html('<span id="mustHaveText" >'+data['mustHaveButtonText']+      '&nbsp;&nbsp;-->&nbsp;&nbsp;'+'</span>');
    $('#mustHaveButton').text(data['mustHaveButtonText']);

    var text = $('#mustHaveText');

    text.removeClass('color1');
    text.removeClass('color2');

    if ( conditionOnReturnedDataHere()) {
        text.addClass('color1');
    } else {
        text.addClass('color2');
    }
}

answered Dec 6, 2011 at 13:38

socha23

10.3k3 gold badges30 silver badges25 bronze badges

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

5 Comments

nathan Over a year ago

I just want to add 2 colors based on my condition I dont want to remove anything so should I just leave out this part ( $('mustHaveText').removeClass('color1'); $('mustHaveText').removeClass('color2'); )

socha23 Over a year ago

If your AJAX call happens only once, then yes, that code is unnecessary. If it happens more then once on the page, then you need to remove previously added color before adding current one.

nathan Over a year ago

I need to change text next to a toggle button to a different color based on the toggle value how would I do that

socha23 Over a year ago

leave the removeClass lines as they are, then, as toggle state can be changed multiple times.

nathan Over a year ago

what is the syntax for conditionOnReturnedDataHere() in jquery as when I place my condition in the page breaks,Thank you,Ive moved on to other tasks already but this one is bugging me,really appreciate your help,Im evaluating the value 1 or 0, 1 represents orange and 0 represent green.

score 1 · Accepted Answer · 2011-12-06 14:11:24Z

You can do it with two step:

1) The first is to add to you css two new classes, one for every different response you will receive

2) The second is to modify you "success" function to append the next you need after the button:

function toggleMustHave(){
    $.ajax({
        type: "POST",
        dataType: "json",
        url: '{$ajaxUrl}&act=toggleMustHave',
        data: 'storeId={$storeId}',
        success: function(data) {
            $('#mustHave').html('<span id="mustHave" >'+data['mustHaveButtonText']+ '&nbsp;&nbsp;-->&nbsp;&nbsp;'+'</span>');
            $('#mustHaveButton').text(data['mustHaveButtonText']);

            var yourClass // write here your condition

            $('<p class="'+ yourCLass +'">Your text response</p>').insertAfter('#mustHaveButton');
        }
    });
}

Remember to modify you "yourClass" value, depending on your result (you can use simply an if clause)

would you edit the code for me, please mind me asking as Im just a beginner and I need to have this done today function toggleMustHave(){ $.ajax({ type: "POST", dataType: "json", url: '{$ajaxUrl}&act=toggleMustHave', data: 'storeId={$storeId}', success: function(data){ $('#mustHave').html('<span id="mustHave" >'+data['mustHaveButtonText']+ ' --> '+'</span>'); $('#mustHaveButton').text(data['mustHaveButtonText']); } }); }
how would I declare yourClass, what is the syntax?, please specify

Collectives™ on Stack Overflow

ajax/jquery/javascript

2 Answers 2

5 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Related