I'm trying to detect when the user hits "refresh" from my app to load some data.
I have this:
var refresh = function() {
alert('refresh');
};
var vm = {
refresh: refresh,
data: ko.observable()
};
However I never get the alert in my browser, and a breakpoint set at the opening of the function does not get hit when I refresh the page from this view. How can I properly use the refresh function?
I would suggest hooking into the canDeactivate method in your view model.
var refresh = function() {
alert('refresh');
};
var canDeactivate = function(isClose){
if (isClose)
{
refresh();
return false;
}
else return true;
};
var vm = {
data: ko.observable(),
canDeactivate: canDeactivate
};
Related
I am using the google.maps.places.Autocomplete API and this morning I was getting a 502 Bad Gateway error. It lasted about 10 minutes and started working again. I assume this had to do with the service being unavailable.
I was wondering how I can error handle when this happens. My (javascript) autocomplete code looks like this:
$('#StartAddress').change(function () {
google.maps.event.trigger(startAutocomplete, 'place_changed');
return false;
});
var source, destination;
var directionsDisplay;
var directionsService;
if (typeof google === 'object' && typeof google.maps === 'object') {
directionsService = new google.maps.DirectionsService();
// set up places autocomplete
var start = document.getElementById('StartAddress');
var startAutocomplete = new google.maps.places.Autocomplete(start);
var end = document.getElementById('EndAddress');
var endAutocomplete = new google.maps.places.Autocomplete(end);
// add the places auto complete listener for when the values change
startAutocomplete.addListener('place_changed', function () {
var startAddress = $('#StartAddress').val();
var endAddress = $('#EndAddress').val();
if (endAddress && startAddress) {
GetRoute(startAddress, endAddress, false);
}
});
endAutocomplete.addListener('place_changed', function () {
var endAddress = $('#EndAddress').val();
var startAddress = $('#StartAddress').val();
if (endAddress && startAddress) {
GetRoute(startAddress, endAddress, false);
}
});
directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': false });
}
The GetRoute(startAddress, endAddress, false) function is a call to the google.maps.Map and that works fine. It was only the autocomplete service that was down.
Also, is it possible this error occurred because I am using the developer key instead of production? Like the googles dev environment is much more resource limited?
The service was down this time. Try again now.
I am trying to create a extension in Firefox using sdk addon. What i want to do is to call an iframe inside a panel.
I have already created the extension for chrome and now i am trying to do it for firefox.
I have a facebook login in the iframe. Once i click on the sign in button the iframe just goes blank. If I log in before hand then also the extension doesnt work. It is as if it can't access the session.
Here is the code of my main.js file.
var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var data = require("sdk/self").data;
var {Cc, Ci} = require("chrome");
var tabs = require("sdk/tabs");
var title=tabs.activeTab.title;
var button = ToggleButton({
id: "my-button",
label: "my button",
icon: {
"16": "./logo1.png",
"32": "./logo1.png",
"64": "./logo1.png"
},
onChange: handleChange
});
var panel = panels.Panel({
width:450,
height:400,
contentURL: data.url("popup.html"),
onHide: handleHide
});
function handleChange(state) {
if (state.checked) {
panel.show({
position: button
});
}
}
function handleHide() {
button.state('window', {checked: false});
}
here is the code of my main javascript file that calls the iframe
$(document).ready(function() {
document.body.style.display = 'block';
var ur='xyz';
var frame = document.createElement('iframe');
var frame_url = 'https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod';
frame.setAttribute('width', '100%');
frame.setAttribute('height', '100%');
// frame.setAttribute('margin', '-10%');
frame.setAttribute('frameborder', 'none');
frame.setAttribute('id', 'rtmframe');
$('body').height(450).width(400);
frame.setAttribute('src', frame_url);
document.body.appendChild(frame);
$('iframe#rtmframe').load(function() {
$('#loadImg').hide();
});
});
This is not the actual link i am trying to open. Can anyone suggest what i can do differently. or point me to github code that might be doing the same thing.
Please, I need a help.
I want to check if my infowindow is opened.
For example:
if (infowindow.isOpened)
{
doSomething()
}
or
if (infowindow.close)
{
doAnotherthing();
}
I dont have any idea, how to do this
This is an undocumented feature, and is therefore subject to change without notice, however the infoWindow.close() method sets the map on the object to null (this is why infoWindow.open(map, [anchor]) requires that you pass in a Map), so you can check this property to tell if it is currently being displayed:
function isInfoWindowOpen(infoWindow){
var map = infoWindow.getMap();
return (map !== null && typeof map !== "undefined");
}
if (isInfoWindowOpen(infoWindow)){
// do something if it is open
} else {
// do something if it is closed
}
Update:
Another potentially useful way to write this is to add an isOpen() method to the InfoWindow prototype.
google.maps.InfoWindow.prototype.isOpen = function(){
var map = this.getMap();
return (map !== null && typeof map !== "undefined");
}
Until google doesn't give us any better way of doing this, you can add a property to the infoWindow objects. Something like:
google.maps.InfoWindow.prototype.opened = false;
infoWindow = new google.maps.InfoWindow({content: '<h1> Olá mundo </h1>'});
if(infoWindow.opened){
// do something
infoWindow.opened = false;
}
else{
// do something else
infoWindow.opened = true;
}
I modified the prototype for google.maps.InfoWindow and changed open/close to set/clear a property:
//
// modify the prototype for google.maps.Infowindow so that it is capable of tracking
// the opened state of the window. we track the state via boolean which is set when
// open() or close() are called. in addition to these, the closeclick event is
// monitored so that the value of _openedState can be set when the close button is
// clicked (see code at bottom of this file).
//
google.maps.InfoWindow.prototype._open = google.maps.InfoWindow.prototype.open;
google.maps.InfoWindow.prototype._close = google.maps.InfoWindow.prototype.close;
google.maps.InfoWindow.prototype._openedState = false;
google.maps.InfoWindow.prototype.open =
function (map, anchor) {
this._openedState = true;
this._open(map, anchor);
};
google.maps.InfoWindow.prototype.close =
function () {
this._openedState = false;
this._close();
};
google.maps.InfoWindow.prototype.getOpenedState =
function () {
return this._openedState;
};
google.maps.InfoWindow.prototype.setOpenedState =
function (val) {
this._openedState = val;
};
You also need to monitor the closeclick event because clicking on the close button does not call close().
//
// monitor the closelick event and set opened state false when the close
// button is clicked.
//
(function (w) {
google.maps.event.addListener(w, "closeclick", function (e) {
w.setOpenedState(false);
});
})(infowindow);
Calling InfoWindow.getOpenedState() returns a boolean which reflects the state (opened/closed) of the infowindow.
I chose to do it this way instead of the using the InfoWindow.getMap() or MVCObject.get('map') method because of the well known pitfalls of using undocumented behavior. However google uses MVCObject.set('map', null) to force the removal of the InfoWindow from the DOM, so it is unlikely that this will change...
infowindow.getMap() returns null if infowindow is closed.
So you can use simply:
if (infowindow.getMap());
You can simply set key and value for infoWindow: infoWindow.set('closed', true);
example:
const infoWindow = new google.maps.InfoWindow({
content: 'foo',
position: {
lat: some_number,
lng: some_number
}
});
infoWindow.set('closed', true);
// Clicking on polyline for this example
// Can be marker too
polyline.addListener(
'click',
() => {
if (infoWindow.get('closed')) {
infoWindow.open(map);
infoWindow.set('closed', false);
} else {
infoWindow.close();
infoWindow.set('closed', true);
}
}
);
I'm trying to simply return what I request in PHP to JSON.
My problem is that each Stock is not yet completed.
Indeed, it is the "render" but "this.collection.models" is not yet completed because the request is not yet finished.
What should I do to correct this problem, wait until the request is finished so that the loop is done correctly.
Thank you in advance
var Article = Backbone.Model.extend({});
var Articles = Backbone.Collection.extend({
model:Article,
url: function() {
return _BASE_URL+'/sync/getLastArticles';
},
initialize:function () {
this.fetch();
}
});
var ArticlesView = Backbone.View.extend({
template:$('#articles').html(),
initialize:function () {
this.collection = new Articles();
this.render();
},
render:function () {
console.log(this.collection);
var that = this;
_.each(this.collection.models, function (item) {
console.log(item);
}, this);
},
renderArticle:function () {
;
}
});
You render before the fetch is done. What you want to do, is to wait for the fetch to complete and then render. Now how would you get notification of when the fetch is done? You have 2 options:
The success function (Not recommended by me)
// ArticlesView
initialize: function() {
_.bindAll(this); // Don't forget to BIND
this.collection = new Articles();
this.collection.fetch({
success: this.render
});
}
Now when the fetch has been successful, render is called. This however can cause scoping problems and Backbone.js offers a much nicer alternative to callback functions: events.
Event callback (prefer this)
// ArticlesView
initialize: function() {
_.bindAll(this);
this.collection = new Articles();
this.collection.on('reset', this.render); // bind the reset event to render
this.collection.fetch();
}
Right now, the autocomplete box works just fine when I click on the location, but when I press down, highlight the location that I want to go to, and press enter, it simply goes back to the home location of the map. Any insights on this? I call this function in initialize(). I'm lost as to what I possibly did wrong. Is this just a google api bug? If so, any insights as to how to work around it?
function setupAutoComplete() {
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, -180),
new google.maps.LatLng(90, 180));
var input = document.getElementById('placeSearch');
var options = {
bounds: defaultBounds,
types: ['(regions)']
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
alert('hi');
removeAllOverlays();
var place = autocomplete.getPlace();
var mapCenter = place.geometry.location;
var colLat = mapCenter.lat() - (halfPoints)*latSeparation;
var colLng = mapCenter.lng() - (halfPoints)*lngSeparation;
var tempStart = new google.maps.LatLng(colLat, colLng);
map.setCenter(mapCenter);
pointArray[0][0] = tempStart;
reService();
mapSearch();
drawBounds();
});
}
Thanks so much!
I guess the input#placeSearch is placed inside a <form>.
You submit the form when you press [ENTER].
You may either remove the surrounding form or cancel the submission by adding:
onsubmit="return false"
...to the form-element.
I just hit this issue and went with the following, as I do want to submit the form at a later stage. This code is from google groups.
var input = document.getElementById('create-location');
var options = {
//types: ['(cities)'],
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addDomListener(input, 'keydown', function(e) {
if (e.keyCode == 13)
{
if (e.preventDefault)
{
e.preventDefault();
}
else
{
// Since the google event handler framework does not handle early IE versions, we have to do it by our self. :-(
e.cancelBubble = true;
e.returnValue = false;
}
}
});