Sergey Shoshin
Sergey Shoshin

Reputation: 475

Javascript function works only from page, not from file

Hello!

I declare function in extern js file:

$(function () {
        $('[data-provide=typeahead]').each(function () {
            var self = $(this);
            self.typeahead({
                source: function (term, process) {
                    var url = self.data('url');
                    console.log(url);

                    return $.getJSON(url, { term: term }, function (data) {
                        return process(data);
                    });
                }
            });
        });
    });

But it doesn't works. After step to the function, it doesn't go on to bypass the content.

Extern file

Telling link on partial master page:

...
<script src="~/Scripts/Login.js?v.3.0"></script>
... 
<div class="container">
        @RenderBody()
</div>
...

It start to work only if I'm placed this code directly on page.

on page

What's a problem?

Thanks!

Upvotes: 0

Views: 147

Answers (3)

Sergey Shoshin
Sergey Shoshin

Reputation: 475

And, as other case just write in view page this code:

<script src="@Url.Content("~/Scripts/Login.js?v.3.0")"></script>

Upvotes: 0

Sergey Shoshin
Sergey Shoshin

Reputation: 475

I resolved the problem. All the same, Juan Mendez was right. The problem was in link to the script file. Instead of <script src ....>...</script>

i'm create bundling

1) Create file BundleConfig.cs in App_Start folder with code like this:

public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-*"));

            bundles.Add(new ScriptBundle("~/bundles/login").Include(
                        "~/Scripts/Login.js"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrapJS").Include(
                        "~/Scripts/bootstrap*"));

            bundles.Add(new StyleBundle("~/bundles/ProfitStyle")
                            .Include("~/Content/ProfitStyle.css"));

            bundles.Add(new StyleBundle("~/bundles/bootstrapCSS")
                            .Include("~/Content/bootstrap*"));
        }
    }

Here we registered bundles on our content files.

2) Create init bundles in Global.asax, from adding code line:

BundleConfig.RegisterBundles(BundleTable.Bundles);

3) And just added link to files where we need:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/login")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/bundles/bootstrapCSS")
@Styles.Render("~/bundles/ProfitStyle")

SORRY, JUAN

Upvotes: 0

Ruan Mendes
Ruan Mendes

Reputation: 92274

Yo can't use ~ on the client side, it's an ASP specific feature that only works when you use <script runat="server">

<script src="~/Scripts/Login.js?v.3.0"></script>

It's very likely that you're giving it the wrong path. Look at your network tab and make sure the request for that script worked

Try

<script src="/Scripts/Login.js?v.3.0"></script>

See slash(/) vs tilde slash (~/) in style sheet path in asp.net

Upvotes: 3

Related Questions