Develop Reference

Razor JQuery Populate Drop Down from Model array

I am using a WebGrid to allow CRUD on my database (using MVC and EF entities). The grid works and filters they way I want it to. There are two columns that use dropdowns to display a value tied to another table (Projects and People) and these both work well for edits/ updates. I am using JQuery for an add new row and want the new row to have select fields like the grid does (so that the user can just find the person by name instead of having to enter the ID for example). I am referencing this post from another similar question, but when I implement the code I get a syntax error that I'm having trouble understanding.
Here is my scripting on the view side that shows my failed attempt. I'm creating an array from the project repository (Text is the name of the project and Value is the ID field), and populating it with the model values: Model.Projects, and then in the add row function I want to loop through the array to add in the options.
<script type="text/javascript">
var ProjectArray = new Array();
#foreach (var proj in Model.projects)
{
#:ProjectArray.push(Text: "#proj.Text", Value: "#proj.Value");
}
</script>
<script type="text/javascript">
$(function ()
{
$('body').on("click", ".add", function () {
var SelectedProject = "#Model.ProjectID";
var newRow = $('.save').length;
console.log('newRow = ' + newRow);
if (newRow == 0) {
var index = "new"+$("#meetingList tbody tr").length + 1;
var ProjectID = "ProjectID_" + index;
var Date = "Date_" + index;
var Attendees = "Attendees_" + index;
var Phase = "Phase_" + index;
var PeopleID = "PeopleID_" + index;
var Save = "Save _" + index;
var Cancel = "Cancel_" + index;
var tr = '<tr class="alternate-row"><td><span> <input id="' + ProjectID + '" type="select"/></span></td>' +
#* This is where I use the array to add the options to the select box*#
ProjectArray.forEach(function (item) {
if (item.Value == SelectedProject) { '<option selected="selected" value="' + item.Value + '">' + item.Text + '</option>' }
else { '<option value="' + item.Value + '">' + item.Text + '</option>' }
+
});
---remaining script omitted----
'<td><span> <input id="' + PeopleID + '" type="text" /></span></td>' +
'<td><span> <input id="' + Date + '" type="date" /></span></td>' +
'<td><span> <input id="' + Attendees + '" type="text" /></span></td>' +
'<td><span> <input id="' + Phase + '" type="text" /></span></td>' +
'<td> SaveCancel</td>' +
'</tr>';
console.log(tr);
$("#meetingList tbody").append(tr);
}
});
I am not sure how to parse the error, but the page source looks like this when creating my client side array:
var ProjectArray = new Array();
ProjectArray.push(Text: "Select Project", Value: ""); //<-- ERROR HERE:
ProjectArray.push(Text: "010111.00", Value: "74");
ProjectArray.push(Text: "013138.00", Value: "2");
So the model getting into the client side works (the text and value pairs are correct), but the error I get is for the first array.push line: missing ) after the argument list. I have played with moving this code block around, putting it in a separate <script> tag and the error likewise follows it around, always on the first array.push line. And regardless of where it is, the rest of my script functions no longer work. I think it must be something silly but I just am not seeing what I'm doing wrong.
The option list does not populate into something I can ever see, it just renders out on the page source as the javascript loop:
var tr = '<tr class="alternate-row"><td><span> <input id="' + ProjectID + '" type="select"/></span></td>' +
ProjectArray.forEach(function (item) {
if (item.Value == SelectedProject) { '<option selected="selected" value="' + item.Value + '">' + item.Text + '</option>' }
else { '<option value="' + item.Value + '">' + item.Text + '</option>' }
+
}); //-- Unexpected token here
And with the push array in its separate script block I get a second error that the last } is an unexpected token. This is some javascripting error I'm sure. But where it is an how to do this are beyond me right now.

