[FRAGE] Modal Dialog mit Java Scripten und "Button disable/enable"

Sekundenschaf · 03. Sep. 2020

Hallo zusammen,

ich bin da mal ein kleines Problem und ich hoffe mir kann jemand den Weg aus dem Wald mit den vielen Bäumen weisen.

Problembeschreibung:

Ein mit Modal geöffneter Dialog (Funktion new_userdetails) bezieht seine Daten mit Hilfe der "Funktion getuserdata".

Es geht um die IDs mit dem Namen userip und serverip im HTML-Code, welche maßgeblich dafür verantwortlich sein sollen, ob der Button (ID saveuser) aktiv wird oder nicht. Je nach korrekter Eingabe halt.

Das Feld userip prüft während der Eingabe (Funktion showip), ob schon eine entsprechende IP-Adresse im System vergeben ist. So lange nichts gefunden wird, soll das Feld grün bleiben, was es auch tut. Nur der Button bleibt davon unbeeindruckt und ändert nichts. Gleichzeitig soll das Feld "serverip" die Gateway-IP Adresse ausrechnen, die immer ungerade sein muss. Zudem wird da die Korrektheit der Eingabe der IP-Adresse überprüft. (Funktion calculate_serverip)

Gebe ich eine IP ein, die entweder falsch ist oder nicht dazu führt, dass das Gateway eine ungerade Ziffer hat, dann ist der Button mit "disable" gemarkt und funktioniert. Ausgegeben von der Funktion
calculate_serverip. Habe ich eine doppelte IP, passiert nix.

Ich hoffe das war so weit verständlich formuliert.

Frage:

Wo ist mein Problem, dass die Funktion aus showip heraus, sowie die Informationen aus dem Feld "userip" ignoriert werden und der Button bei immer Korrekter Eingabe, jedoch doppelt vorhandener IP aktiv bleibt?

Wer mag kann sich das ganze auch "live" ansehen auf einem Testsystem.
Benutzer -> Erweiterte Benutzereinstellungen ( Plus! ) -> Detail-Button -> Netzwerk

OVPN-WebAdmin

Login mit: admin/admin

Zuerst mal der Java Code

Code:

/**
 * Set modal button
 * @param {*} row userid
 */
function new_userdetails(uuid) {
  var html = '' +
  '<button type="button" class="btn btn-app bg-cemetery" data-target="#modal" data-toggle="modal" data-uuid="' + uuid + '">' +
    '<i class="fas fa-user-edit"></i>Details' +
  '</button>'
  return html
}

/**
 * get userid from modal button "details" in user table
 * @param {int} uuid
 */
function getuserdata(uuid){
  var xhttp = new XMLHttpRequest();
  var uu = "";
  var gg = "";
  xhttp.open("GET", "?op=loadmodul&modname=user&go=getuserdata&uid=" + uuid, true);
  xhttp.send();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var myArr = JSON.parse(this.responseText);
      document.getElementById("uuid").innerHTML = myArr['user']['uid'];
      document.getElementById("username").innerHTML = myArr['user']['user_name'];
      document.getElementById("uid").value = myArr['user']['uid'];
      document.getElementById("uname").value = myArr['user']['user_name'];
      if(myArr['user']['gid'] == 1){
        gg = "checked";
      }else if(myArr['user']['gid'] == 2){
        gg = "";
      }
      if(myArr['user']['user_enable'] == 1){
        uu = "checked";
      }else{
        uu = "";
      }
      document.getElementById("isAdminSwitch").checked = gg;
      document.getElementById("UserEnableSwitch").checked = uu;
      document.getElementById("datepicker3").value = myArr['user']['user_start_date'];
      document.getElementById("datepicker4").value = myArr['user']['user_end_date'];
      document.getElementById("lastlogin").innerHTML = myArr['last']['log_start_time'];
      document.getElementById("logins").innerHTML = myArr['last']['anz'];

      document.getElementById("userip").value = myArr['usip']['user_ip'];
      document.getElementById("serverip").value = myArr['usip']['server_ip'];
    }
  };
};

function showip(str) {
  if (str.length == 0) {
    document.getElementById("userip").innerHTML = "";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var isok = JSON.parse(this.responseText);
        if (isok['isuserip']){
          document.getElementById("userip").style.backgroundColor = "#ea7782"; // ip not found -> ok
          document.getElementById("saveuser").disabled = isok['isuserip'];
        }else{
          document.getElementById("userip").style.backgroundColor = "#90f7a7"; // ip found -> error
          document.getElementById("saveuser").disabled = isok['isuserip'];
        }
        calculate_serverip(str);
      }
    };
    xmlhttp.open("GET", "?op=live&go=userip&userip=" + str, true);
    xmlhttp.send();
  }
}

/**
 * Calculate the Server Gateway IP automatical and control your inputs
 * @param {IP-Adress} str 
 */
