How do I troubleshoot jQuery? - jquery-ui

Question

I am a newbie with jQuery and wondering if someone would just give me a little push in the right direction.
I am writing (more like copy-pasting) autocomplete code from other SO answers:
$("#addmore").on("click", function(){
var rownum = $('#orderTable tr:last').attr('id')*1+1;
var rowhtml =' <tr id="' + rownum +'"> '+
' <td> '+
'<input type="text" class="autoCompItem form-control input-small" id="itembox" name="item" placeholder="Eggs" value="e"> '+
' </td> '+
' <td> '+
'<input type="text" class="form-control input-small" id="quantity1" name="quantity1" placeholder="24"> '+
' </td> '+
' <td> '+
'<select class="form-control "> '+
'<option value="">Units</option> '+
'<option value="lbs">lbs</option> '+
'<option value="packs">Packs</option> '+
'<option value="cartons">Cartons</option> '+
'<option value="gallons">Gallons</option> '+
' </select> '+
' </td> '+
' <td> '+
'<input type="text" class="form-control input-small" id="brand1" name="brand1" placeholder="Eggland"> '+
'</td> '+
'<td> '+
'<input type="text" class="form-control input-small" id="comment1" name="comment1" placeholder="Choose fresh"> '+
'</td> '+
'</tr>';
$(rowhtml).appendTo("#orderTable");
$(rowhtml).find(ipt).autocomplete({
source: function(request, response){
alert('req term:'+request.term);
$.ajax({
url: '/api/autocomplete',
data: {'q': request.term},
dataType: "json",
success: function(data){
response(data);
}
});
},
focus: function(event, ui){
$(this).val(ui.item.name);
return false;
},
select: function(event, ui){
$(this).val(ui.item.name);
return false;
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
return $( "<li></li>" )
.data( "ui-autocomplete-item", item )
.append( "<a>" + item.name + "</a>" )
.appendTo( ul );
};
});
My renderItem function fails and I want to break the problem down to see if my rowhtml (a dynamically added element) variable is not finding ipt selector or whether there is another issue. Can someone guide me with this issue ... please!!

Answer 1

Part 1.
I would start by checking for errors in the developer console. To do this right click on the page after it has loaded and click on inspect element. After you complete that step you will see a new window on the bottom of the screen. Next select the console tab.
What I would after selecting the console tab is hit the f5 button
which will refresh the page. The advantage to this that it will see
if your code has any errors on page load.
After you have done that typing in your autocomplete text box and see if you get any errors in the console. If a variable value is not set JavaScript will output undefined to the console. If an object's value is not set JavaScript will output null.
Write down any errors that you recieve and when they occured and I will do my best to help you debug your code.
Part 2.
Now that you have discovered an error. We need to back track a step. I put the code you posted inside of a try catch block and loading it in a jsfiddle to see what errors occur on load. You should have got the same error by following the step highlighting in part 1. Unless there is some code missing from your question.
When I ran the following fiddle:
https://jsfiddle.net/larryjoelane/6hkrdrv1/7/
var rowhtml =' <tr id="' + rownum //<--- Is this variable value assigned?
I get this error message: ReferenceError: rownum is not defined. When I look at your code I notice that the rownum variables value is not set in your code. Once you have set a value for rownum. check for more errors and let me know which ones you receive.