I have some issues figuring out how to get the selected value in a multi select form from ui-select.
I have made a snippet to show you what I want to do. In my html I have a made an ui-select with an ng-change-event callback: ng-change="onDatasetChanged(whatShouldBehere?)". When the option is selected, I want to print the selected model only inside the onDatasetChanged()-method in my controller.
angular.module('myApp',['ui.select']).controller('MyController', function ($scope) {
$scope.myUiSelect={model:{}}; // encapsulate your model inside an object.
$scope.availableData=["a","b","c"]; //some random options
$scope.onDatasetChanged = function(selectedValue){
console.log("selectedValue",selectedValue);
}
});
<link href="https://rawgit.com/angular-ui/ui-select/master/dist/select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-select/master/dist/select.js"></script>
<body ng-app="myApp" ng-controller="MyController">
<ui-select multiple ng-model="myUiSelect.model" close-on-select="false" title="Choose a dataset" ng-change="onDatasetChanged(whatShouldBehere?)">
<ui-select-match placeholder="Select something">{{$item.label}}</ui-select-match>
<ui-select-choices repeat="data in availableData | filter:$select.search">
{{data}}
</ui-select-choices>
</ui-select>
</body>
After a bit of research on the repository page for the ui-select-directive
I figured you could use an on-select event binding like this:
on-select="onSelect($item, $model)". See the updated snippet:
angular.module('myApp',['ui.select']).controller('MyController', function ($scope) {
$scope.myUiSelect={model:{}}; // encapsulate your model inside an object.
$scope.availableData=["a","b","c"]; //some random options
$scope.onSelect = function(item,model){
console.log("selectedItem",item);
}
});
<link href="https://rawgit.com/angular-ui/ui-select/master/dist/select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-select/master/dist/select.js"></script>
<body ng-app="myApp" ng-controller="MyController">
<ui-select multiple ng-model="myUiSelect.model" close-on-select="false" title="Choose a dataset" on-select="onSelect($item, $model)">
<ui-select-match placeholder="Select something">{{$item.label}}</ui-select-match>
<ui-select-choices repeat="data in availableData | filter:$select.search">
{{data}}
</ui-select-choices>
</ui-select>
</body>
Related
currently i have something like this
$("#foo").click(function () {callMe();});
$("#bar").click(function () {callMe();});
foo and bar do the same thing. Is there a way for me to define a selector saying either if foo id or bar id is called then trigger the click event ? I tried this but it did not work
$("#foo","#bar").click(function () {callMe();});
you could give them a class and then check the id of the target element:
$('').on('click', function(e) {
if (e.currentTarget.id === 'foo') {
console.log('foo clicked');
} else {
console.log('bar clicked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="click" id="foo">foo</div>
<div class="click" id="bar">bar</div>
Or if I'm misunderstanding the question and you just want to select both elements using their ids, you can just use
$('#foo,#bar').on('click', function() {});
note the comma is in the quotes, not separate quotes
The syntax and the code looks fine, I think you haven't imported jQuery properly.
I tried the same, and it works fine. Have a look at the code below.
function callMe () {
alert("callMe function called!");
}
$("#foo, #bar").click(function () {callMe();});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="foo"> foo </button>
<button id="bar"> bar </button>
document.getElementById("demo").addEventListener("click", callMe);
function callMe(e) {
let id = e.target.id
console.log(id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo">
<button id="foo">Foo</button>
<br> <br>
<button id="bar">bar</button>
</div>
I want to use the image title (meta data value from below screenshot) to auto display as each images caption underneath each image. Also for Accessibility purposes auto assign this meta value as the 'alt=""' value by default?
Current template code:
<link rel="stylesheet" href="#App.Path/dist/lib/blueimp/css/blueimp-gallery.min.css" data-enableoptimizations="true" />
<script type="text/javascript" src="#App.Path/dist/lib/blueimp/js/blueimp-gallery.min.js" data-enableoptimizations="bottom"></script>
<link rel="stylesheet" href="#App.Path/dist/app/view.css" data-enableoptimizations="true" />
#if(#Dnn.User.IsSuperUser)
{
#Content.Toolbar
} else {
#Edit.Toolbar(Content, actions: "edit,add")
}
<div id="blueimp-gallery-items-#Dnn.Module.ModuleID" style="display:none;">
#foreach (var pic in AsAdam(Content, "Images").Files)
{
<a href="#pic.Url?w=#App.Settings.CarouselImageWidth&h=#App.Settings.CarouselImageHeight&mode=crop" title="#(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID">
#(((dynamic)pic.Metadata).Title)
</a>
}
</div>
#* this is the rotator element *#
<div id='blueimp-gallery-#Dnn.Module.ModuleID' class='blueimp-gallery blueimp-gallery-carousel' data-carousel='true' data-start-slideshow="true">
<div class='slides'></div>
<h3 class='title'></h3>
<a class='prev'>‹</a>
<a class='next'>›</a>
<a class='play-pause'></a>
<ol class='indicator'></ol>
</div>
<script type="text/javascript">
$(document).ready(function () {
// initialize the carousel gallery
blueimp.Gallery($('[data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID"]').get(), {
container: '#blueimp-gallery-#Dnn.Module.ModuleID',
carousel: true
}
);
});
</script>
Also note that when I click on meta data tag, the following error message pop up appears:
Note: Version: 9.2.0
UPDATE:
Changing "Image Metadata" to "ImageMetadata" worked thx.
Still having trouble adding alt tag to each image. title shows but when I set alt to same it doesn't?
<div id="blueimp-gallery-items-#Dnn.Module.ModuleID" style="display:none;">
#foreach (var pic in AsAdam(Content, "Images").Files)
{
<a href="#pic.Url?w=#App.Settings.CarouselImageWidth&h=#App.Settings.CarouselImageHeight&mode=crop" title="#(((dynamic)pic.Metadata).Title)" alt="#(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID">
#(((dynamic)pic.Metadata).Title)
</a>
}
</div>
So you're asking a few things at the same time.
number 1: to use the title you want to check if the image has metadata, and if yes, use that. This code should help (pic is the image-variable in your loop) :
#(pic => !pic.HasMetadata ? "" : ((dynamic)pic.Metadata).Title)
number 2 seems to be an issue in the configuration. as far as I can see, the metadata-button in the default toolbar works. I checked the internal and the field-configuration is wrong - you should change it from "Image Metadata" to "ImageMetadata"
On my HTML5 page I have this code excerpt.
<body>
<script type="text/javascript" >
$(document).ready(function () {
$('#timepicker4').timepicker({
format: 'HH:mm'
});
</script>
// start of page
<div class="header">
<label th:for="timepicker4" th:value="${hourIntervalStart}">Hour Interval Start: </label>
</div>
<div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
<input name="hourIntervalStart" th:field="*{hourIntervalStart}" id="timepicker4" class="form-control tp_interval1"></input>
</div>
</div>
// rest of page
</body>
The problem is that, though the javascript is correctly displaying the time, the controller prints out (for testing purposes) a null value to the hourIntervalStart attribute.
The appropriate javascript library is correctly loaded and accessible from the browser.
How to correctly pass the the selected value to the controller?
Handlebar conditioning seems not to be working in attributes.
in the .js
if (Meteor.isClient){
Template.cards.myCards = function()
{
return ["something.png"];
}
Template.card.isSelected = function()
{
return true;
};
}
in the .html
<head>
<title>test</title>
</head>
<body>
{{>cards}}
</body>
<template name="cards">
{{#each myCards}}
{{>card}}
{{/each}}
</template>
<template name="card">
<div class="{{#if isSelected}}selectedClass{{/if}}">
{{#if isSelected}}selectedContent{{/if}}
</div>
</template>
Gives me (once rendered)
<div class="<!--data:DQhTaW3zefLpaZQ2k-->">
selectedContent
</div>
Where is my "selectedClass" gone ? Why is it replaced by the commented data block ?
Take the code on GitHub
Problem recognised as a bug and issue closed the problem has been fixed in Blaze
I have a html dropdown where the data is binded from database using ajax json .The values are showing according to id and it is binding in dropdown according to selected id. But the problem is after applying jquery mobile css the value is not showing in dropdown. If i dont include the css the val;ue appears in dropdown. What function i need to include for jquery mobile controls.
My code:
<link href="../CSS/themes/default/jquery.mobile-1.1.1.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../CSS/themes/default/my.css" />
<div data-role="fieldcontain" style="width: 50%">
<label for="selectmenu22">
<span style="font-family: times new roman,times; font-size: medium;">
<b>Address Details:</b>
</span>
</label>
<select name="selectmenu22" id="ddlAddressDetails" required="required" data-theme="b" data-mini="true" runat="server">
</select>
</div>
var table=document.getElementById("ddlAddressDetails");
var selectData="";
var data = $.ajax({
url: 'ViewSurvey.aspx',
data: {ID:function(){return EID}},
dataType: 'json',
async: false,
success: function(data, result)
{
if (!result)
{
alert('Failure to retrieve the data.');
}
else
{
for(var i=0;i<data.length;i++)
{
selectData+="<option selected='selected'
value='"+data[i].ID+"'>"+data[i].OriginDestinationAddress+"</option>"
}
table.innerHTML=selectData;
}
}
});
return table;
}
You need refresh your dropdown to update items that are prepared but aren't been showing. Try using:
$('#ddlAddressDetails').selectmenu('refresh');
EDIT
Try using this code to add items to dropdown:
$('#ddlAddressDetails').append($('<option></option>').val(data[i].ID).html(data[i].OriginDestinationAddress));