Autor Thema: JQuery in einer GET Rückgabe verwenden  (Gelesen 340 mal)

Offline Sidey

  • Developer
  • Hero Member
  • ****
  • Beiträge: 2147
JQuery in einer GET Rückgabe verwenden
« am: 03 Dezember 2018, 21:44:02 »
Hallo zusammen,

ich blicke aktuell nicht durch die Möglichkeiten durch, die FHEMWEB UI anzupassen.

Konkret habe ich eine HTML Tabelle gebaut, die von einem GET Befehl zurück geliefert wird.
In dieser Tabelle möchte ich Schaltflächen anbieten um weitere Aktionen ausführen zu können.

Aktuell habe ich einfach einen Link eingebaut, der ein Attribut auf einen neuen Wert setzt.
Dabei wird natürlich die komplette Seite neu geladen.

Jetzt habe ich zwei Ideen, weiss aber nicht, an welcher Stelle ich diese Anpassungen vornehmen könnte.

Idee 1: Ich schaffe es, dass der Aufruf des Links über JQuery keinen page reload ausführt. (AJAX)

Idee 2: Ich baue Checkboxen ein. Den OK Button müsste ich dann aber durch einen "Save" und "Cancel" Button ändern.


Ich weiss aber aktuell nicht, wie ich das overlay Fenster mit der Rückgabe des get Fensters anpassen kann.

Grüße Sidey
Signalduino, HMLan, Raspberry Pi, Mysensors, ESPEasy, HABridge für Echo

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 19508
Antw:JQuery in einer GET Rückgabe verwenden
« Antwort #1 am: 03 Dezember 2018, 22:22:26 »
Zitat
Konkret habe ich eine HTML Tabelle gebaut, die von einem GET Befehl zurück geliefert wird.
Wie genau soll das ueber das telnet Interface abgebildet werden?

Offline Sidey

  • Developer
  • Hero Member
  • ****
  • Beiträge: 2147
Antw:JQuery in einer GET Rückgabe verwenden
« Antwort #2 am: 03 Dezember 2018, 22:26:08 »
Wie genau soll das ueber das telnet Interface abgebildet werden?


Diese Funktionalität lässt sich über das telnet interface überhaupt nicht abbilden. Da muss der Anwender halt alles händisch machen und es gibt keine Erleichterung.
Signalduino, HMLan, Raspberry Pi, Mysensors, ESPEasy, HABridge für Echo

Offline Sidey

  • Developer
  • Hero Member
  • ****
  • Beiträge: 2147
Antw:JQuery in einer GET Rückgabe verwenden
« Antwort #3 am: 04 Dezember 2018, 17:03:20 »
Hi Rudi,

habe ich dich mit meiner Antwort jetzt so geschockt oder geht das was ich mir vorgestellt habe nicht?


Grüße Sidey
Signalduino, HMLan, Raspberry Pi, Mysensors, ESPEasy, HABridge für Echo

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 19508
Antw:JQuery in einer GET Rückgabe verwenden
« Antwort #4 am: 04 Dezember 2018, 20:31:00 »
Zitat
habe ich dich mit meiner Antwort jetzt so geschockt oder geht das was ich mir vorgestellt habe nicht?
Ja und weiss nicht. Bin nicht sicher, ob solche "hacks" durch Aenderungen/Optimierungen irgendwannmal nicht kaputtgehen.

Waere FW_detailFn nicht eher was fuer dich?
Siehe at, notify, ZWDongle, etc.

Offline Sidey

  • Developer
  • Hero Member
  • ****
  • Beiträge: 2147
Antw:JQuery in einer GET Rückgabe verwenden
« Antwort #5 am: 04 Dezember 2018, 20:45:14 »
Vermutlich hast Du recht.

Ich habe mich durch den Quellcode noch ein wenig durchgewühlt und dabei auch festgestellt, dass teilweise die Rückgabe des GET Befehles in <pre> tags gepackt wird.
Damit wird das natürlich nichts.

Also baue ich eine Schaltfäche ein, die ein Fenster ählich wie  FW_okDialog öffnet und darin rufe ich Funktionen auf der Serverseite via FW_cmd auf?
Signalduino, HMLan, Raspberry Pi, Mysensors, ESPEasy, HABridge für Echo

Offline Ralf9

  • Developer
  • Hero Member
  • ****
  • Beiträge: 2139
Antw:JQuery in einer GET Rückgabe verwenden
« Antwort #6 am: 11 Dezember 2018, 12:09:59 »
Hallo,

Sidey hat es inzwischen hinbekommen, er hat in die FW_detailFn folgendes eingefügt:

<script>
$( "#showProtocolList" ).click(function(e) {
e.preventDefault();
FW_cmd(FW_root+\'?cmd={SIGNALduino_FW_getProtocolList("'.$FW_detail.'")}&XHR=1\', function(data){SD_plistWindow(data)});

});

function SD_plistWindow(txt)
{
  var div = $("<div id=\"SD_protocolDialog\">");
  $(div).html(txt);
  $("body").append(div);
  var oldPos = $("body").scrollTop();
  $(div).dialog({
    dialogClass:"no-close", modal:true, width:"auto", closeOnEscape:true,
    maxWidth:$(window).width()*0.9, maxHeight:$(window).height()*0.9,
    buttons: [ {text:"OK", click:function(){
        $(this).dialog("close");
        $(div).remove();
        location.reload();
    }}]
  });
}
</script>';

In die dargestellte Protokoll Liste ist in jeder Zeile ein Lampensymbol, wenn man darauf klickt, wird über die "click(function()" direkt das Attribut whitelist_IDs verändert. Dies finde ich nicht so gut.
Ich hätte gerne u.a. ein Button "save to whitelist".


Ich habe durch probieren folgendes hinbekommen:
    buttons: [{text:"whitelist active (blacklist and development ignored) - not saved "},
      {text:"deaktivate all IDs", click:function(){
          FW_cmd(FW_root+ \'?XHR=1&cmd={SIGNALduino_FW_test($name)}\');
      }},
      {text:"save to whitelist", click:function(){}},
      {text:"OK", click:function(){
        $(this).dialog("close");
        $(div).remove();
        location.reload();
    }}]

Bei der Übergabe der Variable passt was nicht
ERROR evaluating {SIGNALduino_FW_test($name)}: Global symbol "$name" requires explicit package name at (eval 69) line 1.


Lässt sich links von den buttons auch ein Text schreiben (siehe Anlage), der sich z.B. beim klicken auf "deaktivate all IDs" ändert?
Ich habe den Text nur mit einem Button hinbekommen.

Gruß Ralf
FHEM auf Cubietruck mit Igor-Image, SSD und  hmland + HM-CFG-USB-2,  HMUARTLGW Lan,   HM-LC-Bl1PBU-FM, HM-CC-RT-DN, HM-SEC-SC-2, HM-MOD-Re-8, HM-MOD-Em-8
HM-Wired:  HMW_IO_12_FM, HMW_Sen_SC_12_DR, Selbstbau IO-Module
SIGNALduino

 

decade-submarginal