I have created an Object.. please tell me If I'm doing it right:
{"images": {
image1 : {
"small_image" : "images/1.png",
"large_image" : "images/big/1.png"
},
image2 : {
"small_image" : "images/2.png",
"large_image" : "images/big/2.png"
},
image3 : {
"small_image" : "images/3.png",
"large_image" : "images/big/3.png"
},
}
Now, I saved it with the name images.json
How will I call it on my HTML file using jQuery?..
I want to test it on a console first..
I use this code and it does'nt display anthing on console..
$.getJSON("js/images.json", function(data){
$.each(data, function (index, value) {
console.log("asdfasdf " +value);
});
});
You need to modify your object Literal to make it a JSON String. It should look more like this:
{"images": {
"image1" : {
"small_image" : "images/1.png",
"large_image" : "images/big/1.png"
},
"image2" : {
"small_image" : "images/2.png",
"large_image" : "images/big/2.png"
},
"image3" : {
"small_image" : "images/3.png",
"large_image" : "images/big/3.png"
}
}}
That along with the javascript you already have should work, assuming your webserver is setup to properly serve .json files.
Related
I am trying to apply internationalization to my web app that uses JSP pages.I found this link How to internationalize a Java web application? and it really helped me.
However I am now trying to use the given tag fmt:message tag within my primeui datatable's headerText so that I can see column name of my datatable in spanish language.But it's being displayed as text on the screen.Whereas I want it to function as it does on my JSP page i.e to pick user.data.userName="spanish translation for username" from my properties file text_es.properties.
Below is the code for my datatable which is included in script tag on my JSP:
$(function() {
$('#tbllocal').puidatatable({
caption : 'Inbox Tasks',
paginator : {
rows : 5
},
columns : [
{
field : 'userName',
**headerText : '<fmt:message key='user.data.userName'/>',**
sortable : true
},{
field : 'userEmailId',
headerText : 'userEmailId',
sortable : true
} ],
datasource : function(callback) {
$.ajax({
type : "GET",
url : 'crud',
dataType : "json",
context : this,
success : function(response) {
callback.call(this, response);
}
});
},
selectionMode : 'single',
rowSelect : function(event, data) {
$('#messages').puigrowl('show', [ {
severity : 'info',
summary : 'Row Selected',
detail : (data.firstName + ': ' + data.lastName)
} ]);
},
rowUnselect : function(event, data) {
$('#messages').puigrowl('show', [ {
severity : 'info',
summary : 'Row Unselected',
detail : (data.firstName + ': ' + data.lastName)
} ]);
},
jsonReader : {
response : "response"
}
});
});
Still there is no support for including html in datatable header till primeui 2.0 i have also posted this question on frimeui forum please refer following link for further details
http://forum.primefaces.org/viewtopic.php?f=16&t=42417
As part of our Grunt build we are transpiling some typescript code into a few separate files, and then concatenating the resulting javascript along with all the rest of our javascript code. Unfortunately I can't get the dynamic buildup of filenames to work along with grunt-concat.
This is the relevant snippet from our Gruntfile - see the part on generatedTypeScriptFiles, which doesn't work.
var jsfiles = [
'js/external_libraries/inherit.js',
'js/external_libraries/modernizr.js',
'js/baz.js'
];
grunt.initConfig({
gitinfo : {}, //will be populated with values from Git
options : {
"packageName" : nconf.get("name"),
"frameworkVersion" : nconf.get("version"),
"frameworkOutputPath" : nconf.get("frameworkOutputPath"),
"workerOutputPath" : nconf.get("workerOutputPath"),
"sourceMapPath" : nconf.get("sourceMapPath")
},
typescript : {
foo: {
src : ['js/Foo/*.ts'],
dest : 'generated/Foo.js',
},
bar : {
src : ['js/Bar/*.ts'],
dest : 'generated/Bar.js',
}
},
generatedTypeScriptFiles : {
all : function () {
var tsf = [];
for (var key in this.typescript) {
if(this.typescript[key].dest) {
tsf.push(this.typescript[key].dest);
}
}
return tsf;
}()
},
scriptfiles : {
hybrid : function () {
return jsfiles.concat('<%= generatedTypeScriptFiles.all %>');
}(),
web : function () {
return jsfiles.concat('<%= generatedTypeScriptFiles.all %>');
}()
}
concat : {
web : {
options : {
separator : ';',
},
src : '<%= scriptfiles.web %>',
dest : '<%= options.frameworkOutputPath %>'
}
}
}
I am guessing that for our case where we actually know all the resulting filenames in our typescript build step, we could just build up the filenames beforehand - outside of grunt.initConfig. That should fix things, right? Or is there another way?
Maybe I misunderstand the problem or what you're trying to do, but why don't you just glob all .js files from the "generated" directory?
Like this:
var jsfiles = [
'js/external_libraries/inherit.js',
'js/external_libraries/modernizr.js',
'js/baz.js',
'generated/*.js'
];
grunt.initConfig({
typescript : {
foo: {
src : ['js/Foo/*.ts'],
dest : 'generated/Foo.js',
},
bar : {
src : ['js/Bar/*.ts'],
dest : 'generated/Bar.js',
}
},
concat : {
web : {
options : {
separator : ';',
},
src : jsFiles,
dest : '<%= options.frameworkOutputPath %>'
}
}
});
I am able to access the onclick properties function for the printButton property at the end of the block. Although I am unable to initiate the onclick functions under the exportButton property.I have the following code.
B.exporting = {
type : "image/png",
url : "http://export.highcharts.com/",
width : 800,
enableImages : false,
buttons : {
exportButton : {
symbol : "exportIcon",
x : -10,
symbolFill : "#A8BF77",
hoverSymbolFill : "#768F3E",
_titleKey : "exportButtonTitle",
menuItems : [{
textKey : "downloadPNG",
onclick : function() {
this.exportChart()
}
}, {
textKey : "downloadJPEG",
**onclick : function() {
this.exportChart({
type : "image/jpeg"
})**
}
}, {
textKey : "downloadPDF",
onclick : function() {
this.exportChart({
type : "application/pdf"
})
}
}, {
textKey : "downloadSVG",
onclick : function() {
this.exportChart({
type : "image/svg+xml"
})
}
}
}]
},
printButton : {
symbol : "printIcon",
x : -36,
symbolFill : "#B5C9DF",
hoverSymbolFill : "#779ABF",
_titleKey : "printButtonTitle",
onclick : function() {
this.print()
}
}
}
};
I am binding keyboard controls to the click events using the jquery plugin this is what I used to print. This Works!:
Mousetrap.bind('ctrl+s', function(e) { B.exporting.buttons.printButton.onclick(this.print());
});
This code is what I tried to access an individual onclick function under the exportButton property in the json above
Mousetrap.bind('*', function(e) {B.exporting.buttons.exportButton.menuItems[0].onclick;});
The result i get is the value but i want to run the function as the onclick property does.Does anyone know how to run a function under a json property?I Appreciate any help here thanks folks.
Mousetrap.bind('click', B.exporting.buttons.exportButton.menuItems[0].onclick);
Your ctrl-s binding also looks wrong, it should be:
Mousetrap.bind('ctrl+s', B.exporting.buttons.printButton.onclick);
The printButton.onclick function doesn't take an argument. Your binding calls this.print before calling the printButton.onclick function, and then the printButton.onclick function
does it again.
I have a codeset that dynamically creates an "option" in a select box. But, since we're using Knockout, when I go to SELECT that newly created option, and click on it, it gets removed, e.g. DISAPPEARS! Poof!!!!
So, here's the create script:
function createNewGroup()
{
var htmlSelect = document.getElementById('groups');
var optionValue = document.getElementById('newgroupname');
if (optionValue.value === '')
{
alert('Please enter group name.');
optionValue.focus();
return false;
}
if (isOptionAlreadyExist(htmlSelect, optionValue.value))
{
optionValue.value = "";
alert('Group name already exists.\n\nPlease try again.');
optionValue.focus();
return false;
}
var selectBoxOption = document.createElement("option");
selectBoxOption.value = optionValue.value;
selectBoxOption.text = optionValue.value;
htmlSelect.add(selectBoxOption, null);
optionValue.value = "";
alert("New group has been added successfully.");
optionValue.focus();
return true;
};
Since this is a KNOCKOUT observable, how to keep it in the box when I select it, moreover, how do I send that new value back to JSON object. Here's an example of that:
{"groups":[
{
"groupname" : "Administrator",
"attr" : { "id" : "li.attr.node_1",
"href" : "#",
"data-bind" : "click: grpMgmt('Administrator');" }
},
{
"groupname" : "Guest",
"attr" : { "id" : "li.attr.node_2",
"href" : "#",
"data-bind" : "click: grpMgmt('Guest');" }
}
]
}
Hence, the admin user can create a new user so it can look like this:
{"groups":[
{
"groupname" : "Administrator",
"attr" : { "id" : "li.attr.node_1",
"href" : "#",
"data-bind" : "click: grpMgmt('Administrator');" }
},
{
"groupname" : "Guest",
"attr" : { "id" : "li.attr.node_2",
"href" : "#",
"data-bind" : "click: grpMgmt('Guest');" }
}
],
"users":[
{
"groupname" : "Joes Users",
"attr" : { "id" : "li.attr.node_1",
"href" : "#",
"data-bind" : "click: grpMgmt('Joe');" }
}
]
}
OK, I'll stop writing for now... thanks...
If you're using knockout (which I can't actually see) all you need to do is bind your select box to an observable array and when you need to add a new item just push it onto the array and knockout will add it to the list for you.
Knockout should essentially replace that script you've included with a lot less, much more simplistic code.
Creating a ajava script array in given format with carousel ?
Iam using carousel.js & carousel.css, its working fine with static data, but when im trying to put dynamic data its hot happening. Im not able to create the value array in given format.
<script>
var carousel2 = new widgets.Carousel( {
uuid : "carousel2",
widgetDir : "carousel/",
args : { "theme" : "gray", "scrollCarousel" : true, },
value : [
{
"image" : "images/banner/big_banner_01.jpg",
},
{
"image" : "images/banner/big_banner_02.jpg",
},
{
"image" : "images/banner/big_banner_03.jpg",
},
{
"image" : "images/banner/big_banner_04.jpg",
},
{
"image" : "images/banner/big_banner_05.jpg",
}
]
} );
</script>
I need to pass the value for "value" key dynamically. How can i form this dynamically .IM TRYING WITH THE BELOW ONE
<repeat index="index.value" ref="DATA">
<repeat ref="VAL">
<choose ref="LANGUAGE">
<when value="${lang}">hiii
<script>
val[index.value] = "{"+"'image' :" +${IMAGE}+"}";</script>
</when>
<otherwise/>
</choose>
</repeat>
</repeat>
This is not working.
<script>
var generateCaroseul = {
getData: function(){
//loop through html to create an object with the data.
var dataObj = null;
$('li').each(function(index) {
var imgUrl = $(this).attr("src");
dataObj.add("image", imgUrl);
});
return dataObj;
}
};
var carousel2 = new widgets.Carousel( {
uuid : "carousel2",
widgetDir : "carousel/",
args : { "theme" : "gray", "scrollCarousel" : true, },
value : generateCaroseul.getData()
} );
</script>