I want to implement a tag input on my form and have the available tags auto-suggested; so these are the libraries I am using:
http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
https://github.com/bassjobsen/Bootstrap-3-Typeahead
This is how I initialize the two libs together:
$(document).ready(function() {
$('input#tags').tagsinput({
typeahead: {
source: ["mysql-server", "apache", "php", "nginx", "phpmyadmin"]
}
});
});
When I begin typing ph it starts suggesting two available tags like this:
When I make a selection, e.g. php - this what happens:
This happens with all tags, it does the tag and then there's a shadow version of the selected tag from the suggestion.
Any ideas?
Related
Is there a way to add a css class name to empty paragraphs in ckeditor so I can target them with css?
Empty paragraphs in ckeditor are not really empty because they contain a br tag so I can not use :empty to target them.
From what I can see, the good thing is that those <br> inside empty paragraphs have an attribute which makes them easy to target.
In the future, you might use a pure CSS solution like this one.
p:has(> br[data-cke-filler="true"]) {
/* styles here */
}
For now, you either have to style the directly.
Depending on what you're trying to accomplish, maybe applying css to the <br> would suffice.
br[data-cke-filler="true"] {
/* styles here */
}
And if you are able to run javascript in ckeditor. This can easely be done today.
Examples : with jQuery
$( "p:has(br[data-cke-filler="true"])" ).addClass( "MyEmptyParagraphsClass" );
or
$( "br[data-cke-filler="true"]" ).parent().addClass( "MyEmptyParagraphsClass" );
Example : with Native Javascript
var brs = Document.querySelectorAll("br[data-cke-filler="true"]");
brs.forEach(function(br) {
br.classList.add("MyEmptyParagraphsClass");
});
In CKEditor 4, you can have a configuration file.
And you can add the custom config with the options here.
In your case, you might need these options :
config.ignoreEmptyParagraph = false;
config.fillEmptyBlocks = false; // Prevent filler nodes in all empty blocks.
Meanwhile in CKEditor 5, you can try these documentations about Block Widget :
Adding a css class to block elements
Inline and block content
I am trying to add CSS when clicked on row or column of table, Following is code
private rowClicked(event: Event): void {
event.srcElement.setAttribute("class", "highlighted");
}
But it's not working as accepted. Am I doing in wrong way, Is there any alternate way to add CSS dynamically?
Note-
Is there any way to add CSS using dom element, my table has thousands of data and to create this table, I have used MetaWidget.
The easiest way to your problem is to assign a unique ID to each included element together with employing another variable to hold selected ID. The logic to turn on my-class CSS class will now be based on the selected ID.
Your new HTML template:
<div (click)="rowClicked(1);" [ngClass]="{'my-class': highlightedDiv === 1}">
> I'm a div that gets styled on click
</div>
Your rowClicked function:
highlightedDiv: number;
rowClicked(newValue: number) {
if (this.highlightedDiv === newValue) {
this.highlightedDiv = 0;
}
else {
this.highlightedDiv = newValue;
}
}
A working demo is here.
More can be found here.
You are using MetaWidget, but you are not mentioning what version you are using.
If you want work with Angular2 and MetaWidget, you should have use a compatible version of MetaWidget, which can be found here-
https://github.com/AmitsBizruntime/MetawidetA2
Using this library will be the best solution for you.
Re-
Angular does not work based on DOM, it works based on Component.
If you like to work on DOM, then you should include jQuery in tour angular project from here-
How to use jQuery with Angular2?
But it is not a good practice.
I am trying to put a autocomplete functionality on a text input , this is working fine if css is not present but if css is present this is not working .
This is my fiddle
and this is my code
var sourcesymbols = ["ONE", "TWO", "THREE"];
jQuery(document).ready(function() {
$("#stock_name").autocomplete({
source: sourcesymbols,
messages: {
noResults: '',
results: function() {}
}
});
});
Could you please let me know how to resolve this .
when you use CSS styling for the text box you will hide the data list (auto complete list data) you can try an alternative as shown in this link - Datalist
I have spent the last few hours trying to work out how to use the Semantic UI dropdown module. I'm almost there... My code works perfectly and retrieves from a remote dataset. My only issue is that the dropdown does not perform the search when focusing on the element (tabbing to it, clicking it, etc). I need it to perform an empty search when focused. The only way to do an empty search is to press space bar then backspace to bring up the whole dataset.
JavaScript
$('.qb .product .field').dropdown('setting', {
apiSettings: {
url: '<domain>/api/v1/product/find/{query}'
}
});
HTML
<div class="ui dropdown floating fluid search selection field">
<input type="hidden" name="product_id">
<div class="default text"></div>
</div>
Remote JSON Object - Not all of them as there are many
{
"results":[
{
"id":1,
"name":"Voluptatem",
"created_at":"2015-09-23 16:31:29",
"updated_at":"2015-09-23 16:31:29"
},
{
"id":2,
"name":"Excepturi",
"created_at":"2015-09-23 16:31:29",
"updated_at":"2015-09-23 16:31:29"
},
{
"id":3,
"name":"Something",
"created_at":"2015-09-23 16:31:29",
"updated_at":"2015-09-23 16:31:29"
}
]
}
So just to clarify. When typing "v" into the search box then product with ID 1 is visible. When I press backspace to provide "" all results are returned. I need the latter to show on element focus. And nothing seems to be working at all.
Thank you.
Unfortunately I have had the same issue as you. One workaround I had, was to use the Semantic UI search function and set minCharacters = 0. However, if you need some of the more specialized features of dropdown (e.g. multiselect) then you are out of luck for now.
$('.search').search({
minCharacters: 0,
apiSettings: {
...
...
}
});
This will give you a dropdown like GUI, but will only let you select a single element.
These two URLs point to files which are identical except for one thing:
mobileCSS.html
noCSS.html
The mobileCSS.html file contains this line:
<link rel="stylesheet" href="/code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css">
The noCSS.html file has the same line commented out:
<!--link rel="stylesheet" href="/code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css"-->
Both pages use AngularJS to populate two <select> elements, one of which acts as a slave to the other. Both also contain a set of checkboxes to show the internal state of the model.
When jquery.mobile-1.4.3.css is used:
The initial values of the <select> elements are not displayed
The checkbox inputs do not update
Is this a known issue? Can you suggest a workaround for this?
Partial solution: correctedCSS.html
This reveals that jQueryMobile is not correctly updating, and that the decorations it adds hide the fact that the <select> and <checkbox> elements are being correctly updated by AngularJS:
.ui-checkbox .ui-btn {
z-index:0; /* in jquery.mobile-1.4.3.css, this is set to 2 */
}
.ui-select .ui-btn select {
opacity:1; /* in jquery.mobile-1.4.3.css, this is set to 0 */
}
Screenshots http://dev.lexogram.com/tests/angularJS/angularVSjqueryMobile.png
I am not too good at angular because I am also at learning stage but as per my knowledge something like below code can help.
JS
$scope.endonyms = [{code: "en", name: "English" }, { code: "fr", name: "Français" }];
$scope.selectedOption = $scope.endonyms[2];
HTML:
<select ng-options="endonym as endonym.name for endonym in endonyms"
ng-change="setSource()" ng-model="selectedOption">
The solution is as #Omar suggested:
you need to refresh checkboxes $(element).checkboxradio("refresh") and selectmenus $(element).selectmenu("refresh") after updating their values dynamically
However, timing is an important issue. When the AngularJS controller is first created, the jQueryMobile decorative elements have not yet been created, so they cannot be refreshed. Also, when AngularJS changes the value of a $scope property, the corresponding DOM element is not immediately updated, so calling "refresh" in the next line is pointless.
// Delay initial "refresh" until the page is ready
$(function () {
$("#source").selectmenu("refresh");
$("#target").selectmenu("refresh");
$("input[type='checkbox']").checkboxradio("refresh");
})
// Wait 1 millisecond before refreshing an item whose $scope property has been changed
function refreshChangedItems() {
window.setTimeout(function () {
$("input[type='checkbox']").checkboxradio("refresh");
$("#target").selectmenu("refresh");
}, 1)
}
You can find these fixes in solutionCSS.html