Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Submitting Bugs the Right Way

TJ VanToll

Hi!

Story

A Simple CRUD Table

Uh Oh

$('tr').remove();

Average Developer's Reaction

This is JavaScript

Hack #1

var row = $('tr');
try {
    row.remove();
} catch(e) {
    row.hide();
}

Hack #2

var row = $('tr');
if ($.browser.msie
    && parseInt($.browser.version, 10) == 8) {
    $('tr').hide();
} else {
    $('tr').remove();
}

Hack #3

var row = $('tr');
if ($.browser.msie
    && parseInt($.browser.version, 10) == 8) {
    window.location = window.location;
}

$('tr').remove();

Why bother?

Make the world a better place

Learn

Get your bug fixed!

Where to go?

Bug Trackers - jQuery

Bug Trackers - Browsers

BIG RED BOX!

Search the bug trackers. Try to make sure the bug doesn't already exist.

Use the latest versions

IMPORTANT!

Create a reduced test case.

Reduced Test Case

The absolute minimum amount of code you can use to recreate the problem.

Reducing

Don't link to your live site.

Test Cases - Your Friends

jsFiddle
JS Bin
Codepen

Example

jQuery UI #8677

<style>input.textbox { width:185px; padding:0px; margin:0px; } </style>
<form name="aspnetForm" method="post" action="test.aspx" id="aspnetForm">
  <div id="tabs">
    <ul>
      <li><a href="#tab1">Settings </a></li><li><a href="#tab2">Logins </a></li>
    </ul>
    <div id="tab1">
      <table border="0" cellspacing="3" cellpadding="3">
          <tbody><tr>
              <td class="bold">Account Name:<span class="red">*</span></td>
              <td><input name="companyName" class="textbox" id="txtCompanyName"
                  type="text" maxlength="200" value="yauhen"></td>
            </tr>
            <tr id="trCompanyURL">
              <td class="bold">Company URL:</td>
              <td><input name="companyURL" class="textbox" id="txtCompanyURL"
                    type="text" maxlength="256" value="http://localhost:81"></td>
          </tr></tbody>
      </table>
    </div>
    <div id="tab2">tabs2</div>
  </div>
</form>
<script>$('#tabs').tabs();</script>
<style>input.textbox { width:185px; padding:0px; margin:0px; } </style>
<form name="aspnetForm" method="post" action="test.aspx" id="aspnetForm">
  <div id="tabs">
    <ul>
      <li><a href="#tab1">Settings </a></li><li><a href="#tab2">Logins </a></li>
    </ul>
    <div id="tab1">
      <table border="0" cellspacing="3" cellpadding="3">
          <tbody><tr>
              <td class="bold">Account Name:<span class="red">*</span></td>
              <td><input name="companyName" class="textbox" id="txtCompanyName"
                  type="text" maxlength="200" value="yauhen"></td>
            </tr>
            <tr id="trCompanyURL">
              <td class="bold">Company URL:</td>
              <td><input name="companyURL" class="textbox" id="txtCompanyURL"
                    type="text" maxlength="256" value="http://localhost:81"></td>
          </tr></tbody>
      </table>
    </div>
    <div id="tab2">tabs2</div>
  </div>
</form>
<script>$('#tabs').tabs();</script>
<style>input.textbox { width:185px; padding:0px; margin:0px; } </style>
<div id="tabs">
<ul>
  <li><a href="#tab1">Settings </a></li><li><a href="#tab2">Logins </a></li>
</ul>
<div id="tab1">
  <table border="0" cellspacing="3" cellpadding="3">
      <tbody><tr>
          <td class="bold">Account Name:<span class="red">*</span></td>
          <td><input name="companyName" class="textbox" id="txtCompanyName"
              type="text" maxlength="200" value="yauhen"></td>
        </tr>
        <tr id="trCompanyURL">
          <td class="bold">Company URL:</td>
          <td><input name="companyURL" class="textbox" id="txtCompanyURL"
                type="text" maxlength="256" value="http://localhost:81"></td>
      </tr></tbody>
  </table>
</div>
<div id="tab2">tabs2</div>
</div>
<script>$('#tabs').tabs();</script>

<style>input.textbox { width:185px; padding:0px; margin:0px; } </style>
<div id="tabs">
<ul>
  <li><a href="#tab1">Settings </a></li><li><a href="#tab2">Logins </a></li>
