-3

I want to "play" with jQuery's hide() function on a blog that I have and I want to make it so that clicking a button will hide all "cake names" on my page. I don't really know how to do that because I'm a beginner in jQuery. Can somebody help me, please? My code is:

<?php @include APP_PATH . '/view/snippets/header.tpl.php'; ?>

<h2>Our cakes</h2>

    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("h2").hide();
            });
        });
    </script>

<?php if ($cakes) : ?>

    <ol>

    <?php foreach ($cakes as $cake) : ?>

        <li>

            <h3><?php echo $cake->name; ?></h3>
            <ul>
                <li><b>Quantity:</b> <?php echo $cake->quantity ?></li>
                <li><a href="<?php echo APP_URL ?>cake/view/<?php echo $cake->id ?>">View</a></li>
            </ul>

        </li>

    <?php endforeach; ?>

    </ol>

    <body>
    <button>Click me</button>
    </body>


<?php else : ?>

    <p>Sorry, no sugar for you, babyyy!!</p>

<?php endif; ?>

<?php @include APP_PATH . '/view/snippets/footer.tpl.php'; ?>

I tried something but it doesn't work.

ASGM
  • 11,051
  • 1
  • 32
  • 53
Andrada
  • 13
  • 3
    have you included the jQuery library? – Roko C. Buljan May 23 '13 at 08:47
  • 1
    I don't think this is your issue, but why do you have `` tags around your button? That doesn't look right at all. – Thomas Clayson May 23 '13 at 08:52
  • First of all kindly correct your html, you are showing
      before tag. It's not looks good. When you ask your question here, please, write in standard way.. :) One down vote for wrong html code -1
     – Nono May 23 '13 at 08:53

4 Answers4

4

You currently hide all <h2>, but your cake names are all <h3>. This may be the source of your problem. $("h2").hide(); should be $("h3").hide();.

Edit: if you don't have jQuery included, then your functions (which all depend on jQuery for the use of the $() selector) won't work. You can include jQuery with something like: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

For more details on the intricacies of including jQuery, see this thoroughly answered StackOverflow question.

Alternatively, you could re-write your functions to not use jQuery, since it's not really necessary for the things you're doing here (first it would be nice to give your <button> an id as Pooshonk suggests):

window.onload = function () {
   document.getElementById("yourButton").onclick = function() {
      elements = document.getElementsByTagName("h3");
      for (var i = 0; i < elements.length; i++) {
         elements[i].style.display = "none";
      };
   };
};
Community
  • 1
  • 1
ASGM
  • 11,051
  • 1
  • 32
  • 53
  • @Andrada then I would suggest posting a jsFiddle; I'm not sure why this solution's not working for you but maybe the problem is somewhere else. – ASGM May 23 '13 at 08:47
  • i wrote

    just to check if it works for "Our cakes" but it doesn't so i guess is somethig i do wrong

     – Andrada May 23 '13 at 08:48
  • @ThomasClayson he wanted a button onClick, not to fade away after loading – Pooshonk May 23 '13 at 08:52
  • @Andrada, given that Thomas's jsFiddle works, perhaps the issue is with how jQuery is being called in your code (something jsFiddle automates, but we don't see in your sample). A simple way to test (besides posting the call here) would be to see if an `alert("Hello");` function in the same place as `$("h3").hide();` works. – ASGM May 23 '13 at 08:52
  • @Pooshonk yeah I change it after that. But in any case, it was merely to show that it works. Therefore either there's something else wrong with the script, or there's something that OP isn't telling us. :p (like he's not using jQuery or something) – Thomas Clayson May 23 '13 at 08:53
  • @Andrada, as Roko asked in a comment on your original question, are you sure you're including the jQuery library explicitly? – ASGM May 23 '13 at 08:56
  • i have to use an include or something??! on my code page? like; ?? – Andrada May 23 '13 at 08:58
  • @Andrada, I've updated the answer with instructions on including jQuery as well as on how to implement the same behavior without jQuery. – ASGM May 23 '13 at 09:22
1

On your page, you may have other h3 elements, so good will be to give an id to the h3 element enclosing cake name and then using below jquery you can hide the names. Your code can be as below : 

 <script>
     $(document).ready(function(){
      $("button").click(function(){
        $("h3#cakeName").hide();
    });
});


<li>

    <h3 id="cakeName"><?php echo $cake->name; ?></h3>
    <ul>
        <li><b>Quantity:</b> <?php echo $cake->quantity ?></li>
        <li><a href="<?php echo APP_URL ?>cake/view/<?php echo $cake->id ?>">View</a></li>
    </ul>

</li>

 <?php endforeach; ?>

</ol>

 <body>
  <button>Click me</button>
 </body>
Altaf Hussain
  • 5,166
  • 4
  • 30
  • 47
0

EDIT: THIS WORKS!

http://jsfiddle.net/zZyts/

Add an ID to your button and h3 like so

<button id="hide_cake">Click me</button>
<h3 id="cake_name">Cake name here</button>

The edit the jQuery accordingly

<script>
    $(document).ready(function(){
        $("#hide_cake").click(function(){
            $("#cake_name").hide();
        });
    });
</script>
Pooshonk
  • 1,284
  • 2
  • 22
  • 49
  • i just did that... still not working :-? it might have something to do with instructions order? – Andrada May 23 '13 at 08:52
0

Simple answer is:

<ol>
    <li>
         <h3>Cake-1</h3>
        <ul>
            <li><b>Quantity:</b> Good</li>
            <li><a href="#">View</a>
            </li>
        </ul>
    </li>
    <li>
         <h3>Cake-2</h3>
        <ul>
            <li><b>Quantity:</b>Yummi!!</li>
            <li><a href="#">View</a>
            </li>
        </ul>
    </li>
</ol>

<button>Click me</button>

<script>
 $(document).ready(function () {
     $("button").click(function () {
         $("h3").parent().hide();
     });
 });
</script>
Nono
  • 6,986
  • 4
  • 39
  • 39