views:

193

answers:

1

I'm having problems implementing google slideshow (http://www.google.com/uds/solutions/slideshow/index.html) to my web application by loading it using a jquery load() function.

index.html:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<div id="moshe"></div>

<script type="text/javascript">

 $(document).ready(function(){
 $('#moshe').load('test.html');
 });

</script>

test.html:

<script type="text/javascript">
function load() {
  var samples = "http://dlc0421.googlepages.com/gfss.rss";
  var options = {
    displayTime: 2000,
    transistionTime: 600,
    linkTarget : google.feeds.LINK_TARGET_BLANK
  };
  new GFslideShow(samples, "slideshow", options);

}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>
<div id="slideshow" class="gslideshow" style="width:300px;height:300px;position:relative; border: 2px solid blue">Loading...</div>

When i execute the test.html, it loads the slideshow just fine. when i try to load using index.html that actually calls Jquery's $.load() function that loads the content of test.html into a specific div element, i see that the gallery is loading on that div, but when it's about to show images the entire page clears and all i have is a blank page.

Any ideas ?


a different version of index.html without using jquery:

<script type="text/javascript">
   function makeRequest(url) {
        var httpRequest;

       if (window.XMLHttpRequest) { // Mozilla, Safari, ...
           httpRequest = new XMLHttpRequest();
           if (httpRequest.overrideMimeType) {
               httpRequest.overrideMimeType('text/xml');
               // See note below about this line
           }
       }
       else if (window.ActiveXObject) { // IE
           try {
               httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
           }
           catch (e) {
               try {
                   httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
               }
            catch (e) {}
        }
       }

      if (!httpRequest) {
         alert('Giving up :( Cannot create an XMLHTTP instance');
         return false;
      }
      httpRequest.onreadystatechange = function() { alertContents(httpRequest); };
      httpRequest.open('GET', url, true);
     httpRequest.send('');

  }

function alertContents(httpRequest) {

    if (httpRequest.readyState == 4) {
        if (httpRequest.status == 200) {
            document.getElementById('moshe').innerHTML=httpRequest.responseText;
        } else {
            alert('There was a problem with the request.');
           }
       }

   }
makeRequest('test.html');
</script>
A: 

try putting

$('#moshe').load('test.html');

into

$(document).ready(function(){
    $('#moshe').load('test.html');
});

also, i don't know if you copied or typed this in, but you have

<script style="text/javascript">

when you want

<script type="text/javascript">

i personally use:

<script language="javascript">

but i'm not sure which is best.

Brandon H
thank you for your assistance, unfortunately the fixed script produces the same results.
ufk
what if you call your load function something else. perhaps this is interfering with something else called load?
Brandon H
i added another code sample without the usage of jquery and the results are a bit different. now instead of a blank screen i see "Loading..." but not the actual gallery yet
ufk
all i see is loading when i open test.html (is that a snippet or all of it?)... i'm getting "google is not defined" in firebug.
Brandon H