[globalgraffiti]

I ran into a related issue as this same thread i was just posting in. I didn’t post back fast enough before it was closed. https://www.genuitec.com/support-genuitec/viewtopic.php?f=19&t=6434

What i’m trying to do is reset the 4 selected values in each list item so the user feels like the product is added, and reset’s the 4 values back to the default selection’s before they selected anything.

My new issue is the app works fine as it should until user presses the Add Part button, and after that the selected option values no longer get added to the sub list selections, once they try and start on their 2nd product selections.

Here is sample site.
http://www.globalgraffiti.net/clients/mobionetest/v3/

There may be a simpler way to do this, but i’m not sure how.

This is the final function that is called after the Add Part button is pressed. Without it the app runs fine only the main 4 options Type, model, Size, Quantity show the previous values selected and doesn’t reset back to the default values when the page is first loaded.

function clearlists()
 {
             
  var slmPageIds = 'm1-form-landing-screen3-list2';    
  var thislist = $('#' + slmPageIds);
   var liplaceholders = thislist.children()[0];    
   var placeholders = thislist.children()[0];           

        thislist.empty();
       // select.empty();

        var itemsCount = 3; // Count of items we want to add
        var selectedIndex = 0; // Index of selected item

        var defaultvaluess = new Array();
        defaultvaluess[0] = "Item";
        defaultvaluess[1] = "Model";
        defaultvaluess[2] = "Size";
        defaultvaluess[3] = "Qty";

        var defaultvalues = new Array();
        defaultvalues[0] = "select item";
        defaultvalues[1] = "select model";
        defaultvalues[2] = "select size";
        defaultvalues[3] = "select qty";

         var values = new Array();
        values[0] = "action6";
        values[1] = "action9";
        values[2] = "action12";
        values[3] = "action15";

        var hiddeninputs = new Array();
        hiddeninputs[0] = "m1-form-landing-screen3-hidden-select-selectListMenu1";
        hiddeninputs[1] = "m1-form-landing-screen3-hidden-select-selectListMenu3";
        hiddeninputs[2] = "m1-form-landing-screen3-hidden-select-selectListMenu4";
        hiddeninputs[3] = "m1-form-landing-screen3-hidden-select-selectListMenu5";


        var dataselection = new Array();
        dataselection[0] = "m1-form-landing-screen3-selectListMenu1-selinfo";
        dataselection[1] = "m1-form-landing-screen3-selectListMenu3-selinfo";
        dataselection[2] = "m1-form-landing-screen3-selectListMenu4-selinfo";
        dataselection[3] = "m1-form-landing-screen3-selectListMenu5-selinfo";



        // That list fills <options> and SLM's list
          for (var i=0; i<=itemsCount; ++i) {
          var clones = $(placeholders).clone();
          var liclonea = $(liplaceholders).clone();


          clones.attr('dataactions', values[i]);   
          clones.attr('hiddeninputs', hiddeninputs[i]);   
          clones.attr('datainfoid', dataselection[i]);      

          // clone.text(myvalues[i]);

          if (i != selectedIndex) {
         //   clone.removeAttr('selected');
          clones.removeClass(m1Design.css("selected"));
          }
         // select.append(clone);
          
          if (i != 0) {
            liclonea.removeClass(m1Design.css("first"));
          }
          if (i != "BW (BUTT-WELD) SCH 160") {
            liclonea.removeClass(m1Design.css("last"));
          }  
          $("label", liclonea).text(defaultvaluess[i]);
           $("Div", liclonea).text(defaultvalues[i]);
            liclonea.attr('data-action-click-id', clones.attr('dataactions'));
             liclonea.attr('data-hiddeninputid', clones.attr('hiddeninputs'));
              liclonea.attr('data-selectioninfoid', clones.attr('datainfoid'));
                   
          thislist.append(liclonea);
        }

        // Set scrollable panel size
        thislist.parent().attr('data-layout-content-height', (itemsCount-0)*44 + 3);

        setTimeout(function() {
          phoneui.preprocessDOM($('#' + slmPageIds).parent());  
        }, 50);

        return false;

 }


		
	

[support-octavio]

Hi globalgraffiti,

What I can see is that you are clearing your select list menus every time that Add Part button is pushed, right? Wouldn’t be easier use the existing items on list and select the default as when you just add the first element to produc lists? Attached an example. Let me know if you need further assistance.

Attachments:

You must be logged in to view attached files.

[globalgraffiti]

The example you sent only works if you keep the list item option as a SPINNER. If i change it to a select list, your code no longer works on the example you sent. I need the code to work for a select list not a spinner.

[globalgraffiti]

Very interesting find. – the <select> option is updating as you can see below, but because its a “Select List” type and not a Spinner there is a <ul><li ID=”ID-NAME-selecteditem”> element that needs updating as well.

How can i do that in cahoots with the code you sent?

This is before the code you sent is called 

