1

I have this code:

$(document).ready(function() {
                $('#viewAll').hide(); 
                $('#viewProductIframe').hide(); 
                $('#viewIngredientIframe').hide(); 
            $('#viewPackagingIframe').hide(); 

            $.viewMap = {
                'viewEmpty' : $('#viewEmpty'),
                'viewAll' : $('#viewAll'),
                'viewProductIframe' : $('#viewProductIframe'),
                'viewIngredientIframe' : $('#viewIngredientIframe'),
                'viewPackagingIframe' : $('#viewPackagingIframe')
            };

            $('#viewSelector').change(function() {
                // hide all
                $.each($.viewMap, function() { this.hide(); });
                // show current
                $.viewMap[$(this).val()].show();
            }); 
        });

It should show/hide a set of divs. Only the viewProductIframe div actually appears. At first I had 4 divs without iframes showing tables from a database. I put the content of these divs into "viewAll" and added the "viewProductIframe" and the other two. This change apparently broke the code and I can't find the reason.

My dropdown menu:

<select name="viewSelector" id="viewSelector">
                        <option name="viewEmpty" value="viewEmpty">Select an Option</option>
                        <option name="viewAll" value="viewAll">All</option>
                        <option name="viewProductIframe" value="viewProductIframe">Products</option>
                        <option name="viewIngredientIframe" value="viewIngredientIframe">Ingredients</option>
                        <option name="viewPackagingIframe" value="viewPackagingIframe">Packaging</option>
                    </select>

The only div that shows up:

<div id="viewProductIframe" name="viewProductIframe">
                    <h2>Product</h2>
                    <iframe src="products.php" class="displayFrame" />
                </div>

Another iframe div, remains invisble:

<div id="viewIngredientIframe" name="viewIngredientIframe">
                        <h2>Ingredients</h2>
                        <iframe src="ingredients.php" class="displayFrame" />
                    </div>

Does anyone have an idea what the problem is?

1
  • 1
    Thanks, I honestly didn't see that. Accepted!
    – user169
    May 19, 2015 at 18:19

1 Answer 1

1

Try the code below

1) set common class for all divs i added class common for example

<div id="viewProductIframe" name="viewProductIframe" class="common">
                    <h2>Product</h2>
                    <iframe src="products.php" class="displayFrame" />
                </div>

 <div id="viewIngredientIframe" name="viewIngredientIframe" class="common">
                    <h2>Ingredients</h2>
                    <iframe src="ingredients.php" class="displayFrame" />
                </div>

jquery be

$(document).ready(function() {
    $(".common").hide();
    $('#viewSelector').change(function() {
                    $(".common").hide(); // hide all divs
                     var id = $(this).find("option:selected").val(); // get current val
                    $("#" + id).show() // show current div id
      }); 
});
4
  • Thank you, I tried it, but the only thing that changed is that the product iframe (the only one that showed before) is now visible when I open the page. I tried to look at Chrome's error console but it doesn't show anything.
    – user169
    Apr 23, 2015 at 9:03
  • put $(".common").hide(); call in outside also. I updated my code check i hope it works what you expect Apr 23, 2015 at 9:16
  • That hides the divs, thanks. :) But selecting the menu options still doesn't show them.
    – user169
    Apr 23, 2015 at 9:38
  • Well thank you for trying to help me, but the issue wasn't with the jQuery at all - <iframe .. /> doesn't work. It broke all the following divs ... I changed it to <iframe></iframe>. Your code works perfectly.
    – user169
    Apr 23, 2015 at 9:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.