The numbers must center align and the text must left align
I'm getting a error in my code. Can anyone tell me what am I doing wrong
Image
Code
color = color !== "" && color !== undefined ? " <span class=\"color\" style=\"background: #" + color + "\"></span>" : " <span class=\"color\"></span>";
contentHtml += "<td rowspan1=\"" + 1 + "\" class=\"" + (rowspan !== "" && rowspan > 1 ? "groups" : "") + " " + (typeof value == Number) ? "text-center" : "text-left" + "\">" + value + (Number(value) ? preFix : "") + color + (Number(value) ? postFix : "") + "</td>";
if (rowspan > 1) {
var rowspanContent = "<td rowspan1=\"" + rowspan + "\" class=\"" + (rowspan !== "" && rowspan > 1 ? "groups" : "") + " " + (typeof value == Number) ? "text-center" : "text-left" + "\">" + value + (Number(value) ? preFix : "") + color + (Number(value) ? postFix : "") + "</td>"; }
Wrap your ternary statement (typeof value == Number) ? "text-center" : "text-left" in brackets so that you have ... + ((typeof value == Number) ? "text-center" : "text-left") + ... in both instances where you use it
Related
Below is the code. Where i want to AND in bold so i was trying to use html tag
var stri = " <strong>" + 'AND' + "</strong> "
Its print the html tag in browser.
Output- <strong>AND</strong>
if( filterArray.length > 0 ){
var filterText = "";
_.each( filterArray, function(fObj, index){
filterText += fObj.title + " " + (fObj.filterType === "include" ? "IN" : (fObj.filterType === "exclude" ? "NOT IN" : "CONTAIN")) + " " + "[ ";
if( fObj.values.length > 1 ) {
var stri = "AND "
filterText += "" + fObj.values[0] + " and " + String(fObj.values.length - 1) + " more ] " + " " + (index !== filterArray.length - 1 ? stri : "");
}
else {
var stri = "AND "
filterText += "" + fObj.values[0] + " ] " + " " + (index !== filterArray.length - 1 ? stri : "");
}
});
return filterText.substring(0, filterText.length - 2);
}
else {
return "-";
}
I don't understand why my placement of the first /span (_S) in the defFD variable is creating a new position in the array. I want to set one color for the portion dayname[i] and another after the span variable ND. But when I put the /span (_S) after the dayname section (before ND) in that position it splits the dayname into array position [0] and the rest into pos [1]. Why?
The result of the above code looks like this for the Day forecast: defFD = ["Wednesday Jan 5-", "A foggy day with a high of 47º. Hum 47%. Winds ESE at 10mph. Prec 10% chance.] I need there to be a single long string at position [0] without being split after "Wednesday Jan 5". I've come at this from several angles. Need fellow pros to help.
// STYLING VARIABLES for EXTRA DATA
var DN = '<span style= color:' + ( (where == "day") ? font_color_night : font_color_day ) + '>'; //Day-Night Color Swap
var ND = '<span style= color:' + ( (where == "day") ? font_color_day : font_color_night ) + '>'; //Night-Day Color Swap
var _S = "</span>"; //remove styling
// BUILD WEATHER DATA
var defFD = [];
for (i=0; i < (ForecastDays)+1; i++) {
defFD[i] = DN + obj.dayname[i] + " " + Suffix(dates[i]) + "- " + _S
+ ND + convertTxtDay(obj.day_desc[i]) + ((obj.code[i] == 24 && obj.day_desc[i].indexOf("wind") == -1) ? " and windy " : " ")
+ "with a high of " + obj.high[i] + "°" + Unit + ". "
+ "Hum " + obj.day_humidity[i] + "%. "
+ "Winds " + obj.day_cardinal[i] + " at " + obj.day_speed[i] + windspeedunit + ". "
+ ((obj.pop[i] != 0) ? "Prec." + obj.pop[i]+ "% chance." : "") + _S + "<P>"
;
defFN[i] = DN + obj.dayname[i] + nighttext + "- " + _S
+ ND + convertTxtNight(obj.ndesc[i]) + ((obj.code[i] == 24 && obj.ndesc[i].indexOf("wind") == -1) ? " and windy " : " ")
+ "with a low of " + obj.low[i] + "°" + Unit + ". "
+ "Hum " + obj.nhum[i] + "%. "
+ "Winds " + obj.ncard[i] + " at " + obj.nspeed[i] + windspeedunit + ". "
+ ((obj.npop[i] != 0) ? "Prec." + obj.npop[i]+ "% chance." : "") + _S + "<P>"
;
if (DayOnly == false) { defForecast.push(defFD[i], defFN[i]); } //move day & night alternating into 1 array
else { defForecast.push(defFD[i]); }
} ```
It looks like you might be missing the quotation marks around your style attributes:
var DN = '<span style="color:' + ( (where == "day") ? font_color_night : font_color_day ) + '">';
var ND = '<span style="color:' + ( (where == "day") ? font_color_day : font_color_night ) + '">';
It seems like what solves my issue is to simply add the /span's both at the end and not the middle.. Though no idea why I can't add an /span in the middle of the variable declaration without it adding a new array position.
var DN = '<span style="color:' + ( (where == "day") ? font_color_night : font_color_day ) + '">';
var ND = '<span style="color:' + ( (where == "day") ? font_color_day : font_color_night ) + '">';
var _S = "</span>"; //remove styling
defFD[i] = DN + (other variables here) +
ND + (other variables here) +
_S + _S;
I keep on getting the error : "Value cannot be null" even if i'm checking for nulls.
This is part of my code:
<script type="text/javascript">
if (typeof #Model.Project.ProjectPricings.Count() != 'undefined' &&
#Model.Project.ProjectPricings.Count())
{
numberOfPricings = #Model.Project.ProjectPricings.Count();
}
sourceCodeList = '#Html.Raw(string.Join("", Model.SourceCodeList.Select(x => "<option></option><option value=" + x.SourceCode + ">" + x.SourceCode + "</option>")))';
targetCodeList = '#Html.Raw(string.Join("", Model.TargetCodeList.Select(x => "<option value="+ x.TargetCode + ">" + x.TargetCode + "</option>")))';
unitTypeCodeList = '#Html.Raw(string.Join("", Model.UnitTypeCodeList.Select(x => "<option value="+ x.UnitTypeCode + ">" + x.UnitTypeCode + "</option>")))';
currencyList = '#Html.Raw(string.Join("", Model.CurrencyList.Select(x => "<option value="+ x.CurrencyCode + ">" + x.CurrencyCode + "</option>")))';
serviceCodeList = '#Html.Raw(string.Join("", Model.ServiceCodeList.Select(x => "<option value="+ x.ServiceCode + ">" + x.ServiceCode + "</option>")))';
frequencyList = '#Html.Raw(string.Join("", Model.VolumeFrequencyList.Select(x => "<option value="+ x.VolumeFrequencyDescription + ">" + x.VolumeFrequencyDescription + "</option>")))';
#*$(document)
.ready(function() {
if (#Model.Project.Id == null) {
addPricing();
}
});*#
$('#submit-price-button').button();
$(".date").datepicker();
$(".combobox").SumoSelect({ search: true, searchText: 'Enter here.' });
</script>
By your description and the comment, my understanding is that you are having trouble when checking where #Model.Project.ProjectPricings.Count() has value, if has value set it.
your problem is you are mixing razor and javascript code for validating - in your case, it seems logical to check directly on the server side (hence razor)
so change your code to:
#if (Model.Project.ProjectPricings != null)
{
#:numberOfPricings = #Model.Project.ProjectPricings.Count();
}
// rest same
I am using one javascript where i used if condition to validate more than two variable, Based on that i am setting the data.
Below is javascript code:
if (twitterPicLink != "" || twitterMediaLink != "" || twitteHeartServeLink != "") {
htmlDiv += "<div class='tweet'>";
htmlDiv += "<div class='tweet-image'><img src='" + imgSrc + "' title='Tweet icon'></div>";
}
if (twitterPicLink != "" && twitterMediaLink != "" && twitteHeartServeLink != "") {
htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitteHeartServeLink + " <br/>" + twitterPicLink + " " + twitterMediaLink + "</p></div></div>";
}
else if (twitterPicLink == "" && twitterMediaLink != "" && twitteHeartServeLink != "") {
htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitteHeartServeLink + " <br/>" + twitterMediaLink + "</p></div></div>";
}
else if (twitterPicLink == "" && twitterMediaLink == "" && twitteHeartServeLink != "") {
htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitteHeartServeLink + "</p></div></div>";
}
else if (twitterPicLink != "" && twitterMediaLink == "" && twitteHeartServeLink != "") {
htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitteHeartServeLink + " " + twitterPicLink + "</p></div></div>";
}
else if (twitterPicLink == "" && twitterMediaLink != "" && twitteHeartServeLink != "") {
htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitteHeartServeLink + " " + twitterMediaLink + "</p></div></div>";
}
else if (twitterPicLink != "" && twitterMediaLink != "" && twitteHeartServeLink == "") {
htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitterPicLink + " " + twitterMediaLink + "</p></div></div>";
}
else if (twitterPicLink != "" && twitterMediaLink == "" && twitteHeartServeLink == "") {
htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitterPicLink + "</p></div></div>";
}
else if (twitterPicLink == "" && twitterMediaLink != "" && twitteHeartServeLink == "") {
htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitterMediaLink + "</p></div></div>";
}
How can i change above code to switch case validation?
Think about your design. Even though this does not technically answer the question you could to the following with a factory-ish class
if (twitterPicLink != "" || twitterMediaLink != "" || twitteHeartServeLink != "") {
htmlDiv += "<div class='tweet'>";
htmlDiv += "<div class='tweet-image'><img src='" + imgSrc + "' title='Tweet icon'></div>";
}
htmlDiv += tweetBodyFactory.create(twitterPicLink, twitterMediaLink, twitterHeartSaveLink);
Within your factory you can use composition to hold factory implementations, that define the fields PicLinkIsDefined, MediaLinkIsDefined and HeartSaveLinkIsDefined. With
var matchingFactory = factories.find(f => (f.PicLinkIsDefined && twitterPicLink != "" || !f.PicLinkIsDefined && tweitterPicLink == "")
&& (f.MediaLinkIsDefined && twitterMediaLink != "" || !f.MediaLinkIsDefined && twitterMediaLink == "")
&& (f.HeartSaveLinkIsDefined && twitterHeartSaveLink != "" || !f.HeartSaveLinkIsDefined && twitterHeartSaveLink == ""));
if(matchingFactory != undefined)
{
return matchingFactory.create(twitterPicLink, twitterMediaLink, twitterHeartSaveLink);
}
// error handling here
you can select the matching factory and build the HTML. It'll be a bit more code (with all the factory implementations), but in the end it'll be much cleaner.
I know that it's a bit loose interpretation of the factory pattern, but still a good way to structure the requirements.
I hope this would help
switch (twitterPicLink) {
case "":
switch (twitterMediaLink) {
case "":
switch (twitteHeartServeLink) {
case "":
[break;]
default:
htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitteHeartServeLink + "</p></div></div>";
[break;]
}
[break;]
default:
switch (twitteHeartServeLink) {
case "":
htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitterMediaLink + "</p></div></div>";
[break;]
default:
htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitteHeartServeLink + " <br/>" + twitterMediaLink + "</p></div></div>";
[break;]
}
[break;]
}
[break;]
default:
switch (twitterMediaLink) {
case "":
switch (twitteHeartServeLink) {
case "":
htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitterPicLink + "</p></div></div>";
[break;]
default:
htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitteHeartServeLink + " " + twitterPicLink + "</p></div></div>";
[break;]
}
[break;]
default:
switch (twitteHeartServeLink) {
case "":
htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitterPicLink + " " + twitterMediaLink + "</p></div></div>";
[break;]
default:
htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitteHeartServeLink + " <br/>" + twitterPicLink + " " + twitterMediaLink + "</p></div></div>";
[break;]
}
[break;]
}
[break;]
}
Try cover your code in switch case..
Please check it once..
switch (true) {
case (twitterPicLink != "" && twitterMediaLink != "" && twitteHeartServeLink != ""):
htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitteHeartServeLink + " <br/>" + twitterPicLink + " " + twitterMediaLink + "</p></div></div>";
break;
case (twitterPicLink == "" && twitterMediaLink != "" && twitteHeartServeLink != ""):
htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitteHeartServeLink + " <br/>" + twitterMediaLink + "</p></div></div>";
break;
case (twitterPicLink == "" && twitterMediaLink == "" && twitteHeartServeLink != ""):
htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitteHeartServeLink + "</p></div></div>";
break;
case (twitterPicLink != "" && twitterMediaLink == "" && twitteHeartServeLink != ""):
htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitteHeartServeLink + " " + twitterPicLink + "</p></div></div>";
break;
case (twitterPicLink == "" && twitterMediaLink != "" && twitteHeartServeLink != ""):
htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitteHeartServeLink + " " + twitterMediaLink + "</p></div></div>";
break;
case (twitterPicLink != "" && twitterMediaLink != "" && twitteHeartServeLink == ""):
htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitterPicLink + " " + twitterMediaLink + "</p></div></div>";
break;
case (twitterPicLink != "" && twitterMediaLink == "" && twitteHeartServeLink == ""):
htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitterPicLink + "</p></div></div>";
break;
case (twitterPicLink == "" && twitterMediaLink != "" && twitteHeartServeLink == ""):
htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitterMediaLink + "</p></div></div>";
break;
htmlDiv += "<div class='tweet'>";
htmlDiv += "<div class='tweet-image'><img src='" + imgSrc + "' title='Tweet icon'></div>";
default:
}
you can study switch - JavaScript from MDN
Here's a code synxtax on how it is used.
switch (expression) {
case value1:
//Statements executed when the result of expression matches value1
[break;]
case value2:
//Statements executed when the result of expression matches value2
[break;]
...
case valueN:
//Statements executed when the result of expression matches valueN
[break;]
default:
//Statements executed when none of the values match the value of the expression
[break;]
}
I'm trying to add a header to this JSON output table, but I have no clue how to do that. This code gives me a table populated with the data returned from the database and puts it in a table format as structured by the <td><tr> tags. The problem is that I need a header for the table and I don't know how to get that part coded. Any ideas?
function renderSearchResults( results, domNode ) {
var i;
var out = "<table>";
if (results.length === 0) {
domNode.innerHTML = 'No results matching your search.';
return;
}
// loop to print the JSON in a table format
results.forEach(function (result) {
console.info(result);
out += "<tr><td>" +
result.ContractId +
"</td><td>" +
result.ContractTitle +
"</td><td>" +
result.Terminal +
"</td><td>" +
result.Cabinet +
"</td><td>" +
result.Section +
"</td><td>" +
result.Folder +
"</td><td>" +
result.Sheet +
"</td><td>" +
result.Consult +
"</td><td>" +
result.Location +
"</td><td>" +
result.Active +
"</td><td>" +
result.Theme +
"</td><td>" +
result.Construction +
"</td><td>" +
result.Subtheme +
"</td><td>" +
result.AsBuilt +
"</td><td>" +
result.Year +
"</td><td>" +
"<a href= " + result.Path + " target=_blank>" + "Binder" + "</a>"
} );
out += "</table>";
domNode.innerHTML = out;
}
During your initial declaration of out you can put in <th> or tableheader tags, i.e:
function renderSearchResults( results, domNode ) {
var i;
var out = "<table><th>ContractId</th><th>ContractTitle</th><th>Terminal</th><th>Cabinet </th><th>Section </th><th>Folder </th><th>Sheet </th><th>Consult </th><th>Location </th><th>Active </th><th>Theme </th><th>Construction </th><th>Subtheme </th><th>AsBuilt </th><th>Year </th>";
if (results.length === 0) {
domNode.innerHTML = 'No results matching your search.';
return;
}
results.forEach(function (result) {
console.info(result);
out += "<tr><td>" +
(result.ContractId !== null ? result.ContractId : 'Not Applicable') +
"</td><td>" +
(result.ContractTitle !== null ? result.ContractTitle : 'Not Applicable') +
"</td><td>" +
(result.Terminal !== null ? result.Terminal : 'Not Applicable') +
"</td><td>" +
(result.Cabinet !== null ? result.Cabinet : 'Not Applicable') +
"</td><td>" +
(result.Section !== null ? result.Section : 'Not Applicable') +
"</td><td>" +
(result.Folder !== null ? result.Folder : 'Not Applicable') +
"</td><td>" +
(result.Sheet !== null ? result.Sheet : 'Not Applicable') +
"</td><td>" +
(result.Consult !== null ? result.Consult : 'Not Applicable') +
"</td><td>" +
(result.Location !== null ? result.Location : 'Not Applicable') +
"</td><td>" +
(result.Active !== null ? result.Active : 'Not Applicable') +
"</td><td>" +
(result.Theme !== null ? result.Theme : 'Not Applicable') +
"</td><td>" +
(result.Construction !== null ? result.Construction : 'Not Applicable') +
"</td><td>" +
(result.Subtheme !== null ? result.Subtheme : 'Not Applicable') +
"</td><td>" +
(result.AsBuilt !== null ? result.AsBuilt: 'Not Applicable') +
"</td><td>" +
(result.Year !== null ? result.Year : 'Not Applicable')+
"</td><td>" +
"<a href= " + result.Path + " target=_blank>" + "Binder" + "</a>"
} );
out += "</table>";
console.log(out);
domNode.innerHTML = out;
}
There is a different tag for the table header.
<tr> is for row <th> for your headers and <td> for the data.
You can check here for more info.
You can either add your header after your check for results:
if (results.length === 0) {
domNode.innerHTML = 'No results matching your search.';
return;
} else {
out += "<tr><th>Header</th></tr>"
}