What i need is to find all list items with the same title using SPServices. I've made a CAML query from TextBox1 but have no idea what to do next. My question is: how do I change this code to accomplish my goal?
<script language="javascript" type="text/javascript">
function GetTitleMatch()
{
var Tit = $("#TextBox1").val();
$().SPServices({
operation:"GetListItems",
listName:"CustomList",
async:false,
CAMLViewFields: "<ViewFields>"+
"<FieldRef Name='Title'/>"+
"<ViewFields>",
CAMLQuery:"<Query><Where><Eq><FieldRef Name='Title'/><Value Type='Text'>" + Tit + "</Value></Eq></Where></Query>",
completefunc:function(xData,status)
{
alert($(xData.responseXML).find('[nodeName="z\\:row"]').length);
}
});
}
</script>
click
If anyone cares, the complete code should loock something like this:
<script language="javascript" type="text/javascript">
function GetTitleMatch()
{
var Tit = $(".TextBox1").val();
alert(Tit);
var itemCount=0;
var queryText = "<Query><Where><Eq><FieldRef Name='Title'/><Value Type='Text'>" + Tit + "</Value></Eq></Where></Query>";
alert(queryText);
$().SPServices({
operation: "GetListItems",
listName: "CustomList",
async: false,
CAMLQuery: queryText,
completefunc: function (xData, status) {
alert(xData.responseXML.xml);
itemCount = $(xData.responseXML.xml).find("rs\\:data, data").attr("ItemCount");
alert(itemCount);
$(".TextBox3").val(itemCount);
}
});
}
</script>
<a onclick="javascript:GetTitleMatch();">click</a>
All I neded to do was use .attr("ItemCount")
Related
My NodeJS GET route:
router.get('/stores', function (req, res, next) {
errorMsg = req.flash('error')[0];
successMsg = req.flash('success')[0];
Product.find(function (err, products) {
// console.log(products)
res.render('admin/stores', {
layout: 'admin-map.hbs',
stores: products,
errorMsg: errorMsg,
GOOGLE_APIKEY: process.env.GOOGLE_APIKEY,
noErrors: 1
});
});
The route /stores returns json data which holds latitude and longitude and I want it in my script tag of map.html with loop, to render the pins on the map. Below, the script:
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
alert(this.stores);
var mapOptions = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.433053, 78.412172),
map: map,
draggable:true,
icon:'/scripts/img/logo-footer.png'
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({ });
infowindow.open(map,marker);
}
</script>
<!-- ... -->
</head>
</html>
How can I do it?
It seems you need to follow two steps
1. Pass data from hbs to script
Using triple brackets syntax
<script>
let stores = {{{ stores }}}; // the triple brackets
console.log('Data : ', stores);
function loadMap() {
...
Check if data is being printed in console? If yes your data is available in the front-end script and you can
2. Loop through it
...
for (let i = 0; i < stores.length; i++) {
// the JS loop instead of hbs one, because we are on front-end
var marker = new google.maps.Marker({
position: new google.maps.LatLng(stores[i].lat, stores[i].lng), // whatever applies
map: map,
draggable:true,
icon:'/scripts/img/logo-footer.png'
});
}
And donot need to call setMap(), you have already set the map in map: map above
the answer is inside fronted script i can have an object declared globally and this double flower brackets works fine with them
<script>
function loadMap() {
alert(this.stores);
var mapOptions = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
{{#each stores}}
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.433053, 78.412172),
map: map,
draggable:true,
icon:'/scripts/img/logo-footer.png'
});
{{/each}}
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({ });
infowindow.open(map,marker);
}
</script>
I have to add a link in left part of suitebar of my site in Shareoint 2013.
I have tried using JS. My code is :-
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script>
var customLi = "<li class='ms-core-suiteLink'><a class='ms-core-suiteLink-a' target='_blank' href='https://rootsite/SitePages/Home.aspx'>Home</a></li>";
if(jQuery("div#suiteLinksBox").children("ul").length > 0){
jQuery("div#suiteLinksBox").children("ul").append(customLi);
}
else {
jQuery("div#suiteLinksBox").html('<ul class="ms-core-suiteLinkList">' + customLi + '</ul>' )
}
</script>
I am not getting the desired result. Can someone suggest some other way or help me with the solution.
Try this.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
var customLi = "<li class='ms-core-suiteLink'><a class='ms-core-suiteLink-a' target='_blank' href='https://rootsite/SitePages/Home.aspx'>Home</a></li>";
if ($("div#suiteLinksBox").children("ul").length > 0) {
$("div#suiteLinksBox").children("ul").append(customLi);
}
else {
$("div#suiteLinksBox").html('<ul class="ms-core-suiteLinkList">' + customLi + '</ul>')
}
})
</script>
is there any tool or webPart to add banners to sharepoint 2013 that support responsiveness?
You don't need anything SP specific. I've used flexslider in the past for SP and otherwise. Just use REST to populate from your list and call flexslider in the ajax success callback.
(Too long for a comment) I do on my other machine - this is a 2010 example where I used SPServices to do the same thing. Same concept - generate your markup with the response data and apply flexslider after the markup is populated.
$(document).ready(function() {
$().SPServices({
operation: "GetListItems",
async: false,
webURL: "/",
listName: "Home Slider",
CAMLViewFields: "<ViewFields><FieldRef Name='ImageLink' /><FieldRef Name='Title' /><FieldRef Name='SubTitle' />"
+ "<FieldRef Name='LinkText' /><FieldRef Name='LinkURL' /><FieldRef Name='Description' />"
+ "</ViewFields>",
completefunc: function (xData, Status) {
var myslider;
var liHtml = "";
$(xData.responseXML).SPFilterNode("z:row").each(function() {
liHtml += "<li style='background:url(" + $(this).attr("ows_ImageLink") + ") no-repeat center top;'>"
+ "<div class='slideWrap'><div class='slideInnerWrap'>"
+ "<h2>" + $(this).attr("ows_Title") + "</h2>"
+ "<a href='" + $(this).attr("ows_LinkURL") + "' class='btn btnOrange btnLarge' >"
+ $(this).attr("ows_LinkText") + "</a>"
+ "</div></div>"
+ "</li>";
});
$("#sliders").append("<ul class='slides'>" + liHtml + "</ul>");
$('.flexslider').flexslider({
directionNav: true,
animation: "slide"
});
}
});
});
Is it possible to create a form visual webpart with fields like name, email, address and submit button. After user submit data should be submitted to sharepoint custom list here custom list will have same fields like name, email, address. I created one custom list.
I search on internet but i didn't find any solutions for that. Also am new to sharepoint. If any one can provide some links it will be helpful.
Thanks
Yes, this is very possible using jQuery and AJAX.
So, lets say that, just to be brief, this is your input:
<input type='text' id='name' />
<input type='submit' id='submitdata' value='submit />
Using jquery, you would do this:
$(function(){
$('#submitdata').click(function(){
//this gets the value from your name input
var name = $('#name').val();
var list = "PutYourListNameHere";
addListItem(name, list);
});
});
function addListItem(name, listname) {
var listType = "PutTheTypeOfListHere";
// Prepping our update & building the data object.
// Template: "nameOfField" : "dataToPutInField"
var item = {
"__metadata": { "type": listType},
"name": name
}
// Executing our add
$.ajax({
url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify(item),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function (data) {
console.log("Success!");
console.log(data); // Returns the newly created list item information
},
error: function (data) {
console.log("Error!");
console.log(data);
}
});
}
This SHOULD work. I am not at work where my SharePoint station is, so if you are still having issues with this, let me know.
You may use SPServices also, It will work
<script type="text/javascript" src="~/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="~/jquery.SPServices-0.7.2.min.js"></script>
HTML
<input type='text' id='name' />
<input type='text' id='email' />
<input type='text' id='mobile' />
<input type='submit' id='submit' value='Submit' />
SPServices
<script type="text/javascript">
$("#submit").click(function(){
var Fname=$("#name").val();
var Email =$("#email").val();
var Mobile =$("#mobile").val();
$().SPServices({
operation: "UpdateListItems",
async: false,
batchCmd: "New",
listName: "YourCustomListName",
valuepairs: [["Fname", Fname], ["Email", Email], ["Mobile", Mobile]], //"Fname","EMail" and "Mobile" are Fields Name of your custom list
completefunc: function(xData, status) {
if (status == "success") {
alert ("Thank you for your inquiry!" );
}
else {
alert ("Unable to submit your request at this time.");
}
}
});
});
</script>
is there a way of getting the nivo slider to use effects in order ie:
slideUp --> then slideDown --> then slide slideUp ect...
rather then using effect: "slideUp,slideDown" which randomly fires either effect.
regards sam
I wrote this for you. (Note, I have not tested it or validated it works, but the theory is sound)
<script>
var slideEffects = new Array('fade', 'slide', 'fade');
var currentEffectIndex = 0;
$(document).ready(function(){
$('#slider').nivoSlider({
effect: slideEffects[0],
afterChange: function(){
currentEffectIndex++;
$(this).effect = slideEffects[currentEffectIndex % slideEffects.length];
},
};
});
</script>
Here is a correct version.
<script type="text/javascript">
var slideEffects = new Array('fade', 'slide', 'fade');
var currentEffectIndex = 0;
$(document).ready(function(){
$('#slider').nivoSlider({
effect: slideEffects[0],
afterChange: function(){
currentEffectIndex++;
$(this).effect = slideEffects[currentEffectIndex % slideEffects.length];
},
});
});
</script>