Develop Reference

Want to add delete functions for a list of date displayed

to summarize my problem ... I have made a calendar with contains the from - to date range. Now the selected dates are displayed in a div with a delete button for each. But as the id of the button is the same for all the dates ....it deletes the entire date range. I have attached the screenshot as well.
I also tried taking a loop and giving each date a div so that the Del function will work properly. but I wasn't successful. I will mention code for the same
$(document).ready(function () {
var i = 0;
$.each(between, function (key, value) {
var rest = $('#target').append($('<div id="r' + i +value+ '" class="ansbox">
</div>'));
console.log(between);
var template = '<div id="ChildTarget_' + i + '"><span>key + ":" + "' + value + '"
</span><button id="tr' + i + '" class="target">X</button></div><br></div>';
i++;
$('#target').on('click', function () {
console.log("hola");
$('#target').remove();

You should add click event for the button itself.
var template = `
<div id="ChildTarget_' + i + '">
<span>key + ":" + "' + value + '"</span>
<button id="tr' + i + '" class="deleteButton">X</button>
</div>`;
$(".deleteButton').on('click', function() {
// do deletion here
});

First of all ,
The 'X' button should have different id
$.each(between, function (key, value){
$('#results').append(key+":"+value+'<br>');
$('#results').html(between.join('<button id="result"+key+"" > X </button><br>')
here you can see i am adding key to the Button Id making it unique. Use that id to remove the value, that you dont want. Hope this helps

Adding a link to a <td> element while parsing json?

Another noob question/issue.....I am currently parsing a json file and appending the data to an HTML table. I need to make one of the name/value pairs (COPD_QUAL.FIN) display as a link within the table.
Here is my function to append the data....
function createPatientTable(json) {
$.each(json.LIST, function(i, COPD_QUAL) {
$('.footable > tbody:last').append('<tr><td>' + COPD_QUAL.PATIENT + '</td><td>' + COPD_QUAL.FIN + '</td><td>' + COPD_QUAL.NURSE_UNIT + '</td><td>' + COPD_QUAL.ROOM + '</td><td>' + COPD_QUAL.BED +'</td><td>' + COPD_QUAL.ATTENDING_PHYS + '</td><td>' + COPD_QUAL.LENGTH_OF_STAY + '</td><td class="assessment ' + getSeverity(COPD_QUAL.MED_ASSESS) + '">' + COPD_QUAL.MED_ASSESS + '</td></tr>');
});
$('.footable').footable();
};
This is the part I am trying to make a link but receiving a syntax error when clicking the link within the application that I included the table within:
'</td><td><a href="javascript:APPLINK(0,"powerchart.exe","/PERSONID=8986122 /ENCNTRID=14150574")">'
If I try to use single ' instead of the double " within the () of the APPLINK function, I receive an unexpected ) error:
'</td><td>' + COPD_QUAL.FIN + '</td><td>'
Could someone help me with the syntax? Am I completely off here? I was able to get the link to work otuside of the table in a random div but I cannot append the link to the table within my json function. Here is the hardcoded / standalone div link that works:
Open patient chart test2
Thanks in advance!!!

'</td><td>' + COPD_QUAL.FIN + '</td><td>'
or
'</td><td><a href="javascript:APPLINK(0,\\"powerchart.exe\\",\\"/PERSONID=8986122 /ENCNTRID=14150574\\")">'
You need to escape the quotes.

Add image and text to list in html from JSON

My use case is to add image and a text dynamically to list. All I have is JSON (extracted from DB as result set). The JSON structure is as mentioned below:
[{"Comment":"Test","FilePath":"\/storage\/sdcard0\/20130725153841.JPEG"},{"Comment":"Image List","FilePath":"\/storage\/sdcard0\/20130725160020.JPEG"}]
So, in my java script, I append this list to a HTML body through the following code:
<script>
$(document).ready(function(e) {
var data = [{"Comment":"Test","FilePath":"\/storage\/sdcard0\/20130725153841.JPEG"},{"Comment":"Image List","FilePath":"\/storage\/sdcard0\/20130725160020.JPEG"}]
var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val.Comment + '</li>');
});
$('<ul/>', {
html: items.join('')
}).appendTo('body');
});
</script>
Here, I am trying to bring an image (whose filepath is available in the JSON) to the list. So, the list should contain image (may be a smaller one - I shall use styling for this) and the comment side by side.
Please can someone help?
EDIT:
I tried this: I am building the list runtime.. So, i tried using
before val.comment.. it doesnt seem to work. Any words on this?

In order to show image with each list item you should have to add img tag in your list item. The JS code should be like below:
items.push('<li id="' + key + '"><img src="' + val.FilePath + '" />' + val.Comment + '</li>');
Hope this will help !!

In your items.push add the <img> tag and output the value from your FilePath field:
items.push('<li id="' + key + '">' + val.Comment + '<img src="' + val.FilePath +'" alt="" />' + '</li>');

Workflow using Google Apps Script - I need to email the user in my first step

I'm creating a workflow process that will email a body of a form to users in that workflow. I can iterate through the users and send an email but I do not now how to pass the "e" parameters for the body of the email. I actually already have a function that will send the body , but I need to include this in my step process (I think).
Hear is my code that will send email
function sendEmail_(e) {
var sheet = SpreadsheetApp.openById("0AuCblud0Ss7sdfA1bXZjYXA0Y0IhthkhUQm5vWG02MVE").getActiveSheet();
var row = sheet.getLastRow()+1;
sheet.getRange(row,3).setValue(row);
var range = sheet.getRange(sheet.getLastRow(),1,1,23);
range.setValues([[e.parameter.LastName,e.parameter.FirstName,row /*e.parameter.DivisionName*/,e.parameter.EffectiveDate,e.parameter.Status,
e.parameter.Network,e.parameter.EmployeeNewPosition,e.parameter.DivisionFolder,e.parameter.SpecificIndividual,
e.parameter.Email,e.parameter.username,e.parameter.who,e.parameter.Banner,e.parameter.RMS ,e.parameter.HAPPY,e.parameter.Sweeps,
e.parameter.Comcate,e.parameter.Netviewer,e.parameter.NetDispatcher,e.parameter.IMARS,"pending", e.parameter.DivHeadEmail, e.parameter.Director]]);
var body = '<form action= <form action = " https://sites.google.com/a/macros/wichitafallstx.gov/s/AKfycbxAOGO6q9ofauf34xlDA9sLG8sUXeZsuvQkDKATOQ/exec" method ="post">' +
"<b>Last Name:</b>" + e.parameter.LastName + '<br><br>' +
"<b>First Name:</b>" + e.parameter.FirstName + '<br><br>' +
"<b>Division Name:</b>" + e.parameter.DivisionName + '<br><br>' +
"<b>Effective Date:</b>" + e.parameter.EffectiveDate + '<br><br>' +
"<b>Employee Status:</b>" + e.parameter.Status + '<br><br>' +
"<b>Network:</b>" + e.parameter.Network + '<br><br>' +
"<b>Employee New Position:</b>" + e.parameter.EmployeeNewPosition + '<br><br>' +
"<b>Division Folder:</b>" + e.parameter.DivisionFolder + '<br><br>' +
"<b>Specific Individual:</b>" + e.parameter.SpecificIndividual + '<br><br>' +
"<b>Email:</b>" + e.parameter.Email + '<br><br>' +
"<b>Username:</b>" + e.parameter.username + '<br><br>' +
"<b>who:</b>" + e.parameter.who + '<br><br>' +
"<b>Banner:</b>" + e.parameter.Banner + '<br><br>' +
"<b>RMS:</b>" + e.parameter.RMS + '<br><br>' +
"<b>HAPPY:</b>" + e.parameter.HAPPY + '<br><br>' +
"<b>Sweeps:</b>" + e.parameter.Sweeps + '<br><br>' +
"<b>Comcate:</b>" + e.parameter.Comcate + '<br><br>' +
"<b>Netviewer:</b>" + e.parameter.Netviewer + '<br><br>' +
"<b>NetDispatcher:</b>" + e.parameter.NetDispatcher + '<br><br>' +
"<b>IMARS:</b>" + e.parameter.IMARS +
'<br />' +
'<br />' +
'<input type="hidden" name="row" value=" ' + row +' "/>' +
'<input type="submit" value="Approve" onclick="approve()" />' +
'</form>'
;
// var owners = e.parameter.DivHeadEmail;
// var mail = MailApp.sendEmail(owners, "test",'' , {htmlBody:body});
}
I need to email the html body from the code above with the step in the work flow in this "createStep" function. I dont know how to reference the variable "body" from the code above to this function or even if I could include the html body in this function. How would I do this?
function createStep(approvers) {
var step = new Object();//javascript object
step['numberOfApprovers'] = approvers.length; //set number of approvers passed in array
step['approvers'] = approvers.slice(0); //slice copies array
step['status'] = 'pending'; //set statust to pedning
for (var i in approvers)
step[approvers[i]] = 'pending'; //iterate field that indicates specific status
for (var m in approvers)
step[approvers[m]] = MailApp.sendEmail(approvers, "test", "test",{htmlBody:body});
return step
}

If you want to include the body variable in both functions, declare the variable outside the functions:
var body;
function sendEmail_(e) {
...
body = ...
}
function createStep(approvers) {
...
sendEmail(..., {htmlBody:body}
..
}
However, I don't think you can send POST parameters to a script, GET should work. But I haven't tried it myself.

On second thought, and trying to understand the process, why not create a web app that just displays the info on the screen, with an Approve button under it, and send a link to that app to each approver?
Advantage is that you can give access to the script to logged in users only, and check that the right person is approving--makes it more safe.
Note that you can use the ObjDB library to easily retrieve a row from a spreadsheet:
http://www.harryonline.net/scripts/objdb-storing-data-with-google-apps-script/482

I would create a spreadsheet with two worksheets. The first contains the data, the second contains the list of approvers. One column in the first sheet indicates the last approver.
So your script checks the rows in the data worksheet, and sends an email containing the data of a row that has not been approved yet. It includes a link to approve. The receiver checks the data, and clicks on the link to approve.
This brings him to a script, where he has to log in. The script checks the user with the expected approver, and if OK, increases the value in the approver column in the data sheet. While there are more approvers, continue the loop.

Are there any string formatting functions built into jQuery?

I have the following code:
$("#stats-list")
.append("<li>Elapsed: " + ajaxElapsed + "</li>\n" +
"<li>Display: " + tableElapsed + "</li>\n" +
"<li>Total: " + (ajaxElapsed + tableElapsed) + "</li>");
This was originally three appends that I concatenated into one. Is there anything I could do with jQuery that would clean up this code even more. What I was wondering was if jQuery has any string formatting with tokens that I could use.

function format(formatString) {
var args = Array.prototype.slice.call(arguments,1);
return formatString.replace(/\{(\d+)\}/g, function(match, num) {
return args[Number(num)];
});
}
format("<li>Elapsed: {0}</li>\n<li>Display: {1}</li>\n<li>Total: {2}</li>",
ajaxElapsed, tableElapsed, ajaxElapsed + tableElapsed);

afaik there is none built-in, but a powerful templating-subsystem, see jQuery Templates
just for completeness, i think this could be done more elegant:
var list = $('#stats-list');
$('<li />').text('Elapsed: ' + ajaxElapsed).appendTo(list);
$('<li />').text('Display: ' + tableElapsed).appendTo(list);
$('<li />').text('Total: ' + (ajaxElapsed + tableElapsed)).appendTo(list);

If you have many items you can do something like this to avoid missing + and writing li so many times. You can add any number of items inside the array and they will be joined with lis appropriately.
var list = '<li>' + [
'Elapsed: ' + ajaxElapsed,
'Display: ' + tableElapsed,
'Total: ' + ajaxElapsed + tableElapsed
].join('</li><li>') + '</li>';
$("#stats-list").append(list);
As a note I wouldn't use \n. li is a block element by default, so you'd be better styling it with css.