Odd Behavior of show/hide in repeaters

Some time ago, Yisrael posted an example titled “Input Repeaters” which described a method for doing “in line” input/edit of data within a repeater. This sounded like a good idea, so I followed the gist of his example and implemented it in my site: display fields, input fields, and buttons showing or not depending upon actions with the context of a repeater entry. All working as designed until I published the site.

On the live site, show() was not showing anything when the appropriate button was clicked. Added console messages to check the .isVisible attribute of the elements. The messages implied that I should be seeing the elements (.isVisible was true). Hmmm…

I went back to Yisrael’s example and found this odd set of statements:

// why does this make it work?
$item( ‘#dropdown1’ ).show();
$item( ‘#input1’ ).show();

        $item( '#dropdown1' ).hide(); 
        $item( '#input1' ).hide(); 

You’ll notice that the code shows and then immediately hides the same elements, prefaced by his rhetorical question.

Figuring I had nothing to lose, I followed this approach in my own code. For an element I wanted to show, I hid the element immediately before the show() statement. Bingo! Everything worked in live just as it did in preview. I am left with the same question as Yisrael: why does this make it work?

I figured I would post this in the “pro” section, as Yisrael encountered the same issue. Any and all thoughts or comments appreciated.

Hey Dave, I forgot all about that. It seems to me that this has to do with the way that the Repeater renders its child elements.

Interesting issue. I’m going to see if I can find someone who can shed light on this. Until then, it will remain an enigma.

For anyone who’s interested, see the Example: Input Repeaters and you’ll find the code after the comment " why does this make it work? ".

A mystery wrapped inside an enigma…:wink:

1 Like

Hmm, after playing with this the last couple of days, it seems it’s more like a pig wrapped inside a blanket… I can’t get this not to work. That is, I took the original example where I included the work-around, and even if I delete the work-around code, it still works as it should.

OK - so I don’t want to sound like a crybaby, but if something’s supposed to be broken, I want to see it broken. Are you still encountering the problem? Can you supply me with a link to see the problem? It might just be that for some reason, my scenario works now where yours doesn’t. I really want to figure this out.


@yisrael-wix I am still seeing the issue on my site. What access will you need? The page in question is restricted to members and the issue only appears on the live site. One difference between your example and mine is that I am showing and hiding boxes rather than individual elements. Here is the Layer setup:

So if rendering children is the issue, I have a another layer of children than you do.

I have a review with end users today, so will not be able to make my code available until tomorrow. I will let you know when I have something out there that you can get at.

Thanks for pursuing this.

@davebogan98 Whenever you’re ready. Just post the URL of your site and tell me where and how to see the problem. Also, you can put test member login credentials in a backend file so that I can login and test as needed.

@yisrael-wix Website is: www.naturallakes.net. I created a txt file with your name in the Backend with credentials and directions. Give it a whirl and let me know what you find out.

@davebogan98 I’m looking, but meanwhile, a couple of comments…

This statement (lines 164 and 248) is incorrect:

if (event.key === "Enter" | "Tab")

It should be:

if (event.key === "Enter" || event.key ===  "Tab")

Also, in this statement (lines 76 and 239), value must be a string

 if (regExpAmount.test(value)) {

Should be something like this:

 if (regExpAmount.test(value.toString())) {

However, I haven’t checked all of the code surrounding this check, but I suspect that what you really want is that the fields that are being validated are defined as string (not number) and that if the value is valid, it would then be converted to a number to be used.

Still didn’t get to the issue at hand.

Which field in the Repeater isn’t behaving as you want?

It could very well be that the errors I pointed out above are the cause of the problem.

I wanted to try some tests to see for myself what’s happening, but I’m certainly not going to start entering payments for members of your site.

I would suggest that you first correct the errors and see if that helps.

If you still encounter the issue after fixing the errors, perhaps create a test member that I can apply some payments.

Okay, those are errors but not the heart of the issue. If you use Layers, you can see that the repeater has a container (as usual) and within the container are #inputBox and #displayBox. Theses two boxes (and their contents) are the ones that won’t display properly unless I do the hide/show or show/hide code ala your example. By default, the #displayBox is shown and the #inputBox is hidden when the page loads. When the user clicks the #editIcon, then the #displayBox should be hidden and the #inputBox should be shown. If the user hits either the #saveIcon or the #cancelIcon, then the reverse happens. Sorry I did not make this clearer.

You can use me as the test member – this will not confuse anyone.