Question

I am facing very strange and difficult problem. I am developing a web app, where I have created few widgets. If I click on Icon the widget editor will appear in a modular pop-up and user can enter his data and the that data will be presented on dashboard as label. I have "edit" button above the label which is placed on the dashboard, now I want to add a delete button, suppose the user will add the widget on the dashboard and later he finds he doesn’t require that dashboard so he clicks on delete button the widget should be deleted, if user feels he wants that widget again after deleting, when he clicks on the icon of the particular widget which he deleted previously, the widget should appear again. I tried to do that but once I click on the delete button I am able to delete the widget but When I click on the icon of the widget I am not able to get in back.

Please help me to solve this issue.

Answer 1

Just taking a guess at what you’re looking to do, here’s an example of adding a div that you can close again:

Setup:

var WIDGET_MARKUP =
    "<div class='widget'>I'm the widget. " +
    "<span class='close'>Close</span>" +
    "</div>";

// Opens the widget, returns true; if the widget is already
// open, doesn't open a a second and returns false.
function openWidget(onClose) {
  var widget;

  // If there's already one open, don't do anything
  if ($("div.widget").length > 0) {
    // Already open, don't open another
    return false;
  }

  // There isn't, add one
  widget = $(WIDGET_MARKUP);
  widget.appendTo(document.body);
  widget.delegate('span.close', 'click', function() {
    // Remove the widget
    widget.remove();

    // Call the callback if any
    if (onClose) {
      try {
        onClose();
      }
      catch (e) {
      }
    }
  });

  // true = opened the widget
  return true;
}

Use:

$('#btnAddWidget').click(function() {
  var button = this;

  if (openWidget(handleClose)) {
    // Opened the widget, disable our button
    button.disabled = true;
  }

  function handleClose() {
    // Widget was closd, re-enable the button
    button.disabled = false;
  }
});

Live example

Obviously the disabling of the button is only relevant if you want that; if you don’t, just use it like this:

Setup:

var WIDGET_MARKUP =
    "<div class='widget'>I'm the widget. " +
    "<span class='close'>Close</span>" +
    "</div>";

// Opens the widget, returns true; if the widget is already
// open, doesn't open a a second and returns false.
function openWidget(onClose) {
  var widget;

  widget = $(WIDGET_MARKUP);
  widget.appendTo(document.body);
  widget.delegate('span.close', 'click', function() {
    // Remove the widget
    widget.remove();

    // Call the callback if any
    if (onClose) {
      try {
        onClose();
      }
      catch (e) {
      }
    }
  });
}

Use:

$('#btnAddWidget').click(function() {
    openWidget();
});

Live example