I'm new to JavaScript and am trying to work through some errors. I've researched sites and made a few changes but still having trouble. Any assistance is appreciated.
The goal is to take selected items on a SharePoint list and click a button that will open an email with list data.
The errors are below:
SCRIPT1002: SCRIPT1002:
HTML1423: Malformed start tag. Attributes should be separated by whitespace.
HTML1409: Invalid attribute name character. Attribute names should not contain ("),('),(<), or (=).
HTML1422: Malformed start tag. A self closing slash should be followed by a U+003E GREATER-THAN SIGN (>).
HTML1423: Malformed start tag. Attributes should be separated by whitespace. Email.aspx (807,105)
HTML1409: Invalid attribute name character. Attribute names should not contain ("),('),(<), or (=).
Here's the latest code...
<script type="text/javascript"> </script>
<script src=".../jquery-1.12.4.js"</script>
<script src=".../jquery.min"</script>
<script src=".../sprestlib.bundle.js"</script>
<script src=".../vue.min.js"</script>
<script src=".../jquery-3.5.1.js"</script>
function clickMethod() {
var ctx = SP.ClientContext.get_current();
var items = SP.ListOperation.Selection.getSelectedItems(ctx);
sprLib.list('DRLs').items({
listCols: {
iD: {dataName:'ID'},
drlId: {dataName:'Title'},
artifactIdCopy: {dataName:'ArtifactID'},
assessmentId: {dataName:'AssessmentIDCopy'},
dueDate: {dataName:'TaskDueDate'},
AOREmails: {dataName:'AOREmails'},
startDate: {dataName:'Assessment_x0020_ID_x0020_LU_x00'},
teamMemberEmails: {dataName:'TeamMemberEmails'},
artifactLink: {dataName: 'Artifact_x0020_Link'},
drlItemLink: {dataFunc:function(objItem){return 'View DRL'}}
},
queryOrderby: 'Title';
})
.then(findSelectedItems(arrData, items);
.catch(function(errMsg){console.error(errMsg) });
}
function findSelectedItems(spData, selectedItems){
var emailBody = '';
for(var i = 0; i < selectedItems.length; i++){
var itemID = selectedItems[i].id;
for(var j = 0; j < spData.length; j++){
if (spData[i].iD == itemID){
emailBody += "Title: " + spData[i].drlId + "\r\n";
}
}
}
sendMail(emailBody);
}
function sendMail(bodyString) {
var message = encodeURIComponent(bodyString);
//var yourMessage = document.getElementById('AORNames');
var subject = document.getElementById('DRLID').value;
var emails = document.getElementById('AOREMails').value;
var mail = "mailto:" + emails + "?subject=" + subject + "&body=" + message;
window.location.href = mail;
}
</script>
<button #click="clickMethod()">Send Email</button>
I recommend splitting out the javascript into separate files. Then you'd just need to do <script src='/my-new-file.js'></script> in the html file instead of mixing and trying to match like what's happening at the moment.
Alternatively if you want to keep it like you have it now, on the first line, removing the closing script tag and move all of the other script tags outside. Like this:
<body><button #click="clickMethod()">Send Email</button>
<script src=".../jquery-1.12.4.js"</script>
<script src=".../jquery.min"</script>
<script src=".../sprestlib.bundle.js"</script>
<script src=".../vue.min.js"</script>
<script src=".../jquery-3.5.1.js"</script>
<script type="text/javascript">
function clickMethod() {
var ctx = SP.ClientContext.get_current();
var items = SP.ListOperation.Selection.getSelectedItems(ctx);
sprLib.list('DRLs').items({
listCols: {
iD: {dataName:'ID'},
drlId: {dataName:'Title'},
artifactIdCopy: {dataName:'ArtifactID'},
assessmentId: {dataName:'AssessmentIDCopy'},
dueDate: {dataName:'TaskDueDate'},
AOREmails: {dataName:'AOREmails'},
startDate: {dataName:'Assessment_x0020_ID_x0020_LU_x00'},
teamMemberEmails: {dataName:'TeamMemberEmails'},
artifactLink: {dataName: 'Artifact_x0020_Link'},
drlItemLink: {dataFunc:function(objItem){return 'View DRL'}}
},
queryOrderby: 'Title';
})
.then(findSelectedItems(arrData, items);
.catch(function(errMsg){console.error(errMsg) });
}
function findSelectedItems(spData, selectedItems){
var emailBody = '';
for(var i = 0; i < selectedItems.length; i++){
var itemID = selectedItems[i].id;
for(var j = 0; j < spData.length; j++){
if (spData[i].iD == itemID){
emailBody += "Title: " + spData[i].drlId + "\r\n";
}
}
}
sendMail(emailBody);
}
function sendMail(bodyString) {
var message = encodeURIComponent(bodyString);
//var yourMessage = document.getElementById('AORNames');
var subject = document.getElementById('DRLID').value;
var emails = document.getElementById('AOREMails').value;
var mail = "mailto:" + emails + "?subject=" + subject + "&body=" + message;
window.location.href = mail;
}
</script>
</body>
Just before your function clickMethod you are missing a starting <script> tag. That's why it says malformed start tag. It's missing. Hope that helps.
Related
Does anyone know how to add like a link button into a form? For example, a user clicks a + button and they can add an URL. They can add another URL if they wish and remove any links if required. Would be good to have validation for links as well.
I know for validation of the URL I can use "Check if a JavaScript string is a URL", but will need something that will validate all links if multiple have been added.
The best way to explain what I am trying to do is by looking at "Can I insert a hyperlink in my form?" in the form builder.
I just want to add links, and I don't need to display text or anything like that.
Is this what are you looking for?
Your question is a bit unclear.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
let i = 0;
let ii = 0;
function isURL(s) {
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/
return regexp.test(s);
}
function removeLink(id, iid) {
console.log(id);
console.log(iid);
$(id).remove();
$(iid).remove();
return false;
}
function addLink(id) {
var input = prompt("Enter the link", "https://www.example.com");
var valid = isURL(input);
console.log(valid);
if(valid) {
var element = '<br><a id="_' + i + '" href="' + input + '">Link</a>';
console.log(element);
$(id).append(element);
let d = "'#_" + i + "'";
let dd = "'#__" + ii + "'";
let elment = ' <button type="button" id="__' + ii + '" onclick="removeLink(' + d + ', ' + dd + ')">Remove it!</button>';
$(id).append(elment);
console.log(elment);
i = i + 1;
ii = ii + 1;
}
else {
alert("The URL that you have entred is wrong.");
}
return false;
}
</script>
</head>
<body>
<form id="_form" method="POST">
<button type="button" onclick="addLink('#_form')">Add link</button>
</form>
</body>
</html>
Try it here: https://codepen.io/marchmello/pen/ZEGjMyR?editors=1000
What about DOM - not using longer form, so using URL as link text too.
function addUrl(e) {
var f = e.form;
var a = document.createElement("A");
a.href = e.value; // link URL
a.textContent = e.value; // link text
f.appendChild(a);
var x = document.createElement("INPUT");
x.type = "button";
x.value = "X";
x.onclick = remove;
f.appendChild(x);
f.appendChild(document.createElement("BR"));
}
function remove() {
var el = this, // button
parent = el.parentNode, // a must for remove
a = el.previousElementSibling; // anchor
if(el.nextSibling.tagName == 'BR') parent.removeChild(el.nextSibling);
parent.removeChild(el);
parent.removeChild(a);
}
<form>
<input name="url" size="50">
<input type="button" value="Add" onclick="addUrl(this.form.url)"><br>
</form>
I have these functions:
$(".Read-Showing-Comment-Cancel").live('click', function (e) {
var guid = $(this).data("guid");
e.preventDefault();
var f = $('#comments-form-' + guid).slideUp();
$('comments-text-' + guid).empty();
$('comments-text-' + guid).value = "";
$(this).find('.comments-form-' + guid).hide();
$('comments-sendlink-' + guid).show();
});
$('.showComments').unbind('click').click(function (event) {
$('.ListingDisplayOptions').hide();
$(this).find('.comments-form-' + showGuid).show();
var showGuid = $(this).attr('rel');
loadShowingsComments(showGuid);
$(this).attr('id', 'comments-sendlink-' + showGuid);
event.preventDefault();
});
function loadShowingsComments(guid) {
var commentTextArea = "#comments-form-" + guid;
var commentDisplay = ".spanComments" + guid;
var curComment = $(commentDisplay).text();
var element = "#comments-form-" + guid;
$(element).slideDown();
}
<script>
function showComments() {
var comments = document.querySelectorAll(".spanComments");
for (var i = 0; i < comments.length; i++) {
comments[i].innerHTML = "This is comment #" + i;
}
}
</script>
View Comments
Those functions should grab the information from my controller (it's hooked up correctly. I've stepped through that and it has populated the right information) and place them in my span:
<tr class="p_la" id="comments-form-#currentShowing.ShowingGUID" style="display:none;">
<td colspan="4" style="border-right:5px solid #DDDDDD;">
<form action="" method="post">
<span class="spanComments" cols="100" rows="5">#string.Format("{0} / {1}", #currentShowing.Comments.DateAdded, #currentShowing.Comments.CommentsValue)</span>
<br />
Close
</form>
</td>
</tr>
Unfortunately, when I click on my hyperlink, it only populates the first span with the first span's information. Works great for the first span but when you click on the hyperlink in the second, third, fourth, etc item, they will only open up the first span with the first span's information.
The code should populate each successive span with its own information.
My JQuery was off. It needed this to be changed:
$(".Read-Showing-Comment-Cancel").live('click', function (e) {
var guid = $(this).data("guid");
e.preventDefault();
var f = $('#comments-form-' + guid).slideUp();
$('comments-text-' + guid).empty();
$('comments-text-' + guid).value = "";
$(this).parent("form").parent("td").parent("tr").hide();
$('comments-sendlink-' + guid).show();
});
$('.showComments').unbind('click').click(function (event) {
$('.ListingDisplayOptions').hide();
var showGuid = $(this).attr('rel');
$(this).parent("td").parent("tr").next('#comments-form-' + showGuid).show();
$(this).attr('id', 'comments-sendlink-' + showGuid);
event.preventDefault();
});
Currently I put a function call against each element like so:
<textarea id="comment" cols=70 rows=5 onblur="cleanWordClipboard(this)" />
Is there a more generic/central approach to adding:
onblur="cleanWordClipboard(this)"
to all TextArea elements, so
<textarea id="comment" cols=70 rows=5/>
stays as is. I am thinking something like CSS which has rules to apply behaviours to all elements of a certain type.
Thanks.
EDIT1
So far I am trying, at the bottom of my page, which is actually a master layout page that includes all dynamic pages (using ASP.NET MVC):
<script language="JavaScript">
// Thanks to Johnathan Hedley for this code.
var swapCodes = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230); // dec codes from char at
var swapStrings = new Array("--", "--", "'", "'", "\"", "\"", "*", "...");
function cleanWordClipboard(input) {
// debug for new codes
// for (i = 0; i < input.length; i++) alert("'" + input.charAt(i) + "': " + input.charCodeAt(i));
var output = input.value;
for (i = 0; i < swapCodes.length; i++) {
var swapper = new RegExp("\\u" + swapCodes[i].toString(16), "g"); // hex codes
output = output.replace(swapper, swapStrings[i]);
}
//return output;
input.value = output;
}
$('textarea').blur(cleanWordClipboard);
</script>
EDIT2
<textarea cols=10 rows=20 class="plaintextbox"></textarea>
<script language="JavaScript">
[].forEach.call(document.getElementsByClassName('plaintextbox'), function (element) {
element.addEventListener('blur', cleanWordClipboard);
// the element will be this in the cleanWordClipboard call
});
// Thanks to Johnathan Hedley for this code.
var swapCodes = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230); // dec codes from char at
var swapStrings = new Array("--", "--", "'", "'", "\"", "\"", "*", "...");
function cleanWordClipboard(input) {
// debug for new codes
// for (i = 0; i < input.length; i++) alert("'" + input.charAt(i) + "': " + input.charCodeAt(i));
var output = input.value;
for (i = 0; i < swapCodes.length; i++) {
var swapper = new RegExp("\\u" + swapCodes[i].toString(16), "g"); // hex codes
output = output.replace(swapper, swapStrings[i]);
}
//return output;
input.value = output;
}
</script>
Yes, you can do this in vanilla JavaScript:
[].forEach.call(document.getElementsByClassName('comment'), function(element){
element.addEventListener('blur', cleanWordClipboard);
// the element will be this in the cleanWordClipboard call
});
Note that I assume you use class=comment instead of id=comment, as only one element in a document can have a given id.
Use Jquery and it will work for all textarea elements.
$('textarea').blur(function(){
// code from cleanWordClipboard
});
Or simply
$('textarea').blur(cleanWordClipboard);
A simple way with jQuery would be $("textarea").blur(cleanWordClipboard).
I have been researching not only this site, but also around the web and cannot find the solution. I have full access to both domains.
The code in my main domain (test.com.es) is:
<script type="text/javascript">
jQuery(document).ready(function($){
$('.quote_button').click(function(e) {
//create product number cookie
var itemname = $('.colors_productname span').html();
document.cookie= 'product_id=' + itemname + '; path=/';
(I have entered the following after path=/';domain = "test.com.es";) - This is still not working.
`e.preventDefault();
document.location.href='http://contact.test.com';
});
});
</script> `
In my subdomain I have the code:
Product SKU* <input class="right" id="skew" size="30" name="skew" value="" type="text"/><br/>
<script type="text/javascript">
$(document).ready(function() {
function getCookie()
{
var name = 'product_id=';
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0)
{
var productname = c.substring(name.length,c.length);
return productname;
}
}
}
var product = getCookie();
$('#skew').val(product);
});
</script>
Can someone please assist in why this is not pulling through?
Thanks
DB
i am trying to concat a query value into a link
wwww.test/video (query value) ".flv"
altought i think i did something wrong.
function doSomething() {
var test = new StringBuilderEx();
var a = querySt("number");
test.append("<h1>test</h1> ");
test.append("<a ");
test.append("href=\"http://test.com/video\"" + a + ".flv\" ");
test.append("Style =\"display:block;width:425px;height:300px;\" ");
test.append("id=\"player\" ");
test.append("</a> ");
test.append("<script language=\"JavaScript\" ");
test.append("> ");
test.append("flowplayer(\"player\" ");
test.append(", \"flowplayer-3.2.2.swf\" ");
test.append("); <\/script>");
return test.toString()
}
at the end all i get is a link with test.com/video and the the passed value. The StringBuilderEx is a JS script and queryST is
function querySt(ji) {
hu = window.location.search.substring(1);
gy = hu.split("&");
for (i = 0; i < gy.length; i++) {
ft = gy[i].split("=");
if (ft[0] == ji) {
return ft[1];
}
}
}
So it would be awesome if i get to know what am i not getting
where 1 is the query number.
href="http://test.com/video1.flv"
test.append("href=\"http://test.com/video\"" + a + ".flv\" ");
You have an extraneous \" there.
test.append("href=\"http://test.com/video" + a + ".flv\" ");
Also a missing >
test.append("id=\"player\" ");
should be
test.append("id=\"player\">");
Also, your link has no content to click on
test.append("</a> ");
should be
test.append("Click me!</a> ");