Use spservices to change text color
Hello All,
I am using SharePoint 2010
The following code works without any error. It highlights the text of the item based on the value in the status column. If the status is "Complete", "In-Progress" or "Not Started", the text gets color. For this to work though, the title column will have to be on the page. I don't want the title on the page.
I would like to change the color of the text based on the value I get from the status column using spservices "Getlistitems" operations. Here's what I have so far:
Here's the error I get:
Object doesn't support this property or method.
Any help would be much appreciated.
Thanks!
I am using SharePoint 2010
The following code works without any error. It highlights the text of the item based on the value in the status column. If the status is "Complete", "In-Progress" or "Not Started", the text gets color. For this to work though, the title column will have to be on the page. I don't want the title on the page.
<script language="javascript" src="/CNportal/js/jquery-1.8.2.js" type="text/javascript"></script><script language="javascript" src="/CNportal/js/jquery-1.8.2.min.js" type="text/javascript"></script><script type="text/javascript">
$(function(){
$("td.ms-vb2").each(function(){
var that = $(this);
if (that.text() == "Complete"){
that.parent("tr").children("td").css("color", "#0000FF");
}else if (that.text() == "In-Progress"){
that.parent("tr").children("td").css("color", "#008000");
}else if (that.text() == "Not Started"){
that.parent("tr").children("td").css("color", "#FF0000");
}
});
});</script>I would like to change the color of the text based on the value I get from the status column using spservices "Getlistitems" operations. Here's what I have so far:
<script language="javascript" src="/CNportal/js/jquery-1.8.2.js" type="text/javascript"></script><script language="javascript" src="/CNportal/js/jquery-1.8.2.min.js" type="text/javascript"></script><script type="text/javascript">
$().SPServices({
operation: "GetListItems",
async: false,
listName: "Deliverables",
CAMLViewFields: "<ViewFields>" +
"<FieldRef Name='Status' />" +
"</ViewFields>",
CAMLQuery: "<Query>" +
"<OrderBy>" +
"<FieldRef Name='GovtLead' Ascending='False' />" +
"</OrderBy>" +
"</Query>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var that = $(this);
var status = $(this).attr("ows_Status");
if (status == "Complete")
{
alert("Complete");
}
});
}
});</script>Here's the error I get:
Object doesn't support this property or method.
Any help would be much appreciated.
Thanks!
ASKER
I still get the same error.
The error points to the following line:
jQuery().SPServices({
same as before
<script language="javascript" src="/CNportal/js/jquery-1.8.2.js" type="text/javascript"></script><script language="javascript" src="/CNportal/js/jquery-1.8.2.min.js" type="text/javascript"></script><script type="text/javascript">
jQuery().SPServices({
operation: "GetListItems",
async: false,
listName: "Deliverables",
CAMLViewFields: "<ViewFields>" +
"<FieldRef Name='Status' />" +
"</ViewFields>",
CAMLQuery: "<Query>" +
"<OrderBy>" +
"<FieldRef Name='GovtLead' Ascending='False' />" +
"</OrderBy>" +
"</Query>",
completefunc: function (xData, Status) {
jQuery(xData.responseXML).SPFilterNode("z:row").each(function() {
var that = jQuery(this);
var status = jQuery(this).attr("ows_Status");
if (status == "Complete"){
that.parent("tr").children("td").css("color", "#0000FF");
}else if (that.text() == "In-Progress"){
that.parent("tr").children("td").css("color", "#008000");
}else if (that.text() == "Not Started"){
that.parent("tr").children("td").css("color", "#FF0000");
}
});
}
});</script>The error points to the following line:
jQuery().SPServices({
same as before
Hi,
I tried to reproduce your situation and as always: IWOMM.
What do you want to achieve with the second code?
Where do you want to change the color?
There is just an alert output (which I get twice as I have to list items with status completed).
The following code works on my dev machine (using the OOTB tasks list):
From your code:
- Please ensure that you load the jquery library only once (it does not make sense to load both min and full version)
- Ensure that the check on "Complete" is correct (OOTB status list has "Completed")
Perhaps you might want to add a screenshot and/or a more detailed explanation.
HTH
Rainer
I tried to reproduce your situation and as always: IWOMM.
What do you want to achieve with the second code?
Where do you want to change the color?
There is just an alert output (which I get twice as I have to list items with status completed).
The following code works on my dev machine (using the OOTB tasks list):
<script type="text/javascript" src="/sites/ee/Assets/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/sites/ee/Assets/jquery.SPServices-0.7.2.min.js"></script>
<script type="text/javascript">
jQuery().SPServices({
operation: "GetListItems",
async: false,
listName: "Tasks",
CAMLViewFields: "<ViewFields>" +
"<FieldRef Name='Status' />" +
"</ViewFields>",
CAMLQuery: "<Query>" +
"<OrderBy>" +
"<FieldRef Name='Priority' Ascending='False' />" +
"</OrderBy>" +
"</Query>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
//var that = $(this);
var status = $(this).attr("ows_Status");
if (status == "Completed")
{
alert("Complete");
}
});
}
});
</script>From your code:
- Please ensure that you load the jquery library only once (it does not make sense to load both min and full version)
- Ensure that the check on "Complete" is correct (OOTB status list has "Completed")
Perhaps you might want to add a screenshot and/or a more detailed explanation.
HTH
Rainer
Sorry,
just saw your comment.
In your second script you did not reference the SPServices library.
Perhaps thats the issue?
HTH
Rainer
just saw your comment.
In your second script you did not reference the SPServices library.
Perhaps thats the issue?
HTH
Rainer
ASKER
Thanks!
What do you think about the code I have? I don't get any errors but it's also not changing the text-color.
What do you think about the code I have? I don't get any errors but it's also not changing the text-color.
<script language="javascript" src="/CNportal/js/jquery-1.8.2.js" type="text/javascript"></script><script language="javascript" src="/CNportal/js/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script><script type="text/javascript">
jQuery().SPServices({
operation: "GetListItems",
async: false,
listName: "Deliverables",
CAMLViewFields: "<ViewFields>" +
"<FieldRef Name='Status' />" +
"</ViewFields>",
CAMLQuery: "<Query>" +
"<OrderBy>" +
"<FieldRef Name='GovtLead' Ascending='False' />" +
"</OrderBy>" +
"</Query>",
completefunc: function (xData, Status) {
jQuery(xData.responseXML).SPFilterNode("z:row").each(function() {
var that = jQuery(this);
var status = jQuery(this).attr("ows_Status");
if (status == "Complete"){
that.parent("tr").children("td").css("color", "#0000FF");
}else if (that.text() == "In-Progress"){
that.parent("tr").children("td").css("color", "#008000");
}else if (that.text() == "Not Started"){
that.parent("tr").children("td").css("color", "#FF0000");
}
});
}
});</script>ASKER
I did an alert on status, alert(status) and that works so I think the following code is wrong:
that.parent("tr").children
that.parent("tr").children
ASKER
So I think the problem is might be "that".
Any ideas?
Any ideas?
Hi,
with "that" you are referring to the response document from the SPService call, and nothing on the page.
To you want to create a complete new output?
Or do you want to change the color of an existing e.g. list web part?
This might not be possible as you have no "link / relation" from the SPService result to the list view web part.
Can you please explain, what output (table) you want to colorize? Perhaps you can attach a screenshot and the existing HTML output of the page (makes jQuery selectors easier to build ;-))
HTH
Rainer
with "that" you are referring to the response document from the SPService call, and nothing on the page.
To you want to create a complete new output?
Or do you want to change the color of an existing e.g. list web part?
This might not be possible as you have no "link / relation" from the SPService result to the list view web part.
Can you please explain, what output (table) you want to colorize? Perhaps you can attach a screenshot and the existing HTML output of the page (makes jQuery selectors easier to build ;-))
HTH
Rainer
ASKER
As you can see from the image below, the color of text is based on the value of the Status column. I do not want the status column to show, that's why I though spservices would hellp. I would query the list and color the text of a row based on the "ows_status". Hope that makes sense.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
It worked
I would like to test your script but have to wait to get my SP2010 dev machine.
In the meantime you might want to change your jQuery calls to not use "$" as jQuery ref but use it with no-conflicts state "jQuery" (because SP 2010 already loads an older version of jQuery).
See here:
http://www.stephanrocks.com/2011/10/05/_spbodyonloadfunctionnames-in-sharepoint-vs-jquerys-document-ready/
Please stay tuned
HTH
Rainer