Develop Reference

Click back button twice to go back in history

I have a single page application and would like to navigate through the history using browser back and forward button. I am facing an issue when i click the back button once it does not navigate to the previous page but stays on the current page. Then when i click the browser back again it takes me to the previous page. I have tried out the following.
class PageModule {
constructor() {
window.addEventListener("popstate",function(){
this.handleHistory(true);
}.bind(this),false);
}
handleHistory(popStateEventFired = false){
if(popStateEventFired){
history.replaceState();
}else{
history.pushState(null,null);
}
history.pushState(null,null);
}
When i issue a search i add the search param as a query param in the url ?question=testsearch and call the method handleHistory(). I have checked other answers to similar problem but they dont seem to help.
I have to do this using vanilla javascript or knockoutjs as we maintain HTML bindings using knockoutjs but am not able to achieve this properly.
Any help is appreciated

Any other way to Refresh the page using ng-Route

I have taken a text-box to input the content and after the input , I have created refresh() btn to refresh. My code is working fine. But the part is On the click of refresh() button , only the page should get refreshed , but my code is refreshing the complete window. I tried using $route.reload(), but it din't work properly. I browsed through some sites, but I din't got the appropriate result. I tried my best to do it. But hopefully, I couldn't continue further.
My plunker : https://plnkr.co/edit/0r7DXPWWtXmFYsHwY6Q3?p=preview
Here you can check it out.

Why you want reload the whole page? You can do just clear the fields instead of reload the whole page.
$scope.reloadPage = function(){
$scope.name = '';
}
or trigger your page load function or code
$scope.reloadPage = function(){
//You should call the function as what you did when the page load.
}
EDIT:
I know that functionality. But I have n number of text-fields. So its not an good practice to carry it
Then you should use with an object like $scope.objectname={textboxes1,2.....};
So you can easily clear the object like $scope.objectname={};
I have update your plunkr. please take a look that.
https://plnkr.co/edit/UxTNY1zgD4CrUEvERcHT?p=preview

Generate a live preview of a Post as it's being created/edited in Rails

In my Rails app I have a pretty standard post model (with a title and content).
I want the user to be able to see a live preview of the post_content textarea as they are creating/editing the post.
What is the best way to do this? I'm not even sure where to start (other than likely with Javascript).
I've got it working with a preview button; however, I'd like the preview to automatically refresh itself whenever the user presses a key on the keyboard (basically refreshing as they type/make changes).
Any ideas / feedback is appreciated.
Here's what I've got so far:
<button id="preview-btn">Preview</button>
JS:
$('#preview-btn').on('click', function () {
$('#preview').html($('#widget').val());
});

You can try to fire the function on key change:
$('#input_field_id').on('input', function () {
$('#preview').html($('#widget').val());
});

jqm data-rel="back" issue

imagine the following scenario:
i have a jquery-mobile formular, it´s results are linking to its resultpage.
on the resultpage i have this back button:
this works fine to just update the content and keep the submitted form data,
but
what if a user came from a search-engine or similiar extern link, then my back button links back to the searchengine/externLink .
so how do i Differentiate between those who came from my form or anywhere else in a jqm-way ?
i have a "start-search-page" i would love to link to if the user didn´t came from the search and i don´t want to miss the ajax-link from my search to the resultpage, use the same button and idealy i don´t have to set any cookie.
is there any hint or smarter attempt than check the server url from document.referrer ?
thanks in advance

You can check current page url using below code:
var prevUrl = $.mobile.activePage.data('url');
in case u want to perform different actions based on previous URL.
then on save the URL in the global javascript variable and on click of the button check the previous URL and do the your functionality. eg
Before Navigating to page:
var prevUrl = $.mobile.activePage.data('url');
on click of button:
if (prevUrl=="myurl") {
//do something
$.mobile.changePage('#search')
}
else {
$.mobile.changePage('#nothing')
}

is it possible to change change the url in address bar or browser on certain event

you all have used pinterest, you can see that when you click on any pin, a div is added and lightbox is shown on the same page but the url is changed to that of actual pin page. i have the same lightbox to show data, is it possible to change the url like that?..
one thing i want to tell is that, i have link which has onclick event which calls view() method, in which i am calling another page with ajax request, which shows the content of that page on my page, i want to change url when this link is clicked and back to previous url when closed..here is my code
function view(){
$.get('mypage.jsp', function(html) {
$(html).hide().appendTo('body').fadeIn(500);
}, 'html');
};

This feature is known as HTML5 Push State. Here's a related StackOverflow question which may provide more insight. Good tutorial for using HTML5 History API (Pushstate?)

I haven't checked Pintrest's solution. But is hash what you're looking for?
window.location.hash="Whatever-you-want-to-add-to-the-URL"
This will change http://stackoverflow.com/posts/11968693/ to http://stackoverflow.com/posts/11968693/#Whatever-you-want-to-add-to-the-URL

Yes, with HTML5's new history API. Where the lightbox is triggered, add something like this:
var hist = window.history;
hist.pushState({ image: [IMAGE URL] }, 'lightbox', [URL]);
This will change the current URL without reloading the page, and will create an entry in the browser history, so users can use their browser back button to return to the previous state (in this case, before they opened the lightbox).

You can change the url (not only the hash) by using the pushState or replaceState functions on the history object. More details: http://diveintohtml5.info/history.html