LocalStorage variable to work across tabs with Windows.SetTimeOut - javascript

I have the below JS code. This code basically starts a timer based on variables passed in when the page loads. This works fine on one tab. So basically if different section of the page are opened in different tabs based on the last server visit I want to refresh the timeout variable so that when the time ends the user is signed out from all the tabs and not just the current tab.
I want this:
window.setTimeout(promptToExtendSession, localStorage.getItem("secondsBeforePrompt1") * 1000);
to be refreshed in all the tabs if the
localStorage.getItem("secondsBeforePrompt1")
gets updated through any tab.
I am assigning values to the LocalSTorage variable on the server side.
var SessionManager = function() {
var endSession = function() {
$('#sessionTimeOutModal').modal('hide');
location.href = expireSessionUrl;
};
var startSessionManager = function () {
promptToExtendSessionTimeoutId =
window.setTimeout(promptToExtendSession, localStorage.getItem("secondsBeforePrompt1") * 1000);
};
// Public Functions
return {
start: function() {
startSessionManager();
},
extend: function() {
refreshSession();
}
};
}();
SessionManager.start();

Related

Saving state or view of a page in kendo UI

I have a web application developed using Kendo UI.It has different pages containing filter,search bars,grids etc.
Let there be two pages page A and page B, If I have done some operations on page A (Seach operation and filling a form) then I have navigate to page B to refer some data and came back to the previous page A. But all the operations done on page A (Search and form data) are gone , the page is loaded like a fresh page.
Is there any way to save the state of the page A so that when I came back to page A from page B I will have all my previous work.
$("#landingPage").hide();
$("#mf").hide();
$("#wf").show();
var contentWf="#sd_cont_wf";
// $("#sd_cont_wf").html("");
if (!_currentView) {
constants.sessionDefaults.user = JSON.parse(localStorage.getItem("user"));
domReady(function () {
require(["domReady", "app/views/common/home"], function (domReady, homeView) {
domReady(function () {
$('#app-layout').html("");
_currentView = new homeView();
if (!_app) {
showApp();
}
_app.showIn("#app-layout", _currentView);
_currentView.showIn(contentWf, view);
});
});
});
} else {
$(".user_settings_menu").hide();
if(wf==0){
_currentView.showIn(contentWf, view);
constants.wfView=_currentView;
// var htmlData=$(contentWf).html();
// view.render("#sd_cont_wf");
// $("#sd_cont_wf").append(view.render);
wf=1;
}
}

Javascript & Soundcloud Widget: How to load new track into SC Widget iFrame (via URL)