I'm not used to javascript, and poor syntax leads to the vague errors I was getting. The first problem was fixed by adding the { . . . } around the array values. Then I created a function to create the arrays I need for people and projects as well as a function to take an array and create the option list to clean up the view code:
function createProjectArray() {
var ProjectArray = new Array();
#foreach (var proj in Model.projects)
{
if (proj.Value != "") {
#:ProjectArray.push({ Text: "#proj.Text", Value: "#proj.Value" });
}
}
return ProjectArray;
}
function createPeopleArray() {
var PeopleArray = new Array();
#foreach (var person in Model.people)
{
if (person.Value != "") {
#:PeopleArray.push({ Text: "#person.Text", Value: "#person.Value" });
}
}
return PeopleArray;
}
function SelectOptionsString(MyArray, SelectedValue) {
console.log(MyArray);
var OptionsList = "";
MyArray.forEach(item => {
if (item.Value == SelectedValue) { OptionsList += '<option
selected="selected" value="' + item.Value + '">' + item.Text + '</option>'; }
else { OptionsList += '<option value="' + item.Value + '">' + item.Text
+ '</option>'; }
})
return OptionsList;
}
Taking this approach allowed me to more easily parse the code and find the syntax errors. The Array.forEach syntax was an interesting hurdle, and this site helped me test out my syntax to eventually get it working as above.
So the server creates the javascript lines to create the array, and then I use the array to create my dropdown options list. This cleans up the add row function code nicely:
$('body').on("click",".addrow", function() {
var SelectedProject = "#Model.ProjectID";
var ProjectArray = createProjectArray();
var ProjectOptions = "";
ProjectOptions = SelectOptionsString(ProjectArray, SelectedProject);
var PeopleArray = createPeopleArray();
var PeopleOptions = "";
PeopleOptions = SelectOptionsString(PeopleArray, "");
var tr = '<tr class="alternate-row"><td><span> <select id="' +
ProjectID + '>' + ProjectOptions + '</select></span></td>' +
'<td><span> <select id="' + PeopleID + '>' + PeopleOptions +
'</select></span></td>' + '</tr>'
$("#myWebGrid tbody").append(tr);
});
And it also allows for some potential code reuse.

Is it possible to copy to clipboard using Javascript? [duplicate]

This question already has answers here:
How do I copy to the clipboard in JavaScript?
(27 answers)
Closed 3 years ago.
I'm working on a sharepoint webpart which has a button pull elements from different text boxes on the same page and collates them together in a single string to then copy to the user's clipboard so they can quickly put together a communication for an issue. So far I have the below code, but it's not actually copying anything. I've run it through JSHint and that's not turned up any issues, but I picked up the code at the bottom of the function for copying the text from a tutorial about interacting with the clipboard API for how to copy from a text box, hence why I add everything to the smsToSend text area. A note for people is that if there's an issue that's brand new and hasn't been sent out before, then the incident update is always 'we are investigating the issue' as this is automatically placed into the field, which is why I testing against it, as both new and update communications would have 'Open' as the incident status.
function generateSMS(){
var issueTitle = document.getElementById("incidentTitle");
var advisorImpact = document.getElementById("advisorImpact");
var incidentUpdate = document.getElementById("incidentUpdate");
var incidentStatus = document.getElementById("incidentState");
var startTime = document.getElementById("startTime");
var endTime = document.getElementById("endTime");
var smsToSend = document.createElement('textarea');
var incidentPriority = document.getElementById("incidentPriority");
var incidentBrand = "TechTeams";
var systemImpacted = document.getElementById("systemImpacted");
var incidentReference = document.getElementById("incidentReference");
if (incidentStatus != "Closed"){
if (incidentUpdate == "We are investigating this issue"){
smsToSend = "P" + incidentPriority + " " + incidentBrand + "IT ISSUE: " + systemImpacted + ": " + issueTitle + ". " + advisorImpact + ": " + incidentReference;
}
else {
smsToSend = "P" + incidentPriority + " " + incidentBrand + "IT UPDATE: " + systemImpacted + ": " + incidentUpdate + ": " + incidentReference;
}
}
else{
smsToSend = "P" + incidentPriority + " " + incidentBrand + "IT RESOLVED: " + systemImpacted + ": " + incidentUpdate + ": Start: " + startTime + " End: " + endTime + " Reference: " + incidentReference;
}
smsToSend.setAttribute('readonly','');
smsToSend.style = {position: 'absolute', left: '-9999px'};
document.body.appendChild(smsToSend);
smsToSend.select();
document.execCommand('copy');
document.body.removeChild(smsToSend);
}

You can easly copy to clipboard with js like so:
function CopyToClipboard(text) {
/* Get the text field */
var copyText = document.getElementById("elementId").textContent; //here you get the text
var dummy = $('<textarea>').val(copyText).appendTo('body').select();
document.execCommand('copy');//here the text gets copyed
alert("Text copyed to clipboard!");
$(dummy).remove();// here you remove the dummy that has been created previously
}

Javascript Sweet Alert and html link inside text

i have the following SweetAlert Code..
<script type="text/javascript" charset="utf-8">
$('.patient-details').click(function(e) {
e.preventDefault();
var name = $(this).attr('data-name');
var gender = $(this).attr('data-gender');
var age = $(this).attr('data-age');
var country = $(this).attr('data-country');
var state = $(this).attr('data-state');
var address = $(this).attr('data-address');
var report = $(this).attr('data-report');
swal({
title: name,
text: "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n" + "State: " + state +"\n" + "Address: " + address +"\n" + "Report: " + report,
confirmButtonColor: "#00B4B4",
imageUrl: "images/avatar/user.png",
});
});
</script>
The var report is a link and i need the link displayed in the modal. I tried html: true etc. html is no longer used. Instead use the content object. as doc says:
https://sweetalert.js.org/docs/#content
https://sweetalert.js.org/guides/
But i as a newbie is unable to make sense out of it.
Requesting help on how to display the link in the modal and the link to be opened in new window.
Update:
Since the solutions provided were not working i used another approach using html to resolve it. Need to remove text, else text will be default. Codepen link:
https://codepen.io/pamela123/pen/GOJZgo

Found this answer here, all credits to
Tristan Edwards
const el = document.createElement('div')
el.innerHTML = "Here's a <a href='http://google.com'>link</a>"
swal({
title: "Hello!",
content: el,
})

As the doc says, html is deprecated and no longer works.
They have replaced html with content, which is not a string any longer, but an Object.
This content object looks like this :
content: {
element: "input",
attributes: {
placeholder: "Type your password",
type: "password",
}
}
So I guess you can build your own link like this :
content: {
element: "a",
attributes: {
href : report
}
}
...and then simply pass the content object to swal :
swal({
content: {
element: "a",
attributes: {
href : report
}
}
})
Note that this is untested, I'm not sure if element:"a" works. But anyway, the doc gives a better way :
var slider = document.createElement("input");
slider.type = "range";
swal({
content: slider
});
So you can create a link this way :
var link = document.createElement("a");
link.href= report;
swal({
content: link
});
As an aside, you can heavily optimize the code you provided in your question by caching $(this) (which is expensive to create) and reuse it. Also, .attr("data-x") has a shorthand, .data("x").
var $this = $(this)
var name = $this.data('name');
var gender = $this.data('gender');
var age = $this.data('age');
var country = $this.data('country');
var state = $this.data('state');
var address = $this.data('address');
var report = $this.data('report');
OR even better :
var attributes = $(this).data()
which gives an object containing all your data attributes. Which you can then reach using :
text: "Gender: " + attributes['gender'] +"\n" + "Age: " + attributes['age'] +"\n" + "Country: " + attributes['country'] +"\n" + "State: " + attributes['state'] +"\n" + "Address: " + attributes['address'] +"\n" + "Report: " + attributes['report']
Or in ES6 :)
text: `Gender: ${attributes['gender']}\n
Age: ${attributes['age']}\n
Country: ${attributes['country']}\n
State: ${attributes['state']}\n
Address: ${attributes['address']}\n
Report: ${attributes['report']}`

