Develop Reference

For loop <p> tag in jquery

I need to loop using jQuery. Sometimes my query returns more than one row, so I want to check if the query returned more than one. I want to view all outputs in p tags (one by one). I wrote my code and it gives only the last row in my query. How can I return all rows in <p> tags? What is the error in my code?
<p id="prodDeccarea"> </p>
$("#slsNo").keyup(function () {
$("#hsCode").val(null);
$("#slsiUnit").val(null);
var slsNo = $("#slsNo").val();
$.ajax({
type: 'GET',
url: '${pageContext.request.contextPath}/restservice/ViewProd/' + slsNo,
success: function (result) {
var jString = JSON.stringify(result);
var jdata = JSON.parse(jString);
for (var x = 0; x < jdata.length; x++) {
if (1 < jdata.length) {
var td1 = jdata[x].itemDesc;
var td2 = jdata[x].hsCode;
var td3 = jdata[x].slsiUnit;
$("#prodDeccarea").html("Your product catagory is " + jdata[x].itemDesc + ".");
} else {
var td1 = jdata[x].itemDesc;
var td2 = jdata[x].hsCode;
var td3 = jdata[x].slsiUnit;
$("#hsCode").val(td2);
$("#prodDeccarea").html("Your product catagory is " + td1 + ".");
if (td3 == "1") {
$("#slsiUnit").val("UNIT1");
}
if (td3 == "2") {
$("#slsiUnit").val("UNIT2");
}
if (td3 == "3") {
$("#slsiUnit").val("UNIT3");
}
if (td3 == "4") {
$("#slsiUnit").val("UNIT4");
}
if (td3 == "5") {
$("#slsiUnit").val("UNIT5");
}
if (td3 == "6") {
$("#slsiUnit").val("UNIT6");
}
}
}
}
}
);
});

