Develop Reference

Semantic ui dropdown, prevent auto select with input element

I added an option to the dropdown that allows user to add item if it doesn't exist.
For that matter, I added an input field to the dropdown but when the user enters something, the dropdown tries to match the entered text with items that are already in the list.
I find it quite annoying in that specific case. I have noticed in the docs that input elements are bound to the search function. Nevertheless, I couldn't find how to disable this behaviour.
Here's the HTML:
<div class="ui fluid selection dropdown playlist">
<input name="playlist" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">playlist</div>
<div class="menu">
<div class="item create" data-value="0">
<span class="create-placeholder">+ new playlist</span>
<div class="ui action input add-playlist">
<input placeholder="new playlist">
<button class="ui button">Add</button>
</div>
</div>
<div class="item" data-value="1">foo</div>
<div class="item" data-value="2">bar</div>
<div class="item" data-value="3">baz</div>
</div>
</div>
The .add-playlist div and its content are not shown but I'm willing to spare you with the CSS here.
And the js:
$dropdown = $('.ui.dropdown');
$dropdown.dropdown({
action: (text, val) => {
if (val == 0) { // eslint-disable-line
$('.create-placeholder').hide(100);
$('.add-playlist').css('display', 'inline-flex');
$('.add-playlist input, .add-playlist button').show(200);
}
else $dropdown.dropdown('set selected', val).dropdown('hide');
},
onHide: () => {
// do that after dropdown has been hidden
setTimeout(() => {
$('.add-playlist, .add-playlist input, .add-playlist button').hide();
$('.create-placeholder').show();
}, 400);
}
});
I've set up a fiddle to have a clear exemple. Just type "foo" and you'll see what I mean in case it's not crystal clear.

To allow user to add new items just add allowAdditions: True To dropdown options, for more informtions see semantic-ui dropdown settings
Example:
$('dropdownSelector').dropdown({
allowAdditions: True
}).dropdown();

Bootstrap Tooltip remains stuck

I am dynamically creating a div using jquery which contains add & close button. I am using Bootstrap tooltip for the add & close buttons. The problem that I am facing is Tooltip of the first add button doesn't gets hidden even when the mouse is hovering other add button. The tooltip of first add button remains as it is.(Refer screenshot) Any idea as to how to make it hidden.
I am using jquery clone method to create the dynamic divs.
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(".appendClass:first").clone().appendTo".addFiles");
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
});
Also for hiding the tooltips, I am using the below code but still the first tooltip is not getting hidden.
$(document).on('mouseleave','[data-toggle="tooltip"]', function(){
$(this).tooltip('hide');
});
updated HTML Code
<div class="row addFiles">
<div class="appendClass" style="margin-bottom: 1.5%;">
<label style="white-space: nowrap;" class="responsive-enter-details col-sm-3 control-label">Select Files</label>
<div class="col-sm-8 col-md-9">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput">
<i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename">Click to select file</span> <i class="fa fa-upload pull-right"></i>
</div>
<input id="inputfile" type="file" style="display: none;">
</div>
</div>
<button class="btn btn-box-tool addFilesBtn" data-toggle="tooltip" title="Click to add more files">
<i class="fa fa-plus"></i>
</button>
<button class="btn btn-box-tool closeFilesBtn" data-toggle="tooltip" title="Click to remove this block">
<i class="fa fa-times"></i>
</button>
</div>
</div>
Link to JS Fiddle:
https://jsfiddle.net/gLkrsbxc/4/
As you can see in JS Fiddle, the tooltip isn't getting closed.

Please check the last update for solution
As mentioned in the docs at http://getbootstrap.com/javascript/#tooltips, you need to initialize all the tooltips e.g.
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
So, here you just need to initialize the tooltips after adding them to the DOM.
Just add $('[data-toggle="tooltip"]').tooltip() in your click function after cloning.
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(".appendClass:first").clone().appendTo".addFiles");
//initialize tooltips(add this line)
$('[data-toggle="tooltip"]').tooltip();
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
});
And I think if initialized properly, you won't need the hide function.
Update:
I think calling the initializing function doesn't work properly because it is a problem when dom manipulation operations are performed. Add slight delay after the append function and before the initializing function with setTimeout like this:
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(".appendClass:first").clone().appendTo".addFiles");
//initialize tooltips(give some time for dom changes)
setTimeout(function() {
$('[data-toggle="tooltip"]').tooltip();
}, 50);
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
});
Update 2
Just hide the tooltip of the button you just clicked before cloning:
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
//hide the tooltip
$(this).tooltip('hide');
$(".appendClass:first").clone().appendTo(".addFiles");
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
});

in meteor how to stop functionalities to work at a time?

