Clear the Backbone.history - javascript

I am developing phonegap application using backbone Js. To enable the back button functionality i am using Backbone.history.start();.
For one scenario, I want to clear all the application history and invalidating the back button feature.
It would be great if anyone will answer.
Thanks in advance.

Checking the Backbone source code I see it's possible to disable Backbone.history with Backbone.history.stop(); so this may give you the expected behaviour.
// Disable Backbone.history, perhaps temporarily. Not useful in a real app,
// but possibly useful for unit testing Routers.
stop: function() {
Backbone.$(window).off('popstate', this.checkUrl).off('hashchange', this.checkUrl);
clearInterval(this._checkUrlInterval);
History.started = false;
},

Related

Angular new changes not reflecting

I am building a new project using angularjs and PHP(codeigniter).
I am facing an issue with the content or changes I make on both client-and serverside, but the changes are not being reflected.
Does this have something to do with the cache?
The browser uses template caching, which should be cleared upon making changes to templates. See this question. You can do the following to make your life easier when developing:
Reload the page with clearing cache each time you need to update your app
Yet a more convenient way is to:
Disable cache in developer tools
E.g. for Chrome
CTRL+SHIF+J and on the network tab check 'Disable Cache'
Yet may be better still to:
Remove template cache in your application
This is done via $templateCache.remove()
More info on preventing template caching
Try this if you are also having issue with Angular default change detection mechanism. In my case, in my ionic4 Project default change mechanism of Angular was somewhat not working properly so I triggered it manually.
constructor(private ref: ChangeDetectorRef) {
ref.detach();
setInterval(() => {
this.ref.detectChanges();
}, 500);
}

How can I write a script to automatically walk through a process like my user would?

I have some valuable processes on my site that I'd like to track regularly to make sure they are working. I wrote some javascript that will run the actions if the starting page contains a particular parameter, but I can't figure out how to properly execute the script without opening the page in a browser.
My best guess is I need some sort of chron driven bot for this, but I don't even know where I should begin with that and haven't found anything in my searching. I tried a cURL request, but it doesn't seem to fire the js. Really, if I could just find a way to properly initialize the js with a chron job that would be sufficient.
The key here is that I need it to execute the javascript so I can imitate user actions.
I'm working on a WordPress install, so it would need to be a php or javascript based solution. How can I build something like this?
Use an interaction testing framework like Ember.js. that should allow you to test your UI Interactions.
See the link above to get some detailed information on how to use the library.
Here is a code snippet from the Ember.js library to see if a user is
redirected properly if not authenticated (100% javascript!):
module('Integration: Transitions', {
teardown: function() {
App.reset();
}
});
test('redirect to login if not authenticated', function() {
visit('/');
click('.profile');
andThen(function() {
equal(currentRouteName(), 'login');
equal(currentPath(), 'login');
equal(currentURL(), '/login');
});
});
Ember.js is an excellent way to test your user interactions and your UI components.
Learn more here: http://emberjs.com/guides/testing/testing-user-interaction/
UPDATE:
See this answer for another solution that combines CasperJS and PhantomJS to test user interfaces.
Good luck!
If you don't want to have a browser open to do it you could use a headless browser like PhantomJS

Phonegap 3 contains an alert box in which "OK" crashes browser

