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.

Am I doing something wrong with @section tag?
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?

karnd01 · Accepted Answer · 2012-10-01 13:33:32Z

1

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

answered Oct 1, 2012 at 13:33

karnd01

531 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cameron Tinker · Accepted Answer · 2014-03-12 18:37:25Z

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>

edited Mar 12, 2014 at 18:37

Cameron Tinker

9,83710 gold badges49 silver badges88 bronze badges

answered Sep 24, 2012 at 1:20

user1418168

911 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related