Help using JS to return JSON server data to GridX

[goody]

Hi, 

I have a javascript that grabs json data from a server (stores as text in a variable modifying to suite gridx format) and I want my gridx table to be able to grab this an load the information, is there any way to do this?

I know if the server was returning the exact info I could just put the url in using the wizard, but it requires some modification client side for the column header names.

What code is expected in a javascript source file that would allow gridx to grab the data? 

I'm new to web develop so I might be missing something obvious.  

thanks

Brad

[Tony Erwin]

Hi, Brad,

I may need to know a little bit more about what you're trying to do... Do you actually need to change the data from the server or do just need to look at the data from the server to determine what you want to use for column header names?

Tony

[goody]

Hi Tony,

I have javascript that gets the data from the server (builds the request and gets the response) but since the response doesn't contain header column names (necessary for the gridx container) I modify it so that it does.  

What I'd like to see happen is the gridx call this javascript and get the updated json data returned as the source. 

That help clarify?  Let me know if you have other questions, I'll answer them as best I can.

Thanks

Brad

[goody]

any ideas?

[Tony Erwin]

Hi, Brad,

Many apologies... I've actually replied twice (once about 9:00 pm CST last night and another attempt pretty late). For some reason, the google forum says there are 6 messages on this topic. But, two of them (mine) say "This message has been deleted." Ugh...

Anyway, I've put together some runtime JS that demonstrates how to both change the data on your GridX and and change the column headers. The key is updating your app.js file contained within your project in Maqetta. It gives you a convenient place to put your custom JS that runs after the page (and dojo) have been loaded.

I suspect my posting issues have related to pasting/attaching the sample JS. So, I'm going to hit post now, so hopefully you get this message. And, I'll try to follow-up with the JS in a separate post.

Thanks,

Tony

[goody]

Thanks Tony, that sounds like what I'm trying to deal with.  Are you trying to attach the js files without changing the ext?  could that be why the messages got deleted?

Thanks again.

[Tony Erwin]

Ok... looks like the one post finally went through, but my next one (containing the JS failed again). Let me try again...

To run in your environment, do the following:

1. Insert the attached JS snippet into your app.js file (in the place where the "logic that requires that Dojo is fully initialized should go here" comment is)
2. Create new HTML flle
3. Drag and drop a GridX widget onto the page
4. Click Finish on the wizard
5. Set the id for your GridX to "myGridX" using the properties palette
6. Preview the page (probably need to clear your browser cache first) and instead of the default data, you should see a listing of 3 U.S. states and modified column label

Please let me know if you have further questions. And, apologies for the technical glitches with posting.

Thanks,

Tony

[goody]

I can't find any app.js (doesn't look to exist, only app.css).  Can I load the js from somewhere in the html? 

[Tony Erwin]

Apologies... I forgot that app.js is not included in the M6 preview release. It's included in our nightly drivers for the next release.

So, I've attached a full app.js file and a full html file that contains the GridX widget and loads my app.js. I've tried it, and it works in M6. You should just be able to upload them into Maqetta and then preview the HTML file. (I've made them be ".txt" files so I could attach them in the google forum, so you'll need to change their extensions before uploading to Maqetta.)

Thanks,

Tony

[Tony Erwin]

Oops... here are the attachments...

[goody]

worked... ah I was missing was the window load event listener.  This will definitely help thanks.

[goody]

Ok so I have a related question/problem.  I can get a row for each object returned to display but none of the data. (see attached image)

The data I have returned from the server looks to be formatted as needed from what I can tell in the debugger and JSON.stringify.  

[{"name":"Sanity_Testset_1","ax_id":"1"},{"name":"Sanity Testset 2","ax_id":"2"},{"name":"andy3","ax_id":"3"},{"name":"Pappy00","ax_id":"13"},{"name":"andy2","ax_id":"14"},{"name":"Pappy01","ax_id":"15"},{"name":"Pappy02","ax_id":"16"},{"name":"PappyDeleteTest00","ax_id":"18"},{"name":"Pappy03","ax_id":"19"},{"name":"Pappy04","ax_id":"20"}]

