I have created one user interface which i am displaying in the SharePoint modal. Below is the code where am passing the HTML content to SP.UI.ModalDialog.showModalDialog.
var content = document.createElement('div');
content.className = 'shareDiv';
content.innerHTML = "<head>" +
"<title>Version Cleanup</title>" +
"</head>" +
"<table cellpadding='10px' cellspacing='10px'>" +
"<tr>"+
"<td>" +
"<input type='text' id='createdBeforeDate' />" +
"</td>" +
"</tr>" +
"</table>";
var options = {
title: 'Version Cleanup',
showClose: true,
allowMaximize: false,
html: content
};
SP.UI.ModalDialog.showModalDialog(options);
For time being I have removed extra html content to make it brief. So here I want to use SharePoint datepicker for createdBeforeDate textbox. As of now I am using Jquery-ui.js file to make it a datepicker. Is there any way to use SharePoint datepicker in the SP.UI.ModalDialog.showModalDialog? Thanks in advance.
Please check the following code.
<script type="text/javascript" src="/_layouts/15/datepicker.js"></script>
<script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#showModalDialog").click(function(){
OpenInformationDialog();
});
});
function OpenInformationDialog() {
var content = document.createElement('div');
content.className = 'shareDiv';
content.innerHTML = "<head>" +
"<title>Version Cleanup</title>" +
"</head>" +
"<table cellpadding='10px' cellspacing='10px'>" +
"<tr>"+
"<td>" +
"<input type='text' id='createdBeforeDate' />" +
"<iframe id='createdBeforeDateDatePickerFrame' title='Select a date from the calendar.' style='display:none; position:absolute; width:200px; z-index:101;' src='/_layouts/15/images/blank.gif?rev=23' class='owl-date-picker'></iframe>"+
"<a role='button' onclick='clickDatePicker(\"createdBeforeDate\", \"/_layouts/15/iframe.aspx?cal=1&lcid=2057&langid=1033&tz=-04:00:00.0009373&ww=0111110&fdow=1&fwoy=2&hj=0&swn=false&minjday=109207&maxjday=2666269&date=\", \"\", event); return false;' href='#'>"+
"<img id='createdBeforeDateDatePickerImage' alt='Select a date from the calendar.' src='/_layouts/15/images/calendar_25.gif?rev=23' border='0'></a>"+
"</td>" +
"</tr>" +
"</table>";
var options = {
title: 'Version Cleanup',
showClose: true,
allowMaximize: false,
html: content
};
SP.UI.ModalDialog.showModalDialog(options);
}
</script>
<input type='button' id='showModalDialog' value="Show Modal Dialog"/>
Related
I'm trying to use REST API in SharePoint to getlistitems to display the link from a hyperlink field from my sharepoint list.
I AM successfully using the code to display the title field - but NOT the url from the hyperlink field.
I've tried appending the url in the code below with "/_api/web/lists/getbytitle('test')/items**?$select=URL**"
without success.
<html>
<body>
<div>
<input type="button" id="btnSubmit" value="Get List Data using Rest API">
</div>
<div id="divResults" unselectable="on"></div>
<script src="/jquery.com/jquery-3.5.1.min.js" unselectable="on"></script>
<script unselectable="on">
$(function () {
$("#btnSubmit").on("click", function () {
getListData();
});
});
function getListData() {
var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('test')/items";
$.ajax({
url: fullUrl,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
},
success: onQuerySucceeded,
error: onQueryFailed
});
}
function onQuerySucceeded(data) {
var listItemInfo = '';
$.each(data.d.results, function (key, value) {
listItemInfo += '<b>Title:</b> ' + value.Title + '<br />';
});
$("#divResults").html(listItemInfo);
}
function onQueryFailed() {
alert('Error!');
}
</script>
</body>
</html>
In onQuerySucceeded function, Try this line:
listItemInfo += '<b>UrlFromHyperLinkField:</b> ' + value.TestHyperLink.Url+ '<br />';
In my side, the HyperLink named "TestHyperLink", you can replace this field name with yours to make it work.
I'm trying to use JQUERY-file-upload plugin to upload multiple files, after I added the container and file field, and try to upload, I can select multiple files, but the select files not be shown in the template table list.Below you may find the details:
The input and table as below in the html template:
<input id="fileupload" type="file" name="files[]" multiple>
<table role="presentation"><tbody class="files"></tbody></table>
added the JS library and CSS as below:
<script src="{% static "js/jquery.ui.widget.js" %}" ></script>
<script src="{% static "js/jquery.iframe-transport.js" %}" ></script>
<script src="{% static "js/jquery.fileupload.js" %}" ></script>
<script src="{% static "js/jquery.fileupload-ui.js" %}" ></script>
<link href="{% static "css/jquery.fileupload.css" %}" rel="stylesheet">
<link href="{% static "css/jquery.fileupload-ui.css" %}" rel="stylesheet">
with below JS, I can select multiple files, but the selected files didn't show in the template table:
$('#fileupload').fileupload({
filesContainer: $('table.files'),
uploadTemplateId: null,
downloadTemplateId: null,
replaceFileInput:false,
uploadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-upload fade">' +
'<td><span class="preview"></span></td>' +
'<td><p class="name"></p>' +
'<div class="error"></div>' +
'</td>' +
'<td><p class="size"></p>' +
'<div class="progress"></div>' +
'</td>' +
'<td>' +
(!index && !o.options.autoUpload ?
'<button class="start" disabled>Start</button>' : '') +
(!index ? '<button class="cancel">Cancel</button>' : '') +
'</td>' +
'</tr>');
row.find('.name').text(file.name);
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.error').text(file.error);
}
rows = rows.add(row);
});
return rows;
},
downloadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-download fade">' +
'<td><span class="preview"></span></td>' +
'<td><p class="name"></p>' +
(file.error ? '<div class="error"></div>' : '') +
'</td>' +
'<td><span class="size"></span></td>' +
'<td><button class="delete">Delete</button></td>' +
'</tr>');
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.name').text(file.name);
row.find('.error').text(file.error);
} else {
row.find('.name').append($('<a></a>').text(file.name));
if (file.thumbnailUrl) {
row.find('.preview').append(
$('<a></a>').append(
$('<img>').prop('src', file.thumbnailUrl)
)
);
}
row.find('a')
.attr('data-gallery', '')
.prop('href', file.url);
row.find('button.delete')
.attr('data-type', file.delete_type)
.attr('data-url', file.delete_url);
}
rows = rows.add(row);
});
return rows;
}
});
Any idea on what's wrong on my code? Any help will be appreciated, thanks in advance!
I am using jquery file upload plugin for uploading files to my server but when server returns a json how to display that data without my page refreshing.I know that many posts says using iframe we can acheive i am very new to jquery and ajax can any figure it out and help me thank you in advance.
$('#fileupload').fileupload({
xhrFields: {withCredentials: true},
url: "fileUpload.do?",
type:"POST",
autoUpload: true,
formdata:{name:'FolderId',value:getfolderId()},
});
function getfolderId(){
var FolderId
alert();
$('#fileupload').on("click",function(){
FolderId=document.getElementById('currentFolder').value;
document.getElementById('selectedFolder').value = FolderId;
});
return FolderId;
}`
</form>`<form id="fileupload" on action="fileUpload.do" method="POST" enctype="multipart/form-data">
<div class="row fileupload-buttonbar">
<label for="form-upload">
<img src="htdocs/images/add_file.png"
style="width: 20px; height: 20px; border: 0" >
</label>
<input id="form-upload" type="file" name="upload" multiple style="opacity: 0; filter:alpha(opacity: 0);">
<im:hidden name="selectedFolder" id="selectedFolder" value="1" />
</div>
<div class="col-lg-5 fileupload-progress fade">
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<div class="progress-extended"> </div>
</div>
</div>
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>`
$('#addFile-link').bind("click",function(){
var FolderId
FolderId=document.getElementById('currentFolder').value;
document.getElementById('selectedFolder').value = FolderId;
if( FolderId==" " || FolderId==0){
$('#input').prop('disabled', true);
showFileMSg();
//alert("kindly select a folder to upload files");
}
else{
$('#input').prop('disabled', false);
$('#fileupload').fileupload({
xhrFields: {withCredentials: true},
url: "fileUpload.do?",
type:"POST",
dataType : "JSON",
autoUpload: true,
formdata:{name:'FolderId',value:FolderId},
disableImagePreview:true,
filesContainer: $('table.files'),
uploadTemplateId: null,
downloadTemplateId: null,
uploadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-upload fade">' +
'<td><span class="preview"></span></td>' +
'<td><p class="name"></p>' +
'<div class="error"></div>' +
'</td>' +
'<td><p class="size"></p>' +
'<div class="progress"></div>' +
'</td>' +
'<td>' +
(!index && !o.options.autoUpload ?
'<button class="start" disabled>Start</button>' : '') +
(!index ? '<button class="cancel">Cancel</button>' : '') +
'</td>' +
'</tr>');
row.find('.name').text(file.name);
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.error').text(file.error);
}
rows = rows.add(row);
});
return rows;
},
downloadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-download fade">' +
'<td><span class="preview"></span></td>' +
'<td><p class="name"></p>' +
(file.error ? '<div class="error"></div>' : '') +
'</td>' +
'<td><span class="size"></span></td>' +
'<td><button class="delete">Delete</button></td>' +
'</tr>');
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.name').text(file.name);
row.find('.error').text(file.error);
} else {
row.find('.name').append($('<a></a>').text(file.name));
if (file.thumbnailUrl) {
row.find('.preview').append(
$('<a></a>').append(
$('<img>').prop('src', file.thumbnailUrl)
)
);
}
row.find('a')
.attr('data-gallery', '')
.prop('href', file.url);
row.find('button.delete')
.attr('data-type', file.delete_type)
.attr('data-url', file.delete_url);
}
rows = rows.add(row);
});
return rows;
},
always:function (e, data) {
$.each( function () {
$(this).removeClass('fileupload-processing');
});
},
done: function (e, data) {
$('.template-upload').remove();
$.each(data.files, function (index, file) {
openFolder(FolderId);
});
},
error: function (jqXHR, textStatus, errorThrown) {
alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown);
}
/*add: function (e, data) {
$('body').append('<p class="upl">Uploading...</p>')
data.submit();
},*/
})
}
});
I have one jquery ui autocomplete input that I would like to show another dropdown after another. For example : If I type two characters of the city name like ba, it would display a dropdown contained : Addis Ababa, Baghdad, Baku, Bamako and Bangkok. If I pick one of them (Bangkok) and press a spacebar, another dropdown (at the same input box) would be displayed : Bangkok Accommodation, Bangkok Restaurants, Bangkok Sights, and Bangkok Transport. I can do this but only for the first time. When I change the keyword like ab. it should display Abu Dhabi, Abuja, etc but the dropdown fail to be displayed. Here is the script :
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var Cities = [
'Abu Dhabi',
'Abuja',
'Accra',
'Amsterdam',
'Addis Ababa',
'Baghdad',
'Baku',
'Bamako',
'Bangkok',
'Beijing',
'Cairo',
'Canberra',
'Caracas'
];
$('#dest').autocomplete({
source: Cities,
minLength: 2,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).blur();
$(this).focus();
//the second autocomplete
var more=[
ui.item.value + ' Accommodation',
ui.item.value + ' Restaurants',
ui.item.value + ' Sights',
ui.item.value + ' Transport'
];
$('#dest').autocomplete({
source: more,
select: function (event, ui) {
$(this).val(ui.item.value);
}
});
}
});
});
</script>
</head>
<body>
<div>
<span><em><strong>City</strong></em></span>
<br />
<span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span>
</div>
</body>
</html>
I dont want to use another input box for this.
http://jsfiddle.net/Lngzbjc6/5/
After many trying, I got the solution (I dont know if this is the best). Here is the full code.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var Cities = [
'Abu Dhabi',
'Abuja',
'Accra',
'Amsterdam',
'Addis Ababa',
'Baghdad',
'Baku',
'Bamako',
'Bangkok',
'Beijing',
'Cairo',
'Canberra',
'Caracas'
];
$('#dest').autocomplete({
source: Cities,
minLength: 2,
select: function (event, ui) {
$(this).val(ui.item.value);
$('#temp_val').val(ui.item.value);
$(this).blur();
$(this).focus();
//the second autocomplete
var more=[
ui.item.value + ' Accommodation',
ui.item.value + ' Restaurants',
ui.item.value + ' Sights',
ui.item.value + ' Transport'
];
$('#dest').autocomplete({
source: more,
select: function (event, ui) {
$(this).val(ui.item.value);
$('#temp_val').val(ui.item.value);
}
});
}
});
$('#dest').keypress(function(event){
var dest = $.trim($('#dest').val());
var temp_val = $.trim($('#temp_val').val());
if(temp_val != ''){
if(event.which != 32)
$('#dest').autocomplete('option','source',Cities);
else{
var arr=[' Accommodation',' Restaurants',' Sights',' Transport'];
var found_arr='';
$.each(arr,function(index,value){
if(temp_val.indexOf(value) >= 0){
found_arr=value;
return false;
}
});
if(found_arr != '')
temp_val=temp_val.replace(found_arr,'');
var more=[
temp_val + ' Accommodation',
temp_val + ' Restaurants',
temp_val + ' Sights',
temp_val + ' Transport'
];
$('#dest').autocomplete('option','source',more);
}
}
});
});
</script>
</head>
<body>
<div>
<span><em><strong>City</strong></em></span>
<br />
<span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span>
<input type="hidden" id="temp_val" name="temp_val" value="">
</div>
</body>
</html>
I'm trying to get a week of dates with data for each day to popup when I hover over the week. I can get it to popup up a display if I click on a date in a week, but I want it to happen on a mouseover/mouseenter. Here is the code I have:
<html>
<head>
<link href="./jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="./jquery.min.js"></script>
<script src="./jquery-ui.min.js"></script>
<script type="text/javascript" src="./popup.js"></script>
<script>
var dateString;
var sundayDate;
var mondayDate;
var tuesdayDate;
var wednesdayDate;
var thursdayDate;
var fridayDate;
var saturdayDate;
$(document).ready(function() {
$("#datepicker").datepicker({
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = new $(this).datepicker('getDate');
sundayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
mondayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
tuesdayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
wednesdayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
thursdayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
fridayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
saturdayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
}
});
$('td a').live('mouseenter', function () {
popup('<table border="1" width="350">' +
' <tr>' +
' <th>Su</th>' +
' <th>Mo</th>' +
' <th>Tu</th>' +
' <th>We</th>' +
' <th>Th</th>' +
' <th>Fr</th>' +
' <th>Sa</th>' +
' </tr>' +
' <tr height= "50px">' +
' <td valign="top" width = "50px">' + sundayDate.getDate() + '</td>' +
' <td valign="top" width = "50px">' + mondayDate.getDate() + '</td>' +
' <td valign="top" width = "50px">' + tuesdayDate.getDate() + '</td>' +
' <td valign="top" width = "50px">' + wednesdayDate.getDate() + '</td>' +
' <td valign="top" width = "50px">' + thursdayDate.getDate() + '</td>' +
' <td valign="top" width = "50px">' + fridayDate.getDate() + '</td>' +
' <td valign="top" width = "50px">' + saturdayDate.getDate() + '</td>' +
' </tr>' +
'</table>');
});
});
</script>
</head>
<body>
<div class="demo">
<div id="datepicker"></div>
</div>
</body>
</html>
I had read something about using .on instead of .live, as that is the current method, but I still am lost as to how to get a date to get selected on a "mouseover" and it to pupup the current date. I can handle formating the week's table look and inputing the data, but I want the date the mouse is over to be selected and trigger the onSelect action.
Thanks in advance for any repsonse to this.
I think you can trigger this by having a button or other object that contains something to the effect of:
<label onmouseover="mouseenter">move here</label>