Hyperlink to the respected items

Dec 23, 2011 at 7:49 PM

Below is the example from SPServices.  
I know how it make it a hyperlink by adding <a>. But I was wondering how can I click on the "title" and have it go to the respected announcement so I can get the full announcement.  Right now, it is just pulling in the data without any hyperlink.
Has anyone tried this before?

<script type="text/javascript" src="filelink/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="filelink/jquery.SPServices-0.6.2.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Announcements",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var liHtml = "<li>"  + $(this).attr("ows_Title")  + "</li>" +"< /br>";
        $("#tasksUL").append(liHtml);
      });
    }
  });
});
</script>
<ul id="tasksUL"/>

Coordinator
Dec 23, 2011 at 11:33 PM

Since you know where the Announcements list is, all you need to do is wrap the Title in the anchor tag with the href pointing to the DispForm with the ID on the Query String:

  var liHtml = "<li><a href='Lists/Announcements/DispForm.aspx?ID="  + $(this).attr("ows_ID") + "'>" + $(this).attr("ows_Title")+ "</li>" +"< /br>";

Depending on where your page is in relation to the list, you may need to change the href to the Announcements list.

M.

 

Dec 28, 2011 at 7:51 PM

Thanks Marc. That was right on point. 

I have another quick question:  When i run the GetListItems, it will display the items in the middle.  I would like it to start from the top. I thought I tried add css,  "vertical-align:text-top" but that did not work.  How can I change the default settings?

Coordinator
Dec 28, 2011 at 9:08 PM
Well, note that you are emitting the LI elements, but not an enclosing UL. You can emit whatever HTML markup you want, but make sure it's valid or you may get unexpected results.

M.
Dec 28, 2011 at 9:49 PM

Marc,

I do not understand your response.  Below is what I tried to display.   I limited it to 5 items.  If i have only one item, the item only displays in the middle instead of at the top.  As you can see below, i tried the .css().  I was successful with the $("strong").css but not the $("li").

 
$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Calendar",
       CAMLViewFields: "<ViewFields Properties='True' />",
       CAMLRowLimit: 5,    
	completefunc: function (xData, Status) {
      $(xData.responseXML).find("[nodeName='z:row']").each(function() {

....
var
liHtml = "<li>" + "<strong>" + "<a href='/Lists/Calendar/DispForm.aspx?Title=" + $(this).attr("ows_Title") + "'>" + $(this).attr("ows_Title") + "</a>" + "</strong>" + "<br>" + SPConvertDate($(this).attr("ows_EventDate")) + ", " + $(this).attr("ows_Location") + "</li>" + "<br>"; $("#CalendarUL").append(liHtml); $("strong").css({"color":"#0a2463","font-size":"12px"}); $("li").css({"text-align":"left", "vertical-align": "text-top"}); }); } }); }); </script> <ul id="CalendarUL"/></div>
Dec 28, 2011 at 10:11 PM

If you already have the <ul> on the page, you could just style that tag and your <li> elements should adhere to it unless you have other css that affects <li> tags.

Coordinator
Dec 30, 2011 at 2:06 PM

Sorry, nomar175, my reply didn't make sense, I admit. you ar putting the LI elements into a UL. I think Dan's got one approach which would probably work.

It's always tough to advise on CSS because of the "C" in it. The styles cascade from anything else you may have done at a higher level. The best suggestion is to use a DOM inspector like IE's Developer Tools and adjust the styling in the live page until you get it the way you want it and then implement that in your code.

M.