As Jeremy Thille found out in his commentary on Oct. 31 '17 at 10:36:
You do not need to use the option "content" for a simple link in the text.
The option "text" can only display pure text, no html.
However, the option "html" can display html.
Not to be confused with the old version SweetAlert 1.X: There you had to set html = true.
In SeewtAlert2, the html is set directly in the "html" option. Do not use option "text" in this case.
Works fine in sweetAlert.version = '6.9.1';
Example of Jeremy Thille:
$('.patient-details').click(function(e) {
e.preventDefault();
var $this = $(this)
var name = $this.data('name');
var gender = $this.data('gender');
var age = $this.data('age');
var country = $this.data('country');
var address = $this.data('address');
var report = $this.data('report');
swal({
title: name,
html:
"Gender: " + gender +"<br>" +
"Age: " + age +"<br>" +
"Country: " + country +"<br>" +
"Address: " + address +"<br>" +
"Report: " + report +"<br>" +
"<a href='report'>Report</a> " +
"and other HTML tags"
});
});
https://codepen.io/jeremythille/pen/wPazMw

Why not try the following (I have never used sweet alert, but after reading the documentation this is what I would try)
var link= document.createElement("a");
link.href = report // or link.setAttribute("href", report)
swal({
title: name,
text: "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n" + "State: " + state +"\n" + "Address: " + address +"\n" + "Report: " + report,
confirmButtonColor: "#00B4B4",
imageUrl: "images/avatar/user.png",
content:link
});
});
Or
swal({
title: name,
text: "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n" + "State: " + state +"\n" + "Address: " + address +"\n" + "Report: " + report,
confirmButtonColor: "#00B4B4",
imageUrl: "images/avatar/user.png",
content:{
element:"a",
attributes:{
href:report
}
}
});
});
hope that helps

