in this code :
message = "{{ lang["ticket.order1"] }} " + document.getElementById("orderid").value + '\r\n\r\n' + "{{ lang["ticket.order2"] }} " + document.getElementById("istek").value + '\r\n\r\n' + " {{ lang["ticket.message1"] }} " + document.getElementById("mesaj").value;
All words in one line ! what is worng ?
message = "{{ lang["ticket.order1"] }} " + document.getElementById("orderid").value + '\r\n' + "{{ lang["ticket.order2"] }} " + document.getElementById("istek").value + '\r\n' + " {{ lang["ticket.message1"] }} " + document.getElementById("mesaj").value;
not work :(
message = "{{ lang["ticket.order1"] }} " + document.getElementById("orderid").value + '<br>' + "{{ lang["ticket.order2"] }} " + document.getElementById("istek").value + '<br>' + " {{ lang["ticket.message1"] }} " + document.getElementById("mesaj").value;
not work :(
What is wrong ?
Related
Suppose I have the following array in JavaScript:
var dataArray= [
'name1\n' +
'\n' +
'name2\n' +
'name3',
' \n' +
'name4\n' +
'name5\n' +
'\n' +
'name6\n' +
'name7\n' +
'\n' +
'name8',
'name9\n' +
'\n' +
'name10\n' +
'name11',
' \n' +
'name12\n' +
'name13\n' +
'\n' +
'name14\n' +
'name15',
'name16\n' +
'\n' +
'name17\n' +
'name18',
' \n' +
'name19\n' +
'name20\n' +
'\n' +
'name21\n' +
'name22\n' +
'\n' +
'name23',
'name24\n' +
'\n' +
'name25\n' +
'name26',
' \n' +
'name27\n' +
'name28\n' +
'\n' +
'name29\n' +
'name30',
]
How can I write code to merge every two elements into one element? So that each pair, is only separated by 1 comma?
I'm looking to get the following output:
var dataArray= [
'name1\n' +
'\n' +
'name2\n' +
'name3'
' \n' +
'name4\n' +
'name5\n' +
'\n' +
'name6\n' +
'name7\n' +
'\n' +
'name8',
'name9\n' +
'\n' +
'name10\n' +
'name11'
' \n' +
'name12\n' +
'name13\n' +
'\n' +
'name14\n' +
'name15',
'name16\n' +
'\n' +
'name17\n' +
'name18'
' \n' +
'name19\n' +
'name20\n' +
'\n' +
'name21\n' +
'name22\n' +
'\n' +
'name23',
'name24\n' +
'\n' +
'name25\n' +
'name26',
' \n' +
'name27\n' +
'name28\n' +
'\n' +
'name29\n' +
'name30',
]
I want it to be like the above, whereby every 2 elements are amalgamated.
You can use Array.from, assuming that the length of the array is even.
const res = Array.from({length:dataArray.length/2}, (_,i)=>dataArray[2*i]+dataArray[2*i+1]);
var dataArray= [
'name1\n' +
'\n' +
'name2\n' +
'name3',
' \n' +
'name4\n' +
'name5\n' +
'\n' +
'name6\n' +
'name7\n' +
'\n' +
'name8',
'name9\n' +
'\n' +
'name10\n' +
'name11',
' \n' +
'name12\n' +
'name13\n' +
'\n' +
'name14\n' +
'name15',
'name16\n' +
'\n' +
'name17\n' +
'name18',
' \n' +
'name19\n' +
'name20\n' +
'\n' +
'name21\n' +
'name22\n' +
'\n' +
'name23',
'name24\n' +
'\n' +
'name25\n' +
'name26',
' \n' +
'name27\n' +
'name28\n' +
'\n' +
'name29\n' +
'name30',
];
const res = Array.from({length:dataArray.length/2}, (_,i)=>dataArray[2*i]+dataArray[2*i+1]);
console.log(res);
I am trying to append an HTML div with multiple parameters in the onclick function. Even though I am using escape quotes, the HTML is not rendered properly.
This is my HTML:
$("#city-list").append("<div class='user-panel' id='" + user.id + 'onclick=\'openChat(\'' + user.id + '\',\'' + user.username + '\',\'' + user.sex + "\'\")><b>" + user.username + ", " + "(" + user.sex + ", " + user.age + ")</div>");
This is what is rendered:
<div class="user-panel" id="A61o-ko0zVVJaxTbAAAHonclick=" openchat('a61o-ko0zvvjaxtbaaah','adamlee','male'")=""><b>adamlee, (male, 17)</b></div>
You missed closing quote for id attribute and function in onclick should have double quote because single quotes are used in it.
const user ={id: 'a61o-ko0zvvjaxtbaaah', username: 'henryzhu', sex: 'male', age: 17 }
$("#city-list").append("<div class='user-panel' id='" + user.id + '\' onclick="openChat(\'' + user.id + '\',\'' + user.username + '\',\'' + user.sex + "')\"><b>" + user.username + ", " + "(" + user.sex + ", " + user.age + ")</div>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="city-list"></div>
You can use this code to work on all browsers, just need to use quotations properly as used in below code:
$("#city-list").append("<div class='user-panel' id='" + user.id + "' onclick='openChat(\"" + user.id + "\", \"" + user.username + "\", \"" + user.sex + "\")'><b>" + user.username + ", (" + user.sex + ", " + user.age + ")</b></div>");
If you are already using jQuery why not use a jQuery on click function?
Not saying it is wrong to use onclick inline but if you were curious this is another way you could achieve what you are going for.
// Add some data
var user = ({
"id":"a61o-ko0zvvjaxtbaaah",
"username":"henryzhu",
"sex":"male",
"age":"17"
});
var content = "";
// Set up your data in data-attributes
content += "<div class='user-panel' \
data-id='" + user.id + "' \
data-username='" + user.username + "' \
data-sex='" + user.sex + "' \
data-age='" + user.age + "'>";
// viewable text
content += "<b>" + user.username + ", (" + user.sex + ", " + user.age + ")";
content += "</div>";
$("#city-list").append(content);
//---------------------------------------------------------------------
// jQuery on click function to call the openChat
// putting the data you need in data attributes let you grab what you need on the clicked name and
// submit it to the chat funciton.
$("body").on("click", ".user-panel", function(){
var userid = $(this).attr("data-id");
var username = $(this).attr("data-username");
var sex = $(this).attr("data-sex");
var age = $(this).attr("data-age");
openChat(userid , username , sex);
});
// Your chat function
function openChat(id, name, sex){
console.log(id + " | " + name + " | " + sex);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="city-list"></div>
If you do not need to support IE you might want to consider using back-ticks (`) in this case. They provide functionality, a more readable experience and are less error prone. More information here MDN documentation for template literals.
Your example with back-ticks would be:
$("#city-list").append(`
<div class="user-panel"
id="${user.id}"
onclick="openChat('${user.id}', ${user.username}, ${user.sex})">
<b>${user.username}, (${user.sex}, ${user.age})
</div>
`)
I'm having an issue in getting a Value of a Key from an Object which is selected using md-select in a AngularJs application (Version 1.X.X).
I having a two drop downs "Department" and "Designation". Initially I loaded the Department and based on Department selection, the Designation will auto populate. Kindly have a look into the JSON object
{
"Status":true,
"Message":"",
"Result":[
{
"DepartmentId":1,
"Name":"Bala",
"Designation":[
{
"DesignationId":1,
"DepartmentId":1,
"Name":"Software Engg"
},
{
"DesignationId":3,
"DepartmentId":1,
"Name":"Sr. Human Resouce"
},
{
"DesignationId":2,
"DepartmentId":1,
"Name":"Sr. Software Engg"
}
]
},
{
"DepartmentId":2,
"Name":"Dev",
"Designation":[
]
},
{
"DepartmentId":3,
"Name":"HR Team",
"Designation":[
]
},
{
"DepartmentId":4,
"Name":"Sales",
"Designation":[
{
"DesignationId":4,
"DepartmentId":4,
"Name":"Sr. Sales Manager"
}
]
}
]
}
Kindly have a look the code
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Department:</p>
<md-select ng-model="select.Department" tabindex="9" ng-change="onChange(select.Department)">
<md-option ng-repeat="key in loadUpData.Department" value="{{key}}">{{key.Name}}</md-option>
</md-select>
<p>Department ID:</p>
<md-input-container class="md-block">
<input type="text" ng-model="select.Department.DepartmentId" maxlength="300" tabindex="32" />
</md-input-container>
<br/>
<p>Designation:</p>
<md-select ng-model="select.Designation" tabindex="9">
<md-option ng-repeat="key in designationData" value="{{key}}">{{key.Name}}</md-option>
</md-select>
<p>Designation ID:</p>
<md-input-container class="md-block">
<input type="text" ng-model="select.Designation.DesignationId" maxlength="300" tabindex="32" />
</md-input-container>
</div>
<script>
var app = angular.module('myApp', ['ngMaterial']);
app.controller('myCtrl', function($scope) {
$scope.loadUpData = {
Department: angular.fromJson("{" +
" \"Status\":true," +
" \"Message\":\"\"," +
" \"Result\":[" +
" {" +
" \"DepartmentId\":1," +
" \"Name\":\"Bala\"," +
" \"Designation\":[" +
" {" +
" \"DesignationId\":1," +
" \"DepartmentId\":1," +
" \"Name\":\"Software Engg\"" +
" }," +
" {" +
" \"DesignationId\":3," +
" \"DepartmentId\":1," +
" \"Name\":\"Sr. Human Resouce\"" +
" }," +
" {" +
" \"DesignationId\":2," +
" \"DepartmentId\":1," +
" \"Name\":\"Sr. Software Engg\"" +
" }" +
" ]" +
" }," +
" {" +
" \"DepartmentId\":2," +
" \"Name\":\"Dev\"," +
" \"Designation\":[" +
" ]" +
" }," +
" {" +
" \"DepartmentId\":3," +
" \"Name\":\"HR Team\"," +
" \"Designation\":[" +
" ]" +
" }," +
" {" +
" \"DepartmentId\":4," +
" \"Name\":\"Sales\"," +
" \"Designation\":[" +
" {" +
" \"DesignationId\":4," +
" \"DepartmentId\":4," +
" \"Name\":\"Sr. Sales Manager\"" +
" }" +
" ]" +
" }" +
" ]" +
"}").Result
};
$scope.Select = {
Department: {},
Designation: {}
};
$scope.onChange = function(selected) {
var Designation = JSON.parse(selected).Designation;
console.log(Designation);
$scope.designationData = Designation;
};
});
</script>
</body>
</html>
I'm trying to display the DepartmentId and DesignationId of a Selected Item, but I can't able to get the Id's. Kindly assist me.
Two main things needed fixing:
You define $scope.Select = ... in your controller but try to reference it with ng-model="select.Department" in the view. JavaScript/Angular is case-sensitive so Select !== select - make sure to reference variables with the same case.
On the <md-option> elements use ng-value="key" instead of value="{{key}}" when you want to bind an object value to the control. With this fixed you don't need JSON.parse(...) in the onChange handler.
With these two changes here is the updated code:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Department:</p>
<md-select ng-model="select.Department" tabindex="9" ng-change="onChange(select.Department)">
<md-option ng-repeat="key in loadUpData.Department" ng-value="key">{{key.Name}}</md-option>
</md-select>
<p>Department ID:</p>
<md-input-container class="md-block">
<input type="text" ng-model="select.Department.DepartmentId" maxlength="300" tabindex="32" />
</md-input-container>
<br/>
<p>Designation:</p>
<md-select ng-model="select.Designation" tabindex="9">
<md-option ng-repeat="key in designationData" ng-value="key">{{key.Name}}</md-option>
</md-select>
<p>Designation ID:</p>
<md-input-container class="md-block">
<input type="text" ng-model="select.Designation.DesignationId" maxlength="300" tabindex="32" />
</md-input-container>
</div>
<script>
var app = angular.module('myApp', ['ngMaterial']);
app.controller('myCtrl', function($scope) {
$scope.loadUpData = {
Department: angular.fromJson("{" +
" \"Status\":true," +
" \"Message\":\"\"," +
" \"Result\":[" +
" {" +
" \"DepartmentId\":1," +
" \"Name\":\"Bala\"," +
" \"Designation\":[" +
" {" +
" \"DesignationId\":1," +
" \"DepartmentId\":1," +
" \"Name\":\"Software Engg\"" +
" }," +
" {" +
" \"DesignationId\":3," +
" \"DepartmentId\":1," +
" \"Name\":\"Sr. Human Resouce\"" +
" }," +
" {" +
" \"DesignationId\":2," +
" \"DepartmentId\":1," +
" \"Name\":\"Sr. Software Engg\"" +
" }" +
" ]" +
" }," +
" {" +
" \"DepartmentId\":2," +
" \"Name\":\"Dev\"," +
" \"Designation\":[" +
" ]" +
" }," +
" {" +
" \"DepartmentId\":3," +
" \"Name\":\"HR Team\"," +
" \"Designation\":[" +
" ]" +
" }," +
" {" +
" \"DepartmentId\":4," +
" \"Name\":\"Sales\"," +
" \"Designation\":[" +
" {" +
" \"DesignationId\":4," +
" \"DepartmentId\":4," +
" \"Name\":\"Sr. Sales Manager\"" +
" }" +
" ]" +
" }" +
" ]" +
"}").Result
};
$scope.select = {
Department: {},
Designation: {}
};
$scope.onChange = function(selected) {
var Designation = selected.Designation;
console.log(Designation);
$scope.designationData = Designation;
};
});
</script>
</body>
</html>
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
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
});