I’ve seen different web apps like Playmoss, Whyd, and Songdrop etc. that, I believe, HAVE to utilize the Soundcloud Embedded Widget in order to produce the functionality of playing multiple tracks, in sucession, not apart of a set/(playlist). Currently I am having issues reproducing this functionality with the following library, so I decided to attempt to write my own:
https://github.com/eric-robinson/SCLPlayer
I am very new to writing javascript, but my below code, will load a first track, and play it once hitting the “ready” bind. Once hitting the “finish” bind, It will then jump to the loadNextTrack() function and load the next tracks URL, into the src of the widget’s iFrame. After that, it doesn’t ever hit the original “ready” bind, which would then begin playback.
So to clear things up, playback doesn’t begin for the second track.
<script type = "text/javascript">
var SCLPlayer = {
isPlayerLoaded : false,
isPlayerFullLoaded : false,
needsFirstTrackSkip : true,
isPaused: true,
scPlayer : function() {
widgetContainer = document.getElementById('sc');
widget = SC.Widget(widgetContainer);
return widget;
},
loadNextTrack : function() {
var ifr = document.getElementById('sc');
ifr.src = 'http://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/231758952';
console.log ('Loading Next Track');
SCLPlayer.scPlayer().bind(SC.Widget.Events.READY, function() {
console.log ('Player is Ready, next Track');
SCLPlayer.scPlayer().play();
});
}
};
$( '#sc' ).ready(function() {
SCLPlayer.scPlayer().bind(SC.Widget.Events.READY, function() {
SCLPlayer.isPlayerLoaded = true;
//window.location = 'sclplayer://didLoad';
console.log ('Player is Ready');
SCLPlayer.scPlayer().play();
});
SCLPlayer.scPlayer().bind(SC.Widget.Events.PLAY, function() {
SCLPlayer.isPaused = false;
//window.location = 'sclplayer://didPlay';
console.log ('Player did Play');
});
SCLPlayer.scPlayer().bind(SC.Widget.Events.PAUSE, function() {
SCLPlayer.isPaused = true;
//window.location = 'sclplayer://didPause';
console.log ('Player did Pause');
});
SCLPlayer.scPlayer().bind(SC.Widget.Events.FINISH, function() {
SCLPlayer.isPaused = true;
//window.location = 'sclplayer://didFinish';
console.log ('Player did Finish');
SCLPlayer.loadNextTrack();
});
});
</script>
</head>
<body>
<iframe id = "sc" width="100%" height="100%" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/226183306"></iframe>
</body>
The whole point of me writing this Javascript is so that I can then use a Swift to Javascript bridge in my iOS app to then control the loading of tracks into the embedded players. For some reason over a slower connection, the next track doesn't always load into the player, using the "bridge". I hope to provide the nextTrackURL to the javascript side of things before the currentTrack finishes, so that the bridge conveys nothing and the Javascript handles new track loading, solely on its own.
I think you want to use the load function to specify the url for the new track
From the soundcloud Widget API docs:
load(url, options) — reloads the iframe element with a new widget specified by the url. All previously added event listeners will continue working. options is an object which allows you to define all possible widget parameters as well as a callback function which will be executed as soon as new widget is ready. See below for detailed list of widget parameters.
var url = "https://api.soundcloud.com/";
var options = [];
// if a track
url += "tracks/";
// if a playlist
url += "playlists/"
// append the id of the track / playlist to the url
url += id;
// set any options you want for the player
options.show_artwork = false;
options.liking = false;
options.auto_play = true;
widget.load(url, options, OPTIONAL_CALLBACK_FUNCTION);
Edited to show binding...
The bind code is called once, after the widget is initially loaded.
The ready event is only called once, when the widget is initially loaded, it is not called for each subsequent call using load().
try {
widget.bind(SC.Widget.Events.FINISH,
function finishedPlaying() {
// your code / function call
}
);
widget.bind(SC.Widget.Events.PAUSE,
function paused() {
// your code / function call
}
);
widget.bind(SC.Widget.Events.PLAY,
function playing() {
// your code / function call
widget.getCurrentSound(function scCurrentSound(sound) {
// this also binds getCurrent sound which is called
// each time a new sound is loaded
});
}
);
widget.bind(SC.Widget.Events.PLAY_PROGRESS,
function position(pos) {
// your code / function call
}
);
widget.bind(SC.Widget.Events.SEEK,
function seek(pos) {
// your code / function call
}
);
widget.bind(SC.Widget.Events.READY,
function ready() {
// your code / function call
}
);
} catch(e) {
// exception handler code
}

How to get get URL of new page using casperJS

