My project is in angualr js which is working in my local with highcharts fine but when I tried to deploy on the server it is giving error highhcarts is not define . whne i searched on the internet i found there is problem with grunt.js which is minify the js so does any one have idea how to get rid of that error (highchart is not define!!! )
Either you have included the highcharts script twice, or you haven't included the highcharts script at all.
When using highcharts-ng you need to include these:
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.src.js"></script>
<script src="../../src/highcharts-ng.js"></script>
<script src="app.js"></script>
</head>
Here is a DEMO of using "highvcharts-ng". Click on "ExternalResources" to see what scripts are loaded.
Related
I started a new laravel project yesterday. Followed the guide from a guy in YouTube. Everything works until I installed laravel auth and realised none of the bootstrap dropdown works, even when i create new one from their website.
Firstly, I thought I messed something up in composer, because I wanted to get rid of the bootstrap and later I changed my mind and put it back. Then I created new Laravel project and started from scratch again. Even then my dropdowns are not working. I checked for similar problems in google, but none of them helped.
By default, bootstrap.bundle.js is not included inside your Laravel app. To add this:
Open 'resources/js/bootstrap.js' file and add the following code at the last line of this file.
require('bootstrap/dist/js/bootstrap.bundle');
Hit save and run npm run dev and it will work finally!
I had the same problem, it is happening because bootstrap has not been loaded properly and I simply solved it by pasting this link in <head> tag
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
and paste this in the lower region of <body> tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
It seems that your bootstrap has not been loaded at all. Make sure that you include the bootstrap library in your view. If you are using WebPack, check if you are mixing the external libraries into one, and include that one in your main blade file.
Sometimes you should change order of script links for that to work
Problem
I have the following problem that I can't fully understand what is happening and why.
One specific page is attempting to use $.fn.ajaxQueue .
When I load this page on my locally (using localhost:8080) I get the error:
TypeError: $.fn.ajaxQueue is not a function[Learn More]
When I load the deployed page (same code), I don't get the error but I get a warning:
jquery-1.7.1.min.js:4 Synchronous XMLHttpRequest on the main thread
is deprecated because of its detrimental effects to the end user's
experience. For more help, check https://xhr.spec.whatwg.org/.
Series of Imports
The series of <script> statements is the same on both local and deployed.
I am noticing that the JQuery <script> tag is not firstt. Shouldn't JQuery be the first thing that is imported???
<link href='scripts/jquery/src/skin/ui.dynatree.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/utils/jquery.tablednd.js"></script>
<script type="text/javascript" src="js/utils/jQueryUtils.js"></script>
<script src='scripts/jquery/jquery/jqueryBeforeTooltip.js' type='text/javascript'></script>
<script src='scripts/jquery/jquery/jqueryAfterTooltip.js' type='text/javascript'></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery/src/jquery.dynatree.js"></script>
<script type="text/javascript" src="scripts/jquery/jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="scripts/jquery/plugins/ajaxautocomplete/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="scripts/jquery/plugins/ajaxautocomplete/chosen/chosen.css"/>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
Questions
Why would the error/warnings be different depending on if the server
is localhost or another domain? Is there a logical reason or is it a
configuration difference?
Is the list of imports correct? Shouldn't JQuery be first?
Can I add a try/catch to the statement trying to use $.fn.ajaxQueue and if it is undefined, dynamically load it and try again?
It turns out, that there were javascript imports on a specific page that was breaking the page. After we deleted the duplicate imports, everything worked fine:
<script src='js/jqueryFileupload/jquery.ui.widget.js'
type='text/javascript'></script>
<script src='js/jqueryFileupload/jquery.iframe-transport.js'
type='text/javascript'></script>
<script src='js/jqueryFileupload/jquery.fileupload.js'
type='text/javascript'></script>
<script type="text/javascript" src="js/utils/jQueryUtils.js"></script>
I'm following the React tutorial here https://facebook.github.io/react/docs/tutorial.html which is fine. I have the files downloaded and i have run the server which I can see at http://localhost:3000
The problem I am having is that I cannot seem to update any of the files in the directory. The changes are not being applied.
I'm being told to delete the examples.js line before I start so I no longer see the completed tutorial and start from scratch. Even when I do, nothing happens. I deleted a bunch of code from the package.json as well just for testing but no changes.
I feel I'm missing something after running the server and making changes to files to allow this to happen. Does anyone have any ideas? Reloading the server doesnt have an effect either.
Below is the code for the tutorial index.html
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://unpkg.com/react#15.3.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="https://unpkg.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/remarkable#1.7.1/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="scripts/example.js"></script>
<script type="text/babel">
// To get started with this tutorial running your own code, simply remove
// the script tag loading scripts/example.js and start writing code here.
</script>
</body>
thanks
In my jsfiddle below:
http://jsfiddle.net/5fs7e6wt/5/
I manually import jQuery 1.7.2 from a Google CDN but as you can see the dropdown does not work.
However, when I change jsfiddle to use jQuery 1.7.2 onLoad within the left side bar, the drop down now appears to work.
I am fairly confused as to what changed in my dev environment or what jsfiddle is pulling in additionally that I am missing?
Any advice on how to debug this situation would be very appreciated.
Just looking at the new "sources" pulled in from the page source is fairly counfusing as it is mixed with the pre-existing jsfiddle javascript.
My imports look like:
<link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/2.2.2/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/2.2.2/js/bootstrap.min.js" charset="utf-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
This is happening because you are including bootstrap before jQuery. If you check out the console you will see that you are getting the error:
Uncaught TypeError: undefined is not a function
Simply switch the script elements like in this fiddle.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/2.2.2/js/bootstrap.min.js" charset="utf-8"></script>
I have a project built on top of Zurb Foundation, now I need to use some FuelUX components such as "wizard" and "tree". For that I include Twitter Bootstrap library (2.3.2 version downloaded from Bootstrap site) and also include "all.min.js" from FuelUX, when I use the same HTML markup as come in index.html but for some reason it doesn't work. So I tried to fire the plugin using $("#MyWizard").wizard() and get this error:
TypeError: $(...).wizard is not a function
$("MyWizard").wizard();
Any ideas in how to get this work?
How I include scripts
This is the order in which I include scripts:
<script type="text/javascript" src="/bundles/product/js/bootstrap/bootstrap.min.js?0.1"></script>
<script type="text/javascript" src="/bundles/product/js/fuelux/all.min.js?0.1"></script>
<script type="text/javascript" src="/bundles/stock/js/jquery-impromptu.js?0.1"></script>
<script type="text/javascript" src="/bundles/product/js/product.js?0.1"></script>
<script>
$("MyWizard").wizard();
</script>
This was also posted to https://github.com/ExactTarget/fuelux/issues/259 and from what I'm seeing, being careful to follow the instructions at https://github.com/ExactTarget/fuelux/wiki/Using-Fuel-UX#simple-integration-into-a-page should straighten things out. Hope this helps!