Monitor Reply

Support

Hiding all items of an itemlist and select it with an select box

Permalink Browser Info Environment December 24, 2015 at 5:16 AM

Dear all,

I try to hide alle items of an repeatable list and select one with a select box (included in the list).
This should help to choose a linktype (external, internal, email or file).

To hide the items is no problem
To show the items when the select change to.

How can I hide all items of the list (while loading the page) instead of the select and show only the in the select choosen item?

E.g. I edit a form. In this form I have two links. One for email and one for internal page.
At the moment it looks like "attachment1.png" after loading. But it should look like "attachment2.png" after loading.

Are you please able to help

Best Regards

Gunter

2 Attachments

Type:	Discussion
Status:	Resolved

ramonleenders replied on Jan 2, 2016 at 9:01 am Permalink Reply

Gunter,

Not sure what you are trying to achieve here. Do you want to show/hide fields, based on the selection of a field ('choose link' in this example)? So you want to use some Javascripting I assume?

Kind regards,

Ramon

GunterSchmitt replied on Jan 2, 2016 at 9:47 am Permalink Reply 1 Attachment

Dear Ramon,

thanks for your reply.

I have a repeatable item (see atachment) with a field to select (Row:#3) what should be shown, a field for a internal link (Row:#4), a field for an external link (Row:#2), a field for a file link (Row:#5) and a field for a email (Row:#6).

I want only to show one o this fields (choosen by the "select" field). This works if I add a new item with the following code:

$(document).on('change', 'select.linkChanger', function(){
      var linkPanel = $(this).closest('.panel-body');
      linkPanel.children("div.linkExternal").hide();
      linkPanel.children("div.linkInternal").hide();
      linkPanel.children("div.linkEmail").hide();
      linkPanel.children("div.linkFile").hide();
      if ($(this).val() == 'external'){
         linkPanel.children("div.linkExternal").show();
      } else if ($(this).val() == 'internal') {
         linkPanel.children("div.linkInternal").show();
      } else if ($(this).val() == 'email') {
         linkPanel.children("div.linkEmail").show();
      } else if ($(this).val() == 'file') {
         linkPanel.children("div.linkFile").show();
      }

Viewing 15 lines of 16 lines. View entire code block.

 
$(document).on('change', 'select.linkChanger', function(){
      var linkPanel = $(this).closest('.panel-body');
      linkPanel.children("div.linkExternal").hide();
      linkPanel.children("div.linkInternal").hide();
      linkPanel.children("div.linkEmail").hide();
      linkPanel.children("div.linkFile").hide();
      if ($(this).val() == 'external'){
         linkPanel.children("div.linkExternal").show();
      } else if ($(this).val() == 'internal') {
         linkPanel.children("div.linkInternal").show();
      } else if ($(this).val() == 'email') {
         linkPanel.children("div.linkEmail").show();
      } else if ($(this).val() == 'file') {
         linkPanel.children("div.linkFile").show();
      }
   });

With this code I search the clicked panel and hide all child items after this I show the selected item.

My problem is this dosen't work if the for will be open for editing again. All childes are hide because there is no change event after creating the select.

How can I handle this?

Regards

Gunter

ramonleenders replied on Jan 2, 2016 at 10:16 am Permalink Reply

Gunter,

Put this in form.php (at the bottom of the file for example):

<script type="text/javascript">Concrete.event.publish('btLinkChanger.edit.open');</script>

Create a file called auto.js (if it doesn't exist yet). Paste this in:

Concrete.event.bind('btLinkChanger.edit.open', function () {
    $(document).on('change', 'select.linkChanger', function () {
        var linkPanel = $(this).closest('.panel-body');
        linkPanel.children("div.linkExternal").hide();
        linkPanel.children("div.linkInternal").hide();
        linkPanel.children("div.linkEmail").hide();
        linkPanel.children("div.linkFile").hide();
        if ($(this).val() == 'external') {
            linkPanel.children("div.linkExternal").show();
        } else if ($(this).val() == 'internal') {
            linkPanel.children("div.linkInternal").show();
        } else if ($(this).val() == 'email') {
            linkPanel.children("div.linkEmail").show();
        } else if ($(this).val() == 'file') {
            linkPanel.children("div.linkFile").show();

Viewing 15 lines of 21 lines. View entire code block.

 
Concrete.event.bind('btLinkChanger.edit.open', function () {
    $(document).on('change', 'select.linkChanger', function () {
        var linkPanel = $(this).closest('.panel-body');
        linkPanel.children("div.linkExternal").hide();
        linkPanel.children("div.linkInternal").hide();
        linkPanel.children("div.linkEmail").hide();
        linkPanel.children("div.linkFile").hide();
        if ($(this).val() == 'external') {
            linkPanel.children("div.linkExternal").show();
        } else if ($(this).val() == 'internal') {
            linkPanel.children("div.linkInternal").show();
        } else if ($(this).val() == 'email') {
            linkPanel.children("div.linkEmail").show();
        } else if ($(this).val() == 'file') {
            linkPanel.children("div.linkFile").show();
        }
    });
 
    $(document).ready(function () {
        $('select.linkChanger').trigger('change');
    });
});

Haven't tested the code, so fingers crossed this works! :D

Kind regards,

Ramon

GunterSchmitt replied on Jan 2, 2016 at 2:41 pm Permalink Reply

Dear Ramon,

sorry, this dosen't work.

I think, I need the time point when the document is loaded. On this point I can manipulate all items.

How can I get this point?

I tried

$(document).ready(function (){ 
   alert("Will not be displayed");
   ... 
});

but this do also not work.

Thanks in advanced

Gunter

ramonleenders replied on Jan 2, 2016 at 7:01 pm Permalink Reply

If you send me the block type folder, I can take a look.

Kind regards,

Ramon

GunterSchmitt replied on Jan 3, 2016 at 10:44 am Permalink Reply 1 Attachment

Dear Ramon,

thank you or your offer.

I attached the block.

The block was created by BlockDesigner Pro. I only added some classes in the form.php and this code in the auto.js

$(document).on('change', 'select.linkChanger', function(){
           var linkPanel = $(this).closest('.sortable-item');
            linkPanel.find(".linkElement").hide();
            if ($(this).val() == 'external'){
               linkPanel.find(".linkExternal").show();
            } else if ($(this).val() == 'internal') {
               linkPanel.find(".linkInternal").show();
            } else if ($(this).val() == 'email') {
               linkPanel.find(".linkEmail").show();
            } else if ($(this).val() == 'file') {
               linkPanel.find(".linkFile").show();
            }
         });

Thanks in advance

Gunter

ramonleenders replied on Jan 3, 2016 at 3:05 pm Permalink Reply 1 Attachment

Gunther,

Try this one (see attachment). Only edited auto.js and form.js.

Kind regards,

Ramon

GunterSchmitt replied on Jan 3, 2016 at 6:05 pm Permalink Reply 2 Attachments

Dear Ramon,

It works partially.

If you add one item - All is fine
If you add two or more items - All items shows the same linktype independ of the selection (see attachment "two-links.png").
If you add an other items - All items show the same linktype. Independ of the selection (see attachment "three-links.png").

Best Regards

Gunter

ramonleenders replied on Jan 4, 2016 at 3:37 am Permalink Reply 1 Attachment

Gunther,

That makes sense! This one works, 100% haha. Only attached auto.js, as this is the only file that changed.

Kind regards,

Ramon

GunterSchmitt replied on Jan 4, 2016 at 1:52 pm Permalink Reply

Dear Ramon,

thank you, it works very well.

Best Regards

Gunter

ramonleenders replied on Jan 4, 2016 at 1:55 pm Permalink Reply

Gunter,

Glad it does! :)

If you haven't written a review yet for Block Designer Pro (and Block Designer), please do so. That helps other users and me and in the end you as well, because the bigger the crowd, the more features you get!

Kind regards,

Ramon

Block Designer Pro

Support

Hiding all items of an itemlist and select it with an select box

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post