I can't come up with a good explanation for this, but when I include
<script type="text/javascript" src="phonegap.js"></script>
In my Phonegap app, which I have not modified, 2 pops will appear on screen.
//The first popup
gap:["PluginManager","startup","PluginManager224542697"]
//the second
gap:["App","show","App224542698"]
I have to cancel both popups and would really love to understand the reasoning.
The two lines in question are on line 21117 and 21118 of phonegap.js
// Tell the native code that a page change has occurred.
require('cordova/exec')(null, null, 'PluginManager', 'startup', []);
require('cordova/channel').onNativeReady.fire();
This of course does not break when its in the app, but it does mean that development is next to impossible.
For me the issue was occurring because phonegap.js was falling back to PROMPT based mode when running outside of phonegap. I believe this mode is intended for phonegap below Android 3.2, where all communication is via alert prompts (which is what you're seeing).
I fixed the problem by setting the following variable before loading phonegap.js:
window._cordovaNative = true;
This tricks phonegap into thinking you're running above phonegap 3.2 hence never enters Prompt mode.
Of course, if you're targeting devices below 3.2 then doing this will probably break all communication with Phonegap on those devices...
I have stumbled upon this error and question while trying the following:
Completed the hello world tutorial with cordova create, etc.
Deployed both on emulator and the connected device w/o a problem.
I got the same error as OP when doing cordova serve and just navigating to //localhost:8000 as instructed.
I agree - seeing those alerts is super annoying. It kills the whole point of speedy non-native js-based development.
What is going wrong?
Communication API with the "device" is falling back to this handler promptbasednativeapi.js (also see cordova-js/src/android/exec.js). On version 3.x.x just saying
window._cordovaNative = true;
was not enough for me. One should implement the whole protocol of communication.
Quick solution
You can use some browser side "emulator", e.g. Ripple emulator extension for chrome ([UPDATE] Consider using https://github.com/apache/incubator-ripple for phonegap 3.x.x as pointed by DuKes0mE). Such an "emulator" can understand and fire respective events, e.g. "device ready". So far it looks promising :-)
What is going on?
An answer by #antscode was of great help. After some digging and reading of cordova/cordova-js code I figured out that
Error comes from the mechanism which is a part of cordova plugin architecture. Plugins are developed as so called cordova commands which can be executed from js - this is exactly how cordova architecture is organized.
Cordova is a JS framework. One is suggested to primary write (non-native) JS code. To talk to all those different native plugins one has to come up with the protocol to communicate with them, sort of RPC with JSON serialization. This is exactly what is going own.
Plugins can be also in pure JS. To quote the manual
Create a new echome plugin with:
window.echo = function(str, callback) {
cordova.exec(callback, function(err) {
callback('Nothing to echo.');
}, "Echo", "echo", [str]);
};
Access it as a cordova command via JS:
window.echo("echome", function(echoValue) {
alert(echoValue == "echome"); // should alert true.
});
No emulator solution
I could imagine a situation when an rather complicated app will break just inside such an web-browser client side "emulator" (and only in it). A better solution would be to figure out a way to convince the app not to fallback to PROMPT method of communication (the one that makes annoying alerts). Well, I do not have such a solution right now :-( Will be happy to learn how to do it though.
Solution is here: https://gist.github.com/ewiger/7d5e0cc8fccf311e9ce2
there is probably no return event for the cancel button. if no instructions are passed to the kernel, this results in an exception(your browser crashing.) try defining an action for the cancel button and see if that helps.
I went into hello/platforms/ios/CordovaLib and copied the cordova.js file into my www root and changed
Or download from here:https://github.com/apache/cordova-ios/blob/master/CordovaLib/cordova.js
<script type="text/javascript" src="phonegap.js"></script>
to
<script type="text/javascript" src="cordova.js"></script>
and no more popups
I was having the same issue with a project created by another developer. The cause in my case was the remains of the Cordova/PhoneGap 2.x configuration. This popup is related to the plugin system. Removing plugin from my config.xml made it better:
<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser" />
The end, I decided it would be best to make a new 3.x project and move all of my HTML/CSS/JS to the newly created project. The new project fixed all issues.
I had initially resisted posting an answer on this question. As was mentioned by one of the developers that the phonegap.js should not be included unless it is production code.
This however means you can't tests phonegap features.
To briefly explain my thought process, in all my years developing (php) I have often set global variables that I can easily write code for dev, stage or production.
Please consider this might not be the best way to go, but for me it works and I'm enjoying the rest of my backbone app far more than revisiting this currently ;)
So, I did this:
//Define SD
var SD = {}; //define SD so we can use it globally
/*==================================================
Is Mobile - If true then we are a mobile
================================================== */
SD.isMobile = true;
//This is with the assumtion that your domain contains (for exmaple) http://yourdomain.local
if (document.URL.indexOf("local") > 0 || document.URL.indexOf("sex") > 0) {
SD.isMobile = false;
}
SD = {
isMobile: SD.isMobile,
ENVIROMENT: 'liveApp',
CDN: 'yoururl.com/',
HTTP: 'http://yoururl.com/',
}
// #define the globals depending on where we are -----------------------------------------------------
SD.globals = function () {
switch (window.location.hostname) {
case "sd.local":
SD.ENVIROMENT = 'localApp',
SD.CDN = 'sd.local/',
SD.HTTP = 'http://yoururl.com/',
SD.AJAX = SD.HTTP+'app/';
break;
case "192.168.0.25": //Set to your machines IP address
SD.ENVIROMENT = 'mobilePhone',
SD.AJAX = SD.HTTP+ 'app/';
break;
default:
SD.AJAX = SD.HTTP+'app/';
break;
}
};
And now finally, after all the init work I add the phonegap.js if we need it.
if(SD.isMobile){
$.getScript('phonegap.js', function( data, textStatus, jqxhr){
c( "cordova was loaded." );
});
I was experiencing the exact same two popups you describe but only experienced them when i added iOS to my phonegap project. the first time i did this i copied the www folder from my working Android app. this was the problem because it had artifacts from the Android plugins. After blasting and recreating the iOS app in the phonegap project using the command line tools i more carefully brought over only the needed html, js and css files for my app which resolved the issue.

How to force update of design changes to clients using xPages?

I am bulding a webpage using xPages and I am making constant changes to script and design, this include both server and client javascript , stylesheet and image changes.
Each time I change a javascript or stylesheet I want to see my changes in the webbrowser and I also want my users to get the latest changes when they access the webpage.
I know I can use Shift-Reload, or CTRL-reload and clear my webbrowser cache. and I also know that I can change the objects expiration date, but I want a smoother and better controlled way to do this.
Looking for any kind of best practice for doing this.
Thanks
Thomas
In the xsp.properties file for the application or on the server for server wide use you can set xsp.application.forcefullrefresh=true. The xsp.properties file documentation says:
# Application refresh
# When this property is set to true, then a full application refresh is requested when
# the design of a class changes (means that all the data are discarded in scopes).
# xsp.application.forcefullrefresh=false
The new XSP Portable Command Guide says "This property was introduced in Notes/Domino 8.5.3. It is set to false by default and is particularly useful during the development phase of an XPages application."
I have not fully tested this behavior but it sounds promising. You could/should of course only set it to true WHILE you make the changes. once stable, set it back.
/Newbs
Adding to Ferry's answer and your comment;
Instead of "?dummy=randomvalue", you can use "?version=2.1". So it will be cached but when you change design, you can just increase the version.
There's a problem with this approach as some proxy servers won't cache anything with query params. Better to rename the file directly, adding date or version number to it. It will always work.
To disable caching temporarily use Fiddler2. It's easy to enable and disable in one place across any web client. As well as added benefits for the http request tracking features.
To fully disable any caching add url + '"?dummy=" + #Unique();' to every url to javascript or image files...
The way I am reading this question is that you want every change you make to appear immediately on the client's browser or client. Are you really sure you want to do this? It sounds like you are not doing any testing so any typos, bugs, crashes, etc will be passed on to your users. Sounds like a bad plan to me. I hope I am wrong and that you are using a template and pushing only your fully tested changes up to an production version instead of making the changes in the production version.
I would just put out a schedule of when changes are going to be pushed up to production and let the users reload their browser or client at that time. Either that or do it during off hours and when they next log on, they get the newest changes.
Adding to Ferry's answer and your comment;
Instead of "?dummy=randomvalue", you can use "?version=2.1". So it will be cached but when you change design, you can just increase the version.
maybe you could look at how domino can control caching of url's.
http://www.ibm.com/developerworks/lotus/library/ls-resp_head_rules/
NEwbs answer is a good one but it is useful to note that in Firefox there is a very useful plug in called "web developer" from Chris Pederick that allows you to disable the cache.
http://chrispederick.com/work/web-developer/
The other really useful one is Firebug which is just amazing - It makes any HTML work much easier
https://addons.mozilla.org/en-US/firefox/addon/firebug/
I did found another solution by putting my css and js in a theme it is easy to just rename the files.
as described here
http://goo.gl/vFTii
Why do not we use the window.location.reload()...
Which does the same like ctrl+F5
It reloads the page, which is similar to context.reloadpage

Connect Firefox extension with C# application

I need to be able to make an event such that every time a user loads a new page and closes firefox, I need it to call a method in my C# application that takes care of maintaining the user model. I know for sure I need to create some type of firefox extension where I use javascript to check such an event. However, I have no idea how I am going to integrate my C# application with the firefox extension. Can someone provide me with some guidance?
I'll help you out with the parts of the question that I'm familiar with (Javascript based add-ons), and offer some suggestions for the other parts. Here goes nothing!
Add-ons
Firefox add-ons easily provide the tools you need to detect page loads and opening / closing firefox.
To detect page loads you can register a listener to the DOMContentLoaded event in window.
window.addEventListener("DOMContentLoaded", function(event){
var url = event.originalTarget.location.href;
alert("Oh yeah, a document is loading: " + url);
}, false);
Alternatively, you can register a nsIWebProgressListener to listen for location changes. This probably closer to what you want, since DOMContentLoaded is also triggered for iframes.
var listener = {
//unimplemented methods (just give functions which do nothing)
onLocationChange: function(aWebProgress, aRequest, aLocation){
var url = aLocation.asciiSpec;
alert("Oh yeah, a the location changed: " + url);
}
};
gBrowser.addTabsProgressListener(listener);
To detect firefox open / close you need to first understand how firefox add-ons work with respect to multiple windows. When a new window of firefox is launched, you basically have 2 separate copies of your code running. So, if you care about firefox windows being opened and closed you can simply do:
window.addEventListener("load", function(event){
alert("Looks like you just opened up a new window");
}, false);
window.addEventListener("unload", function(event){
alert("Awh, you closed a window");
}, false);
But, most likely you want to detect opening / closing firefox as an entire application. This is achieved using a code-sharing mechanism called Javascript Modules. Javascript modules are loaded just once for the lifetime of the application. So, they enable you to share information between windows. Simply counting the number of windows opened and closed should be sufficient for this functionality.
var EXPORTED_SYMBOLS = ["windowOpened", "windowClosed"];
var windowsOpened = 0;
function windowOpened(){
if( windowsOpened === 0) {
alert("The first window has been opened!");
}
windowsOpened++;
}
function windowClosed(){
windowsOpened++;
if( windowsOpened === 0) {
alert("The last window has been closed!");
}
}
Then you can simply attach the aforementioned event handlers to call these 2 methods from their corresponding load and unload events.
So, this is all great and everything, but now you have to twiddle with the details of getting a baseline Firefox add-on setup. Fortunately, Mozilla has provided a handy Addon Builder to ease this. All the code about (except the Javascript module) should be placed in the ff-overlay.js file (assuming you use the linked builder).
C# communication
I'm a little less knowledgeable about the interprocess communication with C#. However, maybe I can point you in the right direction and let the smart people at SO fill in the rest.
I believe COM Objects are a method of communication between processes on Windows. So, you could build in a Binary Component to your add-on to perform the communication. However, as far as I understand it, setting up binary components is much more difficult than a standard javascript-based add-on. Either way, Mozilla provides a guide for setting it up in Visual Studio.
If you want to stay away from binary components you are left with the javascript enabled components of the SDK. This includes socket communication, files, pipes, a sqlite database etc. This SO question addresses exactly the question you're asking. If it were me, I would choose them in this order.
Sqlite Database
Named Pipes
Sockets
(1) because there is a lot of code samples available for this, and would be easy to implement on both sides. (2) because this would be the way I'd implement IPC if I were given full control of both sides of the application. (3) is last because I hate that crap (maybe I'm biased from Distributed Systems in college).
tl;dr
The page load stuff should be pretty simple. Check out the Addon Builder to get going with a FF addon, and here to see about detecting page loads.
The C# communication is doable, and addressed in this SO Question. I'd do it with a sqlite database for ease if it were me.

Categories