If you are not still able to find a solution, I tried recreating the modal
https://codepen.io/AJALACOMFORT/pen/zPGqNe?editors=0010
window.onload= function(){
var that = $(".patient-details")
var name = $(that).attr('data-name');
var gender = $(that).attr('data-gender');
var age = $(that).attr('data-age');
var country = $(that).attr('data-country');
var address = $(that).attr('data-address');
var report = $(that).attr('data-report');
//creates h2
var h2 = document.createElement("h2")
//adds text
h2.innerHTML = name
//creates p tag
var p = document.createElement("p")
p.innerHTML = "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n" + "Address: " + address +"\n" + "Report: " + report
//creates button
var button = document.createElement("button")
//adds the onclick function
button.setAttribute("onclick", "callbutton(event)")
button.innerHTML ="ok"
button.className += "confirm"
var link = document.createElement("a")
link.setAttribute("href", report)
link.innerHTML ="Link"
link.className += "report-link"
//appends all the elements into the mymodal div
var modal = document.getElementById("modal-inner")
modal.appendChild(h2)
modal.appendChild(p)
modal.appendChild(link)
modal.appendChild(button)
}
//listens to click event of the checkbox
function callbutton(){
document.getElementById("checkboxabove").checked = false;
}
Hopefully it helps. (Note I did not use the same transition effect like in sweet alert, so adjust as you please)

Checking for a value in an Array inside of a JSON file

