Failing at getting an image via SPServices.

Jan 3, 2012 at 6:03 PM

I'm at my wits end. I've done this a dozen times with tables and drop down lists and I can't seem to get it to pull an image. Can anyone see what I'm doing wrong here? I'm still new to this so I haven't tried deviating far from the code I've received... but this works for other kinds of items. Is it because I'm using a div tag?

Here is my code:


<script type="text/javascript">
    var myQueryOptions = "<QueryOptions><ViewAttributes Scope='RecursiveAll' IncludeRootFolder='True' /></QueryOptions>";
 var myQuery = "<Query><Where><Eq><FieldRef Name='Region' /><Value Type='Text'>Region 1</Value></Eq></Where></Query>";
 var myFields = "<ViewFields><FieldRef Name='Region' /><FieldRef Name='RegionMap' /></ViewFields>";
 
$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "MFIT_RegionList",
    CAMLViewFields: myFields,
    CAMLQuery: myQuery,
    CAMLQueryOptions: myQueryOptions,

    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var imgRgn = "<img src='" + $(this).attr("ows_RegionMap")'/>";
         $("#RegionMap").append(imgRgn);
      });   
    }
  });

});


</script>

 <div id="RegionMap">Map</div>

Jan 3, 2012 at 6:15 PM

The following line will throw an error in javascript:

  var imgRgn = "<img src='" + $(this).attr("ows_RegionMap")'/>";

(missing the concatenation of the ows_regionMap value and the closing of the HTML tag... Change it to:

  var imgRgn = "<img src='" + $(this).attr("ows_RegionMap") + "'/>";

Paul

 

 

 

 

Jan 3, 2012 at 6:19 PM

I just saw that too and came back to updated it. I've fixed that and still no image showing.

Is there issues with calling SPServices more than once on a page? I do it in another CEWP in a different WP Section.

Jan 3, 2012 at 6:30 PM

No, it should work when called multiple times...

Move the " <div id="RegionMap">Map</div>" to be prior to the Script tag to see if that helps...  Also, have you validated that the web services queries actually returns results?

See if this helps to identify the problem:

<div id="RegionMap">Map</div>
<script type="text/javascript">
    var myQueryOptions = "<QueryOptions><ViewAttributes Scope='RecursiveAll' IncludeRootFolder='True' /></QueryOptions>";
 var myQuery = "<Query><Where><Eq><FieldRef Name='Region' /><Value Type='Text'>Region 1</Value></Eq></Where></Query>";
 var myFields = "<ViewFields><FieldRef Name='Region' /><FieldRef Name='RegionMap' /></ViewFields>";
 
$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "MFIT_RegionList",
    CAMLViewFields: myFields,
    CAMLQuery: myQuery,
    CAMLQueryOptions: myQueryOptions,

    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var imgRgn = "<img src='" + $(this).attr("ows_RegionMap") + "'/>";
         $("#RegionMap").append(imgRgn);
      });
      
      // Did we find any?
      $("#RegionMap").append("<div>Rows Found in MFIT_RegionList: " + $(xData.responseXML).SPFilterNode("z:row").length + "</div>");
      
      // Were images created?
      $("#RegionMap").append("<div>Images inserted: " + $("#RegionMap img").length + "</div>");
    }
  });

});

</script>

 

Jan 3, 2012 at 6:56 PM

Weird. I don't get anything with that either.

I tried putting in an Alert and I'm not getting anything there when refreshed either. It's as if it's not even running the script at all.

Jan 3, 2012 at 7:12 PM

Lets go step by step then... :)

Put the following alert prior to the $(document).read() call:

alert('jQuery loaded: ' + (jQuery !== undefined) + "\nSPServices Loaded: " + (jQuery.fn.SPServices !== undefined)); 

Paul

Jan 3, 2012 at 7:16 PM

Great minds think alike! I was just tossing around alert. It worked before and after the $(document).ready() call. And it's the same with yours. So it's somewhere in the $().SPServices function that isn't running. I don't get an alert to work anywhere within that function.

Jan 3, 2012 at 7:25 PM

What version of SPServices are you using?

Also,

Remove everything from inside the completefunc() and only leave in an alert().

What browser are you using to debug? if Firefox and you have firebug installed, look to see that a webservices call is being made and a response is being returned.

Paul.

Jan 3, 2012 at 7:33 PM

SPServices 0.7.0.

When I remove completefunc() and put in an alert in, it gives me the alert. I don't have access to Firefox at my work. I do at home, but that doesn't help me at the moment. I have IE9.

The weirdest thing about it, is it is working FINE in the other CEWP that creates a redirecting DDL. The EXACT same code except it's doing a drop down, not a div.

Jan 3, 2012 at 7:52 PM

Ok... Sounds like we are making progress...

IE9 is good.. you can step through the code in the debugger (F12).

So we know that SPServices does get triggered, and the completefunc is executed when its done with the webservice... now you can stop the execution at the alert() (the one that is inside the completefunc()) in IE9's debuger and look around to see if you can tell what is wrong... I suggest runing the following from the debuger's console:

console.log("status:" + status)

console.log("number of rows:" + $(xData.responseXML).SPFilterNode("z:row").length)

 

 

 

 

 

Jan 3, 2012 at 8:13 PM

It's responding: "Object doesn't support property or method 'SPFilterNode'" in the console. I think that's where it's breaking.

Jan 3, 2012 at 8:13 PM

And it gives the line number where SPFilterNode is.

Jan 3, 2012 at 8:29 PM

FML. My test environment was using 0.6.2.

You're amazing for hanging in there. Thanks.

Jan 3, 2012 at 8:57 PM

And one last huge kudos. Thanks for teaching me the proper way to go through this. I just wish we would have found it sooner. Had no idea bout debugging with IE9. I'll be forever in your gratitude.

Jan 3, 2012 at 9:53 PM

Glad I could help... Good Luck!