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
Related
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?
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 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.
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.
A friend and myself are trying to workaround IE (7/8). We have built a canonical example here:
http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm
Using a CSS menu, we would like to have selects in them. However, in IE, the menu goes away when you interact with the select box. We believe this has to do with a bug in how selects affect events.
Is there a workaround? At least with pure CSS or DOM hacks?
I do not think there is a pure CSS way around this. This is due to a very common bug to the way IE handles events on select elements.
You can however work around it with Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.nav_element a').mouseover(function() {
$('.submenu').hide();
$(this).parent().find('.submenu').show();
});
$('.submenu').mouseover(function() {
$(this).show();
});
$('.submenu').mouseout(function (e) {
// Do not close if going over to a select element
if (e.target.tagName.toLowerCase() == 'select') return;
$(this).hide();
});
});
</script>
The code above uses jQuery.
Here is a way to improver select behavior in IE7/8, but it does not fix the issue
Change DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Add script
<script>
function ddlOut(e) {
setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000)
}
</script>
Add css
#nav .over div.submenu
{
display: block;
}
#nav .nav_element{
behavior: expression(
this.onmouseover = new Function("this.className += ' over'"),
this.onmouseout = new Function("ddlOut(this)"),
this.style.behavior = null
);
}
It will work better at least but of course not perfect.
My advice is to change select control to html equivalent. I use OboutDropDown that has a nice view. There are many implementations that can suite you needs.
First you need to expand the :hover surface underneath your menu.
So in your css add width:310px;height:220px to #nav .nav_element a.
(also add a class or an id on the second div styled with top:220px)
Now you just need to simulate a mousedown triggered when you click on the select which will halt when the selection between the options is done - you can probably do the last part if you check for the onfocus state of the select which will stop the mousedown.