Mvc 4 - jQuery mobile - @section scripts not working after navigation

Question

I am new to mvc 4 and jquery mobile, and what I'm trying to do is display the map using the jquery-ui-map library.

Here is what I am:

1) On the layout page, I have the following code below before the end of body tag

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

2) In the index view, I have 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 action link above, it will occupy the user's location and display a marker on the google map.

On the MAP browse page, I have the following code below

 @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 problem I am facing .... When I click on the action link, it displays the map view, but the map does not appear.

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

• Am I doing something wrong with the @section tag?
• How to make the page reload it. I tried to do Ajax.Actionlink or set cacheduration to zero in the Action Controller method, still not go.

I tried all available questions and answers in this forum, but still have not worked.

Any idea why this is happening?

Answer 1

The oath!! It took most of my time to figure this out ... I updated nuget packages to get the latest version of Web.Optimization and another dll, but still haven't.

Finally, I came to this article Scott Hanselm Created a great mobile site .

When I was looking through an article, I came across this script and put it on my _Layout page. Now my site is working as expected ....

 <script type="text/javascript"> $(document).bind("mobileinit", function () { // jQuery Mobile Ajax navigation does not work in all cases (eg, // 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 ajax functionality, you can also move @RenderSection ("scripts" required: false) is inside you data-role = "page" div