Getting not a function error, external script not loaded? - javascript

I'm trying to use an input mask script on my site. When I reference function from the external script I get the error $(...).inputmask is not a function. I'm thinking this may be because the script isn't being loaded first; however, I implemented require.js and the issue persists.
The two ways I've loaded the script:
I originally loaded the script straight from my server:
<script src="{% static 'jquery.inputmask.bundle.js' %}"></script>
Then Method 1:
<script data-main="{% static 'jquery.inputmask.bundle.js' %}" src="{% static 'require.js' %}"></script>
Now Method 2:
<script data-main="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js" src="{% static 'require.js' %}"></script>
I'm referencing the source in my script with:
$(":input").inputmask();
$("#phone").inputmask({"mask": "(999) 999-9999"});
I trouble shot a bunch of things that haven't worked but think I might just be overlooking a small thing. Any ideas?
I've also tried implementing:
<script> $("#txt").inputmask({"mask":"(999) 999-9999"}); </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/inputmask.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/jquery.inputmask.js"></script>
Which results in TypeError: $("#txt").inputmask is not a function. (In '$("#txt").inputmask({"mask":"(999) 999-9999"})', '$("#txt").inputmask' is undefined)

First give the inputmask.js reference and then give jquery.inputmask.js, this should work for input-mask plugin.
Check this Fiddle.
For more refernce: https://github.com/RobinHerbots/Inputmask/issues/1029
$("#txt").inputmask({"mask":"(999) 999-9999"});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/inputmask.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/jquery.inputmask.js"></script>
<html>
<input type="text" id="txt" />
</html>

Related

why doesn't marked('#content') render well

Now I have three scripts in my html file. And there aren't any code about marked in mystyle.js.
So the question here is:
output of my html file in localhost
Another site render well
I want to know why would this happened? Thanks!
<script type="text/javascript" src="{% static 'jquery/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/mystyle.js' %}"></script>
You need to put a space between the hash and text. Marked will not render it correctly otherwise.
// prints <p>headline</p>
marked('#headline');
// prints <h1>headline</h1>
marked('# headline');

How do I obtain a Chart instance for Chart.js

I am using Python/Django with the default Django templates.
I have this in the head (other django static files in this location work fine):
<script type="text/javascript" src="{% static "js/Chart.min.js" %}"></script>
Naturally, I have Chart.min.js extracted from the master Chart.js download into the static js directory.
In my body I have:
<div class="graph">
<canvas id="dgraph" width="600" height="400"></canvas>
</div>
Also in the body I have:
<script type="text/javascript" src="{% static "js/stuff.js" %}"></script>
In stuff.js I have:
var data = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
// Get the context of the canvas element we want to select
var ctx = document.getElementById("dgraph").getContext("2d");
new Chart(ctx).Doughnut(data, {});
However, when I try and display this in a browser (Chrome as it happens) I see this in the console:
Uncaught ReferenceError: Chart is not defined
Where on earth is the Chart object obtained from? It seems to be pretty fundamental and I feel as if I've followed every instruction available on google and stackoverflow. Please help!
The Chart object is defined in Chart.min.js. It looks like that script isn't being loaded.
I think you're missing quotes around the value of the src attribute in the <script> tag in your header - try:
<script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
I discovered that by moving the Chart.min.js included line BELOW the jQuery included line, it springs into life. Like so:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
Presumably Chart.js is dependent on jQuery.

js scripts not loading in jinja2 template

