Javascript function works only from page, not from file

Question

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!

score 3 · Answer 1 · edited May 23 '17 at 12:29

3

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

edited May 23 '17 at 12:29

Community

1
1

answered Jul 10 '13 at 19:49

Ruan Mendes

90,375
31
153
217

But debug node comes to js file and functions, which i directly specified in tags like onclick. – Sergey Shoshin Jul 10 '13 at 19:55
"Tried, doesn't work" is such a poor comment. Did you look in your network tab, is the page actually finding the script? 99% chance that it's not, you just have to give it the right path. Do some digging and show us how it doesn't work, what is the actual resolved URL that the browser is trying to fetch? What is the URL of the page that is hosting the script? What is the actual location of the script? So many questions you've left unanswered... – Ruan Mendes Jul 10 '13 at 20:01
Scripts/Login.js - real place. As you can see on the photo, browser saw the file, it even allowed to work the first breakpoint. – Sergey Shoshin Jul 10 '13 at 20:07
@SergeyShoshin Sorry, but "Script/Login.js" is not the real path, it's a relative path. I'm asking about the actual absolute URL, like http://server/appname/Scripts/Login.js. We also need to know the full URL of the HTML file that hosts the JS. Can you upload your code so we can observe this behavior? It's hard to guess from the information you've given us. Check that the url that the autocomplete uses for AJAX is the same in both cases, is the code ever going into line 32? – Ruan Mendes Jul 10 '13 at 20:15
Please add all the information to the question itself (full path to script, full path to HTML file), whether line 32 is being hit, and if the URLS to the AJAX request are the same. The best thing you can do is duplicate the problem in a place where we can actually run your code – Ruan Mendes Jul 10 '13 at 20:22
Does this info matter? in both case code $(function()) ... achieved. But in case with external file, event doesn't happens. And in other case page script case all lines of the function are achieved. With both testing conditions. – Sergey Shoshin Jul 10 '13 at 20:33
Yes, all of my questions could matter. Are you asking for our help? Or are you figuring out what matters on your own? – Ruan Mendes Jul 10 '13 at 20:39

score 0 · Accepted Answer · answered Jul 11 '13 at 15:19

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

score 0 · Answer 3 · answered Jul 11 '13 at 16:25

0

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

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

answered Jul 11 '13 at 16:25

Sergey Shoshin

475
4
17

Javascript function works only from page, not from file

3 Answers3