Jump to content

wongadob

Members
  • Content Count

    174
  • Joined

  • Last visited

Community Reputation

15 Good

About wongadob

  • Rank
    Member

Profile Information

  • Location
    Neston, Cheshire, UK
  1. It will be 3.4 for this project. Trying to keep it as modular as possible, As I said I have not got much control over the JSON as its used on multiple products and platforms.
  2. I am learning the extjs framework and I have come across an issue. I have a simple JSON object I read from the server that is NOT an array of data, it is just a series of key-value pairs. This is displayed using a data view and XTemplate. The JSON looks like this:- { "likes": 0, "shares": 0, "comments": 4, "friends": 0, "tags": 0,} This is read by taking the user ID making a AJAX call using jsonReader to retrieve just these 5 bits of information. I just cannot get it to function correctly and I believe the reason is that JSONReader is expecting an array, not an object of key value pairs. What should I be using instead? I have spent the whole afternoon trying to figure this out, so now my cry for help. I need to have the data available for an xtemplate. The code I am using to read it is as follows. user_details = new Ext.data.Store({ reader: new Ext.data.JsonReader({ fields: ['likes','shares','comments','friends','tags'] }), proxy: new Ext.data.HttpProxy({ url: 'json/details.json' }), autoLoad: true}); I just have a dummy xtemplate at the moment I have hacked it right down to a single <h1>blah blah </h1> line, but it is never being executed. I assume because data is not being validated correctly. I have checked this by using a different store and xtemplate and they render fine in the same panel. As I mentioned above what SHOULD I be doing to make this data available for an xtemplate. Thanks in anticipation PS - I don't have any control over how the backend send the data so I need to find a solution from the FE
  3. I dont have control of the server side unfortunately. I can read the file via ajax, but need to be able to parse it. I have been looking through the MS file spec and it could take a while to write my own, so looking for a shortcut library.
  4. Does anybody know of any Javascript libraries that will read a microsoft .msg file (outlook email export). I am writing a system that requires an viewer to dispay .msg files that have been stored on a server. Anyhelp much appreciated. I will probably also have to do .eml in the future too. I have searched the net but not seen anything yet. BTW I am not using .net framework or ASP. This is pure HTML/CSS/Javascript+JQuery Thanks
  5. I can't believe there is no option for conditional operations within a template, surely there must be. I originally had the page creating itself into a string and then using appendTo, but the client wants it all to be using page templates for easy of future changes. I looked at using Jquery templates but I read that they were not supported anymore, particularly with Knockout JS. So I am trying to keep to pure Knockout js with mapping. Anyone else got any ideas? Thanks
  6. Hi I am using templates in Knockout JS and I am trying to create conditional markup within the template. The code I have is as follows (bit does not work and I don't think it is possible to do it this way within a template (I think this is the method outside templates) So does anybody know how it can be done <script type='text/html' id="mainPageTemplate"> <!-- ko if: ($index()%2==0) --> <div class="row group"> <!-- /ko --> <div class='seriesFeature col'> <a class='sect-nav' data-nav='pi_family' data-bind="click:goFamily.bind($data,id)"> <h4 data-bind = "text: name"></h4> <img data-bind="attr: {src: image}"></a> <p data-bind="text: description"></p> </div> <!-- ko if: ($index()%2==0) --> </div> <!-- /ko --> </script> The HTML setup is as follows <div id="pi_mainPage" data-bind="template: {name: 'mainPageTemplate', foreach: productInfoMain.families}"></div> So for element 0,2,4,6,8...... I want it to add the containing div with classes row & group. Any help much appreciated as I an stumped. I did try using the CSS nth-child but with the element having multiple classes it got a bit messy and for clarify it should really be in the HTML.
  7. By the way the reason there are two different ways of accessing the data in the HTML is because I was initially thinking that is where the issue was as I was getting a blank screen. So was trying all sorts of combinations of accessing the model.
  8. I have a globally defined view model as such which reads a JSON object from local storage (That bit works or at least did until I transitioned to Knockout mapping var gds = new gdStructure();if (localStorage.getItem("globalData")!== null){ gds=ko.mapping.fromJSON(localStorage.getItem("globalData"));}else{ // do a load of data automatically}function gdStructure(){ this.currentFamily = 0; this.currentSeries = 0; this.currentProduct = 0; this.productInfoMain = new Object(); this.family = new Object(); this.series = new Object(); this.product = new Object(); } I then Load a JSON file, set productInfoMain with the new data and re-map to Knockout. In the following way $(document).ready(function(){ $.ajax({ type: "GET", url: "JSON/productInfoMain.json", dataType: "JSON", success: function(feed) { console.log("feed",feed); ko.mapping.fromJSON(feed,gds.productInfoMain); ko.applyBindings(gds); } });}); Where I log the feed it is as it should be so I know the file has loaded. I am currently getting this error message - Uncaught TypeError: Cannot read property '__ko_mapping__' of undefined I have been banging my head with this for about 4 hours now and just cannot get it to work. I access the data in HTML as such (that may have been previous error) <h1 id="pageHeader" data-bind = "text: productInfoMain().overview.title()"></h1><h3 id = "subtitle" data-bind = "text: productInfoMain.overview.subtitle"></h3> The JSON file structure is as follows (with extra data hacked out for clarity there was another section after "overview" on the same level) :- { "header": { "title": "Product Information", "description": "Full Product Information for XXXXXXX", "language": "en-us", "pubDate": "Tue, 10 Apr 2012 04:00:00 GMT" }, "overview": { "title":"The title of the page", "subtitle": "blah blah subtitle", "mainDescription": "blah blah" },} If anybody can see where I am going wrong , it would be much appreciated!
  9. Hi, I am trying to create a bar chart using background colours. I generate the HTML when entering the page based on values pulled via AJAX, but that is not the issue. The issue I am having is simply trying to get text on top of the bar. I can create a bar that is X% of the width of the div, but can't then get the text to sit ontop of the bar and the actual value to sit far right so I have. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX - Full width of divItem 1 ValueXXXXXXXXXXXXXXXXXXXXXXXX - this would be the background color bar that would sit under where it says item 1. Hope that is clear. I can get the background colour under item 1 but it sets the whole width so value is floatring right to the end of the bar not the end of the containing div. I have tried using Z-index and set it up as a seperate <span> with the text and value also as seperate spans. My code <div style = 'padding-10px'><span class = 'percentageBar' style='width:5%;'></span><span class ='desc'>My Description</span><span class ='value'>37</span></br></div> Where I have width 5% I actually calculate that width. which could be 0 to 100% of the outer div. Hence may or may not go under the Value at the end but always starts flush with the description. The css is as follows: .percentageBar{ float: left; display: inline-block; z-index: 10; background-color: #c0c0c0; opacity: 0.9; height: 20px;}.desc{ float: left; z-index: 30;}.value{ float: right; z-index: 30;} I would have through becuase they both have different z-index the float left should solve it. I have tried also withy position absolute but then I have to calculate the position of evey entry in the bar chart rather than using padding and breaks etc. Any ideas how to get around this? Thanks
  10. I am trying to take some control of where some text in a li wraps. Here is what I want to do. It is a typical set of tags and each tag has an X icon for deleting that tag. so it takes this form <div id="tags_text" style="display:none;"> <ul class="profile_tag_list" data-bind="template: {foreach: data()[0].add_tags(), name:'add_TagsTemplate'}"> </ul> </div> <script type="text/x-jquery-tmpl" id="add_TagsTemplate"> <li id='${atag}' class='tags_li'>${atag}<span class='tags_li' style='margin-right:5px;margin-left:3px;'><img src='images/tag_erase.png' class='tag_erase' onclick='removeTagProfile("${atag}")'style="cursor: pointer;"></span></li></script> Now the behavior I want is to wrap the whole tag if the little X icon will not also fit on the line. ideally the full tag and the X would stay on the line, but most important really is that the last word and the X would be on the same line i.e. tag 1 X tag 2 X The thirdtag X would be OK, but thistag 1 X tag 2 X The third tagX would not be OK ideally tag 1 X tag 2 XThe third tag X would work. I have tried putting it all in one li to see if there is any way I can make that whole li warp as if it was one long word. But have no idea how to achieve it. Any suggestions or solutions appreciated
  11. I have found a way around it. Mainly by delaying the calling of the next function by putting that on a timeout.
  12. I tried putting all the other code in a callback and it still did not display the spinner first. So I have tried using the visibility flag. The thing is I need to know when it has been actually rendered to the screen. For some reason it does not render to the screen (i.e. it actually is shown) before the callback happens. Or does not appear to. As I say if I put an alert straight after the show. if does alert and the correct screen is shown. If I dont have the alert it often never even shows the spinner. I believe because it is thinking its visible (because JQuery has told the system to render it, but the system has not got round to it yet) and so it marches on and makes other changes which must get rendered quicker (god knows how). Interestingly if I put something like this $("spinnerPage").show(200,function(){rest of the code}. It does a slow fade up of the spinner page. i.e. no way its 200ms more like about 2 seconds! and you can visibly see the screen updating.(and it has jumped to the top (ScrollTop zero) before the fade starts). If it is any help this is under blackberry webworks also using KnockoutJS for DOM manipulation. It is wrecking my head, I must have tried about 50 combinations of options. Currently I am using the visibility flag as I read somewhere that display: none can cause issues. But obvioulsy with visiblity I cannot use the show function and hence there is no callback solution on that one. That does not work either tho' Again if I put an alart in immediately after the ('#spinloaderPage').css("visibility","visible"); like so $('#spinloaderPage').css("visibility","visible"); Alert("here"); console.log("spinner on in back function"); if($('#contactpopup').is(':visible')) { closeContactPopup(); } ** The closing the contact thing is there just to show where it exists in the code above. ** Result is it shows the spinner page fine and does not go to the top first and does the transition behind the spinner. If I remove this alert line then it does go to the top first, never shows the spinner and the whole transition mess is visible rather than hidden behind the spinner. agghhhh!
  13. I have an issue that I am really struggling to resolve. I have a mobile product that displays various pages by showing and hiding divs. Each page need to be generated when a page change happens, so I have a 'blank page' that contains a spinner. The header of the page is on show all the time and the pages appear below the header. All pages are hidden. The spinner page is set at highest z-index so it will always show above all other pages. so the process goes as follows messages pagespinnerconversation page<back is pressed>spinnerMessages page etc. That is a huge simplictication but is one of the paths. What actually happens is like this, going from conversation page back to list of message headers page The spinner is show (this is immediate)The page underneath is hidden and the new page show.All data is loaded via Ajax callThe data is formattedand the new HTML for the page created.the spinner is hidden and a nice shiney new page is displayed. The problem is that the spinner is not appearing before all the page changes happen.so in effect you start to see the page getting cleared and drawn for a while before the spinner is shown. infact sometimes it completes the entire operation before the spinner is shown and it gets hidden again before you ever see it, but you have witnessed the re-draw, I cannot do it as a call back in the show funtion of the spinner as each page has its own initialisation function and display function and I could be going from any one of 10 pages to any one of 10 other pages. If I put an alert immediately after the show spinner. Then it works fine I do not see any re-draw (as it has never got there) and the spinner shows perfectly. Is there any way to delay the code until the spinner is shown Thanks Here is my back function to give you an indication of what I am trying to do (bare in mind it is not normal 'back' as the system does not change HTML pages it all happens on one page so the back is in effect just storing a sequence of pages and poping them when back is pressed. showSpinner(); alert ("here"); if($('#contactpopup').is(':visible')) { closeContactPopup(); } backStack.pop(); i = backStack.length; console.log ("Backstack length ", i) if (i != 1) { x = backStack.pop(); } else { x = backStack[0]; } console.log ("page popped ", x) switch (x['page']) { case 'grouplist': initGrouplist(); break; case "memberprofile" : initMemberProfile(x['params']); break; case "companyfeed" : initThreadHeaders(); break; case "conversation" : initConversation(x['params'], x['reply'], x['type'], x['sender'], x['returnFocus']); break; case "notifications" : initNotifications(); break; case "pmFromUser": initPrivateMessageFromUserProfile(x['params']); break; case "groupfeed" : initGroupFeed(x['params'],x['name']); break; case "privatemessages" : initPrivateMessages(); break; case "options" : initOptions(); case "index" : backStack.push( { page : "companyfeed", params : 0 }); hideSpinner(lastFeedHeader); break; default: break; }}return true;} The show spinner and hide spinner functions are as follows function showSpinner(){var t = (($(window).height() - 50)/2)-16;var l = (($(window).width() - 50)/2)-16; var h = (screen.height-88);$('#spinloaderPage').css({'height' : h});$('#spinLoader').css({'left' : l,'top' : t});$('#spinloaderPage').show(); stopScroll(); console.log("spinner on");}function hideSpinner(id){var el = document.getElementById(id);startScroll();$('#spinloaderPage').hide();// setScrollTop(id);newSetFocus(el);setScrollTop(id); console.log("spinner off and focus should be set to ",id);} Any help apprecatied Thanks
  14. wongadob

    Web app Design

    Can anybody recommend a good free web app design application. What I am looking for is something that has all the common components say for ASP (windows standard input boxed, drop down lists, options menus etc) and will allow me to quickly mock up screens of the functionality of web sites or applications. Also allowing a screen flow creaton. so I can connect one screen to another. The purpose of this really is a fast way to mock up a site for clients to feedback on what they want. Any help much appreciated Marc
×
×
  • Create New...