function setStatusColors

DJGBN
Topic Author
Offline

1 year 11 months ago #8154 by DJGBN

function setStatusColors was created by DJGBN

Hallo Zusammen,
ich bräuchte mal Hilfe.
Ich würde gerne diese Funktion function setStatusColors auf 2 Formulare anweden Problem ist JS ist mal so garnicht meins.

function setStatusColors () {
//adapt 89 in data-f89 to your field id
var elements = jQuery(".vfdvvalue.data-f86");
if (elements) {
      jQuery.each(elements, function (index, element) {
          var status = jQuery(element).text();
          switch (status) {
              case 'vergeben' :
                  jQuery(element).css('color', 'red');
                  break;
              case 'offen' :
                  jQuery(element).css('color', 'green');
                  break;
              default:
                  //"Neu" does not have a special color
                  break;
          }
      });
}
}

jQuery(document).ready(function () {setStatusColors()});

function setStatusColors () {
//adapt 89 in data-f89 to your field id
var elements = jQuery(".vfdvvalue.data-f89");
if (elements) {
      jQuery.each(elements, function (index, element) {
          var status = jQuery(element).text();
          switch (status) {
              case 'vergeben' :
                  jQuery(element).css('color', 'red');
                  break;
              case 'offen' :
                  jQuery(element).css('color', 'green');
                  break;
              default:
                  //"Neu" does not have a special color
                  break;
          }
      });
}
}

jQuery(document).ready(function () {setStatusColors()});

so Fuktioniert immer nur ein Formular.
Vielen Dank schon mal.
MFG Marcel

Administrator IV
Offline

1 year 11 months ago - 1 year 11 months ago #8158 by Administrator IV

Replied by Administrator IV on topic function setStatusColors

Hallo Marcel,

du musst einfach nur eindeutige Funktionsnamen sicherstellen.

In diesem Beispiel JavaScript (das reine JavaScript Äquivalent der jQuery Funktion $.ready) wird immer nur die zweite der beiden Funktionen 'test' aufgerufen:
stackoverflow.com/questions/9899372/pure...ll-a-function-when-t

Code:

<script type="text/javascript">
    (function() {
        // Pure JavaScript equivalent of jQuery's $.ready()
        console.log('console logged: document ready 1')
        test();
    })();

    (function() {
        // Pure JavaScript equivalent of jQuery's $.ready()
        console.log('console logged: document ready 2')
        test();
    })();

    function test() {console.log('console logged: function test1 called');}
    function test() {console.log('console logged: function test2 called');}
</script>

Consolen-Output:
console logged: document ready 1
console logged: function test2 called
console logged: document ready 2
console logged: function test2 called

Und so funktioniert es:

Code:

<script type="text/javascript">
    (function() {
        // Pure JavaScript equivalent of jQuery's $.ready()
        console.log('console logged: document ready 1')
        test1();
    })();

    (function() {
        // Pure JavaScript equivalent of jQuery's $.ready()
        console.log('console logged: document ready 2')
        test2();
    })();

    function test1() {console.log('console logged: function test1 called');}
    function test2() {console.log('console logged: function test2 called');}
</script>

Consolen-Output:
console logged: document ready 1
console logged: function test1 called
console logged: document ready 2
console logged: function test2 called

Gruß, Ingmar

I recommend you the new and up-to-date documentation for Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/en/docs/
Most of this also applies retrospectively to Joomla 3.
Please only ask 1 question per topic :-)

Ich empfehle Dir die neue und aktuelle Dokumentation für Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/docs/
Das meiste gilt rückwirkend auch für Joomla 3.
Bitte immer nur 1 Frage pro Thema stellen :-)

Last edit: 1 year 11 months ago by Administrator IV.

DJGBN
Topic Author
Offline

1 year 11 months ago #8159 by DJGBN

Replied by DJGBN on topic function setStatusColors

Hallo Ingmar, vielen Dank!
Das war wirklich super einfach. Aber wenn man vorhher mit JS nicht soviel zutun hatte ist auch sowas einfaches schwer :-)

aber die erklärung war super.

DANKE!
Gruß, Marcel

DJGBN
Topic Author
Offline

1 year 11 months ago #8160 by DJGBN

Replied by DJGBN on topic function setStatusColors

Hallo nochmal, Ich habe zu dem gleichen Thema nochmal eine Frege:

kann man zumbeispiel zahlenabhänig die farben ändern?
1-4 = orange 5-10=rot und 0=grün

Ich hoffe ich habe es möglichst gut erklärt.

MFG Marcel

Administrator IV
Offline

1 year 11 months ago #8161 by Administrator IV

Replied by Administrator IV on topic function setStatusColors

Hallo Marcel,
schon.

So:

Code:

var status = jQuery(element).text();
switch (true) {
    case (status < 1):
        jQuery(element).css('color', 'green');
        break;
    case (status < 5):
        jQuery(element).css('color', 'orange');
        break;
    case (status < 11):
        jQuery(element).css('color', 'red');
        break;
    default:
        break;
}

Oder auch so:

Code:

switch (status) {
    case 0:
        jQuery(element).css('color', 'green');
        break;
    case 1:
    case 2:
    case 3:
    case 4:
        jQuery(element).css('color', 'orange');
        break;
    case 5:
    case 6:
    case 7:
    case 8:
    case 9:
    case 10:
        jQuery(element).css('color', 'red');
        break;
    default:
        break;
}

Siehe auch:
stackoverflow.com/questions/5619832/swit...tegers-in-javascript

Gruß, Ingmar

Administrator IV
Offline

1 year 11 months ago - 1 year 11 months ago #8162 by Administrator IV

Replied by Administrator IV on topic function setStatusColors

Hallo Marcel,
ich empfehle dir die beiden oder sogar noch weitere Funktionen zu einer einzigen Funktion zusammen zu fassen.
Hier mit Hilfsfunktion 'setStatusColors_helper()'.
Geht auch ohne Hilfsfunktion - ist aber so ganz gut zu lesen.

Code:

function setStatusColors() {
    const fields = ['.vfdvvalue.data-f86', '.vfdvvalue.data-f86'];
    fields.forEach(field => setStatusColors_helper(field));
}

function setStatusColors_helper(field) {
    var elements = jQuery(field);
    if (elements) {
        jQuery.each(elements, function (index, element) {
        var status = jQuery(element).text();
        switch (status) {
            ....
        }
    }
}

Siehe auch:

stackoverflow.com/questions/9329446/for-...-array-in-javascript
developer.mozilla.org/en-US/docs/Web/Jav...bjects/Array/forEach

Gruß, Ingmar

Last edit: 1 year 11 months ago by Administrator IV.

Moderators: Administrator AV, Administrator IV

Joomla 5 Notice

Forum

function setStatusColors

Visforms Subscription

Visforms Extensions