We Keep Coding

What is the best way to handle browser back button for dynamic content?

We currently have an app (sails/node js), where the user is displayed a set of items which are dynamically produced. The user has the option to produce more dynamic items (using a button) or can preview one item (new page). Currently, the more items button is implemented as a jquery add-on implementing a post request.
The issue is, when the user clicks the more items button and selects one item for preview, and then presses the browser back button, the dynamic content is lost.
We see different options:
1. Implement pagination and infinite scroll and use history js to manage back button
2. Use history with the current set up and combine with jquery to manage back button.
Are there any other approach? Any help appreciated. We are totally new to this development environment.

You can leverage a History API:
var stateObj = { lastItemId: 456 }; // or { page: 3 }
history.pushState(stateObj, "page 2", "bar.html");

The easiest way I found was to "disable" back button clicks. Ok, technically, there's no way to disable it, but you can give the end user the appearance that the back button has been disabled. I originally developed my code based on this blog post. It's a good read as he explains the approach in detail. Since then, I've refined his code as detailed below.
So I define preventBackButton () like this.
function preventBackButton () {
// Triggered when the back button is pressed, it will detect if the url hash changes from #rms to #no-back. If it does, then
// it harmlessly changes the url hash forward again by going from "#no-back" to "#rms".
// On initial page load, pushes states "#no-back" and "#rms" onto the history, making it the most recent "page" to detect future "back" button presses.
var history_api = typeof history.pushState !== 'undefined';
if ( history_api ) {
history.pushState(null, '', '#no-back');
history.pushState(null, '', '#rms');
} else {
location.hash = '#no-back';
location.hash = '#rms';
}
// This function creates an event handler on hash changes. This is coded to detect back button clicks.
window.onhashchange = function() {
// location.hash becomes "#no-back" when the user clicks back button
if ( location.hash === '#no-back' ) {
if ( history_api ) {
history.pushState(null, '', '#rms');
} else {
location.hash = '#rms';
}
}
};
} // function preventBackButton ()
Then I call it in $(document).ready()
$(document).ready(function() {
preventBackButton();
// Do other stuff...
});

Chrome extension popup showing by condition

