javascript - Reference to div element is null when navigating away from view -
i referencing div in initialize function backbone.marionette view. issue having when navigate away view , come reference div null. example:
var div = $('#video_player'); console.log(div); will return correct div first time page loads if navigate view , come reference null.
i working other people's code tasked maintain , update startup companies website.
this javascript
define(['marionette', 'tpl!templates/views/plan.html', 'localizer', 'common/servererrors', 'jquery', 'models/sessionmodel', 'common/serverapiurls', 'utilities/events'], function ( marionette, tpl, localizer, servererrors, $, session, serverapiurls, events) { 'use strict'; //var player; var planview = marionette.itemview.extend({ classname: 'membershipitem', tagname: 'li', template: function(data) { return tpl({resources: localizer.resources, plan: data.plan, islogged: data.logged_in }); }, serializedata: function(){ return { plan: this.model.tojson(), logged_in: session.get('logged_in') }; }, events : { 'click .signup' : 'singup', 'click .getstarted' : 'getstarted' }, singup : function(e) { e.preventdefault(); location.href='#sign-up'; }, initialize : function(){ this.user = session.get('userprofile'); console.log("initialize called"); if(session.get('logged_in') && this.user && this.user.get('plan')){ this.userplan = this.user.get('plan').name; } this.player = new window.yt.player('video_player',{ events: { 'onstatechange': this.onplayerstatechange, 'onready' : this.onplayerready } }); var div = $('#video_player'); console.log(div); console.log(this.player); //that.startscrollstuff(); //$(window).scroll(function() { // var scrollposition = $(document).scrolltop(); // var scrollbottom = $(window).height() + scrollposition; // var div = $('#video_player'); // var elemtop = div.offset().top; // var elembottom = div.height() + elemtop; // //console.log("elembottom " + elembottom + " scrollbottom " + scrollbottom); // if ((elembottom <= scrollbottom) && (elemtop >= scrollposition)) // { // this.player.playvideo(); // }else{ // this.player.stopvideo(); // } //}); }, onplayerready: function(event){ console.log("ready"); //event.target.playvideo(); //event.target.mute(); }, onplayerstatechange: function(event) { //console.log("state changed"); //console.log(player); //player.stopvideo(); }, getstarted : function(e) { e.preventdefault(); if(!this.soldplan){ var = this; var token = session.get('token'); var data = { planid: that.model.get('id') }; events.trigger('show_loading'); $.ajax({ url: serverapiurls.payment, contenttype: 'application/json', datatype: 'json', type: 'post', headers: {token: token}, data: json.stringify(data), success: function (res) { if (res.success) { that.payment = res.payment; that.fillform(); events.trigger('hide_loading'); } else { servererrors.showservererror(res.errors); events.trigger('hide_loading'); } }, error: function (mod, res) { } }) } }, fillform : function(){ $('#paymentform').attr({'method' : this.payment.form.method, 'action' : this.payment.form.action}); $('#login').val(this.payment.hidden_fields.x_login); $('#amount').val(this.payment.hidden_fields.x_amount); $('#description').val(this.payment.hidden_fields.x_description); $('#invoice_num').val(this.payment.hidden_fields.x_invoice_num); $('#sequence').val(this.payment.hidden_fields.x_fp_sequence); $('#timestamp').val(this.payment.hidden_fields.x_fp_timestamp); $('#hash').val(this.payment.hidden_fields.x_fp_hash); $('#test_request').val(this.payment.hidden_fields.x_test_request); $('#show_form').val(this.payment.hidden_fields.x_show_form); $('#relay_responce').val(this.payment.hidden_fields.x_relay_response); $('#relay_always').val(this.payment.hidden_fields.x_relay_always); $('#relay_url').val(this.payment.hidden_fields.x_relay_url); $('#token').val(this.payment.hidden_fields.token); $('#paymentform').submit(); }, checkselectedplan : function(){ if(this.user.get('plan')){ if(this.userplan == 'basic'){ if(this.model.get('name') == 'basic'){ this.soldplan = true; return 'soldplan'; } } if(this.user.get('plan').name == 'advanced'){ if(this.model.get('name') == 'basic' || this.model.get('name') == 'advanced'){ this.soldplan = true; return 'soldplan'; } } if(this.user.get('plan').name == 'select'){ if(this.model.get('name') == 'basic' || this.model.get('name') == 'advanced' || this.model.get('name') == 'select'){ this.soldplan = true; return 'soldplan'; } } if(this.user.get('plan').name == 'premium'){ if(this.model.get('name') == 'basic' || this.model.get('name') == 'advanced' || this.model.get('name') == 'select' || this.userplan == 'premium'){ this.soldplan = true; return 'soldplan'; } } if(this.user.get('plan').name == 'elite'){ if(this.model.get('name') == 'basic' || this.model.get('name') == 'advanced' || this.model.get('name') == 'select' || this.model.get('name') == 'premium' || this.model.get('name') == 'elite'){ this.soldplan = true; return 'soldplan'; } } } }, onbeforerender: function() { console.log("on before render called"); if (session.get('logged_in')) { var sheme = this.checkselectedplan(); } if (sheme) { this.$el.addclass(sheme + '-membershipcolorsheme'); } else { this.$el.addclass(this.model.get('name') + '-membershipcolorsheme'); } var price = this.model.get('price'); var storage = this.model.get('storage'); this.model.set('storageforview', storage + 'gb'); this.model.set('priceforview', '$' + price); return this; }, onshow : function(){ console.log("on show called"); } }); return planview; });
and html
<div id="main"> <div class="topperblock" style=""> <div class="headline"> <h1>create <span class="bolder selectletters"> t</span>he <span class="bolder selectletters">s</span>tory <span class="bolder selectletters">o</span>f <span class="bolder selectletters">life</span></h1> <img src="assets/img/topperbockimg.png"> <div class="buttonsblock"> <a href="#" class="links singup">sign now</a> </div> </div> <div class="arrowdown"> <a href="#content_video"><img src="assets/img/arrowdown.png"></a> </div> </div> <div class="inner"> <div id="content_video"> <center> <div id="video_spot"> <iframe width="700" height="400" frameborder="0" style="padding-top: 45px" id="video_player" src="http://www.youtube.com/embed/wbhdyhzakwo?enablejsapi=1"> </iframe> </div> </center> </div> </div> <div class="inner"> <div id="content"> <div class="membershiptitle"> <h2>{{resources.plans.header}}</h2> <p>{{resources.plans.text.one_time_only_fee_to_create_your_forever_legacy}}</p> <!--<div id="promocode">--> <!--<input id="inputpromo" placeholder="if have promo code, please enter here">--> <!--<button type="submit" id="sendpromo">></button>--> <!--</div>--> </div> <center> <ul class="membershipplans" id="plans"> </ul> </center> </div> <form id="paymentform" method="post" action=""> <input id="login" name="x_login" type="hidden" value=""> <input id="amount" name="x_amount" type="hidden" value=""> <input id="description" name="x_description" type="hidden" value=""> <input id="invoice_num" name="x_invoice_num" type="hidden" value=""> <input id="sequence" name="x_fp_sequence" type="hidden" value=""> <input id="timestamp" name="x_fp_timestamp" type="hidden" value=""> <input id="hash" name="x_fp_hash" type="hidden" value=""> <input id="test_request" name="x_test_request"type="hidden" value=""> <input id="show_form" name="x_show_form" type="hidden" value=""> <input id="relay_responce" name="x_relay_response" type="hidden" value=""> <input id="relay_always" name="x_relay_always" type="hidden" value=""> <input id="relay_url" name="x_relay_url" type="hidden" value=""> <input type='hidden' name='x_cancel_url' value='http://testing.demohoster.com/tsolife/payment.php' /> <input type='hidden' name='x_cancel_url_text' value='cancel' /> <input id="token" name="token" type="hidden" value=""> </form> </div> routing done using backbone.marionette's routing system.
Comments
Post a Comment