You have some issues in your code
Let's analyze them :-)
You're using a condition when the array jdata's length === 1 within the for-loop. Move that logic outside from the for-loop.
for (var x = 0; x < jdata.length; x++) {
if (1 < jdata.length) {
^
You're overriding the content of your previously call of function .html(...). Therefore, you're losing the previous HTML.
$("#prodDeccarea").html("Your product catagory is " + td1 + ".");
^
You're stringifying an already JSON String, just parse it.
var jString = JSON.stringify(result);
^
You have multiple conditions to set a value according to tdr3's value. Just use that value and set it to the element. I.e: $("#slsiUnit").val("UNIT" + td3);
if (td3 == "1") { <- Here
$("#slsiUnit").val("UNIT1");
}
if (td3 == "2") { <- Here, and so on
$("#slsiUnit").val("UNIT2");
}
Look at this code snippet with those fixes
$("#slsNo").keyup(function() {
$("#hsCode").val(null);
$("#slsiUnit").val(null);
var slsNo = $("#slsNo").val();
$.ajax({
type: 'GET',
url: '${pageContext.request.contextPath}/restservice/ViewProd/' + slsNo,
success: function(result) {
var jString = JSON.stringify(result);
var jdata = JSON.parse(jString);
if (jdata.length === 1) {
var td1 = jdata[0].itemDesc;
var td2 = jdata[0].hsCode;
var td3 = jdata[0].slsiUnit;
$("#hsCode").val(td2);
$("#prodDeccarea").html("Your product catagory is " + td1 + ".");
$("#slsiUnit").val("UNIT" + td3);
return;
}
for (var x = 0; x < jdata.length; x++) {
var td1 = jdata[x].itemDesc;
var td2 = jdata[x].hsCode;
var td3 = jdata[x].slsiUnit;
var $prodDeccarea = $("#prodDeccarea");
$prodDeccarea.html($prodDeccarea.html() + '<p>' + "Your product catagory is " + jdata[x].itemDesc + "." + "</p>");
}
}
});
});

$.ajax({
type: 'GET',
url: '${pageContext.request.contextPath}/restservice/ViewProd/' + slsNo,
dataType: "json",//if you return json data you don't need var jString = JSON.stringify(result);var jdata = JSON.parse(jString);
beforeSend: function () {
$("#prodDeccarea").html("");//this will clear previous results
},
success: function (data) {
$.each(data, function (i, e) {//this will loop through all the results
$("#prodDeccarea").append("<p>RESULT " + i + " : ".JSON.stringify(e));//this will add to the at the end of #prodDeccarea
});
}
});

You can use each method https://api.jquery.com/each/
$("p").each(function(element) {
console.log(element.text);
});
This will print out the contents of all p elements in your code.

guess the problem is here,you didn't accumulate;
$("#slsNo").keyup(function () {
$("#hsCode").val(null);
$("#slsiUnit").val(null);
var slsNo = $("#slsNo").val();
$.ajax({
type: 'GET',
url: '${pageContext.request.contextPath}/restservice/ViewProd/' + slsNo,
success: function (result) {
var jString = JSON.stringify(result);
var jdata = JSON.parse(jString);
for (var x = 0; x < jdata.length; x++) {
if (1 < jdata.length) {
var td1 = jdata[x].itemDesc;
var td2 = jdata[x].hsCode;
var td3 = jdata[x].slsiUnit;
//accumulate
$("#prodDeccarea").html($("#prodDeccarea").html()+"Your product catagory is " + jdata[x].itemDesc + ".");
} else {
var td1 = jdata[x].itemDesc;
var td2 = jdata[x].hsCode;
var td3 = jdata[x].slsiUnit;
$("#hsCode").val(td2);
$("#prodDeccarea").html("Your product catagory is " + td1 + ".");
if (td3 == "1") {
$("#slsiUnit").val("UNIT1");
}
if (td3 == "2") {
$("#slsiUnit").val("UNIT2");
}
if (td3 == "3") {
$("#slsiUnit").val("UNIT3");
}
if (td3 == "4") {
$("#slsiUnit").val("UNIT4");
}
if (td3 == "5") {
$("#slsiUnit").val("UNIT5");
}
if (td3 == "6") {
$("#slsiUnit").val("UNIT6");
}
}
}
}
}
);
});

e.preventDefault not preventing submit

So on localhost I have no issues with the function at all, it works flawless but now I uploaded it to my host and it doesn't seem to work anymore. The form gets somewhat submitted and the URL gets all the info from the datastring in it. Please help me fix it.
This gets added to the URL in the addressbar:
?inlineRadioOptions=pre-set&customname=&customtype=&Crime=&DescriptionForm=&inlineRadioOptions3=none&Report=&selected-text=1&CordX=4675&CordY=4558&SubmitCrime=
$("#CrimeForm").submit(function(e) {
e.preventDefault();
if ($('#RadioCrime2').is(':checked')) {
var Crime = $("#customname").val();
var Type = $("#customtype").val();
} else {
var Crime = $("#select2").val();
var Type = 'NONE';
}
if ($('#RadioDiv2').is(':checked')) {
var UseDiv = 1;
} else {
var UseDiv = 0;
}
var value = $(this).find('select[name="DivisionSelect"]').val();
var divss = (value ? value.join('') : '');
var DescriptionForm = $("#DescriptionForm").val();
var Report = $("#Report").val();
var PinID = $("#selected-text").val();
var CordX = $("#CordXNew").val();
var CordY = $("#CordYNew").val();
var UserID = <?php echo $AccountID;?>;
var dataString = 'Crime=' + Crime + '&Type=' + Type + '&DescriptionForm=' + DescriptionForm + '&PinID=' + PinID + '&CordX=' + CordX + '&CordY=' + CordY + '&UserID=' + UserID + '&DivSelect=' + UseDiv + '&Divs=' + divss + '&Report=' + Report;
if (Crime == '' || Type == '' || DescriptionForm == '' || PinID == '' || CordX == '' || CordY == '') {
document.getElementById("Alert-group").innerHTML = '<div class="alert alert-danger" role="alert">You need to fill out everything!</div>';
} else {
var n = DescriptionForm.length;
if (n > 500) {
document.getElementById("Alert-group").innerHTML = '<div class="alert alert-danger" role="alert">You have ' + n + ' characters in the description, limit them to 500!</div>';
} else {
$.ajax({
type: "POST",
url: "SendInput.php",
data: dataString,
cache: false,
success: function(result) {
document.getElementById("Alert-group").innerHTML = '<div class="alert alert-success" role="alert">' + result + '</div>';
$('#DescriptionForm').val('');
$('#customname').val('');
$('#Report').val('');
$('#customtype').prop('selectedIndex', 0);
$("#select2").val(null).trigger("change");
document.getElementById("CustomCrime").style.display = "none";
document.getElementById("DefaultCrime").style.display = "block";
document.getElementById("RadioCrime").checked = true;
document.getElementById("RadioDiv").checked = true;
document.getElementById("ChooseDivision").style.display = "none";
$("#DivisionSelect option:selected").prop("selected", false);
}
});
}
}
return false;
});

Instead of relying on form submission and its event cancellation, you can use a regular button within your form.
The button being sort of like:<input type='button' id='btnSendCrimeForm' value='Send Form' />
Then, within the contents of a document.ready callback, you can register to the aforementioned button's click event, within which you execute the code you wanted to execute upon form submission.
$("#btnSendCrimeForm").click(function(e) {
if($('#RadioCrime2').is(':checked')) {
var Crime = $("#customname").val();
var Type = $("#customtype").val();
}else{
var Crime = $("#select2").val();
var Type = 'NONE';
}
if($('#RadioDiv2').is(':checked')) {
var UseDiv = 1;
}else{
var UseDiv = 0;
}
var value = $(this).find('select[name="DivisionSelect"]').val();
var divss = (value ? value.join('') : '');
var DescriptionForm = $("#DescriptionForm").val();
var Report = $("#Report").val();
var PinID = $("#selected-text").val();
var CordX = $("#CordXNew").val();
var CordY = $("#CordYNew").val();
var UserID = <?php echo $AccountID;?>;
var dataString = 'Crime='+ Crime + '&Type='+ Type + '&DescriptionForm='+ DescriptionForm +'&PinID='+ PinID + '&CordX='+ CordX + '&CordY='+ CordY + '&UserID='+ UserID + '&DivSelect='+ UseDiv + '&Divs='+ divss + '&Report='+ Report;
if(Crime==''||Type==''||DescriptionForm==''||PinID==''||CordX==''||CordY=='')
{
document.getElementById("Alert-group").innerHTML = '<div class="alert alert-danger" role="alert">You need to fill out everything!</div>';
}
else
{
var n = DescriptionForm.length;
if(n > 500){
document.getElementById("Alert-group").innerHTML = '<div class="alert alert-danger" role="alert">You have '+ n +' characters in the description, limit them to 500!</div>';
}else{
$.ajax({
type: "POST",
url: "SendInput.php",
data: dataString,
cache: false,
success: function(result){
document.getElementById("Alert-group").innerHTML = '<div class="alert alert-success" role="alert">'+result+'</div>';
$('#DescriptionForm').val('');
$('#customname').val('');
$('#Report').val('');
$('#customtype').prop('selectedIndex',0);
$("#select2").val(null).trigger("change");
document.getElementById("CustomCrime").style.display = "none";
document.getElementById("DefaultCrime").style.display = "block";
document.getElementById("RadioCrime").checked = true;
document.getElementById("RadioDiv").checked = true;
document.getElementById("ChooseDivision").style.display = "none";
$("#DivisionSelect option:selected").prop("selected", false);
}
});
}
}
return false;
});

Read CSV file with Jquery

I need to read then contents of a CSV file from the local server. In my CSV file I have three fields, those are:
Region,
Acct_Name,
State.
while getting the values in Acct_Name values are in the format of comma. In my CSV file reader it is separating comma and that value is going to state.
So how can I solve that issue?
My code is:
$(document).ready(function() {
// AJAX in the data file
$.ajax({
type: "GET",
url: "data.csv",
dataType: "text",
success: function(data) {processData(data);}
});
// Let's process the data from the data file
function processData(data) {
var table = $("<table />");
var rows = data.split(/\r\n|\n/);
for (var i = 1; i < rows.length-1; i++) {
var row = $("<tr />");
var cells = rows[i].split(",");
for (var j = 0; j < rows.length; j++) {
var cell = $("<td />");
cell.html(cells[j]);
row.append(cell);
}
var usedNames = {};
$("select[name='company1'] > option").each(function () {
if(usedNames[this.text]) {
$(this).remove();
} else {
usedNames[this.text] = this.value;
}
});
$("select[name='company2'] > option").each(function () {
if(usedNames[this.text]) {
$(this).remove();
} else {
usedNames[this.text] = this.value;
}
});
$("select[name='company3'] > option").each(function () {
if(usedNames[this.text]) {
$(this).remove();
} else {
usedNames[this.text] = this.value;
}
});
$("#region").append("<option value =1> " + cells[0] + " </option>");
$("#state").append("<option value =1> " + cells[1] + "</option>");
$("#accname").append("<option value =1>" + cells[2] + "</option>");
table.append(row);
}
}
});

Autocompleting textbox from jquery combobox

I have been following an online tutorial to autocomplete textboxes with database values after the user enters a code greater than 7 characters. I have completed most of what I am trying to achieve however I cannot seem to select a value from the combobox to autocomplete the textbox.
I dont have much javascript experience but I am hoping the problem is something small in what I already have, can someone please recommend the change I need to make to select the value from the combobox.
public ActionResult MultiColumnComboBox(string SearchFor, string ControlId)
{
ViewBag.ProcId = SearchFor.Trim();
ViewBag.ControlBlockId = "block" + ControlId.Trim();
ViewBag.ControlId = ControlId.Trim();
ViewBag.ControlTxtId = "txt" + ControlId.Trim();
return View();
}
public JsonResult LoadComboData(string strSearch, string SearchFor)
{
efacsdbEntities db = new efacsdbEntities();
strSearch = strSearch.Trim();
if (SearchFor.Trim() == "employee" && strSearch.Length>7)
{
var res = (from E in db.allpartmasters
where E.partnum.ToLower().Contains(strSearch.ToLower()) || E.partdesc.ToLower().Contains(strSearch.ToLower())
select new
{
E.partnum,
E.partdesc
}).ToList();
return Json(res, JsonRequestBehavior.AllowGet);
}
return Json(null, JsonRequestBehavior.AllowGet);
}
<input type="hidden" id="#ViewBag.ProcId" name="#ViewBag.ProcId" value="" />
<input type="hidden" id="#ViewBag.ControlId" name="#ViewBag.ControlId" value="" />
<input type="text" name="#ViewBag.ControlTxtId" id="#ViewBag.ControlTxtId" autocomplete="on" />
<div class="#ViewBag.ControlTxtId renderpart">
<div class="DataBlock">
<div id="#ViewBag.ControlBlockId" style="max-width: 520px;">
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../../Scripts/json.debug.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".renderpart").hide();
var txtid = "#" + '#ViewBag.ControlTxtId';
var renderpart = "." + '#ViewBag.ControlTxtId';
var selectlinkvalueid = ".Get" + '#ViewBag.ProcId';
$(selectlinkvalueid).on("click", function () {
var value = $(this).attr('id');
var valueText = $(this).attr('title');
$("##ViewBag.ControlId").val(value);
$(txtid).val(valueText);
$(renderpart).slideUp("slow");
});
$(txtid).keyup(function () {
var value = $(txtid).val();
var Procvalue = '#ViewBag.ProcId';
var controlid = "#" + '#ViewBag.ControlBlockId';
value = encodeURI(value);
if (value.length > 2) {
$.ajaxSetup({ cache: false });
$.getJSON("/Test/LoadComboData", { strSearch: " " + value, SearchFor: " " + Procvalue }, function (data) {
$(controlid).html("");
var activecols = $("#hdnActiveColumns").val();
var htmlrow = "";
var tempprocId = '#ViewBag.ProcId';
var jsondata = JSON.stringify(data);
$(controlid).html(CreateDynamicTable(jsondata, tempprocId));
$(renderpart).slideDown("slow");
});
$.ajaxSetup({ cache: true });
}
else {
$(renderpart).slideUp("slow");
}
});
$(txtid).focusin(function () {
var txtid = "#" + '#ViewBag.ControlTxtId';
var value = $(txtid).val();
var Procvalue = '#ViewBag.ProcId';
var controlid = "#" + '#ViewBag.ControlBlockId';
value = encodeURI(value);
if (value.length > 2) {
$.ajaxSetup({ cache: false });
$.getJSON("/Test/LoadComboData", { strSearch: " " + value, SearchFor: " " + Procvalue }, function (data) {
$(controlid).html("");
var htmlrow = "";
var tempprocId = '#ViewBag.ProcId';
var jsondata = JSON.stringify(data);
$(controlid).html(CreateDynamicTable(jsondata, tempprocId));
$(renderpart).slideDown("slow");
});
$.ajaxSetup({ cache: true });
}
else {
$(renderpart).slideUp("slow");
}
});
function CreateDynamicTable(objArray, tempprocId) {
var array = JSON.parse(objArray);
var str = '<table style="width:100%;">';
str += '<tr>';
for (var index in array[0]) {
str += '<th scope="col">' + index + '</th>';
}
str += '</tr>';
str += '<tbody>';
var flag = false;
var ids;
for (var i = 0; i < array.length; i++) {
str += (i % 2 == 0) ? '<tr>' : '<tr>';
for (var index in array[i]) {
if (flag == false) {
ids = array[i][index];
flag = true;
}
str += '<td><a id="' + ids + '" class="Get' + tempprocId + '" title="' + array[i][index] + '" href="#">' + array[i][index] + '</a></td>';
}
str += '</tr>';
}
str += '</tbody>';
str += '</table>';
return str;
}
});
$(document).click(function (evt) {
var renderpart = "." + '#ViewBag.ControlTxtId';
var theElem = (evt.srcElement) ? evt.srcElement : evt.target;
if (theElem.id == "main" || theElem.id == "sub1") {
$(renderpart).slideUp("fast");
}
});
</script>
Here is the link to the tutorial I was following as well.
Create Multiple column autocomplete combobox

