0 Replies Latest reply: Feb 13, 2013 4:21 AM by Carlo Vruwink RSS

    Reading/get input from unsorted list html

    Carlo Vruwink

      Hello!

       

      we're working on a little project where we are trying to use extensions (with html/css/jquery) for making selections.

      We accomplished to get it working but now we want to get the input for our selection. Therefore we tried to loop through

      our data and put this in an unsorted list. It's is clickable and it makes the selection. The only thing is that all

      options are shown and that the nice apple-style popup with scrollwheel won't show (function won't work and css are overruled when tested on server).

       

      Maybe it isn't possible to put Data in an unsorted html list,..but maybe some folks here can help us?!

       

      Thanks already!

       

      //company: Victa
      Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/f1-teams/mobiscroll-2.4.1.custom.min.js", function() {
          Qva.AddExtension('f1-teams', function () {
          Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/f1-teams/jquery.mobile-1.2.0.min.css");
          Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/f1-teams/mobiscroll.animation-2.4.css");
          Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/f1-teams/team_selection.css");
          Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/f1-teams/mobiscroll-2.4.1.custom.min.css");
              // HTML
              var html = "";
              var _this = this;
              // Clickable
              window.onteamrowclick = function (rowIx) {
                  _this.Data.SelectRow(rowIx);
              }
              // loop through data
              for (var i = 0; i < this.Data.Rows.length; i++) {
                  // get the row
                  var row = this.Data.Rows [i];
      
              // Genereer html
                  html += "<ul id='teams'><li onclick='onteamrowclick("+i+")' data-val="+ row[1].text +" + <div class='car'><div class='img-cont'><img src=" + row[0].text + " </div><span style='float:left';> " + row[1].text + "</span></div></li></ul>";
              }
                  html += "<p><a href='#' id='clearList' class='btn btn-blue'><span class='btn-i'>Clear</span></a>  <a href='#' id='show' class='btn btn-blue'><span class='btn-i'>Show</span></a></p>";
              // Afsluiten html
                      // Toon HTML
              this.Element.innerHTML = html;
              });
              //Start Function
              $(function(){
                  $('#teams').mobiscroll().image({
                      theme: 'ios',
                      lang: 'en',
                      display: 'top',
                      animate: 'slideup',
                      mode: 'scroller',
                      labels: ['Make'],
                      inputClass: 'i-txt'
                  });    
                  $('#show').click(function(){
                      $('#teams').mobiscroll('show');
                      return false;
                  });
                  $('#clearList').click(function () {
                      $('#teams' + '_dummy').val('');
                      return false;
                  });    
              });
          });