Popover: Dropdownauswahl merken (bzw. Defaultwert anpassen)

rince1984

Mitglied
Hallo zusammen,

ich habe Bootstrap Popovers erstellt in dem mehrere Dropdown Listen zur Anpassung von Eingabefeldern sind (Schriftenformatierung des Eingabefeld-Inhalts). Ich habe es soweit hinbekommen, dass die Dropdown-Auswahl aus dem Popover an das Eingabefeld übergeben werden (mit Hilfe von jQuery).
Mein Problem ist, dass ich bei einem erneuten Aufruf des vorher aufgerufen Popovers wieder die Default-Auswahlwerte in den Dropdown-Listen habe. Ich möchte aber, dass die letzte Auswahl ausgewählt ist.

Beispiel:
Ich wähle in meinem Popover eine andere Schriftart und -größe aus und übernehme die Werte in mein Eingabefeld, dass auch entsprechend "umformatiert" wird. Nun möchte ich noch die Schriftfarbe anpassen und öffne das Popover erneut. Nun muss ich zusätzlich zur Schriftfarbe auch wieder die Schriftart und -größe anpassen.

Ich habe bereits versucht mit jQuery der ausgewählten Dropdown-Option ein "Selected" hinzuzufügen. Dies habe ich mit attr() und danach mit prop() versucht, beides scheint aber nicht übertragen zu werden.

Über einen Lösungsvorschlag wäre ich sehr dankbar.

Mein HTML-Code:
HTML:
<!-- Mein Popover Inhalt mit den Dropdown-Listen -->
<div class='hidden' id='div_scoreselector'>
<div>
    <div class="row">
        <div class="col-md-12">
            <div class="row div-scorerange">
                <div class="col-md-12">
                    <div class="form-group">
                        <span class="glyphicon glyphicon-font"></span> <label class="control-label">Schriftart</label>
                        <select id='popoverSchriftart' class='arial form-control'>
                            <option value='Arial' class='arial'>Arial</option>
                            <option value='Times New Roman' class='times'>Times New Roman</option>
                            <option value='Comic Sans MS' class='comic'>Comic Sans</option>
                        </select>
                        <br />
                        <span class="glyphicon glyphicon-text-size"></span> <label class="control-label">Schriftgröße</label>
                        <select id="popoverSchriftgroesse" class="arial form-control">
                            <option value="12px">9pt</option>
                            <option value="13px">10pt</option>
                            <option value="15px">11pt</option>
                            <option value="16px">12pt</option>
                            <option value="17px">13pt</option>
                            <option value="19px">14pt</option>
                            <option value="21px">15pt</option>
                            <option value="22px">16pt</option>
                            <option value="23px">17pt</option>
                            <option value="24px">18pt</option>
                            <option value="25px">19pt</option>
                            <option value="26px">20pt</option>
                        </select>
                        <br />
                        <span class="glyphicon glyphicon-bold"></span> <label class="control-label">Schriftformatierung</label>
                        <select id="popoverSchriftformatierung" class="arial form-control">
                            <option value="normal">Normal</option>
                            <option value="bold">Fett</option>
                        </select>
                        <br />
                        <span class="glyphicon glyphicon-text-color"></span> <label class="control-label">Schriftfarbe</label>
                        <br /><input type="color" id="popoverSchriftfarbe" />
                        <br /><br />
                        <span class="glyphicon glyphicon-align-center"></span> <label class="control-label">Textausrichtung</label>
                        <select id="popoverTextausrichtung" class="arial form-control">
                            <option value="left">Links</option>
                            <option value="center" selected="selected">Mittig</option>
                            <option value="right">Rechts</option>
                        </select>
                    </div>
                </div>
            </div>
            <hr />
            <div class="row">
                <div class="col-md-6 col-md-offset-6">
                    <button class="btn btn-success ownSave">Übernehmen</button>
                    <button class="btn btn-danger ownClose">Abbrechen</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Mein HTML-Code für die tatsächliche Seite mit den Eingabefeldern -->
<divclass="main-attributes">
<inputtype="text"name="Überschrift"value="Musikrichtungen"class="arial text-container"style="color: orange"/><imgsrc="http://img1.wikia.nocookie.net/__cb20140129172620/lieblingsbuecher/de/images/e/e8/Stift_-_Vector-Icon.png"class="btnTextStil"data-toggle="popover"data-placement="bottom"/>
</div>
<br/>
<divclass="main-attributes">
<inputtype="text"name="Register 1"value="Rock"class="arial text-container"/><imgsrc="http://img1.wikia.nocookie.net/__cb20140129172620/lieblingsbuecher/de/images/e/e8/Stift_-_Vector-Icon.png"class="btnTextStil"data-toggle="popover"data-placement="bottom"/>
</div>

