Duplicated List Autodividers

[Jakub]

Hi,

I am using following code to create custom List dividers. everything work fine on when adding new sections. When I try to add items to an existing section it duplicates the divider with identical information. See attached screen capture.
Is there way to prevent it? I want all items with same parameters under one divider.

Code I am using:

-----------------------------------------

var listName = "lstMethods_3";

var deviderOrder = 0;

var lblOut="";

var OutArr;

Appery(listName).listview({

Code: Select all

 autodividers: true, 

 autodividersSelector: function (li) { 

     // Here is a place where you need return autodevider text. 

    // return "AutoDevider[" + deviderOrder++ + "] = " + li.text().trim(); 
     var label = li.find("[name=lblSite]"); //Find component 
     var label2 = li.find("[name=lblMtxStr]"); //Find component 
     var label3 = li.find("[name=lblNoSamp]"); //Find component 

    //alert(label3.text()); 

     if (label.text()!=="") { 
         // lblOut = "Site: "  + label.text(); //Return label text 
          lblOut = label.text() + ", " + label2.text() + ", " + label3.text(); //Return label text 

     } else { 
          lblOut = ""; 
     } 

     return lblOut; 

 } 

});

Appery(listName).listview("refresh"); //Refresh list component

Appery(listName).trigger("listviewcreate"); //Initiate dividers creation

------------------------------------------------

[Egor Kotov6832188]

Hello Jakub,

1) If lblOut has same value as previous one, that is why you seeing this.
2) try to add console.log to be sure you lblOut set value only once.

[Jakub]

Hi Egor,

That is the point, it should be the same for item 1 and 3. I want them consolidated under the same divider. How can I do that?

[Yurii Orishchuk]

Hi Jakub,

Are you sure you have the same values for these two items?

Please try to replace your code:

pre

lblOut = label.text() + ", " + label2.text() + ", " + label3.text(); //Return label text

/pre

With following:

pre

lblOut = label.text().trim(); + ", " + label2.text().trim(); + ", " + label3.text().trim();//Return label text
console.log("lblOut = '" + lblOut + "'");

/pre

Then, please open browser console to see what actually you have in returned value.

Regards.

[Jakub]

I did that.

Here is console output. As you can see line 1 and 3 are identical, so they should be grouped under the same divider. But they aren't.

lblOut = 'Group: 1, Water, 1 samples'
lblOut = 'Group: 2, Soil, 3 samples'
lblOut = 'Group: 1, Water, 1 samples'

[Yurii Orishchuk]

Hi Jakub,

Please give us your app public link and describe steps how we can reproduce this problem in your app.

Thanks.

[Jakub]

http://appery.io/app/mobile-frame?src...

1) Click container Kit order
2) Leave the defaults in on the next page
3) Click on several methods and hit Continue button
4) Click New Group button on the Cart page
5) Select Soil/Solid matrix from top dropdown
6) Click on several methods and hit Continue button
7) Click on one of the Methods under the first divider
8) Click one or more Methods that do not have checkmark next to them
9) You will see the first divider duplicated on the Cart page

[Jakub]

OK.
I resolved it different way:
It appears that the divider is just looking for a change in the string to create new divider.
So on Page Load I re-sort the array that the List items are loaded from based on the Site element of the array.
that seems to get the desired effect.

This piece of JS gets it done. It must run before the before array is mapped to the List and before the divider JS above.

//sort cart
try {
var cart = Apperyio.storage.cart.get() || "Nothing";
if (cart!=="Nothing") {

Code: Select all

         //SORT 
         cart.sort(function(a,b) { 
              return a.Site - b.Site; 
               }); 
         // Persist cart 
          Apperyio.storage.cart.set(cart); 

 } 

}
catch (error) {
alert("Something went wrong: ", error);

}

[Illya Stepanov]

Hi Jakub - Thank you for the update.