13

I am developing a JQuery mobile application in ASP.net MVC4 razor using VSRC, In cshtml page section scripts are written like the following. 

@section Scripts
 {
  <script type="text/javascript">
     $(document).ready(function () {
        jQuery("#register-form").validationEngine();
  });
 </script>
}

In layout.cshtml I have...

"@RenderSection("Scripts", false)".

It works for the initial page (page which render first), but when it linked via "ActionLink" to other pages then the section script written in those pages are not working.

Any ideas?

Please help, Thanks.

fassetar
  • 615
  • 1
  • 10
  • 37
Erma Isabel
  • 2,167
  • 8
  • 34
  • 64

4 Answers4

3

Following the line of Erick Bacallao, I'll sugest you the following:

Avoid using URL.Content() to load .min.js o .js files. Scripts.Render() choose the right file in every scenario (.js in Debug and .min.js in Release).

The modified _Layout.cshtml would look like this:

    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript">
        $(document).bind("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
        });
    </script>
    @Scripts.Render("~/bundles/jquerymobile")
    @RenderSection("scripts", required: false)

NOTE: Disabling jQuery MObile AJAX (like this does) is a patch... not a complete solution! UX decresases a lot.

sesispla
  • 300
  • 1
  • 4
1

I had the same problem. In order to workaround this I just avoid the "Scripts" section.

Remove @section Scripts{ from every page and put your js code at the end of the page.

For your example, make sure to move @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile") to the line before </head> in _Layout.cshtml. This will guarantee that jquery is loaded when it gets to $(document).ready(function () {...

===============================================

explanation about why it happens and other solution. http://lextell.com/blog/2012/10/23/script-section-is-not-rendered-in-asp-net-mvc-4-jquery-mobile-when-navigate-to-another-page-2/

Erick B
  • 478
  • 5
  • 11
  • this is a problem when you take all your scripts at the bottom of the page to make html load first, but still it's a solution – I.G. Pascual Jun 27 '13 at 14:23
  • 9
    -1: although its an old answer, found that while using google, and it is actually a bad / wrong answer for the problem. Because it is actually good practice to put the javascript to the bottom of the page... I guess the problem was that the section was not populated from a partial view, or any other issue. But this workaround is just BAD! Also see http://stackoverflow.com/questions/7556400/injecting-content-into-specific-sections-from-a-partial-view-asp-net-mvc-3-with – MichaC Jan 08 '14 at 15:42
0

Isn't this caused by the ajax postback?

What i believe is happening is that the dom is changing in the Ajaxified area and the DOM is not rebinding the events to it due to the document.ready only running once at page load.

To get this working you would need to re-initiate the bind of the DOM to the event after partial update.

historically this has always been an issue with ASP.Net updatepanels and docuemt.ready, the way to work around it is to put the code into a pageLoad() instead as this get called every postback.

Not sure that this will work with MVC though.

Checkout this for more info http://www.dotnet-tricks.com/Tutorial/aspnet/D719120612-Difference-between-document.ready-and-window.onload-or-pageLoad.html

Alex Stephens
  • 3,017
  • 1
  • 36
  • 41
0

I really don't know why and do not have the time yet to figure it out, but I had the same problem this morning. It seems like @section scripts isn't working when it is placed on the root of the cshtml view page. The following code fixes this:

@{
    @section scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }
}
pkmelee337
  • 561
  • 5
  • 11