I have a variable in my append line "key" and "value" but I do not know how to keep span format for the key value. To have the blue color be on the key variable.
for key,value of data
$('#data-results').append "<br>" + "<li>" + """<span style="color: #0000CD;"> key </span>""" + ": " + value
Results on Browser
key: 0004a32eb300
What it should be:
user: 0004a32eb300
^ user being blue
Thank you in advance
http://coffeescriptcookbook.com/chapters/strings/interpolation
$('#data-results').append "<br>" + "<li>" + """<span style="color: #0000CD;"> #{key} </span>""" + ": " + value
You should either use a template, or build up your HTML using jQuery. Also, don't use inline styles, add CSS like this:
li span.key-from-data {
color: #0000CD;
}
Then with CoffeeScript as follows:
for own key, value of data
$li = $ '<li>',
text: ": #{value}"
$span = $ '<span>',
class: "key-from-data"
text: key
$li.prepend $span
$('#data-results').append $li
See it working here.
Related
This is a weird question about possibly embedding a string in an aurelia html file within the attribute tag but I would like to keep my tab and line formatting.
So, in my TS file I have the following:
this.queryDateStart += "type=EntityOne&dateQueryString=";
this.queryDateStart += "" +
"eOr( " +
"eAnd( " +
"eAnd( facetName:isExcluded AND facetValue:No );" +
"dAnd( facetName:deadlineDate AND "+ dateRangePredicate + ");" +
"); " +
"dOr( " +
"(facetName:excludedUntilDate AND "+ dateRangePredicate + ")" +
");" +
");"
And instead of having the following:
<section as-element="ab-deadlines" data-query="${queryDateStart}"></section>
I would like to actually pass the literal string from above.
But with the line spaces.
Would that break anything?
So for example ( going to try this today) - in my html file I would put:
<section as-element="ab-deadlines"
data-query="
eOr(
eAnd(
eAnd( facetName:isExcluded AND facetValue:No );
dAnd( facetName:deadlineDate AND ${dateRangePredicate} );
);
dOr(
(facetName:excludedUntilDate AND + ${dateRangePredicate} )
);
);"></section>
About breaking: it shouldn't break anything. In the end, it's just normal HTML attribute, and as long as the spec allows it, it works in Aurelia, as Aurelia works directly, and plainly with HTML elements.
You can see it yourself at this sandbox https://codesandbox.io/s/z20qx0q263
Have been using Kendo UI MVC for a while now and need to put some conditional logic on a checkbox that is in one field of the grid.
The fields in the grid that need to be evaluated are
Going off the example here
https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-display-checkboxes-in-ajax-bound-grids
columns.Bound(p => p.ProductName).ClientTemplate(
"# if (HasIcon == true) { #" +
"<img src='" + Url.Content("~/Content/icons/") + "#= ProductID #.png' alt='#= ProductName # icon' />" +
"# } else { #" +
"#: ProductName #" +
"# } #"
);
How do I format the test within the conditional to use a grid field value ?
eg testing if ProductID is a specific value like this?
columns.Bound(p => p.ProductName).ClientTemplate(
"# if (#= ProductID # == 123) { #" +
"<img src='" + Url.Content("~/Content/icons/") + "#= ProductID #.png' alt='#= ProductName # icon' />" +
"# } else { #" +
"#: ProductName #" +
"# } #"
);
due to the sometimes complex nature of client templates, I personally tend to use the javascript function method
columns.Bound(p => p.ProductName).ClientTemplate("#= getProductIcon(data,
Url.Content("~/Content/icons/")#);
then in a js script block
function getProductIcon(data, imgUrl) {
if (data.ProductID == 123)
return "<img src='" + imgUrl + data.ProductID + ".png' alt='" + data.ProductName + " icon' />";
else
return data.ProductName;
}
just make sure your script is loaded before the grid is instantiated otherwise you'll run into getProductIcon undefined or some similar error. Also it's easier to throw a debugger on your javascript function and really see what's going on and verify the data in/out.
Excuse any typos in the above, I'm not at a location where I can validate the razor syntax at the moment.
I'm trying to join two strings but I want them to be divided by a break line.
This is my code:
<td>#(string.Join("<br /> ", report.TimeReportProjects.Select(x => x.Project.ProjectName)))</td>
<td>#(string.Join("<br /> ", report.TimeReportProjects.Select(x => x.Description.Shorten(35))))</td>
<td>#(data.StartHour + ":" + data.StartMinute.ToString("00") + " - " + data.EndHour + ":" + data.EndMinute.ToString("00"))</td>
<td>#(Math.Floor(hours) + ":" + TimeSpan.FromHours(hours).Minutes.ToString("00"))</td>
The "br/>" tag will just be read as a string which is not to strange I assume, I know if i want to mix html code in a code block I should use #: but I am not sure how to use that in this case.
There is a Html.Raw method that should help you. It can be applied like so:
<td>#Html.Raw(string.Join("<br />", report.TimeReportProjects.Select(x => x.Project.ProjectName)))</td>
I am saving the below div tag into SQL DB:
String StrDiv = "<div STYLE=" + "''"+"font-family: " + lblPreviewPane.Font.Name + "; font-size: " + lblPreviewPane.Font.Size + "; color: " + ColorPicker1.Color + ""+"''" + ">" + lblPreviewPane.Text + "</div>";
The below query is used to update the message:
String sqlUpdate = "update iweb_messages set message='" + StrDiv +
"'where site_id ='" + mSiteID + "' and page_id ='" + ddlSitePage.SelectedValue + "'";
I retrieve the div from DB and display it in a textbox and a label.
In the label, the div tag is displayed as: messagetoday21
But in the textbox, the div tag is displayed as:
<div STYLE='font-family: Times New Roman; font-size: 18pt; color: #CC3399'>today21</div>
I need to display the text alone in the textbox also(same as displayed in the Label).
Kindly help me with some suggestions.
I use the below code to display the text from the DB in the textbx and label:
String sqlMsg = "select message from iweb_messages where site_id='" + mSiteID + "' and page_id='" + ddlSitePage.SelectedValue + "'";
DataView dvMsg = dbLib.GetDateView(sqlMsg);
if (dvMsg.Table.Rows.Count > 0)
{
txtOutputMessage.Text = dvMsg.Table.Rows[0]["message"].ToString();
lblPreviewPane.Text = dvMsg.Table.Rows[0]["message"].ToString();
}
I assume your "textbox" is a textarea? If so, the behavior you're seeing is expected, because you're generating HTML that looks like this:
<textarea><div STYLE='font-family.....></div></textarea>
The content of a TEXTAREA is displayed without HTML rendering. Whereas the label (assuming it's a span or another div) will render the HTML.
So, as a quick fix, you need to save lblPreviewPane.Text to your database in addition to the full <div>; then display the value of lblPreviewPane.Text in your text box instead of the <div>.
But I would also question the wisdom of storing the full <div> in the database. If the font attributes need to be determined ahead of time, then I think you would be better off storing those attribute values in the table, then building the formatted <div> when it is being displayed.
How can I get access and change CSS like the font color in completely dynamically generated HTML out of XML, if I cannot use an ID as I do not know in advance how many of the same HTML-tags will be generated and which of two different (red/green) colors it will need? (I am new here and very new in JS)
Data will be generated and collected on the server. I get them back and sort them in a "fieldset" and further more in a "collapsible". Data "var a, b and c" come together in one line (fieldset) and should be in a specific font color. So for "var d" there will be a "xx" or "yy" coming back from XML for this font color and be saved in "var d" and therefore the font color should be "red" or "green".
Part of my script in short:
function addPart(currentIndex,currentPart)
{
var a = $(currentPart).find("a").text();
var b = $(currentPart).find("b").text();
var c = $(currentPart).find("c").text();
var d = $(currentPart).find("d").text();
if(d === "xx") {
$("div.productColor").css({"color":"green"});
} else {
$("div.productColor").css({"color":"red"});
};
$("#shoppingTableDiv").append (
"<div data-role='collapsible'>"
+ "<h3>"
+ "<div class='productColor'>"
+ "<fieldset class='ui-grid-b'>"
+ "<div class='ui-block-a'>"
+ a
+ "</div>"
+ "<div class='ui-block-b'>"
+ b
+ "</div>"
+ "<div class='ui-block-c'>"
+ c
+ "</div>"
+ "</fieldset>"
+ "</div>"
+ "</h3>"
+ "</div>");
$('#shoppingTableDiv').collapsibleset('refresh');
}
I didn't fully understand how you want to color your results, but I think you can use your fieldset classes.
For example:
.ui-grid-b div { color: red; }
.ui-grid-c div { color: green; }
If you don't know how many fieldsets you're going to have and you can't use the fieldset classes you showed in your code example, you might find the nth-child selector useful.
Maybe something like this:
fieldset:nth-child(2n) div { color: red; }
fieldset:nth-child(2n+1) div { color: green; }