Find more Examples here

Integrate Detail View on a Page (Server Side Include) (FlexView-API)

Version reduced to minimal set of HTML Read Example Description

Description

Load the HTML on server side (e.g. with php) and put it into the div container with class ```oax-top-cont```:
<div class="oax-top-cont" style="height:0px;overflow:hidden;">
  <!-- Start of block included on server side -->
  <?php

     // an id of a tour
     $i = '1373510';

     // replace id above if another id was set as http get parameter
     if (preg_match('/^-?[0-9]+$/',$_GET["i"])) {
     $i = $_GET["i"];
     }

     // put the id into the Outdooractive API snippet url
     $url = "http://www.outdooractive.com/alpportal/ssi/desktop/detail?i=${i}&proj=api-dev-oa&lang=de&key=yourtest-outdoora-ctiveapi";

     // load the snippet through http
     // (php allows a short cut: use file_get_contents() with a path including http as protocol)
     $snippet = file_get_contents( $url );

     // paste the snippet into the html dom
     echo $snippet;
     ?>
  <!-- End of block included on server side -->
</div>
Instantiate the FlexView API with a JavaScript call:
// instantiate the FlexView API detail page
// (id comes from php code on server side here)
var dp = oa.api.detailpage( { "id": "<?php echo $i; ?>" } );

// the div container with class "oax-top-cont" is hidden on page load
// show the div container as soon as the FlexView API detail page was loaded
dp.whenLoaded( function () {
    document.getElementsByClassName("oax-top-cont")[0].style.height = "auto";
});