JQuery from Old App won't work in New App

JavaScript
1

I am upgrading a ToDo List that I made for myself a long time ago. The task names are displayed in an ordered list. I use JQuery to toggle the task description when the task name is clicked.

I am reusing the JQuery code that I used in my original ToDo List, with some changes to the class names. The code that hides the description works, but the toggle doesn’t.

 <li>    
       <h4 class="priority-<?php echo $row->priority; ?> todo-name"><input type="checkbox" name="task[]" class="checkbox"><?php echo $row->todo_name; ?></h4>
        <p class="todo-notes"><?php echo $row->todo_notes; ?></p>
         <input type="hidden" name="$id" value="<?php echo $row->id; ?>">
 </li>

Here is my JQuery code:

<script type="text/javascript">
        $(document).ready(function() {
            $('.todo-notes').hide();
            $('.todo-name').click(function() {
                $(this).parent().next().animate(
                    {'height':'toggle'},
                    400,
                    'swing'
                );
            });
        });
    </script>

and here are the js files that I have loaded: jquery-1.11.2.js and jquery.easing.1.3.js. I get no errors in the console.

I can’t see where the problem is. Can someone please tell me why this is not working?

2

I’m not sure why it’s not working. Maybe something to do with toggle getting deprecated in jQuery 1.9.

I think this should do what you’re after though:

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8" />
    <title>Toggle demo</title>
    <style>
      .hidden{
        display: none;
        height: 100px;
        background: pink;
      }

      h4{
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <h4>Item 1</h4>
        <p class="hidden">Hidden content for item 1</p>
      </li>
      <li>
        <h4>Item 2</h4>
        <p class="hidden">Hidden content for item 2</p>
      </li>
      <li>
        <h4>Item 3</h4>
        <p class="hidden">Hidden content for item 3</p>
      </li>
    </ul>

    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
      $('h4').on("click", function(){
        var $hiddenContent = $(this).next();
        if($hiddenContent.is(":visible")){
          $hiddenContent.slideUp();
        } else {
          $hiddenContent.slideDown();
        }
      });
    </script>
  </body>
</html>
3

I’m trying to keep on top of everything - both server-side and client-side, but unfortunately JavaScript has been neglected because the days are just not long enough. :laughing: I didn’t know that toggle was deprecated. It was a very useful feature, I thought.

Your demo works for me (Thank you), but I still can’t get my content to toggle.

4

In that case, can you please post enough code that I can run it on my computer and recreate your problem. Or, could you please make a JS fiddle.

I’m sure it’ll be something simple.

5

The reason is that there were two uses of toggle:

$(element).toggle();

This toggles the visibility of an element. If it is visible, then hide it, or if it is hidden, then show it.

$(element).toggle(function() {
    do stuff
}, function() {
    do stuff
});

Which would do one thing the first time the element is clicked, and another thing the second time.
This is what has been removed.

6

Thanks for the information.

My page is a database-driven page, so I’ve stripped out all the php and added static content.

Here is my JSFiddle - http://jsfiddle.net/webmachine/dcvwqwmy/7/

It seemed to work fine. So I took the same code and uploaded it to an old site I have that I use for testing, etc.

Here it did not work - http://jaybeeweb.com/ToDoList

7

I’m not sure why that’s not working, but this worked for me through the console:

$('#todo-list').on('click', 'h4', function(){
	$(this).next().slideToggle()
})
8

Thank you. Both of your suggestions were great. I figured out why it worked in JS Fiddle and not in my page (I have never used JSFiddle before) - I forgot to enclose it in the JQuery document.ready function even though I had that in my original code. … kicking myself for missing that. :blush:

I guess JSFiddle doesn’t need that in the JS section

9

It’s not that - jsfiddle has scripting options that determine whether the script runs onload/ondomready/nowraphead/nowrapbody

Set your jsfiddle script to be nowraphead and you will see that it doesn’t work either, until the document.ready wrapper is in place.

Normally you should place your scripts at the end of the body, which with jsfiddle would be nowrapbody, which helps to prevent such issues.

10

It’s better to place the script at the bottom of the page just before the closing </body> tag. That way the DOM will be ready by default. Glad you got it working, though.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.