I have a JSON file for which I have created a jQuery function to find matching values and and display them in a div. I'm not quite sure how to compare a single value within the activitiesarray in the JSON file. It only seems to return the entire array.
How do I check through each resortin the JSON file and see if one of the values in the activities array inside the JSON file contains a specific value like scuba diving
JavaScript:
var destination = $('option:selected', "#destination").attr('value');
var comfortLevel = $('option:selected', "#comfortLevel").attr('value');
var activities = $('option:selected', "#activities").attr('value');
var date = $('option:selected', "#date").attr('value');
var price = $('option:selected', "#price").attr('value');
$.getJSON('resort.json', function(data) {
$.each(data.resorts, function(key, val) {
if (destination == val.destination) {
if (comfortLevel == val.comfortLevel || activties == val.activities || date == val.startDate || price > val.price) {
$("#resortData").html("<img src= "+val.picture+" class='miniPic'> Destination: "+ val.destination + "<br>" + "Name: " + val.name + "<br>" +"Location: "
+ val.location + "<br>" + "Comfort: " + val.comfortLevel + " Star <br>" + "Activities: " + val.activities + "<br>" + "Price: £"
+ val.price + "<br>" + "Start Date: " + val.startDate + "<br>" + "End Date: " + val.endDate + "<br>" + "Description: " + val.short_description
+ "<br><br>" + "<a href=':" + val.url +"'>Click HERE for more info</a>");
}
}
});
});
resort.JSON:
{
"resorts": [
{
"id":"resort1",
"destination":"Carribean",
"name":"Les Boucaniers",
"location":"Martinique",
"comfortLevel": "4",
"activities":["water skiing", "tennis", "scuba diving", "kitesurf", "spa"],
"price":1254,
"startDate":"2016-01-01",
"endDate":"2016-12-31",
"short_description":"The resort of Les Boucaniers is located on the laid-back beach-covered south coast of the island, and is perfectly placed for Martinique holidays that are both relaxing and awe-inspiring.",
"picture":"images/resort1pic1small.jpg",
"long_description":"A divers' paradise in the Baie du Marin, a legendary spot.<br>Its bungalows are discreetly lodged in a tropical garden beside the white sand beach in superb Marin Bay. A magical site where you can enjoy a taste of everything, alone or with family or friends. Try water sports and the magnificent Club Med Spa*. You'll be enchanted by the exotic flavours of the local cuisine and the joyful spirit of the Caribbean.",
"url":"resorts/resort1.html"
},
{
"id":"resort2",
"destination":"Indian Ocean",
"name":"La Plantation d'Albion",
"location":"Mauritius",
"comfortLevel": "5",
"activities":["kids club","golf", "scuba diving", "flying trapeze", "tennis", "sailing", "spa"],
"price":2062,
"startDate":"2016-01-01",
"endDate":"2016-12-31",
"short_description":"Beautifully located in one of the last remote creeks on the island, La Plantation d'Albion Club Med welcomes the most demanding of guests into a world of supreme refinement.",
"picture":"images/resort2pic1small.jpg",
"long_description":"In a remote beauty spot, savour the luxury of Mauritian lifestyle. <br> The idyllic natural setting is enhanced by the sublime decor designed by Marc Hertrich and Nicolas Adnet, and the Resort's top-end comfort is perfectly reflected in its beautifully spacious rooms. The exceptional CINQ MONDES Spa* and luxurious overflow pool add an ideally Zen touch.<br> The Resort is entirely devoted to fulfilling its guests' desires and offers discreet, personal service in its swimming areas, bars and 'Table Gourmet' restaurants.",
"url":"resorts/resort2.html"
}
]}

How do I check through each resortin the JSON file and see if one of
the values in the activities array inside the JSON file contains a
specific value like scuba diving
Use indexOf() on the activities array.
NB there's a typo (activties ) here: if (comfortLevel == val.comfortLevel || activties == val.activities ...

