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.
Related
I'm trying to create a form that submits pictures to database using Ajax.
The form is defined in function "new_pic" that is neither accepted nor returning errors when a picture is submitted.
After clicking submit button the flash message "please fill the form" is returned.
Please tell what did I do wrong?
db.py:
db.define_table('input_images', \
Field('action_id', type='string', unique=False, compute=lambda r: action_id ),\
Field('picture', 'upload', uploadfield='picture_file')),\
Field('picture_file', 'blob'),\
primarykey=['action_id']\
)
default.py:
import uuid
action_id = str(uuid.uuid4())
def index:
return dict()
def new_pic():
form = SQLFORM(db.input_images, buttons=[])
if form.process(session=None, formname='test').accepted:
response.flash = 'form accepted'
elif form.errors:
response.flash = 'form has errors'
else:
response.flash = 'please fill the form'
return dict(form=form)
index.html:
<div class="inner">
<form id="myform" action="#" enctype="multipart/form-data" method="post">
{{=LABEL('Upload picture', _for='picture', _class='button-25')}}
{{=INPUT(_id='picture', _name='picture', _type='file')}}
<div id="sbmt_picture">
{{=INPUT(_id='submit_btn', _name='submit_btn', _type='submit', _class='button-25')}}
</div>
<input type="hidden" name="_formname" value="test" />
</form>
</div>
<script>
jQuery('#myform').submit(function() {
ajax('{{=URL('new_pic')}}', ['picture'], 'trgt');
return false;
});
</script>
<div id="trgt"></div>
The problem was in the JS. I just found another kind of this element here: https://stackoverflow.com/a/28386477/13128766
That works for me:
<script>
jQuery(document).on("submit", "form", function(event)
{
event.preventDefault();
jQuery.ajax({
url: "{{=URL('new_pic')}}",
type: jQuery(this).attr("method"),
dataType: "JSON",
data: new FormData(this),
processData: false,
contentType: false,
success: function (data, status)
{
},
error: function (xhr, desc, err)
{
}
});
});
</script>
i have to get data from externaljson url api in yii2 framework,json url is:https://next.json-generator.com/api/json/get/EympRaB4D
<p>
<input type="button" value="Fill SELECT Dropdown List with JSON" id="bt" />
</p>
<select id="sel">
<option value="">-- Select --</option>
</select>
<p id="msg"></p>
<script>
$(document).ready(function () {
$('#bt').click(function () {
var url = "https://next.json-generator.com/api/json/get/EympRaB4D";
$.getJSON(url, function (data) {
$.each(data, function (index, value) {
// APPEND OR INSERT DATA TO SELECT ELEMENT.
$('#sel').append('<option value="' + value.company + '">' + value.country + '</option>');
});
});
});
// SHOW SELECTED VALUE.
$('#sel').change(function () {
$('#msg').text('Selected Item: ' + this.options[this.selectedIndex].text);
});
});
$(document).ready(function () {
$('#bt').click(function () {
$.ajax({
url: "https://next.json-generator.com/api/json/get/EympRaB4D",
type: "GET",
success: function (result) {
//console.log(result);
for(var dataSet in result){
$("#sel").append("<option value="+result[dataSet].company+">"+result[dataSet].country+"</option>");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
});
// SHOW SELECTED VALUE.
$('#sel').change(function () {
$('#msg').text('Selected Item: ' + this.options[this.selectedIndex].text);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p>
<input type="button" value="Fill SELECT Dropdown List with JSON" id="bt" />
</p>
<select id="sel">
<option value="">-- Select --</option>
</select>
<label id="msg"></label>
</body>
</html>
I want to save an image file in a specific folder on Cloudinary. The folder name is "userimg".
Here is my code to save without a folder.
My cloudinary and folder directory.
Cloudinary Upload API supports a folder parameter. See - https://cloudinary.com/documentation/image_upload_api_reference#upload
Please try adding:
formData.append('folder', 'userimg');
You can also include the folder in the public ID, e.g., 'myfolder/myimageid'.
Also, see:
https://support.cloudinary.com/hc/en-us/articles/202520902-Can-I-create-folders-in-my-Cloudinary-account-
the code of save an image file in specific folder on cloudinary:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div class="container">
<div class="card">
<img src="http://fillmurray.com/g/300/300" id="img-preview" />
<label class="file-upload-container" for="file-upload">
<input id="file-upload" type="file">
Select an Image
</label>
</div>
</div>
<script>
var cloudeinary_url = "your_cloudeinary_url";
var upload_presets = "your_upload_presets";
var ingpriview = document.getElementById("img-preview");
var fileupload = document.getElementById("file-upload");
fileupload.addEventListener('change',
function (event) {
var files = event.target.files[0];
var formData = new FormData();
formData.append('file', files);
formData.append('upload_preset', upload_presets);
formData.append('folder', 'itemimg'); // itemimg is folder name
axios({
url: cloudeinary_url,
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: formData
}).then(function (res) {
document.getElementById("img-preview").src = res.data.secure_url;
console.log(res);
}).catch(function (err) {
console.log(err);
});
});
</script>
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've this form
<form id="frm_main" action="#" method=POST>
<input type=hidden name="MAX_FILE_SIZE" value="100000" />
<input id='file' name="file" type="file">
<input type=submit id='btn_import' name='btn_import' value='Importar' />
<input type=hidden id="uploadResponseType" name="mimetype" value="html" />
<input type=hidden id="func" name="func" value="upload" />
<div id="uploadOutput"></div>
</form>
So, the problem became when I try to post the upleaded file. If I use ajaxSubmit function the form is submited but it doesn't return to the page; and if I use $.ajax function, it doesn't sent the uploeade file. The thing is that I need to return to the same page because I've to do some stuff with the file content. I've already tried lot of combinations but I'm still having the same results. The code to handle submit look like this
$( '#frm_main' ).bind( 'submit', function( e ) {
// e.preventDefault(); // <-- important
$( this ).ajaxSubmit({
target: '#uploadOutput', // <-- div container
type: "POST", // <-- override, just in case.
url: "/process.php", // <-- server-side handler
data: "func=upload", // <-- parameter for post purpouse
beforeSubmit: function(a,f,o) {
o.dataType = $('#uploadResponseType').val(); // should be 'html'.
$('#uploadOutput').html('Submitting...');
},
success: function(data) {
var $out = $('#uploadOutput');
$out.html('Form success handler received: <strong>' + typeof data + '</strong>');
$out.append('<div><pre>'+ data +'</pre></div>');
}
});
return false;
});
And I've already tried with next code
$('#frm_main').bind('submit', function() {
var formdata = $(this).serialize();
$.ajax({
url: '/process.php',
data: formdata,
dataType: 'html',
success: function(data){
var $out = $('#uploadOutput');
$out.html('Form success handler received: <strong>' + typeof data + '</strong>');
}
});
return false;
});
And process.php code looks like this
switch($_POST['func']) {
case 'upload' :
$output = upload_file ();
echo $output;
break;
default :
echo "<BR/>INVALID";
break;
}
?>
Can somebody help me with this situation, please? Any help will be gratefully appreciated
Don't you need form enctype="multipart/form-data" to upload files?