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>
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 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.
I am using Struts 2 dojo plugin to make html tree. It generate some dojo-html code for tree node
<div dojoType="struts:StrutsTreeNode" id="2" title="car">
I want to process tree node click by this
<script language="JavaScript" type="text/javascript">
dojo.event.topic.subscribe("treeSelected", function treeNodeSelected(message) {
dojo.io.bind({
url: "<s:url value='../roseindia/objectsList2.action'/>?categoryId="+message.node.title,
load: function(type, data, evt) {
var divDisplay = dojo.byId("displayIt");
divDisplay.innerHTML=data;
},
mimeType: "text/html"
});
});
I can pass title(car) as message.node.title . I need to pass id not title, but where is not propertie message.node.id.
How can I get access to id(of treenode) in JavaScript function?
oohhkay, so youre in a 0.4.3 dojo.version!? im not sure how API works in that old a version, however the simplest current api hook is the onClick.
As i recall, with tree.onClick override you will get the item and the TreeNode, both being objects where the item is reference to your store json data and the treenode is the currently clicked row (dijit Widget, meaning you should have .getChildren, .domNode etc).
So in terms of code, try
<div dojoType="struts:StrutsTreeNode" id="2" title="car">
<script type="dojo/method" event="onClick" args="item, treeNode">
alert(treeNode.id);
alert(treeNode.domNode.tagName);
alert(treeNode.domNode.innerHTML.substr(0,30);
</script>
</div>
This is the JSON from my REST Server:
[{"name":"REL"},{"name":"RBOW"},{"name":"EMLAWEB"}]
This is the programmatic creation of the JSON data store:
dojo.addOnLoad(function(){
var appPrefixStore = new dojox.data.JsonRestStore({target:"http://localhost:9080/AtRest/AtRest/tag/prefix"});`
This is the declaratively use of the data store in the comboxbox:
<input id="selectPrefixCombo"
name="appPrefix"
data-dojo-type="dijit.form.ComboxBox"
data-dojo-props="autocomplete:'false', trim:'true', maxHeight:'200', store:'appPrefixStore'">
</input>
However, nothing can displayed in the combobox. What gives?
I have even tried declaratively use of the data store:
<div data-dojo-type="dojo.data.JsonRestStore" ...
Anyway... here's the working code by using global variable
<script type="text/javascript">
//global variable container
var widgets = {};
require(
// Set of module identifiers
[ "dojo",
"dojo/parser",
"dojo/_base/xhr",
"dijit/form/ComboBox",
"dojo/store/JsonRest",
],
// Callback function, invoked on dependencies evaluation results
function(JsonRestStore) {
widgets.appPrefixStore = new dojo.store.JsonRest({target:"http://localhost:9080/AtRest/AtRest/tag/prefix"});
});
</script>
<select id="selectPrefixCombo" name="appPrefix" data-dojo-type="dijit.form.ComboBox"
data-dojo-props="autocomplete:'false', trim:'true', maxHeight:'200', store:widgets.appPrefixStore">
</select>
Thanks, Apparently I may have been misled by all the tutorials and examples I have seen.
Constructing the JsonRestStore is insufficient to trigger a request to the server. I have to add an appPrefixStore.fetch() to make it work.