Multiple dialog function inside loop

Question

i try to make a multiple dialog form from some data in the database but when i clicked the button, the dialog form not showed

i use PHP increment numeric to differentiate the attribute id

then i use for to sync the id on my php code with the id on jquery code

when i try on jsfiddle, it says "Functions declared between loop referencing an outer scoped variable may lead to confusing semantics"

this is my php code:

<button class="btn btn-danger" id="create-user<?php echo $no2++; ?>">Buka Blokir</button>

    <div id="dialog-form<?php echo $no++; ?>" title="Create new user">
    <p class="validateTips">All form fields are required.</p>

<form>
  <fieldset>
    <label for="reason">Reason</label>
    <input type="text" name="reason" id="reason" value="Jane Smith" class="text ui-widget-content ui-corner-all">

  <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>

and thisis my jquery code:

$( function() {

var dialog, form,

  reason = $( "#reason" ),
  allFields = $( [] ).add( reason ),
  tips = $( ".validateTips" );

function updateTips( t ) {
  tips
    .text( t )
    .addClass( "ui-state-highlight" );
  setTimeout(function() {
    tips.removeClass( "ui-state-highlight", 1500 );
  }, 500 );
}

function checkLength( o, n, min, max ) {
  if ( o.val().length > max || o.val().length < min ) {
    o.addClass( "ui-state-error" );
    updateTips( "Length of " + n + " must be between " +
      min + " and " + max + "." );
    return false;
  } else {
    return true;
  }
}

function checkRegexp( o, regexp, n ) {
  if ( !( regexp.test( o.val() ) ) ) {
    o.addClass( "ui-state-error" );
    updateTips( n );
    return false;
  } else {
    return true;
  }
}

function unBlock() {
  var valid = true;
  allFields.removeClass( "ui-state-error" );
  valid = valid && checkLength( reason, "reason", 6, 80 );

  if ( valid ) {
    $( "#users tbody" ).append( "<tr>" +
      "<td>" + dasar.val() + "</td>" +
    "</tr>" );
    dialog.dialog( "close" );
  }
  return valid;
}

for (var i = 1; i < 50; i++) {
dialog = $( "#dialog-form"+i ).dialog({
  autoOpen: false,
  height: 400,
  width: 350,
  modal: true,
  buttons: {
    "Unblock": unBlock,
    Cancel: function() {
      dialog.dialog( "close" );
    }
  },
  close: function() {
    form[ 0 ].reset();
    allFields.removeClass( "ui-state-error" );
  }
});
}
form = dialog.find( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  addUser();
});

for (var b = 1; b < 50; b++) {
$( "#create-user"+b ).button().on( "click", function() {
  dialog.dialog( "open" );
});

}

} );

Answer 1

I think you're making it overly complicated. Consider the following code.

$(function() {
  var reasons = $("[id^='reason']"),
    tips = $(".validateTips");

  function updateTips(t) {
    tips
      .text(t)
      .addClass("ui-state-highlight");
    setTimeout(function() {
      tips.removeClass("ui-state-highlight", 1500);
    }, 500);
  }

  function checkLength(o, n, min, max) {
    if (o.val().length > max || o.val().length < min) {
      o.addClass("ui-state-error");
      updateTips("Length of " + n + " must be between " +
        min + " and " + max + ".");
      return false;
    } else {
      return true;
    }
  }

  function checkRegexp(o, regexp, n) {
    if (!(regexp.test(o.val()))) {
      o.addClass("ui-state-error");
      updateTips(n);
      return false;
    } else {
      return true;
    }
  }

  $("[id^='dialog-form']").dialog({
    autoOpen: false,
    height: 400,
    width: 350,
    modal: true,
    buttons: {
      "Unblock": function() {
        var valid = true;
        reasons.removeClass("ui-state-error");;
        var reason = $(this).find("[id^='reason']");
        valid = valid && checkLength(reason, "reason", 6, 80);
        if (valid) {
          /*
          $("#users tbody").append("<tr>" +
            "<td>" + dasar.val() + "</td>" +
            "</tr>");
          */
          $("[id^='dialog-form']").dialog("close");
        }
        return valid;
      },
      Cancel: function() {
        $(this).dialog("close");
      }
    },
    close: function() {
      $(this).find("form")[0].reset();
      reasons.removeClass("ui-state-error");
    }
  });

  $("div[id^='dialog-form'] form").on("submit", function(e) {
    e.preventDefault();
    /*
    addUser();
    */
  });

  $("button[id^='create-user']").on("click", function(e) {
  var selfId = $(this).attr("id");
  var d = selfId.match(/\d+/g).map(Number);
    var dlg = $("#dialog-form-" + d);
    dlg.dialog("open");
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button class="btn btn-danger" id="create-user-1">Buka Blokir</button>
<div id="dialog-form-1" title="Create new user">
  <p class="validateTips">All form fields are required.</p>
  <form>
    <fieldset>
      <label for="reason-1">Reason</label>
      <input type="text" name="reason" id="reason-1" value="Jane Smith" class="text ui-widget-content ui-corner-all">
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

<button class="btn btn-danger" id="create-user-20">Buka Blokir</button>
<div id="dialog-form-20" title="Create new user">
  <p class="validateTips">All form fields are required.</p>
  <form>
    <fieldset>
      <label for="reason-20">Reason</label>
      <input type="text" name="reason" id="reason-2" value="John Smith" class="text ui-widget-content ui-corner-all">
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

With a selector that encompasses more than one element, you can still assign UI Widgets to it. You just have to understand how to use this and $(this) to your advantage.