CODEWITHSUNDEEP
javascriptjquery
Defozo
Defozo

Reputation: 3092

Function that removes a row from the table is not working after adding jQuery UI

<HTML>
    <HEAD>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#delrow').click(function(){
                    alert(':)');
                    $(this).closest('tr').animate({'backgroundColor':'#EF3E23','color':'#fff'},300,function(){
                        $(this).remove();
                    });
                    return false;
                });
            });
        </script>
    </HEAD>
    <BODY>
    Hello
        <table>
            <tr>
            <td>abc</td>
            <td><a id="delrow" title="Click to remove" href="#">Delete</a></td>
            </tr>
        </table>
    </BODY>
</HTML>

Here you can test my code: http://goo.gl/XNQb5j

The "Delete" button should remove the row from the table. It's working when I don't include jQuery UI (but then, of course, animation is not working). What am I doing wrong?

Sorry for my English errors.

Upvotes: 2

Views: 45

Answers (1)

Banana
Banana

Reputation: 7473

the version of the jQuery UI that youve linked is incompatible with the version of the jQuery you linked. better take the version numbers from jQuery examples on their website.

notice how your code works when the versions are compatible:

<HTML>

<HEAD>
  <script src="http://code.jquery.com/jquery-2.0.2.js"></script>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#delrow').click(function() {
        alert(':)');
        $(this).closest('tr').animate({
          'backgroundColor': '#EF3E23',
          'color': '#fff'
        }, 300, function() {
          $(this).remove();
        });
        return false;
      });
    });
  </script>
</HEAD>

<BODY>Hello
  <table>
    <tr>
      <td>abc</td>
      <td><a id="delrow" title="Click to remove" href="#">Delete</a>
      </td>
    </tr>
  </table>
</BODY>

</HTML>

Upvotes: 1

Related Questions