Jquery mobile

Apr 22, 2013 at 4:26 PM
Hi All,

First off, I'd like to say this is a fantastic library. I've just started using it and have been really impressed with its functionality thus far. For what its worth, I am also relatively new to Jquery and Jquery mobile, so apologies for the sloppy code.

I am running into a strange issue while trying to use SPServices with the Jquery mobile library.

I have two SPServices requests wrapped the within the following functions:

$(document).on("pageinit", function() {
$('#list li').live('click', function() {

The first writes a ul list based on entries from pulled Sharepoint. The second generates some dynamic html code and pulls data from Sharepoint based on the clicked list item.

They both work perfectly.

Now I am trying to click on a third, dynamically generated button and make a SPServices call. However, when I do this, for some reason SPServices call is returning nothing. See my code below. The '$('#like').live' function is returning blank, but the other two work fine. Any idea?
<script type="text/javascript" language="javascript">

$('#like').live('click', function() { alert($().SPServices.SPGetCurrentSite()); });

$(document).on("pageinit", function() {

$().SPServices({
    operation: "GetListItems",
    async: false,
    webURL: "/sites/rolebasedlearning/NEIMCOP",
    listName: "SignupList",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {       
      var liHtml = "<li id='" + $(this).attr("ows_ID") + "'><a href='#popup' data-role='button' data-rel='dialog' data-transition='pop'>" + $(this).attr("ows_Title") + 

"</a></il>";
        $("#list").append(liHtml);
    $("#list").listview("refresh");
    $("#one").trigger("create");
      });
    }
  });

});


$('#list li').live('click', function() {

var listid = $(this).attr("id");

alert('Selected Name=' + listid);

$().SPServices({
    operation: "GetListItems",
    async: false,
    webURL: "/sites/rolebasedlearning/NEIMCOP",
    listName: "SignupList",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='University' /><FieldRef Name='Name' /><FieldRef Name='GradYear' /><FieldRef Name='Major' 

/><FieldRef Name='GradYear' /><FieldRef Name='Minor' /><FieldRef Name='Like' /></ViewFields>",
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Text'>" + listid + "</Value></Eq></Where></Query>",
    completefunc: function (xData, Status) { 
    alert(xData.responseText);
    $(xData.responseXML).SPFilterNode("z:row").each(function() {
    var response = "<h2>" + $(this).attr('ows_Title') + "</h2>" + "<p>Major: " + $(this).attr('ows_Major') + "</p><p>Minor: " + $(this).attr('ows_Minor') + 

"</p><p>Grad Year: " + $(this).attr('ows_GradYear') + "</p><a id='like' data-role='button' data-inline='true' data-icon='back' id='" + listid + "'>" + $(this).attr

('ows_Like') + "</a>";
    $('#popup [data-role="content"]').html(response);
    $('#popup').trigger('create');
    });
    }
  });
});

</script>
Coordinator
Apr 22, 2013 at 4:40 PM
Glad you're having fun!

When you say that it returns nothing, do you mean that alert(xData.responseText); shows you nothing? If so, you might want to look at the traffic in Firebug or Fiddler to see what the issue is.

M.
Apr 22, 2013 at 4:52 PM
Edited Apr 22, 2013 at 5:01 PM
Thanks for the response Marc.

When I say it returns nothing, I am referring to the following call:
$('#like').live('click', function() { alert($().SPServices.SPGetCurrentSite()); });

This comes up as blank, whereas the two functions below that call are successfully pulling in SP data using the GetListItems call.

Is it possible the reason is because the button that I am clicking on has been dynamically created? It just seems strange since when I click on a dynamically created list item (li), I am able to successfully make a SPServices call.
Coordinator
Apr 22, 2013 at 10:11 PM
Dynamically created elements aren't a problem.

Where is the page where you're running the script?

M.
Apr 23, 2013 at 7:45 PM
Edited Apr 23, 2013 at 7:54 PM
Thanks again Marc. Turns out there was a problem with with my page being a dialog window. I removed 'data-rel='dialog'' from the button definition and I was able to make the successful call.

If one calls SPServices from a URL that looks like the following, I suppose it is not supported?
http://sharepointsite#&ui-state=dialog
Apr 23, 2013 at 8:54 PM
Calling code in a modal works. This has to be related to your code/page setup. Are you doing anything with <iframe>'s in regards to your modal?

Cheers,
Matthew
Apr 25, 2013 at 2:37 PM
Edited Apr 25, 2013 at 3:49 PM
Hi Matthew,

I don't have any iFrames. The structure of the page is as follows:
<body>
<!-- Start of first page: #one -->
<div pageone>
<div header></div>
<div content></div>
<div footer></div>
</div>
<!-- Start of second page: #popup dialog -->
<div pagetwo dialog>
<div header></div>
<div content></div>
</div>
</body>