1

I have an Application developed using MVC 4 & EF. I am loading different partial views upon clicking various menus here is my Ajax code 

$.ajax({
            url: url,
            dataType: "html",
            method: "GET",
            //data: { url: url },
            success: function (result) {
                $("#Content").html(result);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                $("#Content").html("An error occurred: " + xhr.status + ", " + thrownerror);
            }
        });

User click on Menu 1 and will open a partial view1 and on click of menu 2 another partial view2 will open.I would like to go back to previous View (i.e : PartialView1).here the problem i am facing is Browser Go back button will not work...I do not want to use any plug in . Is there any way to achieve the functionality with code. and without plug in

tereško
  • 58,060
  • 25
  • 98
  • 150
jubi
  • 569
  • 1
  • 10
  • 34
  • use command(ctrl) + k to highlight a code block – Abdul Ahmad Feb 04 '16 at 17:14
  • and you can't use the browser back button to go back to a partial view (as far as I know). the back button is for going back to a full-page in the past – Abdul Ahmad Feb 04 '16 at 17:15
  • The page i am expecting is menu and the content which is a partial view from the controller o/p. – jubi Feb 04 '16 at 17:18
  • You'll need to modify the URL with each AJAX call. Then you can use the History API to store and recall these URL. https://developer.mozilla.org/en-US/docs/Web/API/History_API – Jasen Feb 04 '16 at 17:20
  • See this http://stackoverflow.com/questions/21426140/getting-backbutton-to-work-in-single-page-website-and-implementing-speaking-ur – Jasen Feb 04 '16 at 17:23

1 Answers1

1

Based on your example "No, this is not possible". You are simply changing the HTML contents of an element on a page without affecting the History State of the browser. For this reason, the browser is unaware of any change and will not enable Back or Forward functionality.

You can implement this functionality yourself (Information on push state here) if you do not want to use any external libraries.

Pepto
  • 1,434
  • 10
  • 13
  • Yes, i do not want to use external libraries. In my case the back button itself is disabled . – jubi Feb 04 '16 at 17:45
  • The back button is disabled because the address (URL) is never changed. This is referred to as history state in the browser. You will need to add a history state to the browser for the back button to be enabled and work as you require – Pepto Feb 04 '16 at 17:48
  • Yes, i am not changing the URL This is what i am expecting ..Can you refer me with an axample, which will be greatful – jubi Feb 04 '16 at 17:50
  • What you are trying to do using just jQuery with .html would honestly be very complicated. If you change the URL using push state and then the user "refreshes" the browser you will have to handle that case too. Please have a look at https://developer.mozilla.org/en-US/docs/Web/API/History_API OR consider using a library for routing such as Backbone.js to accomplish this. – Pepto Feb 04 '16 at 17:55
  • So what you said is whenever i do the ajax call to load my view i should change the URL using push state. – jubi Feb 04 '16 at 18:03
  • That is correct. But you should use hashing syntax to prevent 404 errors from occurring e.g. instead of something like //mysite.com/partial1 and then //mysite.com/partial2 you should do //mysite.com/somepage#partial1 and //mysite.com/somepage#partial2. – Pepto Feb 04 '16 at 18:05
  • But you also have to write the code that detects the location e.g. #partial2 and set the view accordingly. This is why it is complicated and advanced =( No quick and easy solution I'm afraid – Pepto Feb 04 '16 at 18:06
  • ooof....honestly i cant make use of any external libraries. i am afraid on how i an going to implement . – jubi Feb 04 '16 at 18:10
  • One change go to https://github.com/remy/html5demos and have a look at demos/history.html. This is a great starting point that you may find helpful for exactly what you need. Mark this as answered if it works =) Happy Coding! – Pepto Feb 04 '16 at 18:18