I am not able to display Dojo Combobox as explained in this fiddle. I have added references of Dijit.js, Dojo.js, Ready.js and memory.js. My script gets executed as I verified by putting an alert but the Combobox simply doesn't show up. What am I missing?
Following is my html:
<div id="stateSelect"></div>
Following is my JS script
<script>
require(["dojo/store/Memory", "dijit/form/ComboBox", "dojo/ready"],function(Memory, ComboBox){
var ss = 'Abas Store, Accounts';
ss = ss.split(',');
var data = [];
dojo.forEach(ss, function(item, idx) {data.push({id: idx,name: item});});
var stateStore = new Memory({data: data});
var comboBox = new ComboBox({name: "select",value: "Select...",store: stateStore,searchAttr: "name"},"stateSelect");
});
</script>
Following JS references are added and each one of them is accessible:
<script type="text/javascript" src="/webapp/js/dojo/1.9.2/dojo/dojo.js"></script>
<script type="text/javascript" src="/webapp/js/dojo/1.9.2/dojo/ready.js"></script>
<script type="text/javascript" src="/webapp/js/dojo/1.9.2/dojo/store/memory.js></script>
<script type="text/javascript" src="/webapp/js/dojo/1.9.2/dijit/form/ComboBox.js"></script>
Edited to show snapshot after "Dimitri M" reply(referred from my comments):
I'm seeing several things here that are not right:
The first thing is that you only need to load the AMD loader (dojo.js), all other files are loaded automatically by it, so this means you can remove:
<script type="text/javascript" src="/webapp/js/dojo/1.9.2/dojo/ready.js"></script>
<script type="text/javascript" src="/webapp/js/dojo/1.9.2/dojo/store/memory.js></script>
<script type="text/javascript" src="/webapp/js/dojo/1.9.2/dijit/form/ComboBox.js"></script>
The second thing I notice (also in the example you're referring to) is that it's missing the proper event to wait for the DOM to load. You should replace dojo/ready by dojo/domReady!. This will make sure that the callback is only loaded if the DOM is loaded.
If you don't wait for the DOM, then your script might not find the div #stateSelect, and then the grid won't load (I think this is your problem).
I also have a recommendation (not a bug), you should not use dojo.forEach() if you're using a new version of Dojo, that syntax is actually deprecated and should be replace by the dojo/_base/array module which has a similar forEach() function.
But what you need is not the forEach() function, but the map() function to map your array of Strings to an array of objects.
I updated the example you used with the recommendations I gave, which you can find here.
Related
as default, on list page, the product would list by alphabetic.
we hope to list the products by created date (desc), that is the newest product list the first.
we can set the Sort Order for each product, but it is not easy to change thousand products.
so is there any way (like js) to change the default sort by "Newest Item" on product page?
while first i could think is to load the page by jquery trigger, but it would have one second open page action.
<script type="text/javascript">
// <!--
$(document).ready(function(){
$('#sort').val('newest').trigger('change');
});
// -->
</script>
actually, it's pretty easy to add following js the change url in SideCategoryList panel:
<script type="text/javascript">
// <!--
$(document).ready(function() {
$('.sf-menu li:nth-child(1) a').attr("href", '{base_url}/new-in/?sort=newest');
});
// -->
</script>
I wanted to be able to change the type of charts made with dimple.js using variables.
I am able to do it using local variables, set up manually, thanks to this post: change chart type in dimple.js to automate chart production
However, when I am trying to go a step further and place all my variables in a configuration file, it does no longer work anymore. I'm pretty sure I'm missing something with the "objects", but can't figure what.
Sorry, it might be an obvious thing I'm missing, but I'm a data analyst, not a developer and quite a rookie concerning d3.js and dimple.js.
My code: (see below) http://plnkr.co/McEDMkovXaQpsn5z9mmV
I have put 2 html pages : "Manual" is where it works with local variables declared manually.
"Dynamic" is the same code except I've put the variables in a configuration file and I read the configuration file using D3.csv function (a line par chart). It does not work.
Thank you for your help!
Code : http://plnkr.co/McEDMkovXaQpsn5z9mmV
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://dimplejs.org/dist/dimple.v2.1.0.min.js"></script>
<script type="text/javascript" src="script.js"</script>
</head>
<body>
<div id="chartContainer">
<script type="text/javascript">
var chartType1 = "bar";
var chartDimple1 = dimple.plot[chartType1];
var chartSerie1 = "Channel";
var chartGroup1 = ["Month", "Channel"];
var chartMeasure1 = "Unit Sales";
var filterField1 = "Owner";
var filterValues1 = ["Aperture", "LexCorp"];
var svg1 = dimple.newSvg("#chartContainer", 590, 400);
d3.csv("data.csv", function (data1) { //d3.tsv("data/example_data.tsv", function (data) {
var data1 = dimple.filterData(data1, filterField1, filterValues1) // dataFiltered = dimple.filterData(data, "Owner", ["Aperture", "LexCorp"])
var myChart1 = new dimple.chart(svg1, data1);
myChart1.setBounds(60, 30, 510, 305)
var x1 = myChart1.addCategoryAxis("x", chartGroup1); // var x = myChart.addCategoryAxis("x", ["Channel" , "Month"]);
x1.addOrderRule("Date");
var y1 = myChart1.addMeasureAxis("y", chartMeasure1);
myChart1.addSeries(chartSerie1, chartDimple1); // myChart.addSeries("Channel", dimple.plot.bar);
myChart1.addLegend(60, 10, 510, 20, "right");
myChart1.draw();
});
</script>
</div>
<div id="chart2"></div>
<div id="chart3"></div>
<script type="text/javascript">
pageLayout(configFile);
</script>
</body>
</html>
I'm having a tough time getting the example working, lots of files doing lots of things. I think the basic problem is that when you import the dsv config file, your group still comes back as a string like "["Month", "Channel"]". When you pass this to chart.addCategoryAxis it's going to look at it like a string rather than an array. You should be able to do
chart.addCategoryAxis(JSON.parse(d.chartGroup));
and have it correctly set it as an array. This only works if you know it's going to be an array, if it may only be one string you would need to check beforehand to know if you need to parse it or not.
Also some of the code I don't think works on that site because it's still looking for the static dsv/csv files in a data/ directory that isn't there, but I think the string/array issue is probably the one holding you up.
I am working with knockout in MVC application. I am using knockout validation for validating the input. Everything is just fine,my problem is,I have a range validator for that input ll be coming from server view model.
how can I make that as my range validators minimum and maximum validation criteria?
since I am having all my code in separate js file I cant use # attribute.
Depending on how your code set up, you can use the # attribute (Razor code) as you said. Simply set a local variable on the page, then run your code that's in the external file, like this, where in your external js file, you can access min and max.
#* This is your razor .cshtml page *#
<script type="text/javascript">
var min = #ViewBag.Min;
var max = #ViewBag.Max;
</script>
<script type="text/javascript" src="../js/your-external-js"/>
Or, to keep things clean, you could use an initialize function:
#* This is your razor .cshtml page *#
<script type="text/javascript" src="../js/your-external-js"/>
<script type="text/javascript">
$(function() {
var min = #ViewBag.Min;
var max = #ViewBag.Max;
myExternalJs.Initialize(min, max);
});
</script>
I have a report in SSRS using input as date. But the datetime picker is not supported by Chrome, So I have added a jQuery date time picker. I have added the logic of finding the input control and replace that control with date time picker. In which I am facing an issue is if I have enter a date manually that calendar control is still shown. I would like to set the visibility of that calendar control if the user manually enter any values. Please find the attached screen shot.
The given below is the code I have used for this purpose.
<link rel="Stylesheet" href="../../../../../Core/Styles/jquery-ui-1.10.3.custom.css"/>
<script type="text/javascript" src="../../../../../Core/Includes/jquery-1.9.1.js">
</script>
<script type="text/javascript" src="../../../../../Core/Includes/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#rpvReport__ctl0__ctl7__ctl0" ).datepicker();
$("#rpvReport__ctl0__ctl5__ctl0" ).datepicker();
$("#rpvReport__ctl0__ctl9__ctl0" ).datepicker();
$("#rpvReport__ctl0__ctl11__ctl0" ).datepicker();
});
</script>
Any help is appreciated!!!!
Attach to the keyup event (you can use keydown or keypress too). Then you can evaluate the current value of the field. If it is empty then show the datepicker control. If not then hide the datepicker control. See the following example.
<script>
$(function() {
$("#datepicker").datepicker();
$("#datepicker").keyup(function(event) {
if(event.target.value == ""){
$("#datepicker").datepicker("show");
}
else {
$("#datepicker").datepicker("hide");
}
});
});
</script>
What is the best way to show the resulting css from files compiled with less.js in the client.
In other words, how can i fill a div with the resulting css?
I need to display the result on the page, any way to do this?
THanks!
update
As already pointed out in the comments by #ertrzyiks you should replace less.parse with less.render for Less v 2.x:
var lessCode = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
var options = {}
lessCode = xmlhttp.responseText;
less.render(lessCode, options, function (error, output) {
if(!error) {
document.getElementById('lesscode').innerHTML = output.css;
}
else document.getElementById('lesscode').innerHTML = '<span style="color:red">' + error + '</span>';
});
}
};
xmlhttp.open("GET","important.less",true);
xmlhttp.send();
see also: How to detect and print changing variables LESS
But since Less v2:
In the browser, less.pageLoadFinished will be a promise, resolved when
less has finished its initial processing. less.refresh and
less.modifyVars also return promises.
When you compile filename.less the compiled CSS code has been inject in a style tag with id less:filename, so to get the compilled CSS code you can also use:
less.pageLoadFinished.then(
function() {
console.log(document.getElementById('less:filename').innerHTML);
}
);
Notice that the last example also applies the compiled CSS code on the page.
--end update
I expected that running something such as the following was possible:
<link rel="stylesheet/less" type="text/css" href="important.less">
<script src="less-1.7.3.js" type="text/javascript"></script>
<script>
css = less.tree.toCSS();
console.log(css);
</script>
unfortunately this does not work, but you can use the following code to get what you want:
<script src="less-1.7.3.js" type="text/javascript"></script>
<script>
var lessCode = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
lessCode = xmlhttp.responseText;
new(less.Parser)().parse(lessCode, function (e, tree) {
document.getElementById('lesscode').innerHTML = tree.toCSS().replace(/\n/g,"<br>");
});
}
};
xmlhttp.open("GET","important.less",true);
xmlhttp.send();
</script>
With in the body section of your HTML:
<div id="lesscode"></div>
See also: Combining two .less files in one and How to open a local disk file with Javascript?
I just use Chrome's Inspect Element.
Right click on the element CSS you are looking for, Right click and choose Inspect element. On the right you will find the compiled CSS in Styles. Hope it helps
You have two options to do this, Internet Explorer or Firefox.
Let's start with Firefox. If you install the web developer toolbar, you get a menu option that's labelled CSS. Clicking on this gives you a few options and if you choose View CSS, you are taken to a new tab that shows you all of the styles for the page, grouped by their location and you should see a section with the CSS that has been generated by LESS and dynamically applied to the elements.
IE also has a Web Developer option and if you use the toolbar to inspect an element, you can then use the short cut 'Ctrl + T' which will bring up the page source with the computed styles.
The Firefox solution is better, as you can see exactly which styles have been provided by LESS whereas IE just lumps it all together.
There is a third option, and that is to compile the CSS server side!