image of the issue
When I try to remove the specified data from this dropdownlist I am still left with a selectable white space where the item use to be, this is the case even if I try to specify by id, I attached an image to demonstrate the issue. Any suggestions would be greatly appreciated
{
contentElement.append(
$("<p>All boardrooms are available at this time.</p><br/>"),
$("<div style='margin-top:10%' />").attr("id", "selector").dxSelectBox({
placeholder: "Choose the boardroom you would like to book",
//
valueExpr: "id",
displayExpr: function(item) {
if(item && item.name != "Training Room" && item.name != "Ada Lovelace" && item.name != "Alexander G Bell")
return item.name + " " + '('+item.seats+ " "+'seats'+')';
},
onOpened: function(e){
e.component.option("dataSource", availBoardrooms)
e.component.getDataSource().reload();
},
onValueChanged: function(e){
$("[name='boardroom']").val(e.value);
$("[name='boardroom']").change();
window.name = quickSelectDate;
}
})
)
}
I presume you are getting invalid data from your data source, you can add a slight validation where you are adding the dropdown options
onValueChanged: function(e){
if(e.value.length)
{
// Add dropdown option
}
}
Related
i'm build a web-app chat and i make a upload system on it,
first i make a image input[type="file"]
then a record button [upload as wav]
example:
anyway i I am viewing files with if(condition) ,
example :
if (data.file == 'audio') {
$('<audio style="display:block;width:250px;" controls src="' + data.message + '"></audio>').appendTo($('.messages ul'));
}else if (data.file == 'image'){
$(''<img class="imageChat" ' +
'src="' + filterXSS(data.message) + '"' +
'href="' + filterXSS(data.message) + '"' + '>'
+).appendTo($('.messages ul'));
}
but what i need is to AUTO-detect file type and create the element based on the type of it ?
Update:
example:
showFile('assets/this-is-img.php?a=b') // will return an $('img') element
i know how to get the file type but i need to pass the file type to script and it will return the preview element like img for photos , iframe for PDFs,audio for audios,etc
is this possible?
thanks in advance :)
Here is a very basic example. The core function here is makeElement(), it takes some basic data passed to it as a object and create a jQuery Object based on the HTML Element.
The heavy lifting is done by fileToElem() which takes some info about the files and can based on the type of file take some conditional actions. If it sees a specific file and has a data template for it.
$(function() {
var files = [{
file: "audio",
message: "assets/this-is-img.php?a=b"
},
{
file: "image",
message: "assets/this-is-img.php?a=b"
}
];
function makeElement(d, t) {
var el = $("<" + d.nodeName + ">", d.attr).prop(d.prop);
if (t != undefined) {
el.appendTo(t);
}
return el;
}
function fileToElem(data, target) {
var item;
switch (data.file) {
case "audio":
item = makeElement({
nodeName: "audio",
attr: {
class: "audioChat",
style: "display:block;width:250px;",
src: data.message
},
prop: {
controls: true
}
}, target);
break;
case "image":
item = makeElement({
nodeName: "img",
attr: {
class: "imageChat",
src: data.message
},
prop: {}
}, target);
break;
case "video":
item = makeElement({
nodeName: "video",
attr: {
class: "videoChat",
src: data.message
},
prop: {
controls: true
}
}, target);
break;
case "pdf":
item = makeElement({
nodeName: "a",
attr: {
class: "pdfChat",
href: data.message,
target: "_BLANK"
},
prop: {}
}, target);
break;
}
// Do other things with 'item' if needed here
}
$.each(files, function(i, data) {
var listItem = $("<li>").data("date", new Date().toString()).appendTo($(".messages ul"));
fileToElem(data, listItem);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="messages">
<ul></ul>
</div>
You can keep adding more conditions to your switch() based on the file types you expect. If you're not familar with switch() it's a complex if handler.
The switch statement evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case, as well as statements in cases that follow the matching case.
See More: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch
Hope that helps.
Assuming that the user can only upload one file at a time, you can get the filelist from the input[type=file] document.getElementById("Id of the input").files[0]. It returns a file object which has a type property. Hope this helps
I have a grouped (by users' lastnames) TreeTable (Webix). Here's the config:
columns:[
{ id:"lastname", template:function(obj, common){
return common.icon(obj, common)+obj.lastname
} }
],
scheme:{
$group:{
by:function(obj){
return obj.lastname.substring(0,1); // grouping by first letter
},
map:{
lastname:[function(obj){
return obj.lastname.substring(0,1);
}]
}
}
},
The snippet (the same config, another dataset)
With the map property template shows the first letter as the branch title. But I can't figure out how to show the count of the items in each branch. Something like
A (18)
B (5)
and so on. How to do this? Thanks.
you have to customize the template function of your columns such that for obj.$level==1 in the group it shows the count of elements (obj.$count) along with the title and for others it shows only the title. The required code is below :
webix.ui({
view:"treetable",
id:"treetable",
columns:[
{
id:"title", header:"Film title", width:250,
template:function(obj, common){
if(obj.$level == 1){
return common.icon(obj, common)+ obj.title + " ( " + obj.$count + " ) " ;
}
else{
return common.icon(obj, common)+ obj.title ;
}
}
}
]
/****Your Code***/
});
I'm wondering if it is possible to show specific JSON data, based on a choice made with a checkbox.
At this moment I have specific JSON data with peoples names, department, sex and internet usage.
I've managed to show this data by name, department and I drew a bar for the usage.
I've made two checkboxes that show this JSON data when checked. However at this particular moment they still show the same data. I need to find a way to sort it out, after trying certain things, it's kinda getting lost on me.
This is the code for getting the JSON data, showing it and the checkboxes + the code behind it:
JS :
$(document).ready(function() {
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="female") {
$(".female").toggle();
}
if($(this).attr("value")=="male") {
$(".male").toggle();
}
});
});
ajax();
function ajax() {
$.ajax({
url:"wifi_data.json",
dataType:"json",
success: function(data) {
//if(data.geslacht == "man") {
$.each(data, function(index, item) {
$('#females').append('<br>Name: ' + data[index].voornaam + ' ' + data[index].achternaam +
'<br>Department: ' + data[index].afdeling +
'<br>Usage: ' + '<div style="width:'+
data[index].verbruik*0.001
+'px;height:10;border:2px solid ; background-color:red;"></div>' +
'<div style="'+ '<br>Sex: ' +
data[index].geslacht +'"></div>' );
});
//}
//if(data.gelsacht =="vrouw") {
$.each(data, function(index, item)
{
$('#males').append('<br>Name: ' + data[index].voornaam + ' ' + data[index].achternaam +
'<br>Department: ' + data[index].afdeling +
"<br>Usage: " + '<div style="width:'+
data[index].verbruik*0.001
+'px;height:10;border:2px solid ; background-color:red"></div>' );
});
//}
}
})
}
HTML :
<div>
<label><input type="checkbox" name="colorCheckbox" value="female"> Show Female Members</label>
<br>
<label><input type="checkbox" name="colorCheckbox" value="male"> Show Male Members</label>
</div>
<div class="female box">
<div id="females"></div>
</div>
<div class="male box">
<div id="males"></div>
</div>
What I've tried to do here with the commented parts of the code (and some code that is removed) is to only append males when "geslacht"(sex) is man(male) or vrouw(female).
I've also tried to append the sex and to then put it in a div and hide it. In order to maybe check if male or female is checked, then show the hidden div's with all the men or females in it.
My issue is that I'm having a huge brain fart on the part how to check what is checked, and then only gather the males or females from the JSON file based on choice.
The JSON looks like this:
{
"46": {
"voornaam": "Sergio",
"achternaam": "Bloemenouw",
"verbruik": "100000",
"afdeling": "FHACI",
"geslacht": "man",
"verbruikPercentage": "18.2%"
},
"25": {
"voornaam": "Chayenne",
"achternaam": "Aalberink",
"verbruik": "200000",
"afdeling": "FHEHT",
"geslacht": "vrouw",
"verbruikPercentage": "36.4%"
},
and so on...
Hopefully someone can steer me into the correct direction.
I think the most important thing I need to figure out is how to only show either the females or the males including their name, usage("verbruikPercentage") and department("afdeling")
Your question contains two problems. One is to separate data into male and female parts, and the other one is about showing/hiding the elements.
For the data separation, you need to do the if statement for each data item, since it is the item that contains the geslacht property.
$.each(data, function(index, item) {
var target = item.geslacht === 'man' ? $('#males') : $('#females');
target.append('<br>Name: ' + data[index].voornaam + ' ' + data[index].achternaam +
'<br>Department: ' + data[index].afdeling +
'<br>Usage: ' + '<div style="width:'+ data[index].verbruik*0.001 +
'px;height:10;border:2px solid ; background-color:red;"></div>' +
'<div style="'+ '<br>Sex: ' + data[index].geslacht +'"></div>');
});
For the toggling, I didn't see anything wrong for now. You can focus on the data processing part for now, and do more debugging on it later.
Your if condition should be inside $.each() loop as follows:
$.each(data, function(index, item) {
if(item.geslacht == "man") {
}
else if(item.geslacht == "vrouw")
{
}
})
I want to get the json data from a file which has a nested JSON objects, like this.
{
"userId": "1",
"data": {
"id": 1,
"name" : "Lorem Ipsum",
"value" : "Salut Dolor"
}
}
And once I get it I want to create a select object with the Id as the displayed text and append it to a div.
Once the select object is created, I also want to automatically open the select options when the page gets loaded.
Once a value is selected from there, I want to display the name that is present in the json for that id.
I'm able to fetch only the UserId from this code, how will i meet the requirements?
$.ajax({
url: 'obj.json',
dataType: 'JSON',
success: function (data) {
var items = [];
$.each(data, function (key, value) {
items.push('<option id="' + key + '">' + value + '</option>');
});
$('<select/>', {
class: 'intrest-list',
html: items.join('')
}).appendTo('body');
},
statusCode: {
404: function () {
alert("There was a problem");
}
}
});
what is this good for? do you want to fetch more then 1 user in the future?
you could so something like this:
//user.json
[{id:1,name:'xxxx'},...]
....
for(var i = 0;i<data.length;i++){
items.push('<option id="' + data[i].id + '">' + data[i].name+'</option>');
}
...
or in your case, you can access it directly with:
data.data.id
data.data.name
data.data.value
would get you the right values
Solved it myself. Although i came up with an alternative to display the list of select elements as:
<select name="" id="details" size="2"></select>
also created a container to post the values of the JSON object selected from the select box:
<div id="container"></div>
and the jQuery part where the magic happens goes like this:
$.getJSON('obj.json', function(obj) {
$.each(obj, function(key, value) {
$("#details").append('<option>'+ value.name +'</option>')
});
$( "select" ).change(function () {
var value = $( "select option:selected").val();
$.each(obj, function(key, val) {
if (val.name == value) {
$("#container").html(val.value);
}
});
});
});
This pretty much made the select box as a list of items and the value.name selected in it makes the value.value visible in the div container.
I have a table consisting of rows with inputs. Rows are cloned and added dynamically whenever an autocomplete value is selected in the first input of each row.
Each time a new row is added, I want to apply .autocomplete to the first input. Normally this is easy, as seen in this jsfiddle.
I have a somewhat different approach, where I'm changing the ID of the input where a selection is made. I think that's why I'm unable to apply autocomplete to the cloned line, but I can't figure out why??
Here's the code in question (jsfiddle here)
// Make new line. (I have additional code for improved functionality in my production code)
function newLine() {
// Send the line to backend for updating mysql. Data returned is
// the mysql id for the "autocompleted" line. Emulated here by a random number
var randomNumber = Math.floor(Math.random() * 100) + 1
$("#idLine0").attr("id", "idLine" + randomNumber)
//Make clone of the last line
var row = $("#test tr:last").clone(true);
//Give the ID "idLine0" (which I've reserved for the bottom line) to the new line.
$(".AC", row).val("").attr({
"id": "idLine0",
"placeholder": "Autocomplete does not work here"
})
row.insertAfter("#test tr:last");
//$(".AC").autocomplete("destroy")
applyAutocomplete("#idLine0")
}
function applyAutocomplete(id) {
$(id).autocomplete({
source: [{
value: "ActionScript",
type: "type 1",
comment: "none"
}, {
value: "TestScript",
type: "type 2",
comment: "lots"
}, {
value: "AlphaScript",
type: "type 3",
comment: "even more"
}, {
value: "BravoScript",
type: "type 4",
comment: "lots and lots"
}, {
value: "CharlieScript",
type: "type 5",
comment: "comment"
}, {
value: "DeltaScript",
type: "type 6",
comment: "no comment"
}],
minLength: 1,
open: function (event, ui) {
var header = "<li style='border-bottom: 1px solid black; padding-top: 10px;'>" +
"<a style='font-size:1em;font-weight:bold; display:inline-block;'>" +
"<span class='ui-span'>Product</span><span class='ui-span'>Type</span>" +
"<span class='ui-span'>Comment</span></a></li>"
$("ul.ui-autocomplete[style*='block']").find("li:first").before(header);
},
select: function (event, ui) {
console.log($(this.element))
newLine()
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li>")
.data("ui-autocomplete-item", item)
.append("<a><span class='ui-span'>" + item.value +
"</span><span class='ui-span'>" + item.type +
"</span><span class='ui-span' style='width:250px;'>" + item.comment + "</span></a>")
.appendTo(ul);
};
}
After working on your problem a bit, i've seen this line:
var row = $("#test tr:last").clone(true);
And this line is the problem, more specifically the "true" bool parametter.
As you can see on jquery .clone docs:
A Boolean indicating whether event handlers should be copied along with the elements...
This basically means that everything on that element will be clonned, handdlers, triggers, etc... Every time you use your first input element, you will be able to see the autocomplete working and cloning lines.
So, change this:
var row = $("#test tr:last").clone(true);
To this:
var row = $("#test tr:last").clone();
I've made a more "clean" version of your jsfiddle: http://jsfiddle.net/JuanHB/8uhNq/3/