5 Replies Latest reply on Dec 12, 2014 11:09 PM by Machinette

    What does {tag_image_value} from webapps return when field is empty? How to use javascript to remove div when condition is met.

    RaZoRoZaR Level 1

      Dear all,

       

      As stated in the question, what does {tag_image_value} from webapps return when no image has been uploaded by users. I understand that there is an OnError function that can be called if there isn't any image. However it does not do so.

      I am creating a program which will check to see if {tag_image_value} contains an image. If it does not, the error will call an external javascript to remove the div such that it removes any subsequent codes in the later parts of the codes. Below is part of the program:

       

      I have tried to compare the value to NULL, 0, -1 and "" using if-else functions but they do not work. The slideshow wrapper is part of the code from the following theme: 2027 E Colfax Ave Denver

      The theme will cycle through the pictures, my purpose is to remove the pictures if the images are not present.

       

         <!------------------------------------------------ Remove picture if not uploaded ------------------------------------------------>

      <script language="JavaScript">

      function noimg1() {

           $( "#shownpicture1" ).remove();

           return;

            }

      function noimg2() {

           $( "#shownpicture2" ).remove();

           return;

            }

      function noimg3() {

           $( "#shownpicture3" ).remove();

           return;

            }

      function noimg4() {

        

           $( "#shownpicture4" ).remove();

           return;

            }

      </script>

              <!------------------------------------------------ End of remove picture if not uploaded ------------------------------------------------>

       

       

       

       

       

      <div class="slideshow-wrapper slider">

      <div class="preloader"></div>

      <ul data-orbit="data-orbit" data-options="bullets:false;animation:fade;">

          <div style="display: block;" id="shownpicture1">

          <li class="active" style="z-index: 4; margin-left: 0%; opacity: 1;"><img alt="{tag_name_nolink}" onerror="noimg1()" src="{tag_image 1_value}" /></li>

          </div>

          <div style="display: block;" id="shownpicture2">

          <li style="z-index: 2; margin-left: 100%; opacity: 1;" class="active"><img alt="{tag_name_nolink}" onerror="noimg2()" src="{tag_image 2_value}" /></li>

          </div>

          <div style="display: block;" id="shownpicture3">

          <li style="z-index: 2; margin-left: 0%; opacity: 1;" class="active"><img alt="{tag_name_nolink}" onerror="noimg3()" src="{tag_image 3_value}" /></li>

          </div>

          <div style="display: block;" id="shownpicture4">

          <li style="z-index: 2; margin-left: 0%; opacity: 1;" class="active"><img alt="{tag_name_nolink}" onerror="noimg4()" src="{tag_image 4_value}" /></li>

          </div>

      </ul>

      </div>

      <!-- //.slideshow-wrapper -->

        • 1. Re: What does {tag_image_value} from webapps return when field is empty? How to use javascript to remove div when condition is met.
          Liam Dilley Adobe Community Professional & MVP

          onerror triggers if it has problems loading an image, there is no source on that so it is different.

           

          A few things with your code...

           

          - You have div's wrapping list items in a ul - not valid markup

          - You can easily make single script to loop through that code without the inline onerror

           

          $('.slideshow-wrapper slide ul li img').each(function(){
            if( $(this).attr('src') === '' ){
            $(this).parent.remove();
            }
            });
          

          You can shorten the target of course but I just did it this long so you can see the flow a bit clearer.

          • 2. Re: What does {tag_image_value} from webapps return when field is empty? How to use javascript to remove div when condition is met.
            RaZoRoZaR Level 1

            Thanks for your reply!

             

            Thanks for the suggestion I will go try it out and get back to you.

             

            Two side question, is it possible to track the number of webapp submissions that a user has? I am thinking of limiting submissions for different secure zone plans. Do I need to create different folders of different pages for each secure zone so that i can track based on each secure zone or is there a tag which displays the counter of webapps each user has submitted?

             

            Next, I see that if a user in a secure zone submits a webapp, a non securezone user cannot see the submission by him. Is there a workaround for this such that the non SZ user can see the SZ user's submission in the details page? Do I have to permanently force any user into automatically getting the most basic secure zone privilege or is there a code to enable all to see webapp submissions by everyone and not only secure zone users.

            • 3. Re: What does {tag_image_value} from webapps return when field is empty? How to use javascript to remove div when condition is met.
              Liam Dilley Adobe Community Professional & MVP

              Not on the current platform no.

              You would have to use custom CRM fields and the update details form in the background updating fields based on counts etc - Complex but possible.

              • 4. Re: Re: What does {tag_image_value} from webapps return when field is empty? How to use javascript to remove div when condition is met.
                RaZoRoZaR Level 1

                When I put in the code it doesnt work. I went into the page to check and it seems that the preloader changes some elements of the code :

                <div class="slideshow-wrapper slider">

                 

                 

                    <div class="preloader"></div>

                    <div class="orbit-container">

                        <ul class="orbit-slides-container" data-orbit="data-orbit" data-options="bullets:false;animation:fade;" style="height: 26px;">

                            <li class="active" style="z-index: 2; margin-left: 100%; opacity: 1;">

                                <img alt="{tag_name_nolink}" onerror="noimg1()" src="">

                                </img>

                            </li>

                            <li class="active" style="z-index: 2; margin-left: 100%; opacity: 1;">

                                <img alt="{tag_name_nolink}" onerror="noimg2()" src=""></img>

                            </li>

                            <li class="active" style="z-index: 4; margin-left: 0%; opacity: 1;">

                                <img alt="{tag_name_nolink}" onerror="noimg3()" src=""></img>

                            </li>

                            <li class="active" style="z-index: 2; margin-left: 100%; opacity: 1;"></li>

                        </ul>

                        <a class="orbit-prev">

                            <span></span>

                        </a>

                        <a class="orbit-next">

                            <span></span>

                        </a>

                        <div class="orbit-timer paused">

                            <span></span>

                            <div class="orbit-progress" style="width: 0%;"></div>

                        </div>

                        <div class="orbit-slide-number">

                            <span></span>

                 

                 

                             of

                 

                 

                            <span></span>

                        </div>

                    </div>

                 

                 

                </div>

                 

                I tried putting this into the top of my template layout before the code starts:

                 

                <script>

                $('.slideshow-wrapper slider .orbit-container ul li img').each(function(){

                if( $(this).attr('src') == "" ){

                $(this).parent.remove();

                }

                });

                 

                 

                $('.slideshow-wrapper slider ul li img').each(function(){ 

                  if( $(this).attr('src') === '' ){ 

                  $(this).parent.remove(); 

                  } 

                });

                 

                 

                $('.slideshow-wrapper slider ul li img').each(function(){ 

                  if( $(this).attr('src') == '' ){ 

                  $(this).parent.remove(); 

                  } 

                });

                </script>

                 

                All 3 variants cannot work. Is there something wrong with the way I do the scripting?

                • 5. Re: What does {tag_image_value} from webapps return when field is empty? How to use javascript to remove div when condition is met.
                  Machinette Level 3

                  Dont know if you have solved this but :

                  To avoid preloader code changes why dont you give a class to the image and target the script to that class?

                   

                  i.e

                      <img class="whatever" alt="{tag_name_nolink}" src="">   (remove onerror, I understand that src is empty for testing)


                  Use Liam's script with the new target.

                     $('img.whatever')....

                   

                  One suggestion, I understand that you need to remove img2+++ containers, but removing img1 container isnt gonna break your design? Why dont you use a standard image not found for img1?