View with JSON data model is not displaying

[anilcj]

My objective was to get a data model that I can manipulate to allow users to add/remove images as part of a multi select. I couldn't get access to data model ( i saw an array through the debugger, I will need the JSONDataModel object).

I took the route of using regular view with JSON Datamodel, so that I have more control on the model object. For some reason - I am able to load json data fine - it shows momentarily and gets wiped off the screen. Something is nulling the view out.

I will appreciate, if anyone can give me insights on how to manipulate data (add/remove) in the data model using JSONView or help me with resolving this specific issue.

var dp = layout.add('east', new YAHOO.ext.ContentPanel(YAHOO.util.Dom.generateId(), {
autoCreate : true,
fitToFrame:true
}));

var eastBodyEl = dp.getEl();
this.eastViewBody = eastBodyEl.createChild({tag:'div', cls:'ychooser-view'});
dp.resizeEl = this.eastViewBody;
this.detailEl = eastBodyEl;

this.eastDM = new YAHOO.ext.grid.JSONDataModel( {
root: 'images',
id: 'name',
fields: ['name', 'url', 'takentime', 'shortName']
} );
this.eastDM.load('sample1.xml');
this.eastView = new YAHOO.ext.View( this.eastViewBody, this.thumbTemplate, this.eastDM, {singleSelect:true}
);

this.eastView.prepareData = function(data, idx){
//data.dateString = new Date(data.takentime).format("m/d/Y g:i a");
return {
name: data[0],
url: data[1],
takentime: data[2],
shortName: data[3]
};
};

[jack.slocum]

Can you put up some kind of link? I can't seem to reproduce the same result. My guess is it's somewhere else in your code and I would be happy to take a look.

The code you posted looked fine except for the fact you are trying to load sample1.xml into a JSONDataModel.

this.eastDM = new YAHOO.ext.grid.JSONDataModel( {
root: 'images',
id: 'name',
fields: ['name', 'url', 'takentime', 'shortName']
} );
this.eastDM.load('sample1.xml');
this.eastView = new YAHOO.ext.View( this.eastViewBody, this.thumbTemplate, this.eastDM, {singleSelect:true}
);

[anilcj]

I will give a little more detail on my goal:
Show tag cloud or folders in the left content panel
Show pictures for a specific folder or tag using JSONView in the center content panel
Let users do multiple selection in the center panel and click - add button (drag, drop is not working with existing chooser) to move pictures to right content panel, have a remove button to remove pictures from the right panel.

I only half way there.

Regarding the issues I am having:
- I am showing some data in the right panel as if user has selected something(for testing my concept), the data doesn't show up - I have an alert - it shows at that point and later wipes it out.
- The alert is showing data only in firefox and not in IE
- My albums tab should AJAX load on opening the dialog - it doesn't (i called activate in the script), I have to go to tags tab and come back to albums tab to make it load. The 06 link in the tag cloud works, everything else is work in progress...


Link:
http://72.249.38.79/media/test/DataModelImageChooser.html

Thank you for looking,
Anil

[tryanDLS]

Your test page doesn't seem to be coming up, but anytime something works in FF, but not IE, the first thing to look for is an extra comma in an object definition. If that's not the case, repost when your page is up again someone can take a look.

[anilcj]

Tim,

The link is coming up fine. Please let me know what error you are getting - trying to access it - its a hosted site.

It shows an insert image button. On Clicking the button, it shows two alert box's one with no content and the second with correct content. But, it doesn't display the content that I alerted in the right content panel.

Please run it in firefox.

Thanks,
Anil

[tryanDLS]

I didn't spend a lot of time on this, but I do see a null object error come up in IE when clicking on the '06' link - something is not getting built correctly. Also in IE it looks like the 1st alert appears twice and the 2nd one doesn't appear at all.

Debugging with alerts is very painful, especially if you don't put something the alert so it easy to track what shows on the screen back to what's in the code. It forces others to spend a lot of time trying to understand the code, before getting to the probleem. I would suggest using firebug and let it write log messages so you can trace the path, if can't step thru it.

Also, when posting examples for help, it makes it much easier if you post an example without a bunch of extraneous code (e.g. links to Yahoo, tons of commented out code, etc).

[jack.slocum]

You have two views fighting over the same thing. One of them (the original) has no data so it is wiping the panel. I would recommend organizing the code a bit and stepping through what is going on with FireBug. It will make you life much easier.

[anilcj]

I have debugged using firebug and found the problem. The code in reset function is nulling out the right panel content.

this.view.select(0);

I didn't have anything in the view (which is center panel content), so that method shouldn't select anything. Not sure, how that messed up my right panel. But commenting out solved it.

As a follow up to what I am trying to accomplish, can I have two toolbars - one in the center panel and one in the right panel. I just need a remove button in the right panel and add 'add' button to the center panel. This way, I can multi-select images into the right panel and also remove multiple images from the right panel.

The sample code in ImageChooser created a toolbar on dialog's body instead of creating it on the center panel and then moved it to center panel.

Thank you once again for pointing in right direction, the content panel looks very good.

Anil

[anilcj]

Also, my tab is not activated (AJAX load using update manager) even though I called activate. I had to click on it, Any thougths there?

Any sample code to add/remove data from JSONDataModel (format etc.,)?

Thank you.

[tryanDLS]

I don't believe loading the tab implies that it gets activated automatically. So you either activate the tab (via click or in code), and onActivate triggers your load. Or, when the load completes, your callback does an activate.

To add/remove rows look at the doc for LoadableDataModel - addRow takes an array of values, removeRow takes a rowIndex