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.
Related
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
I have a serious issue with .sortable and all the iframe texteditors out there.
I have the following example code:
html:
<div id="content" style="height: 400px;">
<div><textarea></textarea></div>
<div><textarea></textarea></div>
</div>
script:
$("#content").sortable();
This makes the two textareas draggable. No problems till here... Now lets add the wysiwyg editors...(I tried many of them ckeditor, tinyedit, tinymce, elrte, and so on)
As an example lets do it with tinyMCE:
function ini(){
tinymce.init({
menubar : false,
toolbar1: "bold | link",
selector: "textarea",
});
Ok so this is where the problems are rising. If I know drag and drop the one textarea just a little bit, the editor field is going to disable itself.
What did I try until this moment:
- I added start and stop events to the sortable method, but without success.
- I tried the frameFix: true also without any differences in behaviour.
Anyone with some hints or solutions?
Thx
Cervisias
I figured out a solution. Its a total workaround but it works :)
So basically what I am doing is to save the content of every texteditorfield into an array and putting it back to the editor after the use of the sortable method.
so it looks like:
$("#content").sortable({
start: function(){
newEditors = new Array();
for(i=0; i < $("textarea").length; i++){
var content = tinyMCE.get(tinyMCE.editors[i].id).getContent();
var id = tinyMCE.editors[i].id;
newEditors[i] = {"id":id, "content":content};
}
tinyMCE.remove(); //as a fix for FF
},
stop: function(){
ini(); //re-initiate the tinymce again (if you don't do that, the field wont be editable)
for(var nr in newEditors){
tinyMCE.get(newEditors[nr].id).setContent(newEditors[nr].content);
}
}
});
So if sb has the same problem and figures out an other way to solve it, would be nice to see those solutions too.
Thx
Cervisias
In my web app (c#/MVC3), I have a huge set of checkboxes in a table. Rather than a table of checkboxes, I'd like for it to look like a wall of toggle buttons. To the user I want it to look like a wall of buttons and when they click one it is 'checked' and the button changes color.
I wasn't sure if there was CSS that could make a checkbox do this (look like a button and change colors on check rather than show a check mark), or if I would have to use some combination of buttons and javascript/jquery and hidden checkboxes or what.
The jQuery UI Button widget can handle that:
http://jqueryui.com/button/#checkbox
Yes, it is definitely possible to do what you want with pure CSS.
I think you should check out the jsFiddle mentioned on this question.
Radio buttons are generated by the operating system and cannot be easily styled.
If you wany something different you need to generate it using CSS/images and JavaScript.
First of all, I'd actually avoid doing this for usability concerns but if you still want to then read on.
This is actually quite tricky to achieve but it is possible. My solution avoids the need to assign individual IDs to your check-boxes.
Essentially, you will need an image sprite for the "on" and "off" states which you will position with the CSS background-position property, using a toggle class. Then, the following jQuery will allow you to not only swap the image state, but also confirm the respective checkbox as checked or unchecked for use of the form. Do note, that the "actual" checkbox is hidden from view but the functionality remains.
<form>
<input type="checkbox" class="custom" />
</form>
<style type="text/css">
.checkbox {
clear:left;
float:left;
background:url('your_image');
background-position:top;
width:20px;
height:20px;
display:block;
}
.toggled {
background-position:bottom !important;
}
</style>
$(document).ready(function () {
var checkboxes = $('form .custom'),
custom = $('<span></span>').addClass('checkbox');
checkboxes.before(custom);
checkboxes.css('visibility', 'hidden');
$('.checkbox').click(function () {
$(this).toggleClass('toggled');
var isChecked = $(this).next(':checkbox');
var value = isChecked.prop('checked') ? 'true' : 'false';
if (value == 'false') {
isChecked.prop('checked', true);
} else {
isChecked.prop('checked', false);
}
});
});
You will, of course, have to edit the CSS to suit your exact needs. I hope this helps as this task was deceptively non-trivial.
I'd like to attach images to specific words but cannot find the right CSS selector to do so.
I have a portion of my site which displays data as it's pulled from a database, so adding classes or id's to certain words is not an option for me. I need the css to simply display a background image wherever that word (or in this case, name) is found on the page.
For example, in the following (which is pulled from a database):
<td class="data1"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Patrick</font></td>
I would like to add a background image where the name Patrick is found.
I tried variations of,
td[.table1 *='Parick'] {
background-image:url(../images/accept.png);
but that didn't get me anywhere. And since it's not in a <span> or <div> or even a link, I can't figure it out. If you have any ideas or a jQuery workaround, please let me know. Thanks!
If you can guarantee the names only appear as the only text nodes in elements, you can use a simple jQuery selector...
$(':contains("Patrick")').addClass('name');
jsFiddle.
If there may be surrounding whitespace and/or the search should be case insensitive, try...
$('*').filter(function() {
return $.trim($(this).text()).toLowerCase() == 'patrick';
}).addClass('name');
jsFiddle.
If you need to find the name anywhere in any text node and then you need to wrap it with an element, try...
$('*').contents().filter(function() {
return this.nodeType == 3;
}).each(function() {
var node = this;
this.data.replace(/\bPatrick\b/i, function(all, offset) {
var chunk = node.splitText(offset);
chunk.data = chunk.data.substr(all.length);
var span = $('<span />', {
'class': 'name',
text: all
});
$(node).after(span);
});
});
jsFiddle.
I would recommend using the third example.
is there an Ext-sanctioned way to highlight the default button (the one triggered by pressing Enter) in Ext.MessageBox?
Please note that I do not want to do that by focusing the button when the MessageBox is shown (in case of a "prompt" dialog I want the input element to have focus).
I know I can do that by adding a custom class to the button element but ... maybe there is a better and more Ext-like way of doing this?
Thanks.
In ExtJs 4 you can set the default button as follows:
Ext.MessageBox.defaultButton = buttonIndex;
Where 'buttonIndex' is the index of the button on the dialog. You need to do this before you call Ext.MessageBox.Show.
In short... no. Ext currently provides no method of highlighting a button in any of the Ext.MessageBox components, not via a config option anyway.
There are ways however, depending on the scenario. For example, if you're using Ext.MessageBox.show() (which you can actually use for all message boxes), then you can do something like...
new Ext.Msg.show({
title: 'Test',
msg: 'A sample message box with a button marked as default',
buttons: { ok: '<b>Submit</b>', cancel: 'Cancel' },
fn: function(btn) {
if(btn == 'ok') {
//do something
}
},
icon: Ext.Msg.WARNING
}
All we've done is add <b> tags to one of the buttons in our config, this would show it in bold obviously.
The other way that you've mentioned is to add a custom class and mark the button in a colour of text, you could even just add the class like we did with the <b> tags above to make it easier..
buttons: { ok: '<span class="highlighted-option">Submit</span>', cancel: 'Cancel' },
Other than this style of approach, or without extending the Ext.MessageBox class, there's no other way to achieve this.
Jaitsu has the best answer, but in case this might be useful to somebody else... here is a way to do that with styles.
The same trick can be applied to any other button (like: Window buttons).
Add this to your css:
.x-btn-default td.x-btn-mc {
outline: 1px dotted black;
}
Then define buttons like this:
...
,buttons: [
{
text: 'Ok',
,handler: handleFn
,cls: 'x-btn-default'
},{
text: 'Cancel',
,handler: handleFn
}
]
,...