Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I wrote a code in jquery. I was not running initially, then i checked online jslint for syntax errors. I caught some errors. Now still the code was not working as expected. So i went for firebug. I haven't done a lot of debugging. I am new to it. Here is my code

var j = 2;
var friends = [];
var distance =[];


$(document).ready(function () {

      $('#button').click(function () {
        if (j < 11) {
            $('#friends').append('Friend' + j + ':<input type="text" id="friend' + j + '"/><br/><br/>');
            j++;
        }
        else {
            alert("Limit reached");
        }
    });



   $('button').click(function(){
  console.log("button clicked");
   var a =[];
    for(i=1;i<=j;i++)
     {
        a[i] = $("#friend" + i).val();
      }     


    var gurl = "http://maps.googleapis.com/maps/api/distancematrix/json?"+
        "origins=" +
        a.join('|').replace(/ /g,'+') +
        "&destinations=" +
        a.join('|').replace(/ /g,'+') +
        "&sensor=false";


  jQuery.ajax(
          {
             type: "GET",
             url: gurl,
             dataType: 'jsonp'
          }).done(function (response) 
             {
                var rows = response.rows;
                  alert("hello there");

                for (var i = 0; i < rows.length; i++) 
                 {

                  for(var j=0;j<elements.length;j++)
                {
                    distance[i][j] = rows[i].elements[j].distance;
                 }

                 }
          alert(distance[1][3]);
              });

        });
  });

Now, what it should do is Go to this link and get the data from json file and store it inside the 2 dimensional array distance[][]. Finally after storing all the data, it should display the result of "distance[1][2]" as an alert.

Now i dont know whats wrong in this code and how to find the logical errors using firebug. What should make my work easy ?

ps: heres the HTML file

<!doctype html>
<html>

 <head>

    <title>TakeMeHome</title>

    <script   src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>


 </head>

  <body>
    <center>
        <form id="locations">
        Your Place:<input id="source" type="text"><br/>
        <br/>

        <div id="friends">
         Friend1:<input id="friend1" type="text"><br/>
        <br/>
        </div>

        <div id="button">
            Add!</div>
        <br/>
        <br/>

        <button>GO!</button>

        <br/><br/>
        <div id="map" style = "width: 500px; height: 500px"><br/>

        </form>
    </center>

  </body>

</html>
share|improve this question
    
Could you please add it to a jsfiddle and share the link ? –  Riju Mahna Jan 26 '13 at 15:02
    
2  
For debugging purpose you should use console.log() instead of alerts. This a best practice, plus this is nicer since you can log any object. –  Alexandre de Champeaux Jan 26 '13 at 15:04
    
Another best practice would be not to use <br/> to add some spaces in your document but to use CSS instead. –  Alexandre de Champeaux Jan 26 '13 at 15:14
    
jsfiddle.net/w3Gxf Heres is the jsfiddle link. Please help –  user1263375 Jan 26 '13 at 16:05
add comment

2 Answers

up vote 1 down vote accepted

Hey here is a working fiddle with your code, and some examples of ways to debug your js :

http://jsfiddle.net/QxP7p/3/

As you see you can do nice stuff like :

console.log("distance : ");
console.log(distance);

Hope it helps

They were a few mistakes as well, couldn't help fixing them

share|improve this answer
    
is it working ? please tell me the mistakes. I am new to js and cant figure it out –  user1263375 Jan 26 '13 at 16:14
    
Have you tried the fiddle? You should see the distances correctly logged in your console. (I personnally tried it with two friends, one in Paris and one in Berlin) –  Alexandre de Champeaux Jan 26 '13 at 16:18
    
its saying "rows" undefined . Line 66 –  user1263375 Jan 26 '13 at 16:21
    
And what response is logged? –  Alexandre de Champeaux Jan 26 '13 at 16:23
    
TypeError: rows is undefined [Break On This Error] for (var i = 0; i < rows.length; i++) –  user1263375 Jan 26 '13 at 16:26
show 3 more comments

The easiest way to debug is to use firebug and console.log() variables or messages at certain points in your script, so that you can better understand what is going on at various steps of your script. You can see the output in the Console tab of firebug.

You can also add breakpoints and watches from some of the other tabs. For example in the DOM tab you can rightclick on a variable and add a watch, or from the Script tab you can click on a position in your script to set a breakpoint or watch, and it will stop the script at that point and/or show a dump of vars at that point.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.