Question

I am working on a widget/gadget based website, where the user can have the same the same widget/gadget on the same page at the same time. For example, the following could be a widget/gadget:

<div class="widget widget_1">
    <div class="header widget_header_1">
        <input type="text" class="textbox_1"/><input type="button" class="button_1"/>
    </div>
    <div class="content widget_content_1"></div>
    <div class="footer widget_footer_1"></div>
</div>

I can then have many of these on screen at once, which is why I am using classes instead of id’s.

on document.ready, I run a function which generates default values for widget_content_1. The problem is that when another of these identical widget is added by the user, the default function resets all widget_content_1 widgets to the default value. How do I stop this from happening and how do I only apply default values to the newly added widget without affecting the others?

The code currently looks like this:

// on document ready:
function_default();

...

function function_default() {
    $('.widget_content_1').empty().append("default content here");
}

Anyone know how to resolve this issue?

Answer 1

Using a position specific selector is a solution, but also error prone if the newest widget is not always in a specific position.

I would simply add a flag, new to the newly created widget, in whatever place it is created:

<div class="widget widget_1 new">
    ...
</div>

And then use this selector in jQuery:

function function_default() {
    $('.widget.new').empty().append("default content here").removeClass('new');
}

If n number of new widgets have been created, this will also add the default content to all of them.