I try make Turkey Map with balloon text. Console does not give an error, but the graph is not drawn.I thought I should first count the provinces of turkey country. I created a variable called number for this. My rules come from the variable json file as "nufusakayıtılil" name. What is wrong? How have to ı fix my code? A
This is my script:
var data = jQuery.getJSON("http://localhost:8080/personel", function(geo) {
var ilVeSayilar = {}
var personelilVeSayilar = [];
$.each(data, function(index, item) {
var il = null;
if (item.nufusakayitliolduguil != null && item.nufusakayitliolduguil.length > 2) {
il = item.nufusakayitliolduguil;
if (ilVeSayilar[il] == null) {
ilVeSayilar[il] = 0;
}
ilVeSayilar[il]++;
}
});
//console.log(ilVeSayılar);
$.each(ilVeSayilar, function(index, item) {
newitem = {}
newitem["id"] = index;
newitem["value"] = item;
personelilVeSayilar.push(newitem)
})
var defaultMap = "turkeyLow";
var countryMaps = {
"TR-01": ["ADANA"],
"TR-02": ["ADIYAMAN"],
"TR-03": ["AFYONKARAHİSAR"],
"TR-04": ["AĞRI"],
"TR-68": ["AKSARAY"],
"TR-05": ["AMASYA"],
"TR-06": ["ANKARA"],
"TR-07": ["ANTALYA"],
"TR-75": ["ARDAHAN"],
"TR-08": ["ARTVİN"],
"TR-09": ["AYDIN"],
"TR-10": ["BALIKESİR"],
"TR-74": ["BARTIN"],
"TR-72": ["BATMAN"],
"TR-69": ["BAYBURT"],
"TR-11": ["BİLECİK"],
"TR-12": ["BİNGÖL"],
"TR-13": ["BİTLİS"],
"TR-14": ["BOLU"],
"TR-15": ["BURDUR"],
"TR-16": ["BURSA"],
"TR-17": ["ÇANAKKALE"],
"TR-18": ["ÇANKIRI"],
"TR-19": ["ÇORUM"],
"TR-20": ["DENİZLİ"],
"TR-21": ["DİYARBAKIR"],
"TR-81": ["DÜZCE"],
"TR-22": ["EDİRNE"],
"TR-23": ["ELAZIĞ"],
"TR-24": ["ERZİNCAN"],
"TR-25": ["ERZURUM"],
"TR-26": ["ESKİŞEHİR"],
"TR-27": ["GAZİANTEP"],
"TR-28": ["GİRESUN"],
"TR-29": ["Gümüşhane"],
"TR-31": ["HATAY"],
"TR-33": ["MERSİN"],
"TR-76": ["IĞDIR"],
"TR-32": ["ISPARTA"],
"TR-34": ["İSTANBUL"],
"TR-35": ["İZMİR"],
"TR-46": ["KAHRAMANMARAŞ"],
"TR-78": ["KARABÜK"],
"TR-70": ["KARAMAN"],
"TR-36": ["KARS"],
"TR-37": ["KASTAMONU"],
"TR-38": ["KAYSERİ"],
"TR-79": ["KİLİS"],
"TR-71": ["KIRIKKALE"],
"TR-39": ["KIRKLARELİ"],
"TR-40": ["KIRŞEHİR"],
"TR-41": ["KOCAELİ"],
"TR-42": ["KONYA"],
"TR-43": ["KÜTAHYA"],
"TR-44": ["MALATYA"],
"TR-45": ["MANİSA"],
"TR-47": ["MARDİN"],
"TR-48": ["MUĞLA"],
"TR-49": ["MUŞ"],
"TR-50": ["NEVŞEHİR"],
"TR-51": ["NİĞDE"],
"TR-52": ["ORDU"],
"TR-80": ["OSMANİYE"],
"TR-53": ["RİZE"],
"TR-54": ["SAKARYA"],
"TR-55": ["SAMSUN"],
"TR-63": ["ŞANLIURFA"],
"TR-56": ["SİİRT"],
"TR-57": ["SİNOP"],
"TR-73": ["ŞIRNAK"],
"TR-58": ["SİVAS"],
"TR-59": ["TEKİRDAĞ"],
"TR-60": ["TOKAT"],
"TR-61": ["TRABZON"],
"TR-62": ["TUNCELİ"],
"TR-64": ["UŞAK"],
"TR-65": ["VAN"],
"TR-77": ["YALOVA"],
"TR-66": ["YOZGAT"],
"TR-67": ["ZONGULDAK"],
};
// calculate which map to be used
var currentMap = defaultMap;
var titles = [];
if (countryMaps[geo.country_code] !== undefined) {
currentMap = countryMaps[geo.country_code][0];
// add country title
if (geo.country_name) {
titles.push({
"text": geo.country_name
});
}
}
var map = AmCharts.makeChart("chartdiv", {
"type": "map",
"theme": "light",
"colorSteps": 10,
"dataProvider": {
"mapURL": "/lib/3/maps/js" + currentMap + ".js",
"getAreasFromMap": true,
"zoomLevel": 0.9,
"areas": []
},
"areasSettings": {
"autoZoom": true,
"balloonText": "[[title]]: <strong>[[value]]</strong>"
},
"valueLegend": {
"right": 10,
"minValue": "Az",
"maxValue": "Çok!"
},
"zoomControl": {
"minZoomLevel": 0.9
},
"titles": titles,
"listeners": [{
"event": "init",
"method": updateHeatmap
}]
});
function updateHeatmap(event) {
var map = event.chart;
if (map.dataGenerated)
return;
if (map.dataProvider.areas.length === 0) {
setTimeout(updateHeatmap, 100);
return;
}
for (var i = 0; i < map.dataProvider.areas.length; i++) {
map.dataProvider.areas[i].value = Math.round(Math.random() * 10000);
}
map.dataGenerated = true;
map.validateNow();
}
});
<title>map created with amCharts | amCharts</title>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/ammap.js"></script>
<link rel="stylesheet" href="http://www.ammap.com/lib/3/ammap.css" type="text/css">
<script type="text/javascript" src="https://www.amcharts.com/lib/3/maps/js/turkeyLow.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="shortcut icon" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="margin: 0;background-color: rgba(80,80,80,1);">
<div id="map" style="width: 100%; height: 662px;"></div>
Related
In my current code I have two countries that display a popup when clicked and in the popup you can see some links. Links are mapped correctly but my problem is with the links name.
The way I wrote the code so far, is good for displaying the name of link for a country with one link. I'm calling the link name with ev.target.dataItem.dataContext.linkName in the code below:
chart.openPopup("<strong>" + ev.target.dataItem.dataContext.country + "</strong>" + ev.target.dataItem.dataContext.link.map(url => '<br>' + ev.target.dataItem.dataContext.linkName + '').join(""));
How can I write ev.target.dataItem.dataContext.linkName in order to display both names for a country with 2 links? I want Name 2 assigned for https://www.example2.com and Name 3 assigned for https://www.example3.com.
If anyone can help me regarding this issue, I would greatly appreciate it.
am4core.ready(function () {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create map instance
let chart = am4core.create("map", am4maps.MapChart);
// Responsiveness enabled
chart.responsive.enabled = true;
// Set map definition
chart.geodata = am4geodata_worldHigh;
// Set projection
chart.projection = new am4maps.projections.Miller();
// Zoom control
chart.zoomControl = new am4maps.ZoomControl();
let homeButton = new am4core.Button();
homeButton.events.on("hit", function () {
chart.goHome();
});
homeButton.icon = new am4core.Sprite();
homeButton.padding(7, 5, 7, 5);
homeButton.width = 30;
homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
homeButton.marginBottom = 10;
homeButton.parent = chart.zoomControl;
homeButton.insertBefore(chart.zoomControl.plusButton);
// Center on the groups by default
chart.homeZoomLevel = 3.5;
chart.homeGeoPoint = {
longitude: 10,
latitude: 54
};
let groupData = [{
"color": chart.colors.getIndex(0),
"data": [{
"country": "Germany",
"id": "DE",
"link": ["https://www.example1.com"],
"linkName": ["Name 1"]
}, {
"country": "France",
"id": "FR",
"link": ["https://www.example2.com", "https://www.example3.com"],
"linkName": ["Name 2", "Name 3"]
}]
}];
// This array will be populated with country IDs to exclude from the world series
let excludedCountries = ["AQ"];
// Create a series for each group, and populate the above array
groupData.forEach(function (group) {
let series = chart.series.push(new am4maps.MapPolygonSeries());
series.name = group.name;
series.useGeodata = true;
let includedCountries = [];
group.data.forEach(function (country) {
includedCountries.push(country.id);
excludedCountries.push(country.id);
});
let polygonTemplate = series.mapPolygons.template;
polygonTemplate.tooltipHTML = '<b>{country}</b>';
polygonTemplate.events.on("hit", function (ev) {
chart.closeAllPopups();
// Map countries and link encoding
// How to write -> ev.target.dataItem.dataContext.linkName <- in order to display Name 2 and Name 3 separately ?
chart.openPopup("<strong>" + ev.target.dataItem.dataContext.country + "</strong>" + ev.target.dataItem.dataContext.link.map(url => '<br>' + ev.target.dataItem.dataContext.linkName + '').join(""));
});
series.include = includedCountries;
series.fill = am4core.color(group.color);
series.setStateOnChildren = true;
series.calculateVisualCenter = true;
series.tooltip.label.interactionsEnabled = false; //disable tooltip click
series.tooltip.keepTargetHover = true;
// Country shape properties & behaviors
let mapPolygonTemplate = series.mapPolygons.template;
mapPolygonTemplate.fill = am4core.color("#c4a5e8");
mapPolygonTemplate.fillOpacity = 0.8;
mapPolygonTemplate.nonScalingStroke = true;
mapPolygonTemplate.tooltipPosition = "fixed";
mapPolygonTemplate.events.on("over", function (event) {
series.mapPolygons.each(function (mapPolygon) {
mapPolygon.isHover = false;
})
event.target.isHover = false;
event.target.isHover = true;
})
mapPolygonTemplate.events.on("out", function (event) {
series.mapPolygons.each(function (mapPolygon) {
mapPolygon.isHover = false;
})
})
// States
let hoverState = mapPolygonTemplate.states.create("hover");
hoverState.properties.fill = am4core.color("#FFCC00");
series.data = JSON.parse(JSON.stringify(group.data));
});
// The rest of the world.
let worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
let worldSeriesName = "world";
worldSeries.name = worldSeriesName;
worldSeries.useGeodata = true;
worldSeries.exclude = excludedCountries;
worldSeries.fillOpacity = 0.5;
worldSeries.hiddenInLegend = true;
worldSeries.mapPolygons.template.nonScalingStroke = true;
});
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#map {
width: 100%;
height: 600px;
overflow: hidden;
}
#map a,
b {
cursor: pointer;
color: #003399;
text-align: center;
}
#map a:hover {
color: #023432;
}
.ampopup-content {
/* width: 40%; */
text-align: center;
}
.ampopup-header {
background-color: #99000d !important;
}
.ampopup-close {
filter: invert(1);
}
.ampopup-inside {
background-color: rgb(255, 255, 255);
}
.ampopup-inside a {
color: #28a86c !important;
}
.ampopup-inside a:hover {
color: #023432 !important;
}
.ampopup-curtain {
display: block !important;
background-color: rgba(7, 22, 51, 0.7) !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countries popup with links</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div id="map"></div>
</div>
</div>
</div>
<!-- Scripts for loading AmCharts Map -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldHigh.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<script src="js/custom2.js"></script>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
You need to use the index provided by the .map to access the nth element in the
linkName array.
let polygonTemplate = series.mapPolygons.template;
polygonTemplate.tooltipHTML = '<b>{country}</b>';
polygonTemplate.events.on("hit", function(ev) {
chart.closeAllPopups();
const {
links,
linkNames,
country
} = ev.target.dataItem.dataContext;
// Map countries and link encoding
const popupContent = `<strong>${country}</strong><br />
${
links.map((url,urlIndex)=>`${linkNames[urlIndex]}`).join('')
}`;
chart.openPopup(popupContent);
});
I want to manually trigger slickgrid event. For eg: I want to change current cell to move down when i press down arrow. This i can achieve only when slickgrid is in focus, once the focus is lost to the web page, pressing down arrow will not change active cell.
I tried this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SlickGrid example 1: Basic grid</title>
<link rel="stylesheet" href="mycss/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="mycss/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="mycss/examples.css" type="text/css"/>
</head>
<body>
<div>
<p id="p_title"></p>
<p id="p_duration"></p>
<p id="p_Complete"></p>
<p id="p_start"></p>
<p id="p_finish"></p>
<p id="p_effort-driven"></p>
</div>
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="myGrid" style="width:600px;height:500px;"></div>
</td>
</tr>
</table>
<script src="js/lib/jquery-1.7.min.js"></script>
<script src="js/lib/jquery.event.drag-2.2.js"></script>
<script src="js/slick.core.js"></script>
<script src="js/slick.grid.js"></script>
<script src="js/slick.dataview.js"></script>
<script>
var grid;
var dataView;
var curr_row;
var columns = [
{id: "title", name: "Title", field: "title"},
{id: "duration", name: "Duration", field: "duration"},
{id: "%", name: "% Complete", field: "percentComplete"},
{id: "start", name: "Start", field: "start"},
{id: "finish", name: "Finish", field: "finish"},
{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function () {
var data = [];
for (var i = 0; i < 50; i++) {
data[i] = {
id: i,
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
}
dataView = new Slick.Data.DataView();
dataView.setItems(data);
grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.onKeyDown.subscribe(function (e, args) {
if (e.which == 38) {
curr_row= args.row - 1;
sata(curr_row)
}
if (e.which == 40){
curr_row = args.row + 1;
sata(curr_row)
}
});
grid.onClick.subscribe(function (e, args){
curr_row = args.row;
sata(curr_row)
});
});
function sata(row){
var row_data = dataView.getItem(row); // Read from dataView not the grid data
var cell_contents = row_data['title'];
alert(cell_contents);
}
$(document).keydown(function(e) {
if (e.which == 38) {
curr_row= curr_row - 1;
grid.onClick.notify({row:curr_row})
}
if (e.which == 40){
curr_row = curr_row + 1;
grid.onClick.notify({row:curr_row})
}
});
</script>
</body>
</html>
But, even though i can now get active cell data, the grid not updated (render not refreshed)
Any advice on how to make slickgrid to react to such global events will be highly appreciated. Thanks in advance.
This code addresses my issue,
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SlickGrid example 1: Basic grid</title>
<link rel="stylesheet" href="mycss/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="mycss/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="mycss/examples.css" type="text/css"/>
</head>
<body>
<div>
<p id="p_title"></p>
<p id="p_duration"></p>
<p id="p_Complete"></p>
<p id="p_start"></p>
<p id="p_finish"></p>
<p id="p_effort-driven"></p>
</div>
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="myGrid" style="width:600px;height:500px;"></div>
</td>
</tr>
</table>
<script src="js/lib/jquery-1.7.min.js"></script>
<script src="js/lib/jquery.event.drag-2.2.js"></script>
<script src="js/slick.core.js"></script>
<script src="js/slick.grid.js"></script>
<script src="js/slick.dataview.js"></script>
<script>
var grid;
var dataView;
var curr_row;
var curr_cell;
var columns = [
{id: "title", name: "Title", field: "title"},
{id: "duration", name: "Duration", field: "duration"},
{id: "%", name: "% Complete", field: "percentComplete"},
{id: "start", name: "Start", field: "start"},
{id: "finish", name: "Finish", field: "finish"},
{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function () {
var data = [];
for (var i = 0; i < 50; i++) {
data[i] = {
id: i,
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
}
dataView = new Slick.Data.DataView();
dataView.setItems(data);
grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.onKeyDown.subscribe(function (e, args) {
curr_cell= args.cell;
if (e.which == 38) {
curr_row= args.row - 1;
sata(curr_row)
}
if (e.which == 40){
curr_row = args.row + 1;
sata(curr_row)
}
});
grid.onClick.subscribe(function (e, args){
curr_cell= args.cell;
curr_row = args.row;
sata(curr_row)
});
});
function sata(row){
var row_data = dataView.getItem(row); // Read from dataView not the grid data
var cell_contents = row_data['title'];
alert(cell_contents);
}
$(document).keydown(function(e) {
if (e.which == 38) {
curr_row= curr_row - 1;
grid.gotoCell(curr_row, curr_cell)
grid.onClick.notify({row:curr_row, cell:curr_cell})
}
if (e.which == 40){
curr_row = curr_row + 1;
grid.gotoCell(curr_row, curr_cell)
grid.onClick.notify({row:curr_row, cell:curr_cell}, e)
}
});
</script>
</body>
</html>
Please advice, if there is a better way to achieve this.
I have a list generated with json, and it's sortable with RubaXa/Sortable plugin.
I need to add the item position in the list while sorting the list. So when moving an item up or down the item position indicators will change.
I commented some lines with the issue.
Sortable function:
var listPos;
Sortable.create(list-group, {
handle: '.driver',
animation: 150,
onMove: function (evt) {
evt.dragged;
evt.draggedRect;
evt.related;
evt.relatedRect;
listPos = $(this).closest('.list-group').children('.list-group-item').index(this); // error finding the position in the list
console.log(evt); // event is shown in the console
console.log(listPos); // this is showing always -1 after the event
}
});
The json:
[
{
"name": "item 1",
"acr": "it1"
},
{
"name": "item 2",
"acr": "it2"
},
{
"name": "item 3",
"acr": "it3"
},
{
"name": "item 4",
"acr": "it4"
}
]
The HTML:
<div class="col-md-4">
<div id="printList" class="list-group">
</div>
</div>
Parsing/Printing the json:
var xmlhttp = new XMLHttpRequest();
var url = "/list.json";
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(response) {
showListPos = listPos; // showListPost in undefined
var arr = JSON.parse(response);
var i;
var out = "";
var drawPos = "<div class='position'>" + showListPos + "</div>"; //
for (i = 0; i < arr.length; i++) {
out += "<div class='list-group-item'>" +
"<p>" + drawPos + "</p>"
"<h3><span>" + arr[i].name + "</span>" +
arr[i].acr +
"</h3></div>";
}
out += "";
document.getElementById("printList").innerHTML = out;
}
to get the moved item position while moving it,you can use onEnd event instead onMove.in onEnd you can access position using evt.newIndex.check the below snippet
Sortable.create(sortTrue, {
group: "sorting",
sort: true,
onEnd: function(evt) {
$(evt.item).parent().find('.list-group-item').each(function() {
$(this).find('span').text($(this).index() + 1);
});
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="result">Drage the list item to see position</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<!-- Latest Sortable -->
<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<!-- sort: true -->
<div id="sortTrue" class="list-group">
<div class="list-group-item"><span>1</span> foo</div>
<div class="list-group-item"><span>2</span> bar</div>
<div class="list-group-item"><span>3</span> baz</div>
<div class="list-group-item"><span>4</span> qux</div>
<div class="list-group-item"><span>5</span> quux</div>
</div>
</body>
</html>
I am using JQ Widgets multicolumn dropdowns and JQ UI Dialogues for new account creation when the user selects new from the dropdown. The problem is that when the dialogue is opened, the dropdown does not close and I have tried .close() methods and all I get from that is an invalid method call error.
Here is a screen shot:
Here is my code:
$("#divNewAccount").dialog({
autoOpen: false,
modal: true,
title: "New Account",
width: 600,
buttons: {
Ok: function () {
// TODO: Add logic and code to add record to database and autopopulate #jqxAccountDropdown AND select record value just updated
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
// Start Multicolum for Accounts
// prepare the data
var data = new Array();
var AccountIndex_Default = [""];
var AccountName_Default = ["New"];
var AccountType_Default = [""];
if(#(Html.Raw(JsonConvert.SerializeObject(ViewBag.ServiceID))) !== null){
var AccountIndex_FromService = [#(Html.Raw(JsonConvert.SerializeObject(ViewBag.AccountID)))];
var AccountName_FromService = [#(Html.Raw(JsonConvert.SerializeObject(ViewBag.AccountName)))];
var AccountType_FromService = [#(Html.Raw(JsonConvert.SerializeObject(ViewBag.AccountType)))];
var AccountIndex = ServiceIndex_Default.concat(AccountIndex_FromService);
var AccountName = ServiceName_Default.concat(AccountName_FromService);
var AccountType = ServiceNotes_Default.concat(AccountType_FromService);
} else {
var AccountIndex = AccountIndex_Default;
var AccountName = AccountName_Default;
var AccountType = AccountType_Default;
}
for (var i = 0; i < AccountIndex.length; i++) {
var row = {};
row["accountindex"] = AccountIndex[i];
row["accountname"] = AccountName[i];
row["accounttype"] = AccountType[i];
data[i] = row;
}
var source = { localdata: data, datatype: "array" };
$("#jqxAccountDropdownButton").jqxDropDownButton({ width: 150, height: 25 });
$("#jqxAccountDropdownGrid").jqxGrid({
width: 350,
height: 200,
source: source,
theme: 'energyblue',
columns: [
{ text: '', datafield: 'accountindex', width: 0 },
{ text: 'Account Name', datafield: 'accountname', width: 200 },
{ text: 'Account Type', datafield: 'accounttype', width: 100 }
]
});
$("#jqxAccountDropdownGrid").bind('rowselect', function (event) {
var args = event.args;
var row = $("#jqxAccountDropdownGrid").jqxGrid('getrowdata', args.rowindex);
var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' +
row["accountname"] + '</div>';
$("#jqxAccountDropdownButton").jqxDropDownButton('setContent', dropDownContent);
if (row["accountname"].toString().toLowerCase() === "new") {
$("#divNewAccount").dialog("open");
}
});
// End Multicolume for Accounts
<script src="/Content/themes/jquery-ui-1.11.4/jquery-ui.js"></script>
<link href="/Content/themes/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet" />
<link href="/Content/themes/jquery-ui-1.11.4/jquery-ui.theme.css" rel="stylesheet" />
<link href="/Content/ScrollingTables.css" rel="stylesheet" />
<link href="/Content/Multiselect.css" rel="stylesheet" />
<link rel="stylesheet" href="~/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="~/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
<script type="text/javascript" src="~/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxdropdownbutton.js"></script>
<div id="jqxAccountDropdownButton">
<div id='jqxAccountDropdownWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxAccountDropdownGrid"></div>
</div>
</div>
So given the above information, is it possible to close this list when the dialogue opens?
Found the answer...
use $("#jqxAccountDropdownButton").jqxDropDownButton('close');
I make a drop down on pop up screen. I am able to make that drop down using jQuery mobile. I used dform plugin. Everything is working fine. But I have one issue my first character display in capital letter when I added bootstrap.min.css - why?
When I run my program without bootstrap.min.css, it works fine. But when I run with bootstrap.css, it give first letter capital after . . As I written in small. This problem is only in chrome browser. When I run in firefox it works perfectly.
Can you please explain why it is occurring?
Here is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link href=" https://dl.dropboxusercontent.com/s/bbvcx2zc4ocuqzt/bootstrap.min.css?m=" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
<link href=" https://dl.dropboxusercontent.com/s/hg36tk1m7rc4gnj/style.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="https://rawgit.com/daffl/jquery.dform/master/dist/jquery.dform-1.1.0.js"></script>
</head>
<body>
<button id="test">test</button>
<div data-role="popup" data-dismissible='false' data-transition="flip" id="tabbedPopup" data-theme="a"><a href="#"
data-rel="back"
data-role="button"
data-theme="a"
data-icon="delete"
data-iconpos="notext"
class="ui-btn-right cross-border cross-border closePopUp_h button circleClass" >Close</a>
<div id="commandInfo"></div>
<div id="commandInfoheader" class="comandinfoheader"></div>
<div data-role="collapsible-set" data-theme="b" data-content-theme="b" id="tabbedSet" data-iconpos="left">
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
$('#test').click(function(){
createCommandPopUpTabs("tc_2-cmd_1_VoiceCallAudioMosMO");
$("#tabbedPopup").popup("open");
})
});
function createCommandPopUpTabs(id) {
var tabsHeader = ["InputParameter"];
var header = "<h3 >hh</h3>";
var commmand = "VoiceCallAudioMosMO";
var button = '<button onclick="return submitCommand("' + id
+ '")" style="" class="donebtn common-button1">Save</button>';
//$("#commandInfo").append(header);
$("#commandInfo").append(button);
$("#commandInfoheader").html(header);
for ( var i = 0; i < tabsHeader.length; i++) {
var headerId = tabsHeader[i] + "_tab" + commmand;
var header = "<div data-role='collapsible' data-collapsed='false' id='"
+ headerId + "'><h3>hhh</h3></div>";
var content = generateCommandTabContent(tabsHeader[i], id);
$("#tabbedSet").append(header);
$("#tabbedSet").find("#" + headerId).append(content);
$("#tabbedSet").collapsibleset("refresh");
$('input[name=direction]').parent().addClass('cleassr')
$("#tabbedSet").children(":first").collapsible( "expand" );
}
}
function generateCommandTabContent(name, id) {
var commandName = "VoiceCallAudioMosMO";
if (name == "InputParameter") {
var object = new window[commandName]();
var map = object.generateInputRequirment();
var formData = generateInputParamForm(map, id, status);
var form = $("<form />");
var dform = form.dform(formData);
return dform;
}
return null;
}
function VoiceCallAudioMosMO() {
COMMAND_NAME = "VoiceCallMos";
COMMAND_DISPLAY_NAME = "VoiceCallMOS";
this.map = {};
}
VoiceCallAudioMosMO.prototype.generateInputRequirment = function () {
if(typeof VoiceCallAudioMosMO.JSON!="undefined") {
var inputs = VoiceCallAudioMosMO.JSON.input;
for (var key in inputs) {
var inputField = inputs[key];
var inputParameterInfo = new InputParameterInfo();
for (var inputKey in inputField) {
inputParameterInfo[inputKey] = inputField[inputKey];
}
this.map[inputParameterInfo.name] = inputParameterInfo;
}
return this.map;
}
};
function InputParameterInfo() {
}
VoiceCallAudioMosMO.JSON = {
"commandName": "VoiceCallAudioMosMO",
"input": {
"refFileName": {
"displayDetail": "The reference file name to play in case of uplink channel",
"displayName": "Ref File Name",
"inputType": "SWITCH",
"name": "refFileName",
"inputValues": {
"USAReference.wav": "USAReference.wav",
"Reference.wav": "Reference.wav"
},
"value": "",
"unit": "NONE",
"required": false,
"visible": true
}
}
};
function generateInputParamForm(map, id, status) {
var formId = "form_" + id;
var formdata = {
elements : []
};
formdata.id = formId;
formdata.name = formId;
formdata.method = "post";
var div = {
html : []
};
div.type = "div";
div.class = "inputDiv";
div.caption = "<h3>Input Parameters</h3>";
var tabIndex = 1;
var arr = id.split("-");
var data = null;
for ( var key in map) {
var inputObj = map[key];
if (inputObj.visible==false && inputObj.required==false) {
continue;
}else {
var obj = createFormObject(inputObj);
}
//var obj = createFormObject(inputObj);
if(typeof data=="undefined"){
obj.value = inputObj["value"];
}else if (data != undefined && data.hasOwnProperty(inputObj["name"])) {
obj.value = data[inputObj["name"]];
}
/*if (data != undefined && data.hasOwnProperty(inputObj["name"])) {
obj.value = data[inputObj["name"]];
} else if (inputObj.hasOwnProperty("value")) {
obj.value = inputObj["value"];
}*/
if (status == "view") {
obj.readonly = "true";
obj.disabled = "disabled";
}
obj.tabindex = tabIndex;
var objName = "VoiceCallAudioMosMO";
obj.onblur = "validateElement('" + objName + "', '" + formId + "','"
+ obj.name + "')";
var unit = {};
var fieldset = {
html : []
};
fieldset.type = "fieldset";
fieldset.caption = inputObj["displayName"];
fieldset.html.push(obj);
$("div > fieldset legend:contains('*')").each(function () {
$(this).html($(this).html().replace("*", "<span class='red'>*</span>"));
});
div.html.push(fieldset);
tabIndex++;
}
formdata.elements.push(div);
return formdata;
}
function createFormObject(inputObj) {
var obj = {};
if (inputObj.hasOwnProperty("inputType")) {
if (inputObj["inputType"] == "LIST") {
var list = inputObj["inputValues"];
obj.type = "select";
obj.options = list;
} else if (inputObj["inputType"] == "NUMBER") {
obj.type = "text";
} else if (inputObj["inputType"] == "SWITCH") {
var list = inputObj["inputValues"];
obj.type = "select";
obj.options = list;
} else {
obj.type = "text";
}
} else {
obj.type = "text";
}
if (!inputObj.hasOwnProperty("displayName")) {
obj.type = "hidden";
}
obj.id = inputObj["name"];
obj.name = inputObj["name"];
obj.required = inputObj["required"];
obj.placeholder = inputObj["placeholder"];
obj.classes = inputObj["class"];
obj.className = inputObj["class"];
obj.class = inputObj["class"];
obj.title= inputObj["displayDetail"];
return obj;
}
</script>
</html>
It display a drop down when you click button.Drop down Value USAReference.wav.here I written "w" in small but it display in capital.but when I remove this css
https://dl.dropboxusercontent.com/s/bbvcx2zc4ocuqzt/bootstrap.min.css?m=" rel="stylesheet" type="text/css" />
it show in small letter ? why ?
After a long research I found the solution own .there is a property
text-transform: capitalize written on 247 line Number bootstrap.css file.I remove that property.I am able to solve my problem