I substitute the object list returned from the server in for the hard coded items list and only rows appear.  Even substituting the above string in place of the array variable does not display the data.  Any ideas what I'm missing here?

Also if I substitute the hard coded list example you supplied me everything works fine, so I'm assuming there is some formatting thing I'm missing either related to JSON or javascript right?

Thanks

Brad

On Thursday, July 12, 2012 12:55:23 PM UTC-4, Tony Erwin wrote:

[Tony Erwin]

Hi, Brad,

I've attached a new app.js snippet that works with your attached data.

Perhaps, when you replaced the items list in the my source with your list  you didn't update the unique_id field in the data to match your new unique id (e.g., "ax_id")? Or, maybe didn't update the structure in the call to setColumns to match your new ids?

Tony

[goody]

I did update them but I used setColumns wrong.  I saw the fields were id and label so it translated in my head to be for the old data I was replacing not the new (its always the little things) .  Fully works now, thanks for you help.

You very well may hear from me again :)  

[Tony Erwin]

Partly motivated by this thread, I've created a blog post on Adding Your Own JavaScript to Maqetta Prototypes with a number of examples.

Also, if anyone has any ideas for topics they'd like to see in the future in my Maqetta blog, please let me know. 

Thanks,

Tony

P.S. You can follow @Maqetta (or @tonyerwin) on Twitter if you want to be notified of my future blog postings.

[Pedro Figueiredo]

Greetings,

I am nearly finished with both a mobile web app and a website done with Maqetta and all js code I did was done separately for behavior/control, AJAX calls and sessionStorage and localStorage from HTML5 to avoid using cookies.

Is there anything I "loose" by not using the method used in the example which uses things like dojo.byId? I have used normal DOM methods in simple situations and jQuery for more complex queries to the document. What differs from that to dojo.byId for example?

Cheers!

[Adam L. Peller]

On Sat, Jul 21, 2012 at 7:50 PM, Pedro Figueiredo <mor...@gmail.com> wrote:

Is there anything I "loose" by not using the method used in the example which uses things like dojo.byId? I have used normal DOM methods in simple situations and jQuery for more complex queries to the document. What differs from that to dojo.byId for example?

Yes, there are subtle things the toolkits provide for each of these methods.  You'd have to consult documentation and source code for details.  Generally speaking, simple methods like dojo.byId, dojo.style, and their jQuery counterparts are pretty close to native DOM methods nowadays.  There are still some branches to handle browser quirks -- not nearly as many as there used to be -- and you may find that they provide little benefit over using browser DOM methods directly.  Some of these methods also provide sugar over the native DOM methods.  dojo's dom-construct create method, for example, wraps DOM node creation, attribute setting, styling, and placement all into one command.  dojo.query and jQuery both let you chain commands, which some people like, but using QSA in modern browsers is often sufficient.

-Adam

[Pedro Figueiredo]

Ok thanks for the reply :) so the most I am actually loosing is that by using Maqetta which uses dojo, when I am also using jQuery, I increase the amount of libraries code sent to the user's machine.

Cheers!

[Adam L. Peller]

Yes, adding a dependency on a toolkit certainly implies more code to download for the page.  Dojo base isn't particularly large, but you typically wouldn't need to use Dojo only for these two methods.  Maqetta presently makes much use of widgets from the Dojo Toolkit (including dijit and dojox/mobile) so this usage often makes the most sense.

One tweak to Tony's example is that you can now refer to Dojo modules individually, rather than pull in a dependency on all of Dojo base, e.g.

require(["dojo/dom"], function(dom) {

  var node = dom.byId("myNode");

});

which would only pull down a the dom module (4K uncompressed) in addition to the Dojo loader.

-Adam