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;]
}
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 "-";
}
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
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>"
}
I am trying to solve a problem inside my dad's enterprise system, the system has a button, that works just on Internet Explorer, it doesn't work in other browsers, so it is not possible to work in this system using iPad or another Operational System... They bought this system from an enterprise called Linx, and i guess this system's code is too dangerous, dealing with queries on the client-side (javascript).
If you know why this just works on Internet Explorer i would be so greatful!
Thanks in advice...
Observation: i just copied the button's html and the button's javascript function, and paste here.
<script>
function Query_onclick() {
xwhere = "";
xflag = 1;
if (xmodelos != ""){
if (xwhere != "") {
xwhere = xwhere + " and ";
}
xwhere = xwhere + " Modelagem = '" + xmodelos + "'";
}
if (xmateriais != "") {
if (xwhere != "") {
xwhere = xwhere + " and ";
}
xwhere = xwhere + " Material = '" + xmateriais + "'";
}
if (xgrupos != ""){
if (xwhere != "") {
xwhere = xwhere + " and ";
}
xwhere = xwhere + " Grupo_produto = '" + xgrupos + "'";
}
if (xsubgrupos != "") {
if (xwhere != "") {
xwhere = xwhere + " and ";
}
xwhere = xwhere + " Subgrupo_produto = '" + xsubgrupos + "'";
}
if (xcategorias != ""){
if (xwhere != "") {
xwhere = xwhere + " and ";
}
xwhere = xwhere + " p.cod_categoria in (select cod_categoria from produtos_categoria where CATEGORIA_PRODUTO ='" + xcategorias + "')";
}
if (xsubcategorias != ""){
if (xwhere != "") {
xwhere = xwhere + " and ";
}
xwhere = xwhere + " p.cod_subcategoria in (select cod_subcategoria from produtos_subcategoria where SUBCATEGORIA_PRODUTO ='" + xsubcategorias + "')";
}
if (xfabricante != ""){
if (xwhere != "") {
xwhere = xwhere + " and ";
}
xwhere = xwhere + " Fabricante = '" + xfabricante + "'";
}
if (xlinhas != "") {
if (xwhere != "") {
xwhere = xwhere + " and ";
}
xwhere = xwhere + " Linha = '" + xlinhas + "'";
}
if (xcomposicao != "") {
if (xwhere != "") {
xwhere = xwhere + " and ";
}
xwhere = xwhere + " composicao = '" + xcomposicao + "'";
}
if (xcolecoes != "") {
if (xwhere != "") {
xwhere = xwhere + " and ";
}
xwhere = xwhere + " Colecao = '" + xcolecoes + "'";
}
if (xgriffes != ""){
if (xwhere != "") {
xwhere = xwhere + " and ";
}
xwhere = xwhere + " Griffe = '" + xgriffes + "'";
}
if (xtipos != ""){
if (xwhere != "") {
xwhere = xwhere + " and ";
}
xwhere = xwhere + " Tipo_produto = '" + xtipos + "'";
}
if (produto.value != "") {
if (xwhere != "") {
xwhere = xwhere + " and ";
}
xwhere = xwhere + " produto like '" + Urlencode("%" + produto.value + "%") + "'";
}
if (descricao.value != "") {
if (xwhere != "") {
xwhere = xwhere + " and ";
}
xwhere = xwhere + " desc_produto like '" + urlencode(descricao.value) + "'";
}
if (xwhere != ""){
if ( Foto.checked == 1) {
xfoto = "&xfoto=" + Foto.checked;
}
else {
xfoto = "&xfoto=false";
}
parent.frames.Principal.location = "../pages/cat_prods.asp?xwhere=" + xwhere + xfoto;
}
else{
if ( Foto.checked == 1) {
xfoto = "?xfoto=" + Foto.checked;
}
else {
xfoto = "?xfoto=false";
}
parent.frames.Principal.location = "../pages/cat_prods.asp"+ xfoto;
}
}
</script>
<input type="Image" src="image.png" name="Query" value=" Pesquisar " onclick="Query_onclick()">
You could try changing from parent.frames.Principal.location to parent.frames.Principal.location.href.
function drawinventoryList() {
inventoryArray.sort();
var inventoryString = "";
for (x in inventoryArray) {
arrayValue = inventoryArray[x];
var counter = parseInt(x) + 1;
if (counter == 1) {
inventoryString = "<table width='100%' celpadding='0' cellspacing='0' style='border:1px solid #d00;'>"
}
if (arrayValue.substring(0, arrayValue.indexOf("#")) != "XXXXXXXX") {
inventoryString = inventoryString + "<tr><td>" + counter + ". " + arrayValue.substring(0, arrayValue.indexOf("#")) + ", " + arrayValue.substring(arrayValue.indexOf("#") + 1) + " (remove)</td></tr>";
}
}
if (inventoryString == "") inventoryString = "None."
document.getElementById("selectedInventories").innerHTML = inventoryString;
}
... this function creates an invalid table. I need the 'counter' 'name' and 'remove link' in separate columns. How do I correctly create and close all tags?
Many thanks
It looks like you're just forgetting the closing tag for the table. Try this instead:
function drawinventoryList() {
inventoryArray.sort();
var inventoryString = "";
for (x in inventoryArray) {
arrayValue = inventoryArray[x];
var counter = parseInt(x) + 1;
if (counter == 1) {
inventoryString = "<table width='100%' celpadding='0' cellspacing='0' style='border:1px solid #d00;'>"
}
if (arrayValue.substring(0, arrayValue.indexOf("#")) != "XXXXXXXX") {
inventoryString = inventoryString + "<tr><td>" + counter + ". " + arrayValue.substring(0, arrayValue.indexOf("#")) + ", " + arrayValue.substring(arrayValue.indexOf("#") + 1) + " (remove)</td></tr>";
}
}
if (inventoryString == "") {
inventoryString = "None.";
} else {
inventoryString = inventoryString + "</table>";
}
document.getElementById("selectedInventories").innerHTML = inventoryString;
}
The only change was from:
if (inventoryString == "") inventoryString = "None."
to:
if (inventoryString == "") {
inventoryString = "None.";
} else {
inventoryString = inventoryString + "</table>";
}
Update: In your comment, you stated that
I still need to separate counter, name and link in separated [sic] TD
That's probably just a matter of inserting some </td><td> sections, something like:
inventoryString = inventoryString +
"<tr>" +
"<td>" + counter + ".</td>" +
"<td>" + arrayValue.substring(0, arrayValue.indexOf("#")) + ", " +
arrayValue.substring(arrayValue.indexOf("#") + 1) + "</td>" +
"<td>(<a href=\"javascript:removeinventory('" + x +
"')\">remove</a>)</td>" +
"</tr>";
I am not entirely sure what you are trying to do but maybe this might be what you are looking for.
function drawinventoryList() {
inventoryArray.sort();
var inventoryString = "<table width='100%' celpadding='0' cellspacing='0' style='border:1px solid #d00;'>";
var count = 0;
for (x in inventoryArray) {
arrayValue = inventoryArray[x];
count++;
if (arrayValue.substring(0, arrayValue.indexOf("#")) != "XXXXXXXX") {
inventoryString = inventoryString + "<tr><td>" + counter + ". " + arrayValue.substring(0, arrayValue.indexOf("#")) + ", " + arrayValue.substring(arrayValue.indexOf("#") + 1) + " (remove)</td></tr>";
}
}
if (count == 0) {
inventoryString = "None.";
} else {
inventoryString = inventoryString + "</table>";
}
document.getElementById("selectedInventories").innerHTML = inventoryString;
}