Returning html from javascript

Question

Im trying to display an iframe on my page using javascript and html. I've messed up the javascript and need help returning the html from the javascript to the html.

It isn't working as nothing is being displayed. I dont think I'm calling the function correctly.

In my html I have:

<div id="sticky" class="banner-sticky" style="position: fixed;">
</div>
<script type="text/javascript">
 var pubReference = 3;
 var sessionId = "abcd123";
 new Vicinity (pubReference, sessionId, function(result) {
  $(function() {
  $("#sticky").html(result.ad.getBannerHtml());
  displayResults(result);
 })
}, function(result) {
$("#sticky").html(result.ad.getBannerHtml());
 $(function() {
  displayResults(result);
 })
});
</script>

and in my javascript I have:

var Vicinity = function(pubReference, sessionId, done, err) {

  // defaults
  this.pubReference = pubReference;
  this.ad = {
    getBannerHtml: function() {
        return '<iframe src="http://ad.vic.co/banner?pr='+this.pubReference +'&lat'+ this.lat+'=&lon=' + this.lon + '"></iframe>'
    }
  };

  this.getLatLng = function(vicinity, done, err) {
    if (geoPosition.init()) { // Geolocation Initialisation
      geoPosition.getCurrentPosition(done, function(e) {
        console.warn('ERROR: ' + e.message);
        err(vicinity);
      }, { enableHighAccuracy:true } );
    } else {
      console.warn("Browser doesn't support Geolocation");
      err(vicinity);
    }
  };

  this.init = function(done, err) {
    var that = this;
    this.getLatLng(that, function(position) {
      that.lat = position.coords.latitude;
      that.lng = position.coords.longitude;
    });
  };

  this.init(done, err);
};

ryanlutgen · Accepted Answer · 2014-07-06 07:59:43Z

1

I assume this is what you're looking for?

HTML:

<div id="sticky" class="banner-sticky" style="position: fixed;">
    Test
</div>

JS:

var Vicinity = function (pubReference, sessionId, done, err) {

    // defaults
    this.sessionId = sessionId;
    this.pubReference = pubReference;
    this.finishedGettingAd = false;
    this.ad = {
        getBannerHtml: function() {
            return '<iframe src="http://www.lifehacker.com"></iframe>';
        }
    };

    this.getLatLng = function(vicinity, done, err) {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(done, function(e) {
                console.warn('ERROR: ' + e.message);
                err(vicinity);
            }, { enableHighAccuracy:true } );
        } else {
            console.warn("Browser doesn't support Geolocation");
            err(vicinity);
        }
    };

    this.init = function(done, err) {
        var that = this;
        this.getLatLng(that, function(position) {
          that.lat = position.coords.latitude;
          that.lng = position.coords.longitude;
        }, err);

        if(typeof done === 'function')
            done(this);
    };

    this.init(done, err);
};

$(document).ready(function() {
    var pubReference = 34;
    var sessionId = "abcd123";
    var data = new Vicinity (pubReference, sessionId, 
        function(result) {
            $("#sticky").html(result.ad.getBannerHtml());
            //displayResults(result);
        }, function(result) {
            $("#sticky").html(data.ad.getBannerHtml());
            //displayResults(result);
        }
    );
});

Note that the initialization of a Vicinity instance is inside a document ready (so you can aptly modify the DOM after a done/err). Also, you were not passing err into getLatLng. I also inserted a function call for done() at the end of the init (I assume this is what you wanted). If not, my fiddle has it removed:

http://jsfiddle.net/PA8nr/3/

answered Jul 6, 2014 at 7:59

ryanlutgen

3,1011 gold badge23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

grabury Over a year ago

You've replaced the iframe code. I need to pass lat and lon to the iframe so that i can include it in the iframe url

ryanlutgen Over a year ago

Corrrect, I changed it as a proof of concept when I was debugging. You should be able to put your code back in.

Collectives™ on Stack Overflow

Returning html from javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related