I have an issue where hiding a bootstrap popover just resets the text content of my textarea within the popover. There are many of these in my page and they are created dynamically in a loop (with int i being the counter). Here is my html:
<button class="btn btn-sm" data-toggle="popover" data-container="body" data-title="FOR EVALUATOR'S ATTENTION" type="button" data-html="true" #*id="commentPopOver-#i"*# #*onclick="getAttention(#i)"*#>
<span class="glyphicon glyphicon-pencil"></span>
</button>
<div class="popoverContent" style="display: none !important">
<div class="form-group">
<input name="values[#i].AttentionComment" id="comment-#i" hidden />
<textarea class="form-control" onchange="updateText(#i)" id="commentText-#i" rows="3">someText</textarea>
</div>
</div>
and my JS:
$(function () {
$("[data-toggle=popover]").popover({
html: true,
content: function () {
return $('.popoverContent').html();
}
});
})
Now I understand that it's just recreating the popover with it's default text on load, but it should at least be keeping the changes and the value of the textarea after it is closed/hidden. I wrote this JS to try and make it populate a separate hidden input to contain the value even after reset but it didn't work:
function updateText(id) {
var newtext = $('#commentText-' + id).val();
$('#comment-' + id).val(newtext);
}
Any ideas?
When you use content: function () {return $('.popoverContent').html();} the set the content of your tooltips, the tooltips content a copy of the HTML code return by $('.popoverContent').html(); The textarea is also a copy and not reference to the original textarea in your DOM.
When a tooltips opens the plugin inserts its HTML (including the copy mentioned above) in the DOM with a random unique ID. The plugin also insert a aria-describedby attribute to the elements that trigger the tooltip (the button in your case). The aria-describedby holds the same unique ID set for the tooltip.
Now you can use the 'hide.bs.popover` event. When the tooltips close you should copy the content of the textarea inside your tooltip to the (hidden) textarea in your DOM
Example
HTML:
<button type="button" id="po1" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-html="true">
Popover on right
</button>
<div class="popoverContent" style="display: none !important">
<div class="form-group">
<textarea class="form-control" rows="3">someText 1</textarea>
</div>
</div>
<br>
<button type="button" id="po2" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-html="true">
Popover on right
</button>
<div class="popoverContent" style="display: none !important">
<div class="form-group">
<textarea class="form-control" rows="3">someText 2</textarea>
</div>
</div>
javascript:
$("[data-toggle=popover]").each(function( index ) {
var that = $(this);
$(this).popover({
html: true,
content: function () {
return $('#' + $(this).attr('id') + ' + .popoverContent').html();
}
});
});
$('[data-toggle=popover]').on('hide.bs.popover', function () {
$('#' + $(this).attr('id') + ' + .popoverContent textarea').html( $('#' + $(this).attr('aria-describedby') + ' .popover-content textarea').val());
});
Demo: http://www.bootply.com/DvOYV12bHg
Related
I have images list and need to select image for album cover.
HTML:
<button type="button" id="imageCover1" class="btn btn-sm btn-success btn-image-cover" data-id="1">
<i class="far fa-circle"></i> cover
</button>
<input type="hidden" name="is_cover[]" id="imageCover1" class="image-cover" value="">
<button type="button" id="imageCover2" class="btn btn-sm btn-success btn-image-cover" data-id="2">
<i class="far fa-circle"></i> cover
</button>
<input type="hidden" name="is_cover[]" id="imageCover2" class="image-cover" value="">
JS:
$(document).on('click', '.btn-image-cover', function () {
var item_id = $(this).attr('data-id');
$('.image-cover').val('');
$('#imageCover' + item_id).val('1');
$('#imageCover' + item_id).find('i').addClass('far fa-check-circle');
});
In action worked and change input value true But when i need to find i and change/add class jquery not find i. how to fix this problem?
It actually works.
The problem is that font awesome only renders one icon class. Change the addClass function to toggleClass like this:
$(document).on('click', '.btn-image-cover', function () {
var item_id = $(this).attr('data-id');
$('.image-cover').val('');
$('#imageData' + item_id).val('1');
$('.btn-image-cover').not(this).find('i').removeClass('fa-check-circle').addClass('fa-circle');
$(this).find('i').toggleClass('fa-circle fa-check-circle');
});
JSFiddle link
The toggleClass will remove the "fa-circle" class when it is present and add the "fa-check-circle" class if it is not present, and vice-versa.
As noted by #Teemu, you also have same ids with your (button + input:hidden) pairs. I've changed the id of the input:hidden to start with "imageData" instead.
I'm trying to do something like a social network, but I'm having problems with jquery, I want, by clicking the comment button, the user is taken to the comment field, but I'm not able to use $(this).
When the user click here
The code:
<button type="button" class="btn btn-default abreComentarios" >
<span class="fa fa-comments-o"></span>
</button>
The field:
The code:
<div class="comentar">
<textarea class="txtComentario form-control caixaComentario" placeholder="Seu comentário" onkeypress="comentarEnter()"></textarea>
</div>
My jquery:
$('body').on('click', '.abreComentarios', function() {
//console.log('entrou');
$(this).next('.caixaComentario').focus();
});
Remember, I'm using a foreach, so I have to use $(this)
Your next() isn't .caixaComentario but .comentar,
So use the next() but then you'll have to use find() (or children()) to focus the textarea
$('.abreComentarios').on('click', function() {
//console.log('entrou');
$(this).next('.comentar').find('.caixaComentario').focus();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-default abreComentarios">click</button>
<div class="comentar">
<textarea class="txtComentario form-control caixaComentario" placeholder="Seu comentário"></textarea>
</div>
Solved, i just did it:
1- Added a data-id with the id of the post in the button
<button type="button" class="btn btn-default abreComentarios" data-id="'.$post->id.'"><span class="fa fa-comments-o"></span></button>
2- Added the same id in the end of the name of class "caixaComentario"
<div class="comentar">
<textarea class="form-control caixaComentario'.$post->id.'" placeholder="Seu comentário" onkeypress="comentarEnter()"></textarea>
</div>
3- Call without $(this) on jQuery
$('body').on('click', '.abreComentarios', function() {
var id = $(this).data("id");
$('.caixaComentario'+id).focus();
});
and Worked :D
$(this) will be your <button>, but calling .next(".caixaComentario") will look for a sibling element to the button. If your <button> and <div class="comentar"> are siblings, the .next(".caixaComentario") will not match any elements as they aren't siblings. The would be a niece/nephew.
Try changing .next(".caixaComentario") to .next("div .caixaComentario")
I made a "Add new shipment" button that creates a whole div that includes like 4 fields and a 2nd submit button under all that. that 2nd submit button is supposed to post this new div onto the page and add it to db but I am having trouble selecting the fields and selecting the new submit button. I think this is because the page is already loaded from the beginning, so this new div cannot be selected anymore? Here is my HTML that is created from the "Add new shipment" button:
// adds new shipment
const ADD_SHIPMENT_GRAY = function (){
return
<div class="shipment panel panel-success col-xs-2">
<div class="shipmentblocks row">
<div class="idzone btn-block classificationline">
<!-- label ---->
<input type="text" class="customer btn btn-default btn-xs col-xs-12" placeholder="Customer"><strong id="customertext"></strong></button>
<!-- contents -->
<input type="text" class="btn btn-default btn-xs col-xs-12" placeholder="File Number">
<strong class="boldedlabels" id="filenumber"></strong>
<span class="labelcontents"></span>
</button>
<button type="button" class="etd btn btn-default btn-xs col-xs-12" placeholder="ETD" id="etd">
<strong class="boldedlabels"></strong>
<span class="labelcontents" id="etddatepicker">ETD</span>
</button>
<button type="button" class="eta btn btn-default btn-xs col-xs-12" placeholder="ETA" id="eta">
<strong class="boldedlabels"></strong>
<span class="labelcontents" id="etadatepicker">ETA</span>
</button>
<button type="button" class="shipmentsubmission btn btn-default btn-xs col-xs-12">
<strong class="boldedlabels eta"></strong>
<span class="labelcontents" id="submitnewshipment">Submit</span>
</button>
</div>
</div>
</div>;
}
Here is my javascript code that executes the above code:
const SCRIPTS = function (){
$(function(){
const addshipment = $("#addshipment"),
labelsubmission = $(".labelsubmission"),
shipment = $(".shipment"),
shipmentblocks = $(".shipmentblocks"),
idzone = $(".idzone"),
etd = $(".etd"),
addsubmit = $("#addsubmit"),
zzz = $("#zzz"), // div to keep maximum new shipment as 1
submitnewshipment = $("#submitnewshipment"), // button to submit the new shipment
// Add New Shipment
addshipment.click(() => { // in console, indexes closer to 0 (ex: index [0]) = newer
//$(".shipment:first").before(ADD_SHIPMENT_GRAY());
// add new shipment green block
$("#zzz").html(ADD_SHIPMENT_GRAY());
});
})
}
You are creating dynamic data which requires you to use .on in jquery, otherwise it will not find the element.
Also dont repeat id's make it a class instead
$(document).on('click', '.addshipment', function () {
// in console, indexes closer to 0 (ex: index [0]) = newer
//$(".shipment:first").before(ADD_SHIPMENT_GRAY());
// add new shipment green block
$("#zzz").html(ADD_SHIPMENT_GRAY());
});
http://api.jquery.com/on/
I am not able to figure out how to display dropdown in popover in bootstrap. All i can find tutorials are just displaying just text and buttons. I need to display dropdown and also have to bind data in it. To display buttons and for its events i have followed the below way.
var popOpts = {
placement: 'left',
title: '<span id="trashcan" class="glyphicon glyphicon-trash"></span>Confirm Delete',
html: 'true',
trigger: 'click',
content: '<p>This will be deleted.<br>Are you sure you wish to continue?</p><br><button id="delete" class="btn btn-danger popover-submit" type="button">Yes</button><button id="cancel" class="btn btn-default" type="button">No</button>',
}
$(".btnDelete").popover(popOpts);
I need to know how to display dropdown and to bind items in popover in bootstrap.
Try like this
You can display anything inside form,and bind the events
HTML
<div class="popover-markup"> Popover link
<div class="head hide">Lorem Ipsum</div>
<div class="content hide">
<div class="form-group">
<select><option>Test</option></select>
</div>
<button type="submit" class="btn btn-default btn-block">Submit</button>
</div>
<div class="footer hide">test</div>
</div>
Script
$('.popover-markup>.trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
content: function () {
return $(this).parent().find('.content').html();
}
});
DEMO
On my SP 2013 Master Page, I want to click a button and change the path to the style sheets. Not sure if it's a path issue or what... but it's not changing the style sheets.
My style sheets are stored in the Style Library/css folder.
alert($(this).attr('id') + ' clicked'); tells me that the click function are working per button.
JavaScript on Master page:
<script type="text/javascript">
$(document).ready(function(){
console.log("working...");
$('#style1').click(function (){
//alert($(this).attr('id') + ' clicked');
$('link[href="http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style2"]').attr('href',"http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style1");
});
$('#style2').click(function (){
//alert($(this).attr('id') + ' clicked');
$('link[href="http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style1"]').attr('href',"http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style2");
});
});
</script>
HTML on Master page:
<div class="row">
<div class="col-md-1 col-md-offset-5">
<button type="button" id="style1" class="btn btn-primary" data-toggle="button">
<span class="ui-button-text">Style 1</span>
</button>
</div>
<div class="col-md-1 ">
<button type="button" id="style2" class="btn btn-primary" data-toggle="button">
<span class="ui-button-text">Style 2</span>
</button>
</div>
</div>
Thanks
Try this fiddle. Use an ID on the link tag but you may need to tweak it because SP is generating a client ID from #styleSheet to #ctl00_styleSheet on my VM. You can see in the console that the href of the link is changing with the clicks.