Mein jQuery-Code:
Javascript:
$(document).ready(function(){
$('[data-toggle="popover"]').popover({    
   html: true, 
   content: function(){                 
      var H = $('#div_scoreselector'); 
      return $(H).html();                
      }
   });
});
$('.btnTextStil').on('click', function (e) {                   
  $(this).prev('.text-container').attr('id', 'mainattr');    
  var ma = $(this).parents('.main-attributes');              
  $('.popover').not(this).hide();
  e.stopPropagation();
});
$('.main-attributes').on('shown.bs.popover', function () {
$('.ownSave').click( function() {                                                        
var schriftart = $('.popover #popoverSchriftart option:selected').val();           
var schriftgroesse = $('.popover #popoverSchriftgroesse option:selected').val();
var schriftformatierung = $('.popover #popoverSchriftformatierung option:selected').val();
var schriftfarbe = $('.popover #popoverSchriftfarbe').val();
var textausrichtung = $('.popover #popoverTextausrichtung').val();
$('#mainattr').css({                                                       
                'font-family': schriftart,
                'font-size': schriftgroesse,
                'font-weight': schriftformatierung,
                'color': schriftfarbe,
                'text-align': textausrichtung
    });
$('.popover #popoverSchriftart option:selected').prop('selected', true);
$('.text-container').removeAttr('id');                                             
$('[data-toggle="popover"]').popover('hide');                                      
});
$('.ownClose').click(function(){
$('.popover').hide();
});
});

https://jsfiddle.net/rince/fygzxbje/


Danke vorab an alle die sich die Zeit nehmen um mir zu helfen.

rince
 
Ich habe nun eine Lösung für mein Problem. Mit Hilfe der jQuery .data() Methode kann es sauber gelöst werden. Also nicht der zuerst angedachte Ansatz den Defaultwert der Dropdown-Listen anzupassen, sondern die Werte zu speichern.

Folgend der geänderte jQuery Code für andere mit ähnlicher Fragestellung:

Javascript:
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover({     
            html: true,                            
            content: function(){                   
                var H = $('#div_scoreselector'); 
                return $(H).html();               
            }
        });
    });

    var schriftart,schriftgroesse,schriftformatierung,schriftfarbe,textausrichtung;

    $('.btnTextStil').on('click', function (e) {                   
        $(this).prev('.text-container').attr('id', 'mainattr');
        var ma = $(this).parents('.main-attributes');              

        schriftart = $(ma).data('font-family');                                  
        schriftgroesse =   $(ma).data('font-size');
        schriftformatierung =   $(ma).data('font-weight');
        schriftfarbe =   $(ma).data('color');
        textausrichtung =  $(ma).data('text-align');

        $('.popover').not(this).hide(); //Versteckt alle anderen Popovers
        e.stopPropagation();
    });

    $('.main-attributes').on('shown.bs.popover', function () {
        schriftart != null && $('.popover #popoverSchriftart').val(schriftart) ;
        schriftgroesse != null && $('.popover #popoverSchriftgroesse').val(schriftgroesse);
        schriftformatierung != null && $('.popover #popoverSchriftformatierung').val(schriftformatierung);
        schriftfarbe != null && $('.popover #popoverSchriftfarbe').val(schriftfarbe);
        textausrichtung != null && $('.popover #popoverTextausrichtung').val(textausrichtung);

        $('.ownSave').click( function() {                                                       
            var schriftart = $('.popover #popoverSchriftart option:selected').val();          
            var schriftgroesse = $('.popover #popoverSchriftgroesse option:selected').val();
            var schriftformatierung = $('.popover #popoverSchriftformatierung option:selected').val();
            var schriftfarbe = $('.popover #popoverSchriftfarbe').val();
            var textausrichtung = $('.popover #popoverTextausrichtung').val();
            //alert(textausrichtung);
            var mainattr = $('#mainattr');
            $(mainattr).css({                                                              
                'font-family': schriftart,
                'font-size': schriftgroesse,
                'font-weight': schriftformatierung,
                'color': schriftfarbe,
                'text-align': textausrichtung
            });

            var parentmainattributes = $(mainattr).closest(".main-attributes");
            $(parentmainattributes).data('font-family', schriftart);
            $(parentmainattributes).data('font-size', schriftgroesse);
            $(parentmainattributes).data('font-weight', schriftformatierung);
            $(parentmainattributes).data('color', schriftfarbe);
            $(parentmainattributes).data('text-align', textausrichtung);

            $('.text-container').removeAttr('id');                                             
            $('[data-toggle="popover"]').popover('hide');                                      
        });
        $('.ownClose').click(function(){
            $('.popover').hide();
        });
    });
 
Wieso kann ich denn mein selbst erstelltes Thema nicht schließen? Oben gibt es keinen Button o.ä.
Themen schließen (= keine weitere Antwortmöglichkeiten) können nur Admins & Mods.

Du kannst lediglich das Thema als erledigt markieren - eben oben rechts neben dem Thementitel.

EDIT: Wurde zwischenzeitlich von einem Mod (@sheel) übernommen ;)
 
Zuletzt bearbeitet:
Zurück