6 Replies Latest reply on Apr 9, 2010 5:48 AM by WRobN1

    Spry Dynamic Tabs - reCAPTCHA is missing when loading external php file

    WRobN1
      Hello,

       

      I have solved all my problems lately on this forum.

      But now im converting my site to use Dynamic tabs, and something goes wrong.

       

      The dynamic tabs load content from external files. It loads html but i think something goes wrong with php and my buttons.

      You need to know ALL is working perfect on the old site.

       

      2 problems;

       

      • I dont know how to convert my buttons to this new style.
      • I dont know why the reCAP suddently is missing.

       

      Why is reCAPTCHA missing?

       

      SOURCE HTML (index.html);

      <?php include("PHP/form.php"); ?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
      
      <head>
      
      <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
           <title>Wientjes Voegwerk &amp; Renovatie - Home</title>
          
          <meta http-equiv="Content-Language" content="NL" />
           <meta http-equiv="imagetoolbar" content="no" />
           <meta name="MSSmartTagsPreventParsing" content="true" />
           
          <meta name="description" content="Wientjes Voegwerk en Renovatie is een voeg- en renovatiebedrijf gespecialiseerd in gevelrenovatie. Dagelijkse werkzaamheden zijn het voegen van nieuwbouwwerk, en alle voorkomende vormen van gevelrenovatie. Ik geef uw woning, garage of schoorsteen de aandacht die het verdient en ben trots op het resultaat van mijn werk!"/>
           
          <meta name="keywords" content="Voegwerk, Renovatie, Reinigen, Impregneren, Muur, Voegen, Steen, Woning, Garage, Schoorsteen, Bedrijf, Gevel, Wientjes, Uitslijten, Kappen, Fundering, Vorstschade, Metselen, Metselwerk, Vocht" />
           
          <meta name="author" content="Rob Nijlaan" />
          
          <link href="CSS/Style2.css" rel="stylesheet" type="text/css" />
          
          <script src="JAVASCRIPT/SpryTabbedPanels.js" type="text/javascript"></script>
          <script src="JAVASCRIPT/SpryEffects.js" type="text/javascript"></script>
           <script src="JAVASCRIPT/SpryData.js" type="text/javascript"></script>
          <script src="JAVASCRIPT/xpath.js" type="text/javascript"></script>
          
           <script type="text/javascript">
           <!--
           function FadeAndUpdateContent(ele, url){
                try {
                     Spry.Effect.DoFade(ele,{
                          duration: 500, from: 100, to: 0, finish: function() {
                               Spry.Utils.updateContent(ele, url, function() {
                                    Spry.Effect.DoFade(ele,{ duration: 500, from: 0, to: 100 });
                               });
                          }
                     });
                }
                catch(e){ alert(e); }
           }
           -->
           </script>
                       
      </head>
      <body>
      <div id="WContainer">
        <div id="WHeader" align="center"> <img src="Art/VoegenRenLos.png" width="540" height="58" alt="Voeg en Renovatiebedrijf" /><br />
          <img src="Art/WientLogo.png" width="600" height="136" alt="Wientjes Voegwerk &amp; Renovatie" /> </div>
        <script type="text/javascript">
           var dsTabs = new Spry.Data.XMLDataSet("data/data.xml", "tabs/tab");
           function loadContent(panel,url){
                Spry.Utils.updateContent(panel,url);
           }
           Spry.Data.Region.addObserver("example1Region",dateLoadedCallback);
           function dateLoadedCallback(notificationType, notifier, data){
                if (notificationType =="onPostUpdate"){     
                     row= dsTabs.getRowByRowNumber(0)
                     if(row){
                          loadContent('0',row.url)
                     }
                }
           }
           </script>
        <div id="example1Region" spry:region="dsTabs">
          <div id="dynamicTabs" class="TabbedPanels">
            <ul class="TabbedPanelsTabGroup" >
              <li spry:repeat="dsTabs" class="TabbedPanelsTab" onclick="loadContent('{ds_RowID}','{url}');" tabindex="0">{title}</li>
            </ul>
            <div class="TabbedPanelsContentGroup">
              <div spry:repeat="dsTabs" id="{ds_RowID}" class="TabbedPanelsContent"></div>
            </div>
          </div>
          <script type="text/javascript">
                  var t1 = new Spry.Widget.TabbedPanels("dynamicTabs");
                   </script>
        </div>
        <div id="WFooter" align="center">
          <p class="footer">Wientjes Voegwerk &amp; Renovatie     ,    03- '02       »      Site by ;    <b>Rob Nijlaan</b></p>
        </div>
      </div>
      </body>
      </html>
      
      
      

       

      Dont mind the extra javascripts they are not used for now (like SpryEffects.js) its for future use.

       

      SOURCE XML (data.xml);

      <?xml version="1.0" encoding="UTF-8"?>
      <tabs>
          <tab>
              <title>
                tab 1
                </title>
              <url>../data/HOME.html</url>
          </tab>
          <tab>
              <title>Tab2</title>
              <url>examples/tab2.html</url>
          </tab>
           <tab>
              <title>Tab3</title>
              <url>examples/tab2.html</url>
          </tab>
           <tab>
              <title>Tab4</title>
              <url>../PHP/form.php</url>
          </tab>
      </tabs>
      

       

      The html file loads like it should be, but the php form has problems.

      See it yourself: http://www.wientjesvoegwerk.nl/index2.html

      The tab 1 displays a html file like it should.

      The tab 4 displays the contact form but you will see the reCAPTHCA is missing.

       

      I have really no clue why it happens, exept maybe its a PHP issue.

       

      Maybe the script isnt compatible with non-html documents...

       

      Can someone please tell me whats the problem and if there is a solution????

       

      ________________________________________________________________

       

       

       

      How do i change this button?

       

      I used this in my previous site:

      <table class="Button"  >
           <tr>
           <td style="padding-right:0px" title ="Home">
           <a href="#" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/>
           </a></td>
           </tr>
      </table>
      

       

      But the dynamic script uses {title} to get the <title> out of the xml.

       

      I tryd to put this straight into the title tags in the xml but obviously it wont work.

      And i really dont have a clue how to change this.

       

      My button has a mouseover img. Basicly its 2 buttons in 1 img stacked on top of each other.

      Like this: http://www.wientjesvoegwerk.nl/Buttons/contact.png

      Because of the CSS script it hovers to the right position.

       

      Part of SOURCE CSS (Style.css)

      .Button a{display:block;} 
      .Button a:hover{background-position:left bottom;}
      a.Button {display:none}
      

       

      How can i change the xml and the script so "title" can be replaced with the button.

      Or how can i change the button so the mouseover works and the script still takes the button-img from the xml???

       

      _______________________________________________________________

       

      Any help would be nice, because im finnaly in a postition to finish this site, and this is the only blockade left to conquer...