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"/>
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 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>
Here is what I have so far...
<html>
<head>
<title>addForm</title>
<link href="css/addForm.css" rel="stylesheet" type="text/css">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<script type="text/javascript" src="../lib/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery/jquery.autocomplete.min.js"></script>
</head>
<body>
<div>
<form id="addForm" name="addForm" method="post" action="">
...
<div id="container">
<p id="add_field">
<label>Add A Class Code</label>It may take a moment for your Class Code to appear in the dropdown box.
</p>
</div>
<label>Class Screens E: </label>
<select name="ClassScreenE" id="ClassScreenE" size="5"></select>
<br>
...
</form>
</div>
<script language="javascript" type="text/javascript">
$(function(){
var count = 0;
$('p#add_field').on('click', function(){
count += 1;
$('#container').append(
'<label>ClassCode: </label>' + '<input type="text" class="autocomplete" name="ClassCode[]" id="ClassCode_' + count + '" size="34" maxlength="3">' + ' Payroll: ' + '<input type="text" name="Payroll[]" id="Payroll_' + count + '" size="10" onKeyPress="return numbersonly(this, event)">' + '<br>')
$(".autocomplete").autocomplete("scripts/findClassCode.php")
});
})
**//Edited in the following bit from Femi
//This seems to work when running 'jQuery("#ClassCode_" + i).val();' in Chrome's Inspector
//Now I need to get a solid value assigned when looping through so I can dynamically call each value to affect the a select box.
var val, i = 1, inp = jQuery("#ClassCode_" + i);
while(inp.length > 0){
// get the value
val = inp.val();
++i;
inp = jQuery("#ClassCode_" + i);
}**
</script>
</body>
</html>
All of this works perfectly. When I click the link, it generates the next set of fields while maintaining their attributes so the autocomplete piece will work. I now need to use the results of each "ClassCode_' + count + '" within the form to determine what will dynamically appear in another select box pulling data from MySQL. My issue is converting the dynamic value into a variable that can be used without having to submit the form. I've spent the day scouring the Internet to get this one working to no avail. Does anyone have any suggestions?
A little pedantic, but:
var val, i = 0, inp = jQuery("#container").find("input").find("#ClassCode_" + i);
while(inp.length > 0){
// get the value
val = inp.val();
++i;
inp = jQuery("#container").find("input").find("#ClassCode_" + i);
}
Try that?
How do i Send this "UDID" to a remote REST API. ? Any Scripts ?, i am using following script to get Unique Identifier (UDID) using Phonegap
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is ready
//
function onDeviceReady() {
var element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Name: ' + device.name + '<br />' +
'Device PhoneGap: ' + device.phonegap + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Version: ' + device.version + '<br />';
}
</script>
Loading device properties...
How do i Send this "UDID" to a remote REST API. ? Any Scripts ?
Just do a ajax request to the api?
You can then specify the get and post parameters and put the UDID in it.
Edit:
Some good documentation with an example:
http://www.peej.co.uk/articles/rich-user-experience.html