locked
binding to Select element in Template fails intermittently

    Question

  • Hi All

    I've got a template which contains two select tags, they both bind to different datasets which get generated by a javascript function. The problem is that they fail sometimes, not that often but often enough for it to be problematic. They also always BOTH fail(inside both selects in all instances of the template) even though I have a log showing me that the data was successfully retrieved.

    I'll paste some code showing I build up the data, any suggestions on a better approach would be appreciated, I've stripped out unnecessary code.

    Thanks

    HTML template looks like this:

    				    <div id="spendingGroupTitle" class="title margins">Spending group</div>
    				    <select id="spendingGroudSelect" onchange="transactionCard.onSpendgGroupChange(event)" data-win-bind="innerHTML: root transactionCard.setSpendingGroupsAndSelect" class="margins values">
    				    </select>
             
    				    <div id="categoryTitle" class="title margins">Category</div>
    				      <select id="categorySelect" onchange="transactionCard.onCategoryChange(event)" class="margins values" data-win-bind="innerHTML: root transactionCard.setCategoryAndSelect">
    				      </select>
    				    </div>

    JS code:

      "use strict";
      WinJS.Namespace.define("transactionCard", {
        setCategoryAndSelect: WinJS.Binding.converter(_setCategoryAndSelect.bind(this))
      });
    
    
     function _setCategoryAndSelect(root) {
        var optionsHTML = '';
    
          var selectedGroup = root.category.description;
          var categories;
    
          var categories = [];
          if (myApplication.isLoggedOn()) {
    
            window.myApplication.getCategories({
              successCallback: function (args) {
                categories = args;
    
                for (var i = 0; i < categories.length; i++) {
                  if (categories[i].description == selectedGroup)
                    optionsHTML += "<option value='" + categories[i].id + "'selected='selected'>" + categories[i].description + "</option>";
                  else
                    optionsHTML += "<option value='" + categories[i].id + "'>" + categories[i].description + "</option>";
                }
                console.log('optionsHTML is ', optionsHTML);
                return optionsHTML;
    
              },
              errorCallback: function (args) {
                console.log('could not complete API call to retrieve spendingGroups')
              }
            });
          }
        
        return optionsHTML;
      }

    Monday, March 04, 2013 12:15 PM

All replies

  • Hello,

    Can you isolate your problem to a repro app and share it via SkyDrive, this way it will be much easier to understand the problem you are experiencing.

    Thanks,

    Prashant.

    Tuesday, March 05, 2013 2:05 AM
    Moderator