Span or Label Text Changed Color by Key Word?

I thought this would work, but to no avail.

       <span id="lblStatus">...</span>


 <script type="text/javascript">

        $(document).ready(function ()
        {
            $("span:contains('import')").css('color', 'red');
            $("span:contains('Uploading')").css('color', 'orange');
            $("span:contains('finished')").css('color', 'green');

 - or this-

            $("#lblStatus").change(function ()
            {
                $(this).css({ 'color': 'red' });  
            });




 });
</script>
WorknHardrAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
What's not working. Your code will set the colour of the various spans based on the text content when the page first loads. Obviously it won't work with what you've posted because the content of the span is '...' which doesn't match any of your jQuery.

Not really sure where the change() function comes into play?
0
WorknHardrAuthor Commented:
I'm currently doing the .css in the button click and the JQuery .fileupload like so. I just thought their might be a better way by using the .change event.

[Current Working Code]
<asp:Button ID="btnImport" runat="server" Text="Import File"
OnClientClick="ImportWait();" OnClick="btnImport_Click" />

function ImportWait()
{
$("#lblStatus").text('Please wait for import to finish ...').css('color', 'red');
}

$(function () {
            $('#fileupload').fileupload(
                {
                    ...

                    add: function (e, data) {                      
                   }
                        data.context = $("#lblStatus").text('Uploading ...').css('color', 'orange');
                        data.submit();
                    },

                    done: function (e, data)
                    {
                        data.context.text('Upload finished ...').css('color', 'green');
                    }
                })
            });

[Proposed Code NOT Working...]
$(document).ready(function ()
{
       $("#lblStatus").change(function ()
        {
                $("span:contains('import')").css('color', 'red');
                $("span:contains('Uploading')").css('color', 'orange');
                $("span:contains('finished')").css('color', 'green');
        });
});
</script>
0
Chris StanyonWebDevCommented:
Changing the code in text won't trigger the change() event. You would need to call the change event explicitly:

$("#lblStatus").text('Uploading ...').trigger('change');

Open in new window

0
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

WorknHardrAuthor Commented:
Sorry, I don't get your last post, where does color happen?
0
Chris StanyonWebDevCommented:
You've bound a change() event to the #lblStatus which changes the colour, but when you change the text in code it won't automatically fire the change() event, so you need to manually trigger the change() event
0
WorknHardrAuthor Commented:
I mean usage, like?

$("#lblStatus").text('Uploading ...').trigger('change').css('color', 'red');
0
Chris StanyonWebDevCommented:
No. You have a change event that changes the colour:

$("#lblStatus").change(function ()  {
   $("span:contains('import')").css('color', 'red');
   $("span:contains('Uploading')").css('color', 'orange');
   $("span:contains('finished')").css('color', 'green');
});

Open in new window

This function won't be fired automatically when you change the text using code, so you need to trigger the change event yourself after you've changed the text:

$("#lblStatus").text('Uploading ...').trigger('change');

Open in new window

0
WorknHardrAuthor Commented:
I'm confused if my code example is corrrect or not. Please post a complete working code example using the .trigger and color change. I've posted all my code.
0
Chris StanyonWebDevCommented:
Not really sure I can explain this any clearer.

A change event will only fire automatically when a user changes a form input (dropdown, textbox etc.). You are expecting it to fire when you change the text of a label using code. It just won't fire, so you need to manually tell the change event to fire after you change the text by calling the trigger() function, like this:

$("#lblStatus").text('Uploading ...').trigger('change');

This code will change your text, and then fire the change event manually, which in turn will run your code to set the colours.

The alternative is to keep your code as it was originally and not use a change() event - just change the colour when you change the text:

$("#lblStatus").text('Uploading ...').css('color', 'orange');

Just out of interest, why do you think you need to bind a change() event?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
WorknHardrAuthor Commented:
Thx
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.