We Keep Coding

Jquery .each not working for first row from the table

I am using jquery .each to loop the values and push in JSON. it is working for all the rows leaving the first row.
for (j = 0; j < parsedResult.length; j++) {
var pack_id = parsedResult[j].pack_id;
var pack_dsc = parsedResult[j].pack_dsc;
var pack_base_amount = parsedResult[j].pack_base_prc;
var pack_tax_amount = parsedResult[j].pack_tax_amt;
var pack_grand_total = parsedResult[j].pack_grand_total;
row += "<span id='single_pack_details'><span id='pack_id' class='hidden'>" + pack_id + "</span><b>Pack description: </b><span id='pack_dsc'>" + pack_dsc + "</span><b>Pack Amount:</b> ₹ <span id='pack_grand_total'>" + pack_grand_total + "</span></div><span class='hidden' id='pack_base_amount'>" + pack_base_amount + "</span><span class='hidden' id='pack_tax_amount'>" + pack_tax_amount + "</span></span>";
}
Below is where i trying to put it in a loop and pushing to pack_details object
$(this).closest("tr").find('#single_pack_details').each(function () {
var obj = {
pack_id: $(this).closest("span").find("#pack_id").text(),
pack_dsc: $(this).closest("span").find("#pack_dsc").text(),
pack_grand_total: $(this).closest("span").find("#pack_grand_total").text(),
pack_base_amount: $(this).closest("span").find("#pack_base_amount").text(),
pack_tax_amount: $(this).closest("span").find("#pack_tax_amount").text()
}
pack_details.push(obj);

Array list display online one result from json

I wrote this code and it works:
function getJsonResult(retrieve) {
var result = retrieve.results;
for (var i = 0; i < result.length; i++) {
responseJson.push({ id: result[i].id, title: result[i].title });
var search = '<a id="' + result[i].id + '">' + result[i].title + '</a><br/>';
document.write(search);
}
}
When I tried to display the results in a div, I change the last line with:
$("#divId").html(search);
But it only displays the first result. How can I make the whole list appear?

That happened because you're overriding the search variable in every iteration :
var search = '<a id="' + result[i].id + '">' + result[i].title + '</a><br/>';
You need to declare the search variable outside of the loop then append the string in every iteration like :
function getJsonResult(retrieve) {
var result = retrieve.results;
var search = "";
___________^^^^
for (var i = 0; i < result.length; i++) {
responseJson.push({ id: result[i].id, title: result[i].title });
var search += '<a id="' + result[i].id + '">' + result[i].title + '</a><br/>';
___________^^
document.write(search);
}
}
Then finally you could put your variable content to the div :
$("#divId").html(search);

$('#divId').append(search);
This appends the element included in search to the div element.

Why are my rendered elements outside the select tag?

I am trying to append html to a Content Holder in a dialogue box and as you can see by the image, Mile, Meter and Kilometer are outside the select dropdown. Why is this?
var rows = $('#jqxUOMRelatedUnitsDropdownGrid').jqxGrid('getrows');
$("#divNewUnitOfMeasureDefaultUnitsPurchasePlaceHolder").html('<select id="listNewUnitOfMeasureDefaultUnitsPurchasePlaceHolder">');
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
if (row.UOMRelatedUnit_AddItem) {
$("#divNewUnitOfMeasureDefaultUnitsPurchasePlaceHolder").append("<option value='" + row.UOMRelatedUnit_Name + "'>" + row.UOMRelatedUnit_Name + "</option>");
}
}
$("#divNewUnitOfMeasureDefaultUnitsPurchasePlaceHolder").append("</select>");
<div id="divNewUnitOfMeasureDefaultUnitsPurchasePlaceHolder"></div>

Because you are appending into the <div> and not the <select>. Do this way:
$("#divNewUnitOfMeasureDefaultUnitsPurchasePlaceHolder select").append("<option value='" + row.UOMRelatedUnit_Name + "'>" + row.UOMRelatedUnit_Name + "</option>");
// --------------------------------------------------- ^^^^^^
And you cannot do:
$("#divNewUnitOfMeasureDefaultUnitsPurchasePlaceHolder").append("</select>");
That's invalid! Either store everything in a tempAppend string and then use:
$("#divNewUnitOfMeasureDefaultUnitsPurchasePlaceHolder").append(tempAppend);

Make slider from json

I am going to create a simple slider from available JSON object. I want to scroll 3 item i.e. 3 keys of JSON in single click either left or right.
Example: If I clicked right arrow then I want to fetch 0 to 2 keys of JSON and display image and if again right arrow then 3 to 6 and so on. Similarly in case of left arrow clicked. I want to make negative loop from current position of JSONkeys like 6 to 3.
I tried my code But its not working well.
var recents = "";
var imges = "";
var imge = "";
var recent_prod = <?php echo $recent_prod; ?>;
$("#num").html(recent_prod.length);
for(var a = 0; a < 3; a++)
{
imges = recent_prod[a].image;
imge = imges.split[","];
recents += '<a href="' + base_url + 'init/product/' + recent_prod[a].id + '">'+
'<div class="related_prod_thumb">' +
'<div class="related_prod_img">'+
'<span class="helper"></span>'+
'<img src="' + base_url + 'uploads/thumbnail/' + imges + '" width="100">'+
'</div><div class="related_prod_title">' + recent_prod[a].title +'</div>'+
'<div class="related_prod_price">' + 'Rs. ' + recent_prod[a].price + '</div></div></a>';
}
$("#recent_views").html(recents);
$(document).on("click", ".rightarr", function(){
var next_recent_prod = "";
var next = a + 3;
for(var i = a; i < next; i++)
{
imges = recent_prod[i].image;
imge = imges.split[","];
next_recent_prod += '<a href="' + base_url + 'init/product/' + recent_prod[i].id + '">'+
'<div class="related_prod_thumb">' +
'<div class="related_prod_img">'+
'<span class="helper"></span>'+
'<img src="' + base_url + 'uploads/thumbnail/' + imges + '" width="100">'+
'</div><div class="related_prod_title">' + recent_prod[i].title +'</div>'+
'<div class="related_prod_price">' + 'Rs. ' + recent_prod[i].price + '</div></div></a>';
a = a + 1;
}
$("#num").html(a);
$("#recent_views").html(next_recent_prod);
});
$(document).on("click", ".leftarr", function(){
var next_recent_prod = "";
var pre = a - 3;
for(var i = pre; i >= 0; i--)
{
imges = recent_prod[i].image;
imge = imges.split[","];
next_recent_prod += '<a href="' + base_url + 'init/product/' + recent_prod[i].id + '">'+
'<div class="related_prod_thumb">' +
'<div class="related_prod_img">'+
'<span class="helper"></span>'+
'<img src="' + base_url + 'uploads/thumbnail/' + imges + '" width="100">'+
'</div><div class="related_prod_title">' + recent_prod[i].title +'</div>'+
'<div class="related_prod_price">' + 'Rs. ' + recent_prod[i].price + '</div></div></a>';
}
$("#num").html(a);
$("#recent_views").html(next_recent_prod);
a = i;
});
With this code I get negative keys of JSON when clicked left. That is -1 but its doesn't exists in JSON. So I get error TypeError. Also Its not working as expected
Any help would be grateful. Thank you.

It seems your going from a to next which is a+3 for the right arrow, but for the left arrow you're going from 0 to pre which is supposed to be a-3. You probably mean:
for(var i = a-1; i >= pre; i--)
You have a = i after the loop in your left arrow click, when that loop ends the value of i will be -1 (or if corrected #1 it'll be one below the desired value), So you probably would want:
a = i + 1;
Or like you do for the right arrow, have it insides your loop:
a = a - 1; //or in short a--;
For left arrow you need to check whether it reaches zero and if so only show the first 3 items, disable the left arrow, etc:
var pre;
if(a > 2)
pre = a - 3;
else {
pre = 2;
//disable left & make sure you enable it when right is clicked.
}
Do the same for the right arrow, check whether it exceeds the length:
//not sure about 4, try 3 or 2 maybe if it doesn't work
if(a < recent_prod.length - 4)
next = a + 3;
else {
next = recent_prod.length - 3;
//disable right & make sure you enable it when left is clicked.
}

Javascript not writing to HTML definition list

Can anyone help me with why this JavaScript is not writing to the definition list in the body? When I debug, the object is there and the lines are all executed. Also, if I use document.write the information will overwrite the page. I'm just having trouble with adding this HTML to the predefined definition list. There are no errors in the console. Any help is appreciated.
Javascript in head
function writeGph(obj, chartNum) {
var data = obj;
for (i = 0; i < obj.tab1.length; i++) { //Loop to create each column of the graph
document.getElementById(chartNum).innerhtml += '<dt>' + data.tab1[i].name + '</dt>'
document.getElementById(chartNum).innerhtml += '<dd class="p100"><span><b>' + data.tab1[i].top + '</b></span></dd>'
document.getElementById(chartNum).innerhtml += '<dd class="sub p' + data.tab1[i].bot + '"><span><b>' + data.tab1[i].bot + '</b></span></dd>';
console.log(data.tab1[i].top);
}
}
function writeAxis(obj, axisNum) {
for (i = 0; i < obj.tab1.length; i++) { //Loop to create each x-axis label
document.getElementById(axisNum).innerhtml += '<li>' + obj.tab1[i].name + '</li>';
}
}
function writeTable(obj, tableNum) {
document.getElementById(tableNum).innerhtml += '<tr><th>Business</th><th>Number</th><th>Percent</th></tr>';
for (i = 0; i < obj.tab1.length; i++) { //Loop to fill in table information
obj.tab1[i].botl = Math.round(10000 * (obj.tab1[i].num / obj.tab1[i].all)) / 100;
document.getElementById(tableNum).innerhtml += '<tr><td>' + obj.tab1[i].name + '</td><td>' + obj.tab1[i].num + '</td><td>' + obj.tab1[i].botl + '%</td></tr>';
}
}
HTML in body
<dl class="chart" id="chart1"></dl>
<ul class="xAxis" id="xAxis1"></ul>
<table id="table1"></table>

It's not .innerhtml, it's .innerHTML