In meteor, I have created a cards dynamically after submitting the form. and the dynamic card contains the show and hide buttons. When I click on show option button the hidden part is showing for all the cards instead of that particular card. the problem is the card is creating dynamically so I thought that is problem .. how to make the functionality to work separately to the each card.
Here I am attaching the code:
<div id="newActionCard">
{{#each newaction}}
<div class="workflowcard">
<div class="module-card">
<div class="res-border"></div>
<div class="card-img"></div>
<div class="res-content">
<div class=" assigned-team">{{team}}</div>
<div class=" newaction-name">{{action_title}}</div><hr>
<div class="description">{{description}}</div>
<div class=" due-on">Due on:{{d_date}}</div><hr>
<div class="subcontent">
{{> actioncardsubcontent}}
</div>
<div class="reqext">
{{> requestextensioncard}}
</div>
</div>
<div class="due">
Due on:
<div>
<span class="day-stamp">THU</span><br>
<div class="date-stamp">26</div>
<div class="month-stamp">AUG
</div>
</div>
</div>
</div>
<div class="btn-box newaction">
<button type="button" class="cancelsub" >New Action</button>
<button type="submit" class="createbtnsub" >Show Options</button>
</div>
<div class="btn-box showoption">
<button type="button" class="hideoption" style="display:none">Hide Options</button>
</div>
{{/each}}
</div>
In JS I have written the hide and show functionalities in the events..now how to stop functionality to all cards at a time.
Here is my JS:
Template.workflow.events({
"click .createbtnsub" : function() {
$( ".subcontent" ).show();
$('.createbtnsub').hide();
$('.cancelsub').hide();
$('.hideoption').show();
$('.requestextension').show();
},
"click .hideoption": function(){
$('.subcontent').hide();
},
"click .hideoption": function(){
$(".subcontent").hide();
$('.cancelsub').show();
$('.createbtnsub').show();
$('.requestextension').hide();
$('.hideoption').hide();
$('.reqext').hide();
},
"click #createActionBtn": function(){
$('#createAction').hide();
$('.editw').show();
$('.hidew').show();
},
});
Template.actioncardsubcontent.rendered = function(){
this.$(".subcontent").hide();
};
Template.requestextensioncard.rendered = function(){
this.$(".reqext").hide();
};
Template.workflow.helpers({
getWorkflow: function(){
return Workflow.find();
},
user: function(){
return Meteor.users.find({});
},
getNewaction: function(){
return Newaction.find();
},
});

Please see the following and adjust the selectors as needed:
"click .showoption": function(event){
$(event.currentTarget).next('button').show();
}
This will work for selecting sibling elements, however as a tip I would recommend rewriting your template.helper that returns the cards data from the database into something more specific.
Something like dynamic classes based on index or id so your class/id names would return as follows .showoption-12kjddfse4 . Then you can just get the attribute of the current target and apply it to your js selector.
Also as kind of an explination to why all buttons were showing, is you were using the class selector, which is meant for grabbing groups of elements/nodes. This is also another reason to created more specific classnames/ids to your use case.
So in your class name you could do something like
<button class="showoption" id="{{_id}}">button</button>
<button id="hiddenoption-{{_id}}" class="hiddenoption">button</button>
Then selecting your elements would be easier as follows:
'click .showoption'(event) => {
let id = event.currentTarget.getAttribute(id);
document.getElementById('hiddenoption-'+id).style.display = 'block';
}

Bootstrap Popover with textarea resetting text value

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

how to change values in a hidden chunk of html code

I have this hidden block of code that i want to call based on the values that are received from server:
<div id="hiddenChart" style="display:none;">
<li style="height:auto;">
<div class="col-sm-4" id="chart_0_0">
<div class="panel panel-success" style="width:550px; height:auto;" id="accordion_0_0">
<div class="panel-heading">
<div class="btn-group" style="float:right;">
<i class="glyphicon glyphicon-minus" id="minimize_0_0"></i>
<i class="glyphicon glyphicon-remove" id="close_0_0"></i>
</div>
<h3 class="panel-title">title</h3>
</div>
<div class="panel-body" style="height:400px;">
<nvd3-multi-bar-chart data="Sec1Graf1Data" id="dataChart_0_0" height="400" showXAxis="true" reduceXTicks="true" showYAxis="true" showLegend="true" showControls="true" tooltips="true">
<svg></svg>
</nvd3-multi-bar-chart>
</div>
</div>
</div>
</li>
</div>
but i need to change some values: ids, tags, data variables.
I know how to show the code using "$('ul').append($('div').html());" but i have to change it before doing it.
How can i do it?
How do i define in which fields i have to insert the string i'me receiving?
Thk
UPDATE:
I was able put it to work, here is the fiddle with it fiddle.
When i inspect the element, the ids that i want to change, instead of #1, it returns chart_0_0.
Thank you all for your posts and help

You can get a reference to your div like this:
var $div = $('#hiddenChart');
To clone it,
var $clonedDiv = $div.clone();
Then, in the $cloneDiv object, you make the changes:
$clonedDiv.find(--selector of a node--).attr(atributeName, atributeValue); //change/add attribute
$clonedDiv.find(--selector of a node--).removeAttr(atributeName); //remove attribute
And so on. I won't explain how jQuery works, Lekhnath gave you a link.
Finally you insert the $clonedDiv with .appendTo() wherever you want. The original div remains untouched so you can clone it again and again.

Jquery Change text/html from a hidden div content :
Simple
maintain a copy of the hidden content
replace the content based on the element class/id selector with the server response
then paste the html into another div
replace the content of the hidden back to original (optional)
http://jsfiddle.net/austinnoronha/ZJ3Nt/
$(document).ready(function(){
var serverRes = {
title: "New Title In Header",
body: "New body text from server <\/br><nvd3-multi-bar-chart data=\"Sec1Graf1Data\" id=\"dataChart_0_0\" height=\"400\" showXAxis=\"true\" reduceXTicks=\"true\" showYAxis=\"true\" showLegend=\"true\" showControls=\"true\" tooltips=\"true\"><svg><\/svg><\/nvd3-multi-bar-chart>"
};
var tmpOldCont = $("#hiddenChart").html();
var counter = 1;
$(".serverres").click(function(){
$("#hiddenChart").find(".panel-body").html(counter + " = " + serverRes.body);
$("#hiddenChart").find(".panel-title").text(serverRes.title + " " + counter);
counter++;
$(".box-container").html($("#hiddenChart").html());
$("#hiddenChart").html(tmpOldCont);
});
});