mvc 4 - Jquery mobile - @section scripts not working after navigation

Question

I'm newbie to mvc 4 and jquery mobile and what i'm trying to do is display a map using jquery-ui-map library.

Here is what I've:

1) On the layout page I've the following code at the bottom before "end of body" tag

@Scripts.Render("~/bundles/jquery","~/bundles/jqueryui")
@Scripts.Render("~/bundles/jquerymobile")
@RenderSection("scripts", required: false)

2) On the Index View I've the following Actionlink

@Html.ActionLink("Display Map","Map", "Home", null, 
        new { data_role = "button", data_theme = "b", data_mini = "true" })

When I click on the above action link, It will take the user location and 'll display the marker on a google map.

On the MAP view page I've the following code at the bottom

@section scripts{

     <script type="text/javascript" src="http://maps.google.com/maps/apis?sensor=false">
     </script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/map/demo.js")"></script>
    @Scripts.Render("~/Scripts/map/jquery.ui.map.min.js")
    @Scripts.Render("~/Scripts/map/jquery.ui.map.overlays.min.js")
    @Scripts.Render("~/Scripts/map/jquery.ui.map.extensions.js")
    $(function () {
            //code to display the map
        });
 } 

Here is the issue I'm having.... When I click on the action link it will display the Map View but no map is displayed.

If I refresh the page (f5 or click on browser refresh icon), it will call the $function() and the map is displayed.

1. Am I doing something wrong with @section tag?
2. How do I force the page to reload it.. I've tried do Ajax.Actionlink, or set cacheduration to zero in Controller Action method, still no go.

I've tried all the available questions and answers in this forum and still I didn't get it to work.

Any idea why this is happening?

Answer 1

Vow!! It took most of my day in figuring out this.... I've upgraded the nuget packages, to get the latest Web.Optimization and other dll's but still its a no go until now.

Finally, I came acorss this article by Scott Hanselman's Create a great mobile site.

As I was going through the article, I came across this script and put it in my _Layout page. Now my site works as expected....

<script type="text/javascript">
 $(document).bind("mobileinit", function () {
     // jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
     // when navigating from a mobile to a non-mobile page), especially when going    back, hence disabling it.
     $.mobile.ajaxEnabled = false;
  });
    </script>

Answer 2

If you want to keep the ajax functionality you can also move the @RenderSection("scripts", required: false) is inside you data-role="page" div