</ul>
<div id="tab1">
  <table border="0" cellspacing="3" cellpadding="3">
      <tbody><tr>
          <td class="bold">Account Name:<span class="red">*</span></td>
          <td><input name="companyName" class="textbox" id="txtCompanyName"
              type="text" maxlength="200" value="yauhen"></td>
        </tr>
        <tr id="trCompanyURL">
          <td class="bold">Company URL:</td>
          <td><input name="companyURL" class="textbox" id="txtCompanyURL"
                type="text" maxlength="256" value="http://localhost:81"></td>
      </tr></tbody>
  </table>
</div>
<div id="tab2">tabs2</div>
</div>
<script>$('#tabs').tabs();</script>
<style>
  input.textbox { width:185px; padding:0px; margin:0px; }
</style>
<div id="tabs">
  <ul>
    <li><a href="#tab1">Settings </a></li>
    <li><a href="#tab2">Logins </a></li>
  </ul>
  <div id="tab1">
    Account Name:<span class="red">*</span>
    <input name="companyName" class="textbox" id="txtCompanyName"
        type="text" maxlength="200" value="yauhen">
    Company URL:
    <input name="companyURL" class="textbox" id="txtCompanyURL"
          type="text" maxlength="256" value="http://localhost:81">
  </div>
  <div id="tab2">tabs2</div>
</div>
<script>$('#tabs').tabs();</script>

<style>
  input.textbox { width:185px; padding:0px; margin:0px; }
</style>
<div id="tabs">
  <ul>
    <li><a href="#tab1">Settings </a></li>
    <li><a href="#tab2">Logins </a></li>
  </ul>
  <div id="tab1">
    Account Name:<span class="red">*</span>
    <input name="companyName" class="textbox" id="txtCompanyName"
        type="text" maxlength="200" value="yauhen">
    Company URL:
    <input name="companyURL" class="textbox" id="txtCompanyURL"
          type="text" maxlength="256" value="http://localhost:81">
  </div>
  <div id="tab2">tabs2</div>
</div>
<script>$('#tabs').tabs();</script>
<style>
  input.textbox { width:185px; padding:0px; margin:0px; }
</style>
<div id="tabs">
  <ul>
    <li><a href="#tab1">Settings </a></li>
  </ul>
  <div id="tab1">
    Account Name:<span class="red">*</span>
    <input name="companyName" class="textbox" id="txtCompanyName"
        type="text" maxlength="200" value="yauhen">
  </div>
</div>
<script>$('#tabs').tabs();</script>

<style>
  input.textbox { width:185px; padding:0px; margin:0px; }
</style>
<div id="tabs">
  <ul>
    <li><a href="#tab1">Settings </a></li>
  </ul>
  <div id="tab1">
    Account Name:<span class="red">*</span>
    <input name="companyName" class="textbox" id="txtCompanyName"
        type="text" maxlength="200" value="yauhen">
  </div>
</div>
<script>$('#tabs').tabs();</script>
<style>
  input { width:185px; padding:0px; margin:0px; }
</style>
<div id="tabs">
  <ul>
    <li><a href="#tab1"></a></li>
  </ul>
  <div id="tab1">
    <input value="yauhen">
  </div>
</div>
<script>$('#tabs').tabs();</script>

<style>
  input { width:185px; padding:0px; margin:0px; }
</style>
<div id="tabs">
  <ul>
    <li><a href="#tab1"></a></li>
  </ul>
  <div id="tab1">
    <input value="yauhen">
  </div>
</div>
<script>$('#tabs').tabs();</script>
<style>
  input { width:185px; }
</style>
<div id="tabs">
  <ul>
    <li><a href="#tab1"></a></li>
  </ul>
  <div id="tab1">
    <input value="lorem ipsum">
  </div>
</div>
<script>$('#tabs').tabs();</script>

Test Case with no jQuery

<div>
  <input value="Whatever">
</div>
<button>Break It</button>
<style>
  input { width: 150px; }
  div.on input { font-size: 1em; }
</style>
<script>
  var div = document.getElementsByTagName('div')[0],
      button = document.getElementsByTagName('button')[0];
  button.addEventListener('click', function() {
    div.classList.add('on');
  });
</script>

Reduced version of $('tr').remove()

<table>
    <tr>
        <td><a href="#">Cancel</a></td>
    </tr>
</table>
<script>
    $(document).on('click', '#whatever', function(){});
    $('table').on('click', 'a', function() {
        $(this).parents('tr').remove();
    });
</script>

Don't be Rude

Bug trackers aren't the best place to discuss large feature requests.

Bug tracker != Support

Review

  1. Search for existing bugs.
  2. Test against the latest version.
  3. Create a reduced test case.

Thanks!

@tjvantoll http://tjvantoll.com

Use a spacebar or arrow keys to navigate