I have just downloaded mdbootstrap. Upon following the instructions for implementing a side-nav on my webpage I get the following error when I try to initialize it:
Uncaught TypeError: $(...).sideNav is not a function
at index.html:133).
Kindly help. I have tried rearranging the order of my files but this doesn't seem to help.
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
$(".button-collapse").sideNav();
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);
</script>
Watch out, the sideNav component is only for pro users.
Perhaps you try to import a premium component with the "cheap" version of mdbootstrap
You need to load jQuery first.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
$(".button-collapse").sideNav();
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);
</script>
And make sure you refresh the file in the web browser without cache. You can refresh it by hiting Shitf + F5 in Chrome.
You need to load jQuery sideNav first. Do like this:
$(function(){
const Ps = new PerfectScrollbar();
$(".button-collapse").sideNav();
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);
})
Related
I want to show google dfp unit when user click on navbar
$(document).ready(function () {
var navbar = false;
var navslot = null;
$(document).on('click', '.new_car_nav', function(){
navslot = googletag.defineSlot('/10176910/NavBar', [[250, 250]], 'ad_navbar').addService(googletag.pubads());
googletag.enableServices();
googletag.display('ad_navbar');
});
});
Issue is that it gives an error
Exception in queued GPT command TypeError: $ is not defined
Either we can use jquery in it or not? If no then how can I implement it?
You need to include jQuery, add this to your <head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
You are missing jQuery library, you need to include it into the head section before any other library includes.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hope this will help you.
I'm trying to get a functional lightbox to work on my page using code from 'bootply.com/' but it does't seem to work. It works as a link, but not as a lightbox. I get an error relating to the Javascript which states '$ is not defined', but I can't seem to locate the issue. I'm simply replicating the code, so not sure what I'm missing!
<script type="text/JavaScript">
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
http://www.bootply.com/71401
Any help is appreciated.
you have to include jQuery.
if you have jQuery lib then
<script src="jquery-1.11.2.min.js"></script>
or
use jQuery CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
You are missing the jQuery library..
Include this in the top of your HTML before you attempt to use the $
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
Alternatively you can download the jQuery library and reference it yourself.
This should resolve the issue.
I'm trying to use the jquery tokeninput plugin, the demos work fine however when I try to implement it I'm hitting a brick wall. Chrome chucks this at me:
Uncaught TypeError: Object [object Object] has no method 'tokenInput'
Below is an excerpt from my <head>, chrome's resource browser shows both jQuery and jquery.tokeninput are loaded fine. No URL issues.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.tokeninput.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
And showing that tokeninput has loaded:
Right, bare-bones page worked fine. After digging a while longer I found this buried at the base of the page:
<script src="http://code.jquery.com/jquery.js"></script>
It seems having multiple versions of jQuery loaded is not a good thing to do.
I am not sure if you already solved it or not. But Try this it should work if your sequence of jquery library inclusion is right (which it seems right), also remove one of jquery.min.js, jquery.js.
Then try this
<script type="text/javascript">
// Any valid variable name is fine.
var j = jQuery.noConflict();
j(document).ready(function () {
j("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
Check this out to understand why you might need this.
http://api.jquery.com/jQuery.noConflict/
I am trying to write my javascript functions in a separate file functions.js. Right now that file consists of one function:
function noOverlay() {
$('.overlay').css('display','none');
};
In my html I have these two lines:
<script type="text/javascript" src="/functions.js"></script>
<script>
$(document).ready(
noOverlay()
);
</script>
Essentially what I am trying to do is house a function in an external file and call it in my html. Maybe $document.ready isn't the right way to do this. Or maybe I am just making a silly mistake. Thanks!
Make sure you are importing jQuery and try:
<script type="text/javascript" src="/functions.js"></script>
<script>
$(function () {
noOverlay();
});
</script>
$(document).ready(function(){
noOverlay();
});
Check to make sure the js file was loaded with firebug or chrome's dev tools
Also make sure you load jQuery beforehand as well.
I am using thick box 3.1 to load a pop up. It working well by using in the following way:
TEST
If we click on the TEST now then the popup is working well and good.
Now my prob is: I need to call this popup in form load using JavaScript.
I do something like below:
<script type="text/javascript">
window.location.href = "filename.php"
</script>
it's just redirecting to that particular file. But not showing in the pop up.
What is the possible way?
thanks in advance
Try this:
Test
<script type="text/javascript">
$(function(){ // On DOM ready
$('#openOnLoad').click();
});
</script>
You can do this without changing your markup, like this:
$(function() {
$('a[href=filename.php]').click();
});
TEST
<script type="text/javascript">
$("#UniqueIdForThisLink").click();
</script>