"Page Unresponsive" Error in Chrome when trying to GET files > 500kb

I am trying to get Log files in my application, and am using Ajax to do so.
The problem is that while using Chrome I constantly get 'Page Unresponsive' Errors when I try to load the files.
My application is working fine in Firefox, so I'm guessing this is a webkit issue.
I removed xhr because I heard chrome has a problem with it.
This is my code -
$.ajax(
{
type: 'GET',
url: "Logs/GetLogFile?option=" + logFile,
data: {},
success: function (data) {
var fileData = data;
cleanUp();
currentlyViewedFile = logFile;
var fileLines = fileData.split('\n');
var htmlString = '';
var lineCount = 0;
for (var i = 0; i < fileLines.length; i++) {
lineCount = lineCount + 1;
if (i == (highlightLine - 1)) {
htmlString += '<span id="highLoc" style="display:block"><font size="4" color="red">' + lineCount + '. ' + fileLines[i] + '</font></span>';
}
else {
htmlString += '<span class="spanClass">' + lineCount + '. ' + fileLines[i];
}
var combinedLine = fileLines[i];
var isNewLogLine = false;
var newLogLineCount = 0;
while (((i + newLogLineCount + 1) < fileLines.length) && (isNewLogLine == false)) {
var NextlogLine = fileLines[i + newLogLineCount + 1].split(' ');
isNewLogLine = isLogLine(NextlogLine[0]);
if (isNewLogLine == true) {
break;
}
htmlString += fileLines[i + newLogLineCount + 1];
combinedLine += fileLines[i + newLogLineCount + 1];
newLogLineCount = newLogLineCount + 1
}
i = i + newLogLineCount;
var logLine = combinedLine.split(' ');
var logMsgStartIndex = combinedLine.indexOf(logLine[5]);
var logMsg = combinedLine.substring(logMsgStartIndex);
var obj = {
lineNos: lineCount,
date: logLine[0],
time: logLine[1],
severity: logLine[2],
logClassName: logLine[4],
logMessage: logMsg
};
fileArray.push(obj);
if ((i % 1000) == 0) {
$("#textPlace").append(htmlString);
htmlString = '';
window.scrollTo(0, 2);
}
}
fileLines = null;
$("#fetchProgress").hide();
$("#textPlace").append(htmlString);
//highlight error location
var scrollX = $("#highLoc");
if (scrollX) {
if (!scrollX[0]) return;
var scrollDistance = '{ scrollTop: ' + scrollX[0].offsetTop + '}';
var distanceInJson = eval("(" + scrollDistance + ")");
$("#mainContentBox").animate(distanceInJson, 1);
}
},
///success function end
fail: function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
}
});
If anyone has any ideas on how to deal with this issue, please let me know.