I have a popover with elements (dropdown lists) to style the content of input fields. My current code works fine in the first step. I can choose the options within the popover and style the input fields using jQuery. But when I open my popover again all dropdown fields are selected with the default values. The default/selected values should be the last chosen values.
How can I set/change the default values for single options within the popover? I tried to use prop() but it doesn`t work.
Example: First I open my popover for input field1 and choose a different font-size and a different color and close it ("übernehmen" button). Now I want to change the font-family too and open my popover for input field1 again. I have to set all values again (font-family, font-size).
HTML:
<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>
</div>
<div class="main-attributes">
<input type="text" name="Überschrift" value="Musikrichtungen" class="arial text-container" style="color: orange" />
<img src="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 />
<div class="main-attributes">
<input type="text" name="Register 1" value="Rock" class="arial text-container" />
<img src="http://img1.wikia.nocookie.net/__cb20140129172620/lieblingsbuecher/de/images/e/e8/Stift_-_Vector-Icon.png" class="btnTextStil" data-toggle="popover" data-placement="bottom" />
</div>
</div>
</div>
jQuery:
$(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/
I hope my description is understandable and someone can help me.
Thanks, Thomas
I have modified your code a bit to achieve it. Mostly I used $.data to store the current selection made by user.
JS Fiddle link https://jsfiddle.net/fygzxbje/2/
// BOOTSTRAP POPOVER
$(document).ready(function(){
$('[data-toggle="popover"]').popover({ // Bootstrap Popover aktivieren
html: true, // html zulassen
content: function(){ // Inhalt des Popovers zuweisen
var H = $('#div_scoreselector'); // Variable H mit Inhalt des DIVs mit der ID div_scoreselector befüllen
return $(H).html(); // Variable H als html ausgeben
}
});
});
var schriftart,schriftgroesse,schriftformatierung,schriftfarbe,textausrichtung;
$('.btnTextStil').on('click', function (e) { // .btnTextStil ist der Button mit dem das Popover aufegerufen wird
$(this).prev('.text-container').attr('id', 'mainattr'); // Dem vorangestellten Element mit der Klasse .text-container (Eingabefeld) eine ID hinzufügen
var ma = $(this).parents('.main-attributes'); // Den Aufruf des Elternelements mit der Klasse .main-attributes in der Variablen ma speichern
//$('.main-attributes').not(ma).popover('toggle');
//$(ma).popover('toggle');
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();
});
// Auswahl der Dropwdownliste an Button übergeben
$('.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() { // Bei Klick auf den Button "Übernehmen" (hat die Klasse .ownSave)
var schriftart = $('.popover #popoverSchriftart option:selected').val(); // Den Wert der Dropdownauswahl (Schriftart) in der Variablen schriftart speichern
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);
$('#mainattr').css({ // Dem Element (Eingabefeld) mit der oben hinzugefügten ID die CSS-Eigenschaft "Schriftart" hinzufügen und mit dem Wert aus der Dropdownauswahl versehen
'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);
//$('.popover #popoverSchriftart option:selected').attr('selected', 'true');
$('.text-container').removeAttr('id'); // Die oben hinzugefügte ID vom Element mit der Klasse .text-container (Eingabefeld) entfernen
$('[data-toggle="popover"]').popover('hide'); // Das Popover schließen (in diesem Fall alle Popovers schließen
});
$('.ownClose').click(function(){
$('.popover').hide();
});
});