Tag Archive: dojo


Again big pain to find the solution of this one. I was trying to create a MultiSelect declaratively, and the problem was I had to populate it programmatically.

Well it appears it isn’t as bad as it looks as long as you know that dojo data doesn’t apply to multiSelect. So the only thing you need is to add html options inside your widget. Mmmm

So the solution looks like that :
(removing divs because wordpress won't show them...)
div dojoType="dijit.form.MultiSelect" dojoAttachPoint="List"

/div

And the code looks like this :

// Add each of the items
dojo.forEach(items, function(item){
var c = dojo.doc.createElement(‘option’);
c.innerHTML = item.Name;
c.value = item.Value;
this.List.containerNode.appendChild(c);
}, this);

Simple no ?

Advertisements

I forget about this all the time… I mean I spend times and times again trying to figure out solutions of problems I already solved. Baaahhh that sucks. I really need to get organized !

Well I guess it’s the reason why I got this blog online at the first place. Well today’s a simple problem I spend another 10 minutes trying to find out how to solve: how to enable/disable a button, or an object in javascript :

Here’s the code : this.CommentMsgBox.setAttribute(‘disabled’, false);

Well if anyone has a solution for organiszing that kind of problems/solutions I’m in guys !

I recently came to use netbeans (I used zend studio before) ; I have to say it’s better than zend studio but it really lacks quick access to code snippets. At least I haven’t found out where and how to add them (sucks…).

And that’s a funny bug !

Hey sometimes I have to admit, we’re really out of our minds. I was programming a publish function for an article and, I got this bug, it’s so funny I’ve decided to make a post out of it. Here’s the code :


PublishArticle: function(){

if(this.PublishButton.get("label") == "Publish"){
this.State = "Published";
this.SaveArticle();
this.PublishButton.set("label", "Unpublish");
}
if(this.PublishButton.get("label") == "Unpublish"){
this.State = "Draft";
this.SaveArticle();
this.PublishButton.set("label", "Publish");
}
},

Aint’ that crazy ?

Damn sometimes… Sometimes we have bugs that seem just impossible. Well I’ve just had one, I solved I just can’t resist posting it here. Guys I have to tell you it’s the most stupid bug I’ve sold, I laugh so much when I understood what happend. Ahhh life’s funny sometimes 😉

Here it is.

I’m querying a JsonRestStore that sends back this data :

[{“id”:”15″,”item_id”:”1″,”item_type”:”lunches”,”user_id”:”17″,”object”:”T”,”date”:”0000-00-00″,”child_of”:”0″,”TG”:””,”TD”:”Yes”,”TP”:””,”TA”:”Connect”,”TAD”:””,”D”:”0000-00-00″,”NC”:””},{“id”:”1″,”item_id”:”1″,”item_type”:”opportunities”,”user_id”:”17″,”object”:”T”,”date”:”2010-02-08″,”child_of”:”0″,”TG”:”re”,”TD”:”Yes”,”TP”:”2″,”TA”:”Older”,”TAD”:”v”,”D”:”0000-00-00″,”NC”:””},
{“id”:”3″,”item_id”:”1″,”item_type”:”opportunities”,”user_id”:”17″,”object”:”T”,”date”:”2010-02-08″,”child_of”:”0″,”TG”:”re”,”TD”:”Yes”,”TP”:”2″,”TA”:”Older”,”TAD”:”v”,”D”:”0000-00-00″,”NC”:””},
{“id”:”2″,”item_id”:”1″,”item_type”:”opportunities”,”user_id”:”17″,”object”:”T”,”date”:”2010-02-08″,”child_of”:”0″,”TG”:”re”,”TD”:”Yes”,”TP”:”2″,”TA”:”Older”,”TAD”:”v”,”D”:”0000-00-00″,”NC”:””}]

Well I removed the content of the data but that’s of no importance. Note that I had about 25 records sent from the JsonRestStore that looked pretty much the same except one field : item_type was for item 1 “lunches” and for all the rest “opportunities”.

Then my code, inside a dojo widget I’m fetching the JsonRestStore and getting the items. Except I want to order items using the field item_type.


// Fetch the objects
this.store.fetch({

query: {object:"Task"},
sort: sortKeys, // Order by... date DESC
onComplete: dojo.hitch(this, function(items,request){

opportunities="";
lunches="";

// Now format each element
for (var i = 0; i < items.length; i++){

var item=items[i];

if(item.item_type="lunches"){

lunches += '

';
//console.log(item.item_type + item.id);
}
else if (item.item_type="opportunities"){

lunches += '

';
}
}

// Add titles to the elements
if(lunches !=""){

lunches = "

Lunches

" + lunches ;
}
if(opportunities !=""){

opportunities = "

Opportunities

" + opportunities ;
}

this.TaskList.innerHTML = lunches + opportunities ;

dojo.parser.parse(this.domNode);

Guess what happend… All my items went on the lunches category. But WHY WHY WHY ???
You’ll find out I’m sure, and laugh a lot, hopefully 😉

Still working on my Tree, irc’s magic chamber (#dojo) gave me a solution I tend to forget from times to times related to extending some of dojo’s functions (credits dmachi, thanks man 😉

Here it is :

myStore = new dojox.data.JsonRestStore({target:"/objects/", labelAttribute:"Task_Action"});

myModel = new dijit.tree.ForestStoreModel({
store: myStore,
deferItemLoadingUntilExpand: true,
query: {object:'Task'},
rootLabel:'test test'

});

dojo.extend(dijit.Tree, {_createTreeNode: function(args){

console.log("this is cool stuff");
console.log("_createTreeNode: ", args);
return new dijit._TreeNode(args);

}}
);

myTree = new dijit.Tree({
id: "myTree",
model: myModel,
persist: false,
label:'test'
});

dojo.byId("container").appendChild(myTree.domNode);
myTree.startup();

Here’s a good idea : make a new widget that will display charts related to a page. I had a few problems building this since the template must have set some parameters like style, width and height otherwise your chart wont’ display and you’ll get a wierd error. I’ll give you a very simple example on how to start building this idea.

Here’s my template :

Statistics


Note that the style=”width …” *must* be there otherwise the chart won’t display.
Let’s continue …

dojo.provide("mywidget.stats");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojox.charting.Chart2D");

dojo.declare("mywidget.stats",
[dijit._Widget,dijit._Templated],
{

widgetsInTemplate:true,

templatePath: dojo.moduleUrl("mywidget","templates/Stats.html"),

postMixInProperties: function(){

},

postCreate: function(){

var chart1 = new dojox.charting.Chart2D("test");
chart1.addPlot("default", {type: "Pie"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.render();

},

startup: function(){

},

}
);

Well nothing big here but it works 😉
I’m trying actually to develop multiple statitics that I’ll probably end putting in tabs. We’ll see, maybe later if I have good results I’ll post somehting here 😉

See ya guys !

I spend quiet a lot of time on this one, I posted arround here and there to find the anwser on how to make a JsonRestStore happend with Zend Framework. There are quiet a few tutorials out there but my main problem was a response from the server when POST request was made (when creating a new document).

Well here’s the solution :
$this->getResponse()
->setHttpResponseCode(201)
->setHeader('Content-Type', 'application/json', true)
->setHeader("Location", 'http://mywebsite' . $this->_request->getRequestUri() . $id);

$params['id'] = $id;
return $params;

First : you need to send back a code 201. Second, you need to send the url of the store with the new id (ex : mysite/store/4
Then you need to send back the content of the item created + the id in order to be able to play with it with DOJO. Otherwise, no fun.

Here’s the dojo part of the code :

testStore = new dojox.data.JsonRestStore({jsId:"tStore", target:"/test/", idAttribute:"id" });

// Get the content of a form with a magic dojo query
data = {};
dojo.query(" textarea, .ArticleNewFormElement > input").forEach(function(node, index, arr){
if(node.id){
data[node.id] = dijit.byId(node.id).attr("value");
}
});

// Add the item to the DataStore
var newClient = clientsStore.newItem(data);

// Save it back to the server
clientsStore.save({onComplete:function(item) {

// Now you can play with the ID of the element you just created, so cool !
console.log(newClient.id);

}
});

Note that I changed a few variables here and there for my blog without rechecking the entire stuff so re-read it if you need to use it, but it works. JsonRestStore is your friend I tell you !

I’m having so much fun with dojo.query. Here’s as simple way to send back input elements to your server using a JsonRestStore :

clientStore = new dojox.data.JsonRestStore({
jsId:"MyStore",
target:"/mystore/",
idAttribute:"id"
});

// Get the content of the form
data = {};
dojo.query(" textarea, .ArticleNewFormElement > input").forEach(function(node, index, arr){
if(node.id){
data[node.id] = dijit.byId(node.id).attr("value");
}
});

var newClient = clientStore.newItem(data);

clientStore.save();

When I think I use to do Title = dijit.byId(“Title”)… and then collect each of the elements and then send this through an XhrPost, wha, I’m really goind quicker now. Well I guess that’s the whole deal of beeing a beginner at things 😉

The magic of dojo query

I haven’t used dojo query before today. It’s just a great tool, it’s so time saving… This is a great tool particularly for dojo form if you start playing with it.

Let’s look at how I used to get the data back of a form :

// Get the content of Title, Summary, WherePublished, PublicationDate, ShowProfile
Title = dijit.byId("Title").attr("value");
Summary = dijit.byId("Summary").attr("value");
WherePublished = dijit.byId("WherePublished").attr("value");
DatePublished = dijit.byId("DatePublished").attr("value");
//PublishProfile = dijit.byId("PublishProfile").attr("value");

// Get the content of the Editor
Editor = dijit.byId("Editor").attr("value");

And off we go to put this on a xhr query… Well the good new is that you can get all this (very) boring stuff in only one / two lines of code without the hassle of finding each field. Saves time no ?

Here it is :
data = [];
dojo.query(" textarea, .ArticleNewFormElement > input").forEach(function(node, index, arr){
if(node.id){
data[node.id] = dijit.byId(node.id).attr("value");
}
});

That’s it, you can send back data to your server. By simply placing your elements inside divs you control (ex. : MyClass) you’ll be able to get the content of all the elements of a form.

Damn I’ll never write these long fields getters anymore !!

I was trying to get the content of a form I was building and hooops, where did the fucker go… Unable to get the content of my TextBox element with traditionnal methods like:

data = dijit.byId(“Title”).innerHTML ;

That doesn’t work… because dijits are not dom elements, but objects. Shit I should have known (thanks for IRC dojo channel for answering my so many questions).

What works simply is :

Title = dijit.byId(“Title”).attr(“value”);

And there you go !