Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Smith.B 8 posts 99 karma points
    Feb 02, 2018 @ 15:58
    Smith.B
    0

    JavaScript runtime error: '$' is undefined

    Using Umbraco And Getting Started
    Umbraco 7

    Hi,

    i have add below line into Master.cshtml inside <body ... </body> 

    <script src="/Scripts/jquery-1.12.4.js"></script>

    when i run the web, i am getting '$' undefined

    * i try to move above line into <head> ... <head> result still the same.

    this is my partial view :

    @inherits UmbracoViewPage<umbracoExternalAPI.Models.TestModel>

<script type="text/javascript">
        $(document).ready(function ()
        {
            $('#ShipArea').change(function ()
            {
                if ($(this).val() == 'i')
                {
                    $('#country-inputs').show();
                }
                else
                {
                    $('#country-inputs').hide();
                }
            });
        });
</script>

    @using (Html.BeginUmbracoForm("DoSubmit", "Test", FormMethod.Post))
    {

    Please help. Thanks.

    Copy Link
  • Steve Morgan 1346 posts 4453 karma points c-trib
    Feb 02, 2018 @ 16:45
    Steve Morgan
    0

    View the source of the page. If the script block is rendered before the reference to the jquery file then you'll get this.

    Also check that the jquery file is being loaded successfully (use browser tools - look for a 404 in the network tab).

    The best way of doing this is to add the scripts at the bottom of the master template and then your custom scripts below it from the page templates - use a template section to do this - see http://www.computermagic.gr/tutorials/umbraco-7/templates/sections/

    Though if you want custom javascript in the partials you might not be able to go this way.

    Copy Link
  • Smith.B 8 posts 99 karma points
    Feb 03, 2018 @ 03:09
    Smith.B
    0

    Hi Steve,

    i have try to add in the @RenderSection("Header") in Master.cshtml and also 

    @section Header {
    <p>Hello bbbbbbbbbbbbbbb</p>
}

    in Home.cshtml, when i run the web and look at the source of the page, the 'Hello ......' is not in the source, i am missing something ?

    I am new to umbraco, just install it 1 week ago, and i just need to execute some javascript in my page, the umbraco TV javascript video is useless, just show javascript alert, the video should show step by step how to modify the Master.cshtml or Home.cshtml or _layout.html to import the js file, and how to execute the js file function into page ( template ? partial view ? or ? )

    * i am using umbraco starter kit, in this project got any javascript sample ?

    Please help.

    Copy Link
  • Rune Hem Strand 147 posts 911 karma points hq c-trib
    Feb 04, 2018 @ 20:06
    Rune Hem Strand
    100

    Hi Steve

    The starterkit already loads in jQuery. You can see it in the bottom of the Master template.

    I tried adding some jQuery both in the existing umbraco-starterkit-app.js like this:

    $(document).ready(function(){
    $("body").click(function(){
        alert("jQuery click event");
    });
});

    and it executes just fine when I click on any page. Also tried it from a custom /scripts/script.js file (added it in the Settings section under Scripts) and that worked as well after adding it to the Master template like so:

    ...
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>
<script src="@Url.Content("~/scripts/umbraco-starterkit-app.js")"></script>

<script src="~/scripts/script.js"></script>
...

    Either way the custom script runs after loading in jquery. If you execute your script before it will not work.

    If you want to use named sections from a child template you will have to render the section after as well in Master.cshtml. Eg:

    ...
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>
<script src="@Url.Content("~/scripts/umbraco-starterkit-app.js")"></script>

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

    and then from the child template, eg. Home.cshtml:

    ...
@section Scripts
{
    <script src="~/scripts/script.js"></script>
}
...

    You cannot use sections from a partial view, only from child tempates.

    Hope that helps :)

    all the best
    Rune

    Copy Link
  • Smith.B 8 posts 99 karma points
    Feb 06, 2018 @ 08:05
    Smith.B
    0

    thanks.

    Copy Link
  • Rune Hem Strand 147 posts 911 karma points hq c-trib
    Feb 06, 2018 @ 13:19
    Rune Hem Strand
    0

    You're welcome :D

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft