Wednesday, December 10, 2014

Example of getting a json data and creating new html elements.


(note the difference between updating value of field and html)
[
Example shows, passing variable to request.get() in url, by adding other variable.
domConstruct.empty(dom.byId('profileasseen'));- will clear the dom
domConstruct.create('p',..) – create new dom element of type <p>
domStyle.set(nd, ..) – sets style for the dom element created above
domConstruct.place(nd,..) – places dom element in place identified.
]
function displayasseen(other)
{      
var uri = "http://localhost/yii/g3labs/?r=Group/getownerdetailsforothers&other="+other;
            request.get(uri).then(                                

                                                function(data){
                                                var   qaobj = JSON.parse(data);                      
                                    domConstruct.empty(dom.byId('profileasseen'));

                                      var paras = eval(qaobj.paragraphs);
                                    for(var i=0;i<paras.length;i++){

                                    var p=paras[i];

                                    var paragraphtags = p.paragraphtags;

                                    var paragraphpsy = p.paragraphpsy;

                                    var paragraphtext = p.paragraphtext;
           var nd=domConstruct.create('p',{innerHTML:'[Tags:'+paragraphtags.join()+']' });

                                    domStyle.set(nd,{width:700,  color:'red',margin:'1px' });

                                    domConstruct.place(nd,dom.byId('profileasseen'),'last');     

            var nd=domConstruct.create('p',{innerHTML:'[Psychology choice:'+paragraphpsy.join()+']' });

                                    domStyle.set(nd,{width:700,  color:'red',margin:'1px' });

                                    domConstruct.place(nd,dom.byId('profileasseen'),'last');     

                                   

            var nd=domConstruct.create('p',{innerHTML:paragraphtext });

                                    domStyle.set(nd,{width:700,background:'gray',margin:'1px' });

                                    domConstruct.place(nd,dom.byId('profileasseen'),'last');     

                       

            }         

            });

            }

No comments:

Post a Comment