Bootstrap tooltip not working though tried answers from stackoverflow - javascript

I tried all the solutions mentioned in stackoverflow and nothing works for me.
Head section as
<script src="js/bootstrap.js"></script>
<script type='text/javascript'>
$('[data-toggle="tooltip"]').tooltip();
</script>
and in html
<div class="odd-row">
<strong>10, 000</strong>
Datapoints
<i class="fa fa-plus-circle"></i>
</div>
in the bottom of the page (for performance reason) I included the other files
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jQuery.js"> </script>
<script type="text/javascript" src="js/retina.js"></script>
Still the tooltip is not working!! Please help me.

You code is works for me.
Probably something wrong with structure of your html or some error in other part of JS.
Also you can try to put your code in document ready function.
$( document ).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
Is this what you want? Try demo: http://jsfiddle.net/jdbNa/

For bootstrap you have to put jquery before you put bootstrap.js; so if you're putting bootstrap.js in the header you have to put the jquery.js before it.
Have you tried putting everything on the bottom before the closing body tag? maybe that would work. (I'm on stackoverflow looking for a tooltip solution myself to an issue I'm having)
Maybe try putting bootstrap.js after jquery.min.js, then below the retina.js, put your script to activate the tooltips.

Related

Owl carousel does not work unless I refresh the page

Hello my problem with this library that does not load me on the first page, instead if I "refresh" if it loads, and the internet explorer does not work for me. someone has happened something similar. I don't know what I'm doing wrong, I put a link and a capture of the error. THANK YOU https://ccc.es/empresa/ https://ibb.co/3fXLPyH
<script type='text/javascript' src='https://ccc.es/wp-content/themes/norebro/assets/js/libs/owl.carousel.min.js?ver=5.4.2'></script>
I have found a possible solution from another colleague who passed by here I copy it, I don't know if this solution can be improved, but it works for me for now
`<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!--DO NOT ENTER ANY EXTERNAL LINK IN BETWEEN-->
<script type="text/javascript">
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
});
});
</script>`

scripts.js file not found in console

I am totally newborn in jquery and almost in everything related to programming. Well I had to move my javascript to an independet sheet apart from html. I made a try first in my html to see if that was working, introducing an alert. But when I moved to the scripts.js it seems not to be working. This is how I have it linked:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitterbootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src=“js/scripts.js”></script>
Acording to my website console, scripts.js is not found, but I can not find why? Any hints?Thanks in advance!
<script src=“js/scripts.js”></script>
Replace it with below line , as you used the wrong quotes.
<script src='js/scripts.js'></script>
Replace
<script src=“js/scripts.js”> </script>
to
<script src="js/scripts.js" />

jQuery plugins conflict and script declaration order

I'm new to web development, and was having issues with two plug-ins. I already found a workaround to solve it, but I'm not convinced at all about what I did, so I ask you guys if you can enlighten me on what is this about.
The page in question uses SlimScroll and DataTables plugins. At first, I had an HTML file like this one.
<body>
<!-- STUFF -->
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="assets/scripts/tablas.js" type="text/javascript"></script>
<script src="assets/scripts/general.js" type="text/javascript"></script>
At the bottom, general.js is used to handle click events and other stuff, and tablas.js has the code that picks up a file with data and displays it in DataTables. The relevant code from general.js:
$(document).ready(function() {
$('#contenedor-menu').slimScroll({
height: '100%'
});});
And the code for tablas.js:
$(document).ready(function() {
$('#tablita').DataTable( {
"ajax": 'data/COut2.txt',
} );});
With this structure, when I load the page, SlimScroll fails with the message in the console: "TypeError: $(...).slimScroll is not a function"
Then after touching around, I switched the order of the scripts in the HTML file. I put datatables first and then slimscroll.
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
And now it works ok, with no errors.
Could somebody please explain to me what's going on?
Thanks in advance!
The use of multiple $(document).ready(function() { } is the main cause of this issue. There should be only one Document Ready event handler.
You may try using the pageLoad() function or onLoad() events
Not positive but it is usually best practice to put the scripts you absolutely need before everything else in the head. This is so that the content of the page does not finish loading until all the dependencies have been loaded first.
By reordering your scripts you may have a solution that will only work some of the time.
Put all the scripts you need to load in the head and your general.js script at the end of your body element.

Boostrap lightbox not working as expected

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.

Does jQuery have to be written in the <script> tags in HTML?

I'm learning jQuery, and I'm running into a small problem. jQuery code works when I put it directly in my tags in my HTML, but when I import it from a different file, nothing happens. These are my script tags in HTML:
<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="scripts/test.js"></script> <!--This is my jQuery code-->
test.js contains the following code:
$(document).ready(function(){
console.log("Hello");
});
When the page loads, the console is empty. However, when I paste the following code as so, in my html document, everything works fine.
<script>
$(document).ready(function(){
console.log("Hello");
});
</script>
Do you really have a folder named scripts in the folder where your HTML files exist? Otherwise try changing this src="scripts/jquery-1.10.2.js" to probably this: src="/scripts/jquery-1.10.2.js"
You can check by browsing to http://yoururl/scripts/jquery-1.10.2.js, the Jquery code should show up. If it's not there, you have to make sure that you include the right folder/file.
Yes.You will be able to push your scripts in 2 ways::
1-push your scripts in tag like>>
<script>$(document).ready(function(){alert("Welcome Dear");});</script>
2-push your inline scripts with attributes like>>
<button type='button' onclick="$(this).hide()">Hide Me</button>
make sure that the scripts folder contain test.js make sure that the extension is correct ..sometimes I make the same same mistake, instead of test.js i save it as test.js.txt
Try putting
<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
in the body rather than the head.
Credits to this answer for giving the idea

Categories