A little tricky, but sometimes a RegExp helps in this type of situations and saves a lot of code:
var escape = /[.?*+^$[\]\\(){}|-]/g;
var destination = $('option:selected', "#destination").attr('value').replace(escape, "//$&");
var comfortLevel = $('option:selected', "#comfortLevel").attr('value');
var activities = $('option:selected', "#activities").attr('value').replace(escape, "//$&");
var date = $('option:selected', "#date").attr('value').replace(escape, "//$&");
var price = $('option:selected', "#price").attr('value');
$.get('resort.json', function(data) {
var json = JSON.parse( data.match(new RegExp('(\{[^\{\}]*?"destination"\s*\:\s*"' + destination + '"[^\}]*(?:"comfortLevel"\s*\:\s*"' + comfortLevel + '"|"activities"\s*\:\s*\[[^\]]*"' + activities + '"[^\]]*\]|"date"\s*\:\s*"' + date + '"|"price"\s*\:\s*(?:' + "[0-" + price.split("").join("]?[0-") + "]?" + '))[^\{\}]*?\})'))[0] );
$("#resortData").html("<img src= "+json.picture+" class='miniPic'> Destination: "+ json.destination + "<br>" + "Name: " + json.name + "<br>" +"Location: "
+ json.location + "<br>" + "Comfort: " + json.comfortLevel + " Star <br>" + "Activities: " + json.activities + "<br>" + "Price: £"
+ json.price + "<br>" + "Start Date: " + json.startDate + "<br>" + "End Date: " + json.endDate + "<br>" + "Description: " + json.short_description
+ "<br><br>" + "<a href=':" + json.url +"'>Click HERE for more info</a>");
});
The specific piece of RegExp to test if an activities is contained in the Array is this:
'"activities"\s*\:\s*\[[^\]]*"' + activities + '"[^\]]*\]'

Auto-Confirmation Emails not sending using trigger "on form submit"

I just created a new Google form and want an automatic confirmation email to go out when the form is submitted. Essentially, an academic department uses the form to approve or deny transfer credit for a student, and then the automatic email confirmation goes to the student, so that he/she knows the decision without having to contact the student separately.
I did this before with 2 different forms about 5 months ago and never had a problem. But with this new form that I just created, the emails are not working. It appeared to be working yesterday, but I can't recreate the successful email confirmation today. I've looked through the message boards, but haven't found the same exact issue.
I'm using the script editor and creating a trigger "on form submit." I started with the code that I know works for my other form and just changed the values and the message. My script looks like this:
function myFunction(e) {
var UserName = e.values[1];
var LastName = e.values[2];
var FirstName = e.values[3];
var SAGEID = e.values[4];
var UserEmail = e.values[5];
var Dept = e.values[6];
var Coll1 = e.values[11];
var Course1 = e.values[12];
var Req1 = e.values[13];
var Decision1 = e.values[14];
var Coll2 = e.values[15];
var Course2 = e.values[16];
var Req2 = e.values[17];
var Decision2 = e.values[18];
var Coll3 = e.values[19]
var Course3 = e.values[20];
var Req3 = e.values[21];
var Decision3 = e.values[22];
var Coll4 = e.values[23];
var Course4 = e.values[24];
var Req4 = e.values[25];
var Decision4 = e.values[26];
var Notes = e.values[9];
var Subject = "Course Equivalency Request Decision - " + FirstName + " " + LastName + " (" + Dept + ")";
var Message = "The " + Dept + " department has made a decision regarding your course equivalency request. Any questions regarding the decision below should be directed to the " + Dept + " department. " +
"\n\n\nDepartment Comments: " + Notes +
"\n\nCourse 1: " + Coll1 + ": " + Course1 + "\nDecision: " + Decision1 + "\nRequirement: " + Req1 +
"\n\nCourse 2: " + Coll2 + ": " + Course2 + "\nDecision: " + Decision2 +
"\nRequirement: " + Req2 +
"\n\nCourse 3: " + Coll3 + ": " + Course3 + "\nDecision: " + Decision3 +
"\nRequirement: " + Req3 +
"\n\nCourse 4: " + Coll4 + ": " + Course4 + "\nDecision: " + Decision4 +
"\nRequirement: " + Req4 +
"\n\n\nPlease allow 3-4 business days for processing. If after 3-4 business days, your undergraduate degree audit does not reflect these substitutions, please contact the Office of the University Registrar at registrar#brandeis.edu or 781-736-2010." +
MailApp.sendEmail(UserEmail, Subject, Message);
}
I'm banging my head against the wall trying to figure out why a version of this script works perfectly well with a different form, but won't work for me now. I'm relatively new to writing Google scripts, so any help you can offer would be greatly appreciated.