I want to show popup by click, but only if condition is false.
After click to extension icon background js searchig for tab with current name. If tab found background js continues working. If not found - i want to show popup with instructions. Can`t understand how to just show popup in this case.
I can set popup by browserAction.setPopup(), but popup will be displayed only after next clicks.
I just want to show my popup one time.
It is definitely posible, I've seen this behavior on other extension.
var pcTabs; // tabs array
chrome.browserAction.onClicked.addListener(buttonClick);
function buttonClick() {
// getting tabs...
if(pcTabs.length != 0){
// working with finded tabs
} else{ // tabs not found
// show popup.html here. this is the question
}
}
upd.
This is my background.js. All code also in repository.
How to replace alerts to popups?

In short: you can't do it the way you describe.
When a popup page is set, chrome.browserAction.onClicked won't fire, and the popup will show.
When a popup page is not set, your event listener will execute, but you cannot show a popup programmatically. The most you can do is to set a popup for the next click.
So, what to do with it?
1) You can do an ugly hack (kind of) described in Edwin's answer. Always show the popup, check the condition as soon as possible, message the background and execute window.close() if the condition is met.
Of course, it is ugly.
2) The proper way to do this would be updating the popup whenever the condition can potentially change. That is, whenever you add/remove data from pcTabs, you should set/unset the popup with chrome.browserAction.setPopup
// ... somewhere ...
pcTabs.push(/*...*/);
chrome.browserAction.setPopup({popup: ''});
// ... somewhere else ...
pcTabs.pop(/*...*/);
if(!pcTabs.length) chrome.browserAction.setPopup({popup: 'popup.html'});
chrome.browserAction.onClicked.addListener(function() {
// Assume condition is met, popup didn't show
});
3) The fancy way to do it is to use experimental JavaScript method, Array.observe, that is only supported in Chrome.
var pcTabs = [];
Array.observe(pcTabs, function(changes) {
changes.forEach(function(change) {
if(change.object.length) {
chrome.browserAction.setPopup({popup: ''});
} else {
chrome.browserAction.setPopup({popup: 'popup.html'});
}
});
});

Alright this is my code:
chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
if (!tabs[0].url.includes('google.com')) { //check if current tab is not google: if false show popup, you can just put an else at the end and do w.e with your popup
chrome.tabs.query({currentWindow: true, url: 'https://*.google.com/*'}, function(tabs) { //since current tab is not google query tabs with google
if (tabs.length) { //check if there are any pages with google
chrome.tabs.highlight({tabs: tabs[0].index}, function(w) {}); //this is what I chose to do idk what you want to do but you can write w.e here
} else {
chrome.tabs.create({url: 'https://google.com'}); //other wise no pages with google open one
}
});
};
});

AngularJS directive for detecting pending changes before leaving/closing page

I have a problem. I have a registry form and many other forms.
Now I want to check whether the form is dirty and then I bring a confirm box if they really want to leave/close this page.
First of all, when I go back with the browser's back button and not with my other button ([button..] just 4 example) the confirmation box shows up two times and after two times confirming I'm still on the same page, just the form is resetted. When I press my own everything works fine.
Secondly, when I close the browser, my confirmation box shows up and afterwards the browsers confirmation box also shows up, but I only want one of them.
$scope.$on('$locationChangeStart', function (event, next, current) {
if ($scope.requestForm.$dirty) {
if (!$window.confirm('Unsaved Changes, leave Page?')) {
//cancel leaving view2
//works when clicking links, but doesn't work when using the back button
event.preventDefault();
}
} else {
}
});
$scope.$watch("requestForm.$dirty", function (newval) {
window.myGlobalDirtyFlag = newval;
});
window.onbeforeunload = function (e) {
if (window.myGlobalDirtyFlag === true) {
if (!$window.confirm('Unsaved Changes, close Page?')) {
//cancel leaving view2
//works when clicking links, but doesn't work when using the back button
return false;
} else {
}
}
};
$scope.$on("$destroy", function () {
window.myGlobalDirtyFlag = false;
});
May someone also have an idea how I bring this into an AngularJS directive, so I don't have to copy this code for every site where I have a form on it. (Every page only has 1 form, but every form name is different!)
My controllers are in seperate javascript files, (function blablaController() {}) and I pass this per routeProvider in my config file (templateUrl: blabla.html, controller: blabalController)
Regards,
Anthrax

Here is a service and directive that answers your question. Probably the only change you might consider making to it is using $window instead of window inside the service. As the instructions state, you'll just add the attribute unsaved-changes-warning to your form.
https://github.com/facultymatt/angular-unsavedChanges

How do I stop the page reload after selecting an autocomplete suggestion

I made an autocomplete for a form input field that allows a user to add tags to a list of them. If the user selects any of the suggestions, I want the page to use add the new tag to a section of tags that already exist without the page reloading.
I want this to happen with 3 scenarios:
The user types in the tag, ignores the autocomplete suggestions and presses enter.
After typing in any part of a query, the user selects one of the autocomplete suggestions with the arrow keys and presses enter.
After typing in any part of a query, the user clicks on one of the autocomplete suggestions with the mouse.
I have been able to make scenario 1 work flawlessly. However, scenarios 1 and 2 make the page reload and still doesn't even add the tag to the list.
Scenarios 1 and 2 are both called by the same function:
$j("#addTag").autocomplete({
serviceUrl:'/ac',
onSelect: function(val, data){
addTag(data);
}
});
And here is the code for addTag():
function addTag(tag){
var url = '/addTag/' + tag;
//Call the server to add the tag/
$j.ajax({
async: true,
type: 'GET',
url: url,
success:function(data){
//Add the tag to the displayed list of already added tags
reloadTagBox(data);
},
dataType: "json"
});
//Hide the messages that have been displayed to the user
hideMessageBox();
}
Scenario 1 code:
function addTagByLookup(e, tag){
if(e && e.keyCode == 13)
{
/*This stops the page from reloading (when the page thinks
the form is submitted I assume).
*/
e.preventDefault();
//If a message is currently being displayed to the user, hide it
if ($j("#messageBox").is(":visible") && $j("#okayButton").is(":visible")){
hideMessageBox();
}
else{
//Give a message to the user that their tag is being loaded
showMessageBox("Adding the tag <strong>"+tag+"</strong> to your station...",'load');
//Check if the tag is valid
setTimeout(function(){
var url = '/checkTag/' + tag;
var isTagValid = checkTag(tag);
//If the tag is not vaid, tell the user.
if (isTagValid == false){
var message = "<strong>"+tag+"</strong>"+
" was not recognized as a valid tag or artist. Try something else.";
//Prompt the user for a different tag
showMessageBox(message, 'okay');
}
//If the tag is valid
else{
addTag(tag);
}
}, 1000);
}
}
}
I know I used the e.preventDefault functionality for a normal form submit in scenario 1, but I can't seem to make it work with the other scenarios and I'm not even sure that is the real problem.
I am using pylons as the MVC and using this tutorial for the autocomplete.

So in case anyone wants to know, my problem was had an easy solution that I should have never had in the first place.
My input tag was embedded in a form which submitted every time the input tag was activated.
I had stopped this problem in scenario 1 by preventing the default event from occurring when the user pressed enter. But since I didn't have access to this event in the jQuery event .autocomplete(), I couldn't prevent it.

jQuery Modal that can be Queued

At the moment, I have a simple app that Ajax's to a server, gets some JSON and then does something with it. I'd like to add in messages to show loading images and other info, but I'm struggling with simplemodal at the moment because it doesn't queue modals, so it just fires everything as soon as it comes in. I've tried writing a queue for it, didn't work out so well :)
The app should:
Send ajax request (show modal, stop user clicking anything)
Ajax complete (hide modal, allow clicking)
If [for example] return JSON object has "message" set ( if (strJson.message)) { } ) show message as modal
Allow user to close modal
While they were reading the message, if another ajax call has come and gone, and we have more modals to show, they should be queued to show when the current one is closed.
This seems like the kind of thing that should be out there but I can't see anything that mentions it specifically.
Any ideas? :)

You can take the messages and put them into an array, then when the dialog is closed you can check to see if there is more messages, if there is pull the next message from the array and display it. Here it an example using jQuery UI Dialog.
HTML
<div id="dialog"></div>
JavaScript
var messages = [],
addMessage = function (msg) {
messages.push(msg);
if (!$('#dialog').dialog("isOpen")) {
displayMessage();
}
},
displayMessage = function () {
$('#dialog').html(messages.shift()).dialog('open');
};
$(function () {
$('#dialog').dialog({
autoOpen: false,
modal: true,
close: function () {
if (messages.length > 0) {
displayMessage();
}
}
});
addMessage('First Message');
addMessage('Second Message');
});