function calculate_serverip(str){
  var ipaddress = str.split('.');
  var lblock = ipaddress[3] - 1;
  var fehler = 0;
  if(ipaddress[0] < 1 || ipaddress[0] >= 255 || !ipaddress[0]){
    ipaddress[0]='???';
    fehler=1;
  }
  if(ipaddress[1] < 0 || ipaddress[1] >= 255 || !ipaddress[1]){
    ipaddress[1]='???';
    fehler=1;
  }
  if(ipaddress[2] < 0 || ipaddress[2] >= 255 || !ipaddress[2]){
    ipaddress[2]='???';
    fehler=1;
  }
  if (lblock <= 2 || lblock >= 254 || !lblock || lblock == -1){
    lblock='???';
    fehler=1;
  }
  if(ipaddress.length > 4){
    fehler=1;
  }
  var sammel = ipaddress[0] + '.' + ipaddress[1] + '.' + ipaddress[2] + '.' + lblock;
  // checks if number is even or odd
  // checks if number empty or negative
  // the server always has odd IPs
  if (lblock%2 == 0 || (!lblock) || lblock == -1 || fehler == 1){
    document.getElementById("serverip").style.backgroundColor = "#ea7782"; // ip ok
    document.getElementById("saveuser").disabled = true;
  }else{
    document.getElementById("serverip").style.backgroundColor = "#90f7a7"; // ip not ok
    document.getElementById("saveuser").disabled = false;
  }
  document.getElementById("serverip").value = sammel;
}

Der entsprechende HTML Code dazu:

Code:

            <div class="tab-pane fade" id="netsettings" role="tabpanel" aria-labelledby="netsettings-tab">
              <div class="modal-body" style="">
                <div class="row">
                  <div class="form-group col-xs-6 col-md-6">
                    <label class="col-form-label" ><i class="fas fa-network-wired"></i> <?php echo GET_Lang::nachricht('_U_NETIP'); ?></label>
                    <input type="text" onkeyup="showip(this.value)" class="form-control" name="userip" id="userip" placeholder="User IP">
                  </div>
                  <div class="form-group col-xs-6 col-md-6">
                    <label class="col-form-label" ><i class="fas fa-server"></i> <?php echo GET_Lang::nachricht('_U_GATEWAYIP'); ?></label>
                    <input type="text" class="form-control" name="serverip" id="serverip" placeholder="Gateway">
                  </div>
                </div>
              </div>
            </div>


<button type="submit" id="saveuser" class="btn btn-primary" name="make" value="update">Save</button>

mikdoe · 04. Sep. 2020

Hi!
Hast du gesehen, dass in der Ansicht die Browserconsole übervoll mit Fehlermeldungen ist?

In diesem Zustand ist eine Fehlersuche Zeitverschwendung, weil der Browser nach dem ersten Fehler die gesamte Code Ausführung anhält.
Für Javascript gilt: Behebe immer erst alle Console Fehler, bevor du Ursachen für unerwartetes Verhalten suchst.

Sekundenschaf · 04. Sep. 2020

Hi Mike

Habe ich gesehen, betraf die tab.js. Ein Fehler dem ich im Moment nicht auf die Spur komme.

Aber gut, lass uns darüber reden.

Da meckert das Script diese Zeile der tab.js mit "util is undefined" an.

Code:

    const selector = Util.getSelectorFromElement(this._element)

Trotz Studiums der unterschiedlichsten Webseiten und Dokumentationen, komme ich nicht auf die Lösung des Problems.

Sicherlich habe ich im HTML-Code den Fehler gemacht, ich finde nur Anfang vom roten Faden nicht. Denn das da sind die Definitionen der tab.js.

Code:

const CLASS_NAME_DROPDOWN_MENU = 'dropdown-menu'
const CLASS_NAME_ACTIVE        = 'active'
const CLASS_NAME_DISABLED      = 'disabled'
const CLASS_NAME_FADE          = 'fade'
const CLASS_NAME_SHOW          = 'show'

const SELECTOR_DROPDOWN              = '.dropdown'
const SELECTOR_NAV_LIST_GROUP        = '.nav, .list-group'
const SELECTOR_ACTIVE                = '.active'
const SELECTOR_ACTIVE_UL             = '> li > .active'
const SELECTOR_DATA_TOGGLE           = '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]'
const SELECTOR_DROPDOWN_TOGGLE       = '.dropdown-toggle'
const SELECTOR_DROPDOWN_ACTIVE_CHILD = '> .dropdown-menu .active'

mikdoe · 05. Sep. 2020

Wo/wie wird denn util definiert? Oder was ist util? Wie sieht der Code dazu aus?

[FRAGE] Modal Dialog mit Java Scripten und "Button disable/enable"

Sekundenschaf

New member

mikdoe

Moderator

Sekundenschaf

New member

mikdoe

Moderator