I am using casperJS to get links when clicking a button. The links are returned with window.open in javaScript.
The code I have written logs all the pages after clicking button, but phantom is not exiting in terminal window. Also some pages only show about:blank, especially the last ones.
var casper = require('casper').create();
var page = require('webpage').create();
var address = 'http://www.example.com';
page.open(address, function() {
page.onPageCreated = function(newPage) {
newPage.onClosing = function(closingPage) {
console.log('A child page is closing: ' + closingPage.url);
/* if i set phantom.exit() it will only log the first page url.
Problem: I need all page urls. */
}
}
page.evaluate(function() {
$(".button").click();
});
}
The method "getCurrentUrl()" will return the current url. Here is an easy (not really meaningful) example:
casper.test.begin('My Test', 1 , function suite(test) {
casper.start().viewport(1600,1000).thenOpen("https://blabla.de", function() {
var mylink = this.getElementInfo("#linkid").text;
this.clickLabel(mylink);
});
casper.waitForSelector("#page2", function() {
this.echo(this.getCurrentUrl());
});
casper.run(function() {
test.done();
});
});
You can get the URL of the current page in CasperJS using one of the following methods:
casper.getCurrentUrl():
Retrieves the current page URL. Note that the URL will be URL-decoded.
casper.page.url:
Accesses the existing PhantomJS WebPage instance (page), and gets the current URL of the web page.
casper.evaluate(function () { return location.href; }):
Evaluates the page URL in the Page DOM Environment.

Unregistering backbone events

I'm in a real bottleneck with backbone.
I'm new to it, so sorry if my questios are stupid, as i probably didn't get the point of the system's structure.
Basically, I'm creating ad application which lets you do some things for different "steps". Therefore, I've implemented some kind of pagination system. Each time a page sasisfies certain conditions, the next page link is shown, and the current page is cached.
Each page uses the same "page" object model/view, and the navigation is appended there each time. it's only registered one time anyway, and I undelegate/re-delegate events as the old page fades out and the new one fades in.
If I always use cached versions for previous pages, everything is okay. BUT, if I re-render a page that was already rendered, when I click "go next page", it skips ahead of how many times i re-rendered the page itself.
it's like the "go next page" button has been registered, say, 3 times, and was never removed from the events listener.
It's a very long application in terms of code, and i hope you can understand the basica idea, and give me some hints, without needing to have the full code here.
Thanks in advance, i hope somebody can help me out since i'm in a real bottleneck!
p.s. for some reason, I've noticed that the next/previous buttons respective html is not cached within the page. Weird.
---UPDATE----
I tried the stopListening suggestion, but it didn't work. Here is jmy troublesome button:
// Register the next button
App.Views.NavNext = Backbone.View.extend({
el: $('#nav-next'),
initialize: function() {
vent.on('showNext', function() {
this.$el.fadeIn();
}, this)
},
events: {
'click': 'checkConditions'
},
checkConditions: function() {
//TODO this is running 2 times too!
console.log('checking conditions');
if (current_step == 1)
this.go_next_step();
vent.trigger('checkConditions', current_step); // will trigger cart conditions too
},
go_next_step: function() {
if(typeof(mainView.stepView) != 'undefined')
{
mainView.stepView.unregisterNavigation();
}
mainView.$el.fadeOut('normal', function(){
$(this).html('');
current_step++;
mainView.renderStep(current_step);
}); //fadeout and empty, then refill
}
});
Basically, checkConditions runs 2 times as if the previousle rendered click is still registered. Here is where it's being registered, and then unregistered after the current step fades off (just a part of that view!):
render: function() {
var step = this;
//print the title for this step
this.$el.attr('id', 'step_' + current_step);
this.$el.html('<h3>'+this.model.get('description')+'</h3>');
// switch display based on the step number, will load all necessary data
// this.navPrev = new App.Views.NavPrev();
// this.navNext = new App.Views.NavNext();
this.$el.addClass('grid_7 omega');
// add cart (only if not already there)
if (!mainView.cart)
{
mainView.cart = new App.Models.Cart;
mainView.cartView = new App.Views.Cart({model: mainView.cart})
mainView.$el.before(mainView.cartView.render().$el)
}
switch (this.model.get('n'))
{
case 5: // Product list, fetch and display based on the provious options
// _.each(mainView.step_values, function(option){
// console.log(option)
// }, this);
var products = new App.Collections.Products;
products.fetch({data:mainView.step_values, type:'POST'}).complete(function() {
if (products.length == 0)
{
step.$el.append('<p>'+errorMsgs['noprod']+'</p>')
}
else {
step.contentView = new App.Views.Products({collection: products});
step.$el.append(step.contentView.render().$el);
}
step.appendNavigation();
});
break;
}
//console.log(this.el)
return this;
},
appendNavigation: function(back) {
if(current_step != 2)
this.$el.append(navPrev.$el.show());
else this.$el.append(navPrev.$el.hide());
this.$el.append(navNext.$el.hide());
if(back) navNext.$el.show();
navPrev.delegateEvents(); // re-assign all events
navNext.delegateEvents();
},
unregisterNavigation: function() {
navNext.stopListening(); // re-assign all events
}
And finally, here is the main view's renderStep, called after pressing "next" it will load a cached version if present, but for the trouble page, I'm not creating it
renderStep : function(i, previous) { // i will be the current step number
if(i == 1)
return this;
if(this.cached_step[i] && previous) // TODO do not render if going back
{ // we have this step already cached
this.stepView = this.cached_step[i];
console.log('ciao'+current_step)
this.stepView.appendNavigation(true);
if ( current_step == 3)
{
_.each(this.stepView.contentView.productViews, function(pview){
pview.delegateEvents(); //rebind all product clicks
})
}
this.$el.html(this.stepView.$el).fadeIn();
} else {
var step = new App.Models.Step({description: steps[i-1], n: i});
this.stepView = new App.Views.Step({model: step})
this.$el.html(this.stepView.render().$el).fadeIn(); // refill the content with a new step
mainView.cached_step[current_step] = mainView.stepView; // was in go_next_step, TODO check appendnavigation, then re-render go next step
}
return this;
}
Try using listenTo and stopListening when you are showing or removing a certain view from the screen.
Take a look at docs: http://backbonejs.org/#Events-listenTo
All events are binded on initialization of the view and when you are removing the view from the screen then unbind all events.
Read this for detailed analysis: http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

function is looped according to setinterval but with different parameters

i have a simple question, there is a function with parameter emp_id that opens up a form for a chat with different attributes, i want it to be refreshed automatically each 10 sec, now it works a bit wrongly, since there is a parameter emp_id that is can be changed, and once i change it, the chat with messages and form are refreshed double time or triple times :) depend on how many times u change the emp_id, i hope i was clear )) anyway here is the javascript function:
function load_chat(emp_id) {
var url = "#request.self#?fuseaction=objects2.popup_list_chatform"
url = url + "&employee_id=" + emp_id;
document.getElementById('form_div').style.display = 'block'; AjaxPageLoad(url,'form_div',1,'Yükleniyor');
setInterval( function() {
load_chat(emp_id);
},10000);
}
there a list of names, once i click on one of them, this form is opened by this function, but if i click another user, i mean if i change the emp_id, it refreshes, the previous and present form. how do i change it so that it will refresh only the last emp_id, but not all of id's which i've changed
thank you all for the help, i really appreciate it!
This would nicely encapsulate what you're doing. The timer id (tid) is kept inside the closure, so when you call load_chat it will stop the interval if there was one running.
Once the new url is set up, it will start the interval timer again.
var ChatModule = (function() {
var tid,
url;
function refresh()
{
AjaxPageLoad(url, 'form_div', 1, 'Yükleniyor');
}
return {
load_chat: function(emp_id) {
if (tid) {
clearInterval(tid);
}
// setup url
url = "#request.self#?fuseaction=objects2.popup_list_chatform"
url = url + "&employee_id=" + emp_id;
document.getElementById('form_div').style.display = 'block';
// load ajax
refresh();
// set timer
tid = setInterval(refresh, 10000);
}
}
}());
ChatModule.load_chat(123);
Use setTimeout instead. Each time your function is executed, it will set up the next execution (you could also make it conditional):
function load_chat(emp_id) {
... // do something
if (condition_still_met)
setTimeout(function() {
load_chat(emp_id); // with same id
}, 10000);
}
load_chat("x"); // to start
Or you will have to use setInterval outside the load_chat function. You can clear the interval when necessary.
function get_chat_loader(emp_id) {
return function() {
... // do something
};
}
var id = setInterval(get_chat_loader("x"), 10000); // start
// then, somewhen later:
clearInterval(id);

Categories