Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm in the midst of learning how to code.
The code below shows what happens after I click a button - a jQuery post() call is made which submits the data to a PHP form and then displays the result from the database query into a div.
The code is fine, but I'm simply wondering if there's any way to make it better.
By better, I mean if there is any way to make the code more readable, faster, and less buggy.
$.post("load_product.php", {'ID': IDname}, function(json) {
var product_details_array = $.parseJSON(json);
var test_for_null = product_details_array[0];
if ( test_for_null.length > 0)
{
$('#product_tags_container').append(
"<div class='product_tags'>" + "<img id='remove_tag' src='../function icons/cross.png'>" + "<div id='product_texture_picture'>" + "<img src='" + "product_pictures/" + product_details_array[4] + product_details_array[5] + "'>" + "</div>" + "<div id='product_title'>" + product_details_array[0] + "</div>" + "<br><br>" + "<div id='product_brand'>" + product_details_array[6] + "</div>" + "<div id='product_price'>"+ product_details_array[3] + "</div>" + "</div>");
}
});
I cleaned up all the unnecessary concatenation within your append function. The append function is too long to maintain in my opinion. I'm guessing your server side responses
No response: ''
JSON array is null: null
JSON array is empty: []
$.post("load_product.php", {
id: IDname
}).done(function(data) {
if (data.length>0 && data!=null && data!='[]') {
var product_details_array = $.parseJSON(data);
$('#product_tags_container').append("<div class='product_tags'><img id='remove_tag' src='../function icons/cross.png'><div id='product_texture_picture'><img src='product_pictures/" + product_details_array[4] + product_details_array[5] + "'></div><div id='product_title'>" + product_details_array[0] + "</div><br><br><div id='product_brand'>" + product_details_array[6] + "</div><div id='product_price'>" + product_details_array[3] + "</div></div>");
}
}
});
You don't have to use this, but if I had to 'remake' this code, I'd do it like this:
$.post("load_product.php", {'ID': IDname}, function(json) {
var product_details_array = $.parseJSON(json);
if (product_details_array[0].length > 0) {
$('#product_tags_container').append(
"<div class='product_tags'>" +
"<img id='remove_tag' src='../function icons/cross.png'>" +
"<div id='product_texture_picture'>" +
"<img src='" + "product_pictures/" + product_details_array[4] + product_details_array[5] + "'>" +
"</div>" +
"<div id='product_title'>" + product_details_array[0] + "</div>" +
"<br><br>" +
"<div id='product_brand'>" + product_details_array[6] + "</div>" +
"<div id='product_price'>" + product_details_array[3] + "</div>" +
"</div>");
}
});
In my opinion this is more readable. If I had to read your 1-line html code I'd re-format it to look like the example I gave first. If you or anyone else has to make an edit it would be easier to do like this.
EDIT:
function assembleProductHTML(product_details_array) {
return "<div class='product_tags'>" +
"<img id='remove_tag' src='../function icons/cross.png'>" +
"<div id='product_texture_picture'>" +
"<img src='" + "product_pictures/" + product_details_array[4] + product_details_array[5] + "'>" +
"</div>" +
"<div id='product_title'>" + product_details_array[0] + "</div>" +
"<br><br>" +
"<div id='product_brand'>" + product_details_array[6] + "</div>" +
"<div id='product_price'>" + product_details_array[3] + "</div>" +
"</div>";
}
$.post("load_product.php", {'ID': IDname}, function(json) {
var product_details_array = $.parseJSON(json);
if (product_details_array[0].length > 0) {
$('#product_tags_container').append(assembleProductHTML(product_details_array));
}
});
Related
I try make a poll, basically I refresh my petition every 3s to the API using jsonp and getJSON the problem is my view also refresh at the same time and blink in the interface of the client (HTML), I have some like this
var chatbox = $("#chatbox");
singleChatView();
setInterval(function () {
chatbox.empty();
singleChatView();
}, 1000);
function singleChatView() {
var chatid = localStorage.getItem('chatid');
$.getJSON("http://myapi/?chatid=" + chatid + "&jsonp=?", function (chats) {
console.log(chats);
$.each(chats.DATA, function (key, c) {
$('.msgRecipientName').text(c.SENTBY.name);
if (c.SENTBY.id == userInfo.PROFILE.USERID) {
chatbox.append(
"<li class='msgThread group currentUser'>" +
"<div class='msgBalloon group'>" +
"<div class='msgHeader'>" +
"<div class='msgFull'>" + c.MESSAGE + "</div>" +
"</div>" +
"</div>" +
"<div class='msgDate'>" +
formatDate(c.CREATEDON) +
"</div>" +
"</li>"
);
} else {
chatbox.append(
"<li class='msgThread group'>" +
"<div class='msgAuthor' style='background: #fff url(myapi/100_couple.png) 50% background-size: cover;'>" +
"<a ng-href=''>" +
"<span></span>" +
"</a>" +
"</div>" +
"<div class='msgBalloon group'>" +
"<div class='msgHeader'>" +
"<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
"<div class='msgFull'>" + c.MESSAGE + "</div>" +
"</div>" +
"</div>" +
"<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
"<div class='msgDate'>" + formatDate(c.CREATEDON) + "</div>" +
"</li>"
);
}
});
});
}
I don't have any idea how I can do this and void this issue with the view, can some one help me, all this is new for me thanks
I would suggest trying the following. The blink is most likely due to you clearing the chatbox and not putting anything in there until the ajax returns. This version, aside from reducing the number of times the DOM is changed, also doesn't replace the chatbox until it has built all the html that should be in it.
var chatbox = $("#chatbox");
//start the chat loop
singleChatView();
function singleChatView() {
var chatid = localStorage.getItem('chatid');
$.getJSON("http://myapi/?chatid=" + chatid + "&jsonp=?", function(chats) {
console.log(chats);
//collect the messages
//if we update the page once, the browser has to do less work rendering
//all the changes
var messages = [];
//keep track of the "c.SENTBY.name"
//since you are doing a global selector and setter, the value will
//end up being the last value you update all them to be anyway
//no need to update multiple times
var sendby = '';
$.each(chats.DATA, function(key, c) {
sentby = c.SENTBY.name;
if (c.SENTBY.id == userInfo.PROFILE.USERID) {
messages.push(
"<li class='msgThread group currentUser'>" +
"<div class='msgBalloon group'>" +
"<div class='msgHeader'>" +
"<div class='msgFull'>" + c.MESSAGE + "</div>" +
"</div>" +
"</div>" +
"<div class='msgDate'>" + formatDate(c.CREATEDON) + "</div>" +
"</li>"
);
} else {
messages.push(
"<li class='msgThread group'>" +
"<div class='msgAuthor' style='background: #fff url(myapi/100_couple.png) 50% background-size: cover;'>" +
"<a ng-href=''>" +
"<span></span>" +
"</a>" +
"</div>" +
"<div class='msgBalloon group'>" +
"<div class='msgHeader'>" +
"<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
"<div class='msgFull'>" + c.MESSAGE + "</div>" +
"</div>" +
"</div>" +
"<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
"<div class='msgDate'>" + formatDate(c.CREATEDON) + "</div>" +
"</li>"
);
}
});
//update the recipent with the last sent by, once
$('.msgRecipientName').text(sentby);
//replace all the chatbox text with the collected html that would have
//otherwise been append one at a time
chatbox.html(messages);
//now that we've finished this iteration, start the next iteration after
//a second
setTimeout(singleChatView, 1000);
});
}
I'm trying to nest 3 divs within a "row" div.
I had this working in "long format" (multiple var's instead of looping through the array). I've refactored my code and now I don't get any error codes AND my code does not append to the HTML file. When I console log I get an array with 3 objects. I'm sure i'm missing something minor.
Anyways some help would be great!
<div class="row">
**nested divs go here.
</div>
$(document).ready(function() {
$.get("http://api.openweathermap.org/data/2.5/forecast/daily?id4726206&cnt=3", {
APPID: "MY API KEY",
lat: 29.423017,
lon: -98.48527,
units: "imperial"
}).done(function(data) {
var stationId = data.city.name;
// Stattion Name
$('#station').append(stationId);
//console.log(data);
var forecast = data.list;
//Wind Direction in Compass Format
function getDirection(dir) {
var compass = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
var result = Math.floor((360 - dir) / 22.5);
return compass[result];
}
//Forecast Variables
$.each(forecast, function(i, v) {
var html = '';
html += "<div class='col-sm-3 wInfo'>" + "<div class='title'>High / Low</div>";
html += "<div class='cTemp'>" + (Math.ceil(forecast[i].temp.max)) + '°';
html += " / " + (Math.ceil(forecast[i].temp.min)) + '°' + "</div>";
html += "<div class='tempIcon'>" + "<img src='http://openweathermap.org/img/w/" + forecast[i].weather[0].icon;
html += ".png' alt=''></div>" + "<div class='conditions' id='castId'>" + '<span class="cond">' + forecast[i].weather[0].main;
html += "</span>: " + "<span>" + forecast[i].weather[0].description + '</span>' + "</div>";
html += "<div class='conditions'>" + "<span class='cond'>Humidity: </span>" + "<span>" + forecast[i].humidity + "%</span></div>";
html += "<div class='conditions'>" + "<span class='cond'>Wind: </span>" + "<span>" + (Math.floor(forecast[i].speed));
html += " mph / " + getDirection(forecast[i].deg) + "</span></div>" + "<div class='conditions'>";
html += "<span class='cond'>Pressure: </span>" + "<span>" + forecast[i].pressure + "</span></div>";
return html;
});
$('.forecast').append(forecast);
console.log(forecast);
});
});
You are trying to append the array forecast in html. which wont work. You should declare the html variable outside and then use it in append function.
I will also recommend to use string builder logic using array and then convert it to string and append it. remember string concatenation is heavy operator as it creates new instance of elememt every time concatenation is done :
var html = [];
$.each(forecast, function(i, v) {
html.push("<div class='col-sm-3 wInfo'>" + "<div class='title'>High / Low</div>");
html.push("<div class='cTemp'>" + (Math.ceil(forecast[i].temp.max)) + '°');
html.push(" / " + (Math.ceil(forecast[i].temp.min)) + '°' + "</div>");
html.push("<div class='tempIcon'>" + "<img src='http://openweathermap.org/img/w/" + forecast[i].weather[0].icon);
html.push(".png' alt=''></div>" + "<div class='conditions' id='castId'>" + '<span class="cond">' + forecast[i].weather[0].main);
html.push("</span>: " + "<span>" + forecast[i].weather[0].description + '</span>' + "</div>");
html.push("<div class='conditions'>" + "<span class='cond'>Humidity: </span>" + "<span>" + forecast[i].humidity + "%</span></div>");
html.push("<div class='conditions'>" + "<span class='cond'>Wind: </span>" + "<span>" + (Math.floor(forecast[i].speed)));
html.push(" mph / " + getDirection(forecast[i].deg) + "</span></div>" + "<div class='conditions'>");
html.push("<span class='cond'>Pressure: </span>" + "<span>" + forecast[i].pressure + "</span></div></div>");
});
$('.forecast').append(html.join(""));
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm trying to reference the id of a div-table row in the variable thisId. When I console.log(thisId), it says that thisId is undefined. What am I doing wrong?
$('.deleteButton').click(function(){
var thisId = $(this).parent().parent().id;
for (var i = 0; i < tableData.length; i++) {
if (tableData[i].rowValue === thisId) {
tableData.splice(thisId, 1);
}
}
$(this).parent().parent().remove();
});
}
}
HTML
"<div id='" + tableData[i].rowValue + "' class=\"Row\">" +
"<div class=\"Cell\">" +
"<p>" + tableData[i].textInput + "</p>" +
"</div>" +
"<div class=\"Cell\">" +
"<p>" + tableData[i].perIntervalInput + "</p>" +
"</div>" +
"<div class=\"Cell\">" +
"<p>" + tableData[i].radioInput + "</p>" +
"</div>" +
"<div class=\"Cell\">" +
"<button class=\"deleteButton\">Delete</button>" +
"</div>" +
"</div>"
ID is an attribute and so can be reference via the attr(..) function.
var thisId = $(this).parent().parent().attr("id");
Since you're using jQuery, you can use:
var thisId = $(this).parent().parent().attr('id');
But your HTML isn't here to show us what you're actually referencing, and whether you're referencing it properly, so there might be something else in play.
I'm trying to write code that will display a grid when a link is clicked, and I managed to get the link display, but failing to get grid displayed at the bottom of the page. Thanks for your help.
*
export function setCustomLinkContent(divId: string, field: propertybox.Field) {
var container = $('#' + divId);
container.height(70);
container.width(260);
container.append("<p><a target='_blank' href=\"http://localhost\">View all works</a></p>");
this.container.prepareGridContainer();
var gridContainer = $("#" + this.container);
var gridContHeight = gridContainer.height() - 27 - 43;
var workHtml =
"<div id='" + this.workContainer + "-heading' class='orm-table-title'>" +
"<label>" + this.headerLabel + "</label>" +
"</div>" +
"<div id='" + this.workContainer + "-table' class='map-work-grid' style='height: " + gridContHeight + "px'>" +
"<table style='margin: 0 auto; width: 100%; overflow-x: auto'>" +
"<thead>" +
"<tr id='" + this.tableHeader + "'></tr>" +
"</thead>" +
"<tbody id='" + this.tableBody + "'></tbody>" +
"</table>" +
"</div>";
gridContainer.append(workHtml);
}
*
Very likely you have the wrong this. Since your function is not a part of a class this doesn't seem to make sense here.
More about this: https://www.youtube.com/watch?v=tvocUcbCupA&hd=1
I am new to Javascript and Jquery so please excuse if this is a dumb question
HTML is being constructed dynamically as shown
var favoriteresultag = '<ul>';
favoriteresultag += "<section id='"+name+"' class='ulseWrap lielement'>" + "<div class='intit someclassss'>"+ name + "</div>" + "</section>";
How can i add/concat one more variable to the class ulseWrap lielement ??
I tried this way
var classactive = '';
if (some condition) {
classactive = 'activeRest';
} else {
classactive = '';
}
favoriteresultag += "<section id='" + name + "' class='ulseWrap lielement '+classactive+' '>" + "<div class='intit someclassss'>" + name + "</div>" + "</section>";
String concatenation, just like you're doing:
favoriteresultag += "<section id='"+name+"' class='ulseWrap lielement " + classactive + "'>" + "<div class='intit someclassss'>"+ name + "</div>" + "</section>";
Try this with jquery if you are using it
$('.actual_class').addClass('new_class')
In your case can be
$('#'+name).addClass('activeRest')
or
$('.ulseWrap.lielement').addClass('activeRest')