jQuery: Bind an element to show / hide when its contents are changed

Question

Let's say I have messages on my page:

<div class="message one">Here is some text.</div>
...
<div class="message two">Here is other text for something else.</div>

I have a lot of events that may either put some text in the message, or clear it out.

Right now I have this setup where every message sending function call is also checking if the message is visible or not and changing the state as needed. That means there's a lot of duplication of this basic logic.

I would like to setup a binding that is triggered when any message div is changed, so that if it is set to empty it slides up, and if it is set from empty to having text, then it slides down.

Is that possible, and if so, how?

score 3 · Accepted Answer · edited May 23 '17 at 10:08

3

Per this link, this would be called a "mutation event" which is not supported in JQuery: Detect element content changes with jQuery

I'd recommend simply creating a helper function to consolidate the logic into one place. Eg:

function updateElement(selector, newText)
{
    $(selector).text(newText);
    if (newText == '') $(selector.slideUp());
    else $(selector.slideDown());
}

edited May 23 '17 at 10:08

Community

1
1

answered Apr 15 '12 at 19:41

McGarnagle

101,349
31
229
260

I see, I think I can adapt this to cut out a lot of the duplication. Thanks for the link and the suggestion! – Andrew Apr 15 '12 at 20:15

score 1 · Answer 2 · answered Apr 15 '12 at 19:42

Here is something off the top of my head and isn't exactly what you're looking for, but rather is a function to call when updating the div text, it would require you to change the div classes from seperate classes: 'message one' to a single class 'message_one'

<script>
    $(function(){

        function show_message(class, message)
        {
            var $div = $('div[class='+class+']');

            $div.slideUp(250, function(){

                if (message.length > 0)
                {
                    $div.html(message);
                    $div.slideDown(250);
                }
            });
        }

        // example of calling this

        $('button').click(function(){
            // hide the div
            show_message('message_one', '');
        });

        $('someotherbutton').click(function(){
            // this will slideup and then slidedown
            show_message('message_two', "<p>Here's my message.</p>");
        });

    });
</script>

score 0 · Answer 3 · answered Apr 15 '12 at 19:46

0

try this:

$("div").live("change", function() {

   if ( $(this).text().length == 0) {

       $(this).slideUp();

   }  else { $(this).slideDown();}

});

answered Apr 15 '12 at 19:46

Ram

143,282
16
168
197

I was curious to see if this would work, but I can't get it to work. Are you sure about this approach? – Marc Apr 15 '12 at 19:59
unfortunately, i haven't tried this event handling for this specific functionality, instead of .live(), .bind() the change event, this should work. – Ram Apr 15 '12 at 20:10
Actually that's what I tried at first but it didn't work. According to the API: "This event is limited to elements, boxes and <select> elements." http://api.jquery.com/change/</select> – Andrew Apr 15 '12 at 20:12
Yeah, I put together a little experiment here: http://jsfiddle.net/EdtL7/ No dice. – Marc Apr 15 '12 at 20:14
yes, change is limited to form elements, try to bind this events `DOMNodeInserted` and `DOMNodeRemoved`. – Ram Apr 15 '12 at 20:20

jQuery: Bind an element to show / hide when its contents are changed

3 Answers3