JQUERY UI Dialog Box Success Function Is Not Working...Executing But Not Working

Question

I am trying to convert the ugly dialog confirmation box to the JQUERY UI.....The confirmation box works.....when I convert it over to the dialogue....it's working....in that I am getting a dialog box...but the success function itself is no longer working....It's executing...it shows my console log message...But it's not actually executing and I'm a bit lost as to why not...maybe a $this issue?

This is working....The original confirm( Are you Sure you want to )....

row.find('a.' + delCssSelector).click(function() {

  var result = confirm("Are you sure you want to Delete?");
  if (result) {
    var row = $(this).parents('.dynamic-form');
    var itemIdInput = row.find('input:hidden[id $= "-id"]');
    var itemId = itemIdInput.val();
    var deleteInput = `<input type="hidden" name="research_line_items_to_delete" value="${itemId}">`; // Update here....
    if ($(deleteInput).val()) {
      $('#research_line_items_to_delete').append(deleteInput); // Update here....
    }

    var row = $(this).parents('.' + options.formCssClass),
      del = row.find('input:hidden[id $= "-DELETE"]'),
      buttonRow = row.siblings("a." + addCssSelector + ', .' + options.formCssClass + '-add'),
      forms;
    if (del.length) {
      del.val('on');
      row.hide();
      forms = $('.' + options.formCssClass);
      totalForms.val(forms.length);
    } else {
      row.remove();
      forms = $('.' + options.formCssClass).not('.formset-custom-template');
      totalForms.val(forms.length);
    }
    for (var i = 0, formCount = forms.length; i < formCount; i++) {
      applyExtraClasses(forms.eq(i), i);
      if (!del.length) {
        forms.eq(i).find(childElementSelector).each(function() {
          updateElementIndex($(this), options.prefix, i);
        });
      }
    }

    if (!showDeleteLinks()) {
      $('a.' + delCssSelector).each(function() {
        $(this).hide();
      });
    }
    if (buttonRow.is(':hidden') && showAddButton()) buttonRow.show();
    if (options.removed) options.removed(row);
    return false;
  }
});
};

I've got this "working" too...but it doesn't actually execute...I've made sure the logic is identical and it does in fact execute and show me the console.log message...but it's not actually executing...

row.find('a.' + delCssSelector).click(function() {

  var target = $(this).attr("href");
  var content = $(this).attr("title");
  var title = $(this).attr("alt");

  $("#dialog").dialog({
    draggable: false,
    modal: true,
    resizable: false,
    width: 'auto',
    title: title,
    buttons: {
      'Yes': function() {
        $(this).dialog('close');
        callback(true);
      },
      'No': function() {
        $(this).dialog('close');
        callback(false);
      }
    }
  });

  function callback(value) {
    if (value) {
      var row = $(this).parents('.dynamic-form');
      var itemIdInput = row.find('input:hidden[id $= "-id"]');
      var itemId = itemIdInput.val();
      var deleteInput = `<input type="hidden" name="research_line_items_to_delete" value="${itemId}">`; // Update here....
      console.log("hereyo");
      if ($(deleteInput).val()) {
        $('#research_line_items_to_delete').append(deleteInput); // Update here....
      }
      console.log($(deleteInput).val());
      var row = $(this).parents('.' + options.formCssClass),
        del = row.find('input:hidden[id $= "-DELETE"]'),
        buttonRow = row.siblings("a." + addCssSelector + ', .' + options.formCssClass + '-add'),
        forms;
      if (del.length) {
        del.val('on');
        row.hide();
        forms = $('.' + options.formCssClass);
        totalForms.val(forms.length);
      } else {
        row.remove();
        forms = $('.' + options.formCssClass).not('.formset-custom-template');
        totalForms.val(forms.length);
      }
      for (var i = 0, formCount = forms.length; i < formCount; i++) {
        applyExtraClasses(forms.eq(i), i);
        if (!del.length) {
          forms.eq(i).find(childElementSelector).each(function() {
            updateElementIndex($(this), options.prefix, i);
          });
        }
      }

      if (!showDeleteLinks()) {
        $('a.' + delCssSelector).each(function() {
          $(this).hide();
        });
      }
      if (buttonRow.is(':hidden') && showAddButton()) buttonRow.show();
      if (options.removed) options.removed(row);
      return false;
    }
  }
});
};

The associated HTML...

  <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the &apos;x&apos; icon.</p>
  </div>

Any thoughts on what is missing are greatly appreciated....

You shouldn't call $("#dialog").dialog() in a loop. Each time you call it, you re-initialize the dialog widget, replacing the old settings. You won't get a different dialog for each row. — Barmar, Commented Jun 17, 2023 at 17:54
@Barmar Thanks for the feedback. I'm essentially calling the dialog when the user clicks on .a It works perfectly fine with the confirm approach...I can't seem to replicate the functionality with the dialog() approach. Can't figure out what I'm doing wrong. — Steve Smith, Commented Jun 17, 2023 at 18:02
To open the dialog you use $("#dialog").dialog("open"). You only have to initialize it once, you use other methods to open and close it when needed. — Barmar, Commented Jun 17, 2023 at 18:07
@Barmar Thanks for the feedback. I tried moving the initialization around but it didn't seem to help. My code as documented is working and it's actually executing the true loop....but the code that actually deletes the line isn't working. I've moved the code around quite a bit and the closest I've gotten it to work is the code as documented above. — Steve Smith, Commented Jun 17, 2023 at 18:32
In your callback(), you have an ambiguous this reference: var row = $(this).parents('.dynamic-form'); Since this is wrapped inside a function and it is defined inside a function, there may be some confusion. I would advise defining the row before the callback. — Twisty, Commented Jun 20, 2023 at 18:24

Twisty · Accepted Answer · 2023-06-20 18:56:08Z

Consider the following lightweight example.

$(function() {
  function makeDialog(row, title, trueCall) {
    if (title == undefined) {
      title = "Delete Row " + row.data("id");
    }
    if (trueCall == undefined) {
      trueCall = function() {
        row.remove();
      };
    }

    var d = $("<div>").html("Please confirm that you want to delete this row.").dialog({
      draggable: false,
      modal: true,
      resizable: false,
      width: 'auto',
      title: title,
      buttons: {
        'Yes': function() {
          trueCall();
          d.dialog("close").dialog("destroy").remove();
        },
        'No': function() {
          d.dialog("close").dialog("destroy").remove();
        }
      }
    });
  }

  $(".delete-row").click(function(e) {
    e.preventDefault();
    makeDialog($(this).closest("tr"));
  });

});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<table>
  <tr data-id="001">
    <td>Item 1</td>
    <td><a href="" class="delete-row">X</a></td>
  </tr>
  <tr data-id="002">
    <td>Item 2</td>
    <td><a href="" class="delete-row">X</a></td>
  </tr>
  <tr data-id="003">
    <td>Item 3</td>
    <td><a href="" class="delete-row">X</a></td>
  </tr>
</table>

This gives you a more specific reference.

Thank you so much for this example. Will help me immensely. Thanks again. — Steve Smith, Commented Jun 20, 2023 at 19:35

Collectives™ on Stack Overflow

JQUERY UI Dialog Box Success Function Is Not Working...Executing But Not Working

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related