This question already has answers here:
Can you have multiple lines in an <option> element?
(5 answers)
Closed 8 years ago.
I have here my jquery (coffeescript)
if value.kind != 'Quasi-Judicial'
if value.court_agency !in court_agency_with_branch
if value.court_agency != 'Department of Justice'
#court_agency = "<option value=\"" + value.id + "\"> Branch "+ value.branch_division + ", " + value.court_agency + ", " + #city_or_municipality + ", " + value.province + "</option>"
else
#court_agency = "<option value=\"" + value.id + "\">" + value.court_agency + ", " + #city_or_municipality + ", " + value.province + "</option>"
else
#court_agency = "<option value=\"" + value.id + "\"> Division "+ value.branch_division + ", " + value.court_agency + "</option>"
else
#court_agency = "<option value=\"" + value.id + "\">" + value.department + ", " + value.govt_agency + ", " + #city_or_municipality + ", " + value.province + "</option>"
on this part
"<option value=\"" + value.id + "\">" + value.department + ", " + value.govt_agency + ", " + #city_or_municipality + ", " + value.province + "</option>"
I want to put some code \n
"<option value=\"" + value.id + "\">" + value.department + ", " + "\n" + value.govt_agency + ", " + #city_or_municipality + ", " + value.province + "</option>"
but nothing happens.
The value looks like:
Department of Blah blah, City of This thing, Province of this stuff
What possible code I can use to create an output like this:
Department of Blah blah,
City of This thing,
Province of this stuff
Take a look at Can you have multiple lines in an <option> element?.
(What you're looking for is a br tag in an option tag)
Please refer this demo
http://shyalika.com/mutiline_select_example
you can find more information here:
http://shyalika.com/multiline_select_control
Related
I would like to clean this up with a For loop. What would be the most efficient way coding this out?
I'm creating a search form that looks through a database for the specific form criteria. The way I have it coded would only work for the 8 Fields. But it is possible for the search form to have more then 8. For now though, I'd like to be able to map the results and display in a results page.
This is what I tried. This did not work at all and probably make no sense to anyone lol.
var obj =data[0]
$.get("obj", {data: $('select["Fields.DisplayName" + Fields.DataValue]').val()},
function(data){
$.each(data, function(i, item) {
alert(item);
});
}
);
This works for getting the data and displaying it how I'd like.
var obj = data[0];
document.getElementById("test").innerHTML =
"<p>"+ obj.Fields[0].DisplayName + ": " + obj.Fields[0].DataValue + "</p>" +
"<p>" + obj.Fields[1].DisplayName + ": " + obj.Fields[1].DataValue + "</p>" +
"<p>"+ obj.Fields[2].DisplayName + ": " + obj.Fields[2].DataValue + "</p>" +
"<p>"+ obj.Fields[3].DisplayName + ": " + obj.Fields[3].DataValue + "</p>" +
"<p>" + obj.Fields[4].DisplayName + ": " + obj.Fields[4].DataValue + "</p>" +
"<p>" + obj.Fields[5].DisplayName + ": " + obj.Fields[5].DataValue + "</p>" +
"<p>"+ obj.Fields[6].DisplayName + ": " + obj.Fields[6].DataValue + "</p>" +
"<p>" + obj.Fields[7].DisplayName + ": " + obj.Fields[7].DataValue + "</p>"
;
The next problem is if there is more then 1 data object. Currently I have it set to loop through the first object, but when I remove that I get cannot read property of '0' undefined.
Sure.
var html = "";
obj.Fields.forEach(({DisplayName, DataValue}) => {
html += `<p>${DisplayName}: ${DataValue}</p>`;
});
document.getElementById("test").innerHtml = html;
Use Array.map() and join the results:
var fields = data[0].Fields ;
document.getElementById("test").innerHTML = fields
.map(function(field) {
return '<p>' + field.DisplayName + ': ' + field.DataValue + '</p>';
})
.join('\n');
Im using a jqueryAjax function in a jsp page to display a html table. The function returns response as a json object. Im using the json object, iterating the same and displaying the column values. But if the field value is empty, then the corresponding value in the html table is specified as 'undefined' Below is my sample code
$.each(data1, function (i, item) {
trHTML += '<tr><td >' + item.appnName + '</td><td>' + item.Defectsin2014 + '</td><td>' + item.Defectsin2015 + '</td><td>'+
item.DefectsasperBenchmarks +'</td><td>'+item.costDefect + '</td><td>'+ item.req2014 + '</td><td>'+ item.req2015 +'</td><td>' +
item.ba+ '</td><td>'+ item.config+'</td><td>'+ item.Financials+ '</td><td>' + item.bReports + '</td><td>'+
item.qa + '</td></tr>';
});
$('#records_table').append(trHTML);
In the above, if a particular field is not available in the json for example, if item.req2015 data is not available for a particular row, then the html table displays the corresponding field as 'undefined'.I want the application to display an empty or blank field if the data is not available. Is there any way to acheive the same.
Any help on this is much appreciated.
Check the properties and give them an default before using them.
$.each(data1, function (i, item) {
item.appnName = item.appnName || " ";
item.Defectsin2014 = item.Defectsin2014 || " ";
item.Defectsin2015 = item.Defectsin2015 || " ";
item.costDefect = item.costDefect || " ";
item.req2014 = item.req2014 || " ";
item.req2015 = item.req2015 || " ";
item.ba = item.ba || " ";
item.config = item.config || " ";
item.Financials = item.Financials || " ";
item.bReports = item.bReports || " ";
item.qa = item.qa || " ";
trHTML += '<tr><td >' + item.appnName + '</td><td>' + item.Defectsin2014 + '</td><td>' + item.Defectsin2015 + '</td><td>'+
item.DefectsasperBenchmarks +'</td><td>'+item.costDefect + '</td><td>'+ item.req2014 + '</td><td>'+ item.req2015 +'</td><td>' +
item.ba+ '</td><td>'+ item.config+'</td><td>'+ item.Financials+ '</td><td>' + item.bReports + '</td><td>'+
item.qa + '</td></tr>';
});
$('#records_table').append(trHTML);
Or even shorter possible with an inline decision:
trHTML += '<tr><td >' + (item.appnName || " ") + '</td><td>' + (item.Defectsin2014 || " ") + '</td><td>' + (item.Defectsin2015 || " ") + '</td><td>'+
(item.DefectsasperBenchmarks || " ") +'</td><td>'+(item.costDefect || " ") + '</td><td>'+ (item.req2014 || " ") + '</td><td>'+ (item.req2015 || " ") +'</td><td>' +
(item.ba || " ") + '</td><td>'+ (item.config || " ")+'</td><td>'+ (item.Financials || " ") + '</td><td>' + (item.bReports || " ") + '</td><td>'+
(item.qa || " ") + '</td></tr>';
Set default value this way:
<td>'+ (item.req2015||' ') + '</td>
By filed setable defaults, easily reorganiziable:
var fdef = [ 'appnName '," "
,'Defectsin2014', " "
,'Defectsin2015'," "
,'costDefect ', " "
,'req2014 '," "
,'req2015 ', " "
,'ba '," "
,'config ', " "
,'Financials '," "
,'qa ', " "
];
function buildLine(item) {
var out = [];
for (var i= 0,l=fdef.length;i<l;++i) {
out.push(item[fdef[i][0]] || fdef[i][1]);
}
return '<tr><td>' + out.join('</td><td>') + '</td></tr>'
}
You can use this,
if(item.hasOwnProperty('req2015')){
//add it
}
For instance Is it possible to pass the following parameters as arguments to a JS function from code-behind?:
ddlLines.Attributes.Add("onchange", "setPanel("
+ " '" + ddlAdd.ClientID + "', "
+ " '" + nCkPTitle.ClientID + "', "
+ " '" + manCkEntry.ClientID + "', "
+ " '" + nCkLabel.ClientID + "', "
+ " '" + txtRefNo.ClientID + "', "
+ " '" + TCEE.pval + "', "
+ " '" + TCEE.ptxt + "', "
+ " '" + ddlLines.ClientID + "' "
+ ");"
At this time my JS function argument list is as follows:
function setPanel(ddlClientId, lblClientId, lblManCLientId,
lblRefNo, altRefNo, altValParm, altTxtParm, ddlLinesClientId){
...
}
I would like to be able to dynamically send an indeterminate list of parameters as arguments to the JS function from the code behind.
I have researched the .apply() function, but have not been able to use it successfully.
You just need to add [] ,it is means Array in js
ddlLines.Attributes.Add("onchange", "setPanel("
+ " ['" + ddlAdd.ClientID + "', "
+ " '" + nCkPTitle.ClientID + "', "
+ " '" + manCkEntry.ClientID + "', "
+ " '" + nCkLabel.ClientID + "', "
+ " '" + txtRefNo.ClientID + "', "
+ " '" + TCEE.pval + "', "
+ " '" + TCEE.ptxt + "', "
+ " '" + ddlLines.ClientID + "'] )"
);
But I suggest that you can use json here,such as
ddlLines.Attributes.Add("onchange", "setPanel("
+ " {'aaaID':'" + ddlAdd.ClientID + "', "
//...
+ " 'zzzID':'" + ddlLines.ClientID + "'} )"
);
I am using Bootstrap Popver. I have inserted some data in the popover and want to insert a image as well. This is what I have tried.
Code:
var img = '<div id = "image"><img src = "http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" /></div>';
var button = "<button title = " + obj.hostname + ", " + gpu.toUpperCase() +
" data-content = \"" + metric_name[metric] + ": " + display_val + img + "\"" +
" data-id=\"" + detailed_summary + "\"" +
" data-text = \"" + obj.hostname + ", " + gpu.toUpperCase() + ", " + metric_name[metric] + ": " + display_val + "\"" +
" class=\"btn " + button_state + " gpu btn-lg open-InfoModal\"" +
" data-toggle=\"modal\" " +
" data-html=\"true\" " +
" rel=\"popover\" " +
" data-target=\"#hostInfo\" " +
" href=\"#infoModal\"></button>";
Initialisation:
$('button').popover({
trigger: "hover",
placement: get_popover_placement,
html: true
});
I have seen some examples on Stack Overflow, but it didn't work for me as I want to insert it inside the button declaration.
Make use of the content setting of the popover function:
$('button').popover({
trigger: "hover",
placement: get_popover_placement,
html: true,
content: img //loads the image inside the popover container
});
DEMO
I have solved it using the code below.
button = "<button title = " + obj.hostname + ", " + gpu.toUpperCase() +
" data-content = \"" + returnPOContent(metric_name[metric], display_val) + "\"" +
//" data-content = \"" + metric_name[metric] + ": " + display_val + "\"" +
" data-id=\"" + detailed_summary + "\"" +
" data-text = \"" + obj.hostname + ", " + gpu.toUpperCase() + ", " + metric_name[metric] + ": " + display_val + "\"" +
" class=\"btn " + button_state + " gpu btn-lg open-InfoModal\"" +
" data-toggle=\"modal\" " +
" data-html=\"true\" " +
" rel=\"popover\" " +
" data-target=\"#hostInfo\" " +
" href=\"#infoModal\"></button>";
function returnPOContent(mName, dVal) {
var popOverContent = mName + ": " +dVal+"</br><div id='test'><img src='http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg'/></div>";
return popOverContent;
}
$("button").popover({
trigger: "hover",
placement: get_popover_placement,
html: true
});
Afternoon,
I would like to increase the number in this code by 1 for each question displayed.
new_question = "<div id=\"" + res.qId + "\">" +
"<h1>Question 1</h1>" +
"<p><i>" + res.question + "</i></p>" +
"<div class=\"answer-grid\">" +
"<div id=\"a1\" class=\"answer\">" +
"<p>" + res.answer1 + "</p>" +
"<p>" + res.answer2 + "</p>" +
"<p>" + res.answer3 + "</p>" +
"</div>" +
"</div>";
With this it would show, question 1, question 2, and so on...
How would i go about doing this in jQuery please?
Update Victor provided what i needed, thanks all for your help. Updated code below.
var questionNumber = 1;
$.each(result, function (index, res) {
new_question = "<div id=\"" + res.qId + "\">" +
"<h1>Question " + (questionNumber++) + "</h1>" +
"<p><i>" + res.question + "</i></p>" +
"<div class=\"answer-grid\">" +
"<div id=\"a1\" class=\"answer\">" +
"<p>" + res.answer1 + "</p>" +
"<p>" + res.answer2 + "</p>" +
"<p>" + res.answer3 + "</p>" +
"</div>" +
"</div>";
$('#pinfos').append(new_question);
Declare a variable outside your loop and incremenet it inside your loop and use that in the markup.
var questionNumber=0;
$.each(someJsonData, function (index, res) {
{
questionNumber++;
new_question = "<div id=\"" + res.qId + "\">" +
"<h1>Question "+questionNumber+"</h1>" +
"<p><i>" + res.question + "</i></p>" +
"<div class=\"answer-grid\">" +
"<div id=\"a1\" class=\"answer\">" +
"<p>" + res.answer1 + "</p>" +
"<p>" + res.answer2 + "</p>" +
"<p>" + res.answer3 + "</p>" +
"</div>" +
"</div>";
}
Declare a var called questionNumber and increment it at each call
var questionNumber = 1;
$.each(result, function (index, res) {
new_question = "<div id=\"" + res.qId + "\">" +
"<h1>Question " + (questionNumber++) + "</h1>" +
"<p><i>" + res.question + "</i></p>" +
"<div class=\"answer-grid\">" +
"<div id=\"a1\" class=\"answer\">" +
"<p>" + res.answer1 + "</p>" +
"<p>" + res.answer2 + "</p>" +
"<p>" + res.answer3 + "</p>" +
"</div>" +
"</div>";
$('#pinfos').append(new_question);