CODEWITHSUNDEEP
javascriptdebuggingfirebug
user1902689
user1902689

Reputation: 1775

Can Firebug be more useful at debugging? Alternatives?

Figured out how to make my javascript work, but it took a really, really, really long time. Enough to make me wish to continue avoiding javascript. I started with a complex page, and kept reducing it and changing it bit by bit to a simple example that worked.

Eventually figured out that square brackets have to be escaped with two backslashes. But not always - apparently in selectors -- but not in the .attr('id', 'element[' + newNum + ']' context, then escaping there is wrong.

How could I have figured this out quicker? I haven't written much javascript or used Firebug much, because it seems like I waste so much time where in c++ errors would (often) have been faster to find, that I get irritated at javascript and avoid using it.

Running the code that doesn't work with Firebug open shows no errors. I've tried on the script and console tab.

When this button is clicked, there's no visible reaction.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#btnAdd').click(function() {
          var num = $('.element').length-1;
          var newNum = new Number(num + 1);
          var newElem = $('#element[' + num + ']').clone().attr('id', 'element[' + newNum + ']');
          $('#element[' + num + ']').after(newElem);
        });
      });
    </script>
  </head>
  <body>
    <form id="myForm">
      <div id="element[0]" class="element">
        description
        <input type="text" name="element[0][description]" id="element[0][description]" value="desc0" />
      </div>
      <input type="button" id="btnAdd" value="add another name" />
    </form>
  </body>
</html>

When this button is clicked, a new list element is created as intended.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
          $('#btnAdd').click(function() {
            var num = $('.element').length-1;
            var newNum = new Number(num + 1);
            var newElem = $('#element\\[' + num + '\\]').clone().attr('id', 'element[' + newNum + ']');
            $('#element\\[' + num + '\\]').after(newElem);
          });
        });
    </script>
  </head>
  <body>
    <form id="myForm">
      <div id="element[0]" class="element">
        description
        <input type="text" name="element[0][description]" id="element[0][description]" value="desc0" />
      </div>
      <input type="button" id="btnAdd" value="add another name" />
    </form>
  </body>
</html>

Upvotes: 2

Views: 157

Answers (1)

Joseph
Joseph

Reputation: 119837

In selectors, [] have special meaning. It signifies finding an attribute. For example, the following code looks for input of type file:

var fileInputs = $('input[type=file]');

I don't know why you are using [] for your id, you can just go with elementN where N is a number.

Additionally, though JS is an OOP language, avoid using the new syntax in creating native objects (there are exceptions though, like predetermined-length arrays). Your newNum could be created like this:

var newNum = num + 1;

As for Firebug, it's one of the most preferred debugging tools. If it does not report anything, then it's either their bug, or your code working just fine, but not the way you expected it to.

Upvotes: 2

Related Questions