<select id="m1-form-landing-screen3-hidden-select-selectListMenu1" name=
              "selectListMenu1" data-action-change-id="action7">
              <option value="selecteditem" label="select item" >select item</option>
              <option value="Float" label="Float">Float</option>
              <option value="Relief" label="Relief" selected="">Relief</option>    /* selected item */
              <option value="Gate" label="Gate">Gate</option>
            </select>

This is after

<select id="m1-form-landing-screen3-hidden-select-selectListMenu1" name=
              "selectListMenu1" data-action-change-id="action7">
              <option value="selecteditem" label="select item" selected="">select item</option> /* selected item */
              <option value="Float" label="Float">Float</option>
              <option value="Relief" label="Relief">Relief</option>
              <option value="Gate" label="Gate">Gate</option>
            </select>

[support-octavio]

Hi globalgraffiti,

I have escalated this question to the dev team who developed the implementation of these widgets. Will follow up with you as soon as I get more information.

[globalgraffiti]

Great Thanks, below is the code i’m using now. If you want to see the project file i need my account unlocked for attachments.

function clearlists()
 {              

// ID of <select> HTML element that containts combobox values
$('#m1-form-landing-screen3-hidden-select-selectListMenu1').val("selecteditem"); 
phoneui.preprocessDOM('#m1-form_landing_screen3'); //force UI to update

}

 
  function AddPart()
  {
    AddItemToArray();
    ClearSummaryList();
    RefreshSummaryList();   
    clearlists();       
   
  };

[globalgraffiti]

Any updates on this issue?

[support-octavio]

Hi globalgraffiti,

There was a solution that we were going to share with you, but we realize that it only resets the first Select List Menu item. This was because you are only cleaning and rebuilding your first select list menu. So, what I suggest you is to create a function that receives the parameters (i.e. select list menu id, action id) and do the process of cleaning and building the list, then you will have to call this function four times but passing the different parameters. The other easy but not recomended aproach is copy/pasting the block code and change the necesary vars to clean and repopulate the 4 select list menus.

Hope this is helpful. If you need further assistance, we can take a look at your code if you are willing to share your project with us, since it’s easier to debug out of web app and would make the process of helping you faster, you can either attach it to thread (moved your thread to Getting Help forum so you can attach files) or send it to support email: support at genuitec dot com, use title mobione data from globalgraffiti

[globalgraffiti]

I was able to find a solution for updating the <li> lists. I just refined a method i found on Google and added a loop.
What i did was remove the “m1-selected” for each of the 4 <li> elements along with the <Select> code you posted.

   var Type =  $('select[name="selectListMenu1"]').val();          // this is the type options list 
    var Model =  $('select[name="selectListMenu3"]').val();        // this is the model options list 
    var Size =  $('select[name="selectListMenu4"]').val();         // this is the size options list 
    var Quantity =  $('select[name="selectListMenu5"]').val();  // this is the quanity options list 

// Find the <LI> elements i want UI to update and remove the "mi-selected" class. 

  var Count = 4;          
      var remove_class = 'm1-selected'; 
     for (var i=1; i<=Count; ++i) {           
             if (i == 1) {        
          element = document.getElementById('m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu1-si-'+Type);
      }       
      if (i == 2) {        
          element = document.getElementById('m1-form-landing-screen3-'+Model);
      }
      if (i == 3) {        
          element = document.getElementById('m1-form-landing-screen3-'+Size);
      }
      if (i == 4) {         
          element = document.getElementById('m1-form-landing-screen4-'+Quantity);
      }    
       element.className = element.className.replace(' ' + remove_class, '').replace(remove_class, '');          
    }

function clearlists()
 {              

// ID of <select> HTML element that containts combobox values i want to reset. 
$('#m1-form-landing-screen3-hidden-select-selectListMenu1').val("selecteditem"); 
$('#m1-form-landing-screen3-hidden-select-selectListMenu3').val("selectedmodel"); 
$('#m1-form-landing-screen3-hidden-select-selectListMenu4').val("selectedsize"); 
$('#m1-form-landing-screen3-hidden-select-selectListMenu5').val("selectedquanity"); 
phoneui.preprocessDOM('#m1-form_landing_screen3'); //force UI to update

}

I attached 1 page of my project for others to see / use for inspiration. FYI – To get lists to work, You will have to replace the form-landing-screen3_custom.js file that gets auto generated in the auto generated html folder with the one that’s attached.

TO ALL – Help Topics that you may want to view this script for:

Updating – List Display Mode (Select List)
Appending – Select List
Dynamic – Select List
Array passed to – Select List
Removing / deleting item from – Select List
Creating Email with Select List Options
Alerts w/ pop ups for Select List Validation.

Attachments:

You must be logged in to view attached files.

[support-octavio]

Hi globalgraffiti,

Thanks for your follow up and sharing your solution with the comunity. Closing thread.

[Author]

Posts