I have a situation where, replacing a url string "/CreditHistory/10216" with a jinja2 variable {{creditNumbers|safe}}, messes up the loading of javascript files. More specifically, this works;
{% block Scripter %}
<script type="text/javascript" src="./static/assets/js/crossfilter/crossfilter.js"></script>
<script type="text/javascript" src="./static/assets/js/d3/d3.js" charset="utf-8"></script>
<script type="text/javascript" src="./static/assets/js/dc.js/dc.js"></script>
<script type="text/javascript" src="./static/assets/js/queue/queue.js"></script>
<script src='./static/assets/js/graphsFordringer.js' type='text/javascript' charset="utf-8"></script>
<script type="text/javascript">
queue().defer(d3.json, "/CreditHistory/10216").await(makeGraphs);
</script>
{% endblock %}
But, this does not;
{% block Scripter %}
<script type="text/javascript" src="./static/assets/js/crossfilter/crossfilter.js"></script>
<script type="text/javascript" src="./static/assets/js/d3/d3.js" charset="utf-8"></script>
<script type="text/javascript" src="./static/assets/js/dc.js/dc.js"></script>
<script type="text/javascript" src="./static/assets/js/queue/queue.js"></script>
<script src='./static/assets/js/graphsFordringer.js' type='text/javascript' charset="utf-8"></script>
<script type="text/javascript">
queue().defer(d3.json, "{{creditNumbers|safe}}").await(makeGraphs);
</script>
{% endblock %}
The errors that gets thrown in the web-browser implies that none of the javascript files get loaded. One of them is for example that queue is not a defined function.
What is also apparent is that the "{{creditNumbers|safe}}" variable does load to "/CreditHistory/10216". So, in short the variable loading seems to break the javascript loading. Not that I have found reference to similar issues in the documentation, so that probably is not what is happening.
EDIT:
It now seems that I have misunderstood the entire situation. It looks like it is the way that the jinja2 template variable is declared in the app.py file that is the root cause.
The #app.routecode that is failing is;
#app.route('/KundeFordringer/<int:KundeNr>')
def fordringer(KundeNr):
jsonSti = "/CreditHistory/"+str(KundeNr)
return render_template("fordringer.html", creditNumbers=jsonSti)
However, if I change the code to the following, it works fine;
#app.route('/KundeFordringer')
def fordringer():
return render_template("fordringer.html", creditNumbers="/CreditHistory/10216")
As mentioned previously, viewing the source code from the web browser, one could see that the "/CreditHistory/10216"was loaded when using the first #app.route declaration. But apparently something is, never the less, off with that way of doing it.
Any help would be greatly appreciated
The loading of the javascript files is relative to the current url.
Basically if you are browsing
http://mywebsite.com/KundeFordringer/456
Then the browser is going to try to load those files:
http://mywebsite.com/KundeFordringer/456/static/assets/js/crossfilter/crossfilter.js
http://mywebsite.com/KundeFordringer/456/static/assets/js/d3/d3.js
http://mywebsite.com/KundeFordringer/456/static/assets/js/dc.js/dc.js
http://mywebsite.com/KundeFordringer/456/static/assets/js/queue/queue.js
What you want is probably
http://mywebsite.com/static/assets/js/crossfilter/crossfilter.js
http://mywebsite.com/static/assets/js/d3/d3.js
http://mywebsite.com/static/assets/js/dc.js/dc.js
http://mywebsite.com/static/assets/js/queue/queue.js
Their might be a problem either with your script tags:
<script type="text/javascript" src="./static/assets/js/dc.js/dc.js"></script>
That needs to be renamed
<script type="text/javascript" src="/static/assets/js/dc.js/dc.js"></script>
Or a problem with your static_url_path.

Laravel 4: Error: Popover requires tooltip.js

I am using Laravel-4-Bootstrap-Starter-Site. I have this issue loading javascript files: Error: Popover requires tooltip.js It seems that is not causing majors problems but I am losing functionality.
Checking source code we can see that popover is loaded first and before than tooltip file.
<!-- Javascripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/popover-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/tab-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/alert-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/transition-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/modal-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/scrollspy-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/carousel-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/dropdown-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/tooltip-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/collapse-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/button-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/affix-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/wysihtml5/wysihtml5-0.3.0-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/wysihtml5/bootstrap-wysihtml5-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/datatables-bootstrap-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/datatables.fnReloadAjax-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/jquery.colorbox-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/prettify-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/jquery.uploadfile-88e9f41770fc597c379b2a75086bcb0f.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/common-75a4c5198cfe0c4468991a6000253513.js"></script>
<script type="text/javascript">
$('.wysihtml5').wysihtml5();
$(prettyPrint);
</script>
Question: is there a way to solve this issue?
I have had the same problem. The reason that happens is because basset loads the resources in order by name. and since p comes before t obviously it gets loaded afterwards coming up with the error. Hacking your way around the problem simply rename tooltip with to atolltip in vendors/twbs/bootstrap/js or instead requiring the directory to load the files in basset config you require each single js file in the order you want. The second option i did not test but should work.

twipsy js not working on rails project

Let me first say I am very unfamiliar with javascript, but I am trying use twitter's twipsy (http://twitter.github.com/bootstrap/javascript.html), their take on jQuery's tipsy.
Here are all the scripts that are getting loaded:
<script src="/javascripts/effects.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/controls.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/rails.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/bootstrap-twipsy.js?1326303918" type="text/javascript"></script>
<script src="/javascripts/application.js?1314051118" type="text/javascript"></script>
As you can see, bootstrap-twipsy.js is getting loaded.
Then on an index.html.erb page I am trying the following code:
<a href="#" id="example" rel='twipsy' title='Some title text'>text</a>
<script>
$(function() {
$('#example').twipsy();
$("a[rel=twipsy]").twipsy({
live: true
});
})
</script>
I get nothing. The reason I have the ('#example').twipsy in there is that I was just trying to call it two different ways, but neither worked. Does anyone see what I'm doing wrong?
In a similar question (http://stackoverflow.com/questions/4916501/where-to-put-my-js-for-tipsy-jquery-tooltip) someone found that their prototype.js was causing conflicts, but I've removed that and I still got nothing.
Installing jquery-rails did the trick

Categories

Resources