ZF2 Select Element mit FontAwesome Icon

[nookie]

Guten Abend,

ich will mich kurz halten. Ich habe in ZF2 eine Form erstellt, mit verschiedenen Auswahloptionen. Nun möchte ich in jeder Option noch ein Icon vor dem Auswahltext haben, doch kriege ich nur den HTML-Code angezeigt..

Hier der relevante Programmausschnitt:

   'value_options' => array(
                    1 => '<i class="fa fa-arrow-down txt-color-green"></i>&nbsp;Unwesentlich',
                    2 => '<i class="fa fa-arrow-down txt-color-green"></i>&nbsp;Trivial',
                    3 => '<i class="fa fa-arrow-up txt-color-red"></i>&nbsp;Hoch',
                ),

 

[nookie]

Vielleicht sollte ich dabei noch erwähnen das ich Select2 verwende.

 

[scbawik]

Ich verstehe nicht wirklich was du meinst.
Was haben ZF2 und Frontend-Angelegenheiten gemeinsam?

Wird HTML vl. einfach escaped?
https://github.com/zendframework/zf2/issues/3015

 

[nookie]

Ich verstehe nicht wirklich was du meinst.
Was haben ZF2 und Frontend-Angelegenheiten gemeinsam?

Wird HTML vl. einfach escaped?
https://github.com/zendframework/zf2/issues/3015

Muah, das könnte natürlich sein das HTML escaped wird.. Ist mir bisher nicht in den Sinn gekommen. Schau ich mir nach der Arbeit mal zuhause an.

Und nochmal zum Verständnis, ich habe im ZF2 eine Form erstellt, mit einem Select-Element.

$this->add(array(
            'name' => 'beispiel',
            'type' => 'Select',

            'attributes' => array(
                'id' => 'beispiel',
            ),

            'options' => array(
        
               'label' => 'beispiel',

                'value_options' => array(
                    1 => '<i class="fa fa-arrow-down txt-color-green"></i>&nbsp;Unwesentlich',
                    2 => '<i class="fa fa-arrow-down txt-color-green"></i>&nbsp;Trivial',
                    3 => '<i class="fa fa-arrow-up txt-color-red"></i>&nbsp;Hoch',
                ),
                ),
            ),
        ));

Diese wird nun in Controller XY an eine View übergeben. Er zeigt mir das Select-Element normal an, doch an der Stelle bei den Auswahloptionen wo das Icon stehen sollte, steht halt in dem Fall der komplette HTML-Code dazu. Also

<i class="fa fa-arrow-down txt-color-green"></i>&nbsp;...

zum Beispiel.

 

[nookie]

Es lag anscheinend auch nicht am HTML escaping..

 

[scbawik]

Es lag anscheinend auch nicht am HTML escaping..

Doch, ich denke schon. Eine andere Erklärung kann es kaum geben ;)

Was steht denn im generierten HTML?

 

[nookie]

Doch, ich denke schon. Eine andere Erklärung kann es kaum geben ;)

Was steht denn im generierten HTML?

Entschuldige, du hattest recht. Hatte mit Firebug schnell drüber geschaut, aber ein dierekter Blick in den Quelltext hat es dann offen gelegt. Bitte nicht lachen!

<option value="3">&lt;i class=&quot;fa fa-arrow-up txt-colorred&quot;&gt;&lt;/i&gt;&amp;nbsp;Hoch</option>

Danach habe ich mit Firebug interesse halber die betroffenen Zeilen so bearbeitet das es passt. Dann kriege ich meinen HTML-Code zwar nicht mehr angezeigt aber trotzdem auch kein Icon.

Sprich..

<option value="3"><i class="fa fa-arrow-up txt-colorred"></i>Hoch</option>

Ausgabe im Select Element:

Hoch

Bin nach einer Weile auf diese zwei Optionen gestoßen, allerdings funktionieren diese leider nicht bzw. nicht in dem Fall, denn bei anderen Elementen wunderbar.

 'disable_html_escape' => true,
// ODER
'escape' => false,

 

[scbawik]

Entschuldige, du hattest recht. Hatte mit Firebug schnell drüber geschaut, aber ein dierekter Blick in den Quelltext hat es dann offen gelegt. Bitte nicht lachen!

<option value="3">&lt;i class=&quot;fa fa-arrow-up txt-colorred&quot;&gt;&lt;/i&gt;&amp;nbsp;Hoch</option>

Danach habe ich mit Firebug interesse halber die betroffenen Zeilen so bearbeitet das es passt. Dann kriege ich meinen HTML-Code zwar nicht mehr angezeigt aber trotzdem auch kein Icon.

Sprich..

<option value="3"><i class="fa fa-arrow-up txt-colorred"></i>Hoch</option>

Ausgabe im Select Element:

Hoch

Bin nach einer Weile auf diese zwei Optionen gestoßen, allerdings funktionieren diese leider nicht bzw. nicht in dem Fall, denn bei anderen Elementen wunderbar.

 'disable_html_escape' => true,
// ODER
'escape' => false,

Achso, das ist ja ein Select. Such mal nach Select2 icons, denke da muss man eine kleine Function schreiben.

 

[nookie]

Achso, das ist ja ein Select. Such mal nach Select2 icons, denke da muss man eine kleine Function schreiben.

Ja habe dazu auch schon etwas gefunden, aber ein Fan davon bin ich gerade nicht. Dachte eigentlich es würde etwas "einfacher" gehen. Nunja dann muss ich doch diesen Weg gehen.

 

[scbawik]

Ja habe dazu auch schon etwas gefunden, aber ein Fan davon bin ich gerade nicht. Dachte eigentlich es würde etwas "einfacher" gehen. Nunja dann muss ich doch diesen Weg gehen.

$("#sel").select2({
escapeMarkup:function(m){return m;}});
Sollte eigentlich ausreichen.

 

[nookie]

$("#sel").select2({
escapeMarkup:function(m){return m;}});
Sollte eigentlich ausreichen.

Hatte ich auch schon gefunden. Leider ohne Erfolg. Gebe heute Abend nocheinmal Rückmeldung, habe eventuell einen Weg gefunden, jedoch imom keine Möglichkeit es auszuprobieren.

 

[nookie]

Hatte ganz vergessen mich hier zu melden. Also eine richtige Lösung des Problems gibt es noch immer nicht. Eine Methode die zwar funktioniert aber nicht optimal ist, ist folgende.

Dem Select-Element die font-family: 'FontAwesome' geben und in den Option das FontAwesome-Icon als Unicodezeichen angeben. Das Escaping wird somit umgangen, aber ist noch immer nicht so wie ich es gerne haben möchte.