I have been trying to get this tooltip code to initialize on a page and I cannot get the jQuery to connect properly.
We have PHP running on Ubuntu and we are using Silverstripe. I cannot get the following script to work, no matter where or what file I add it to. I have even tried calling it in from a separate file and it also did not initialize.
How would I add this code to a PHP or SS file? (Silverstripe CMS file)
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
<button type=\"button\" class=\"btn btn-default help-tool\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Below you will find state-by-state breakdowns in Federal, State, and where available Local categories.
Explore the data by clicking the map or by clicking the magnifying lens in the table view.\"><i class=\"fa fa-info-circle fa-fw\"></i></button>
This is generally an issue involving the order in which your scripts are called.
As I'm sure you know, you need to call JQuery before Bootstrap, which it seems like you are doing. Your tooltip code, which is in a different file, is most likely being called before your JQuery and Bootstrap have a chance to load. You can test this by copying your JQuery and Bootstrap script calls into your separate file right before the tooltip script call.
If your script calls are at the bottom of your body tag, and part of the page is being dynamically loaded, you can try calling JQuery and Bootstrap in your head tag instead after your CSS:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" src="bootstrap.css" />
<link rel="stylesheet" type="text/css" src="main.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<!--
Your separate file code that
includes tooltip
-->
<!-- Before
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
-->
</body>
</html>
There are two causes that come to mind here. First, it's possible that the $ is getting interpreted by SS's template parser as a variable expression. I would expect you would be getting an error if that is the case. Second, as Sumit Kukreja indicated it's likely that jQuery and Bootstrap are being injected at the bottom of your template and this code is getting executed before those are loaded.
Option 1: To verify if this is happening you could add the following code to Page_Controller::init() or mysite/_config.php:
Requirements::set_write_js_to_body(false);
Which will cause all required javascript to be added in the <head> tag. Not a good idea for production but could help diagnose your problem.
Option 2: You can include that javascript from your controller using Requirements::customScript.
Option 3: Wrap your js snippet in a non-jquery domready listener like so:
document.addEventListener("DOMContentLoaded", function(event) {
$('[data-toggle="tooltip"]').tooltip()
});
Related
I setup bootstrap files in public folder. Routes are as below:
<link rel="stylesheet" href="{{url('assets/css/bootstrap.min.css')}}">
<script type="text/javascript" src="{{url('assets/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/tether.min.js')}}"></script>
no problem with this. I can see connection to files when I check the source code. and also bootstrap fonts are active but, when I try to copy some examples from bootstrap website. It doesn't display properly. For example I copied navigation bar to my main.blade But it doesn't show up.
What is causing this? Any idea?
It s big screen but showing responsive hamburger icon?
You should add jquery before bootstrap min js file
<link rel="stylesheet" href="{{url('assets/css/bootstrap.min.css')}}">
<script type="text/javascript" src="{{url('assets/js/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/tether.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/bootstrap.min.js')}}"></script>
The order in which you add javascript in HTML page is important. In this case since bootstrap.min.js uses jquery.min.js jquery must be added first. So when bootstrap loads and looks for jquery it finds it.
But if one script does not depend on another then you can add them in any order.
So add jquery.min.js first then anything that uses jquery(like bootstrap) after it.
I'm a bit of a newbie with sources etc and I took it for granted that I could simply add the script src to the header and then add as many scripts or functions as I wanted after that. For the most part this is working fine but now I hav an issue that I cannot solve.
I can either have one script running or the other, both will not work in harmony no matter how many different permutations I've tried. I'm sure there's an easy fix or something I'm missing entirely. I had a look online for an idiot's guide but didn't find anything of use.
The two function scripts are in different places. One is in the head and called from the body of the HTML pages, the other is in an include which is added to every page for dynamic links.
This loads everything Except what is within the body
<!--Creation and hiding of div to allow images load-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="../js/helperFunctions.js"></script>
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/jquery.min.js"><\/script>')</script>
<!-- Syntax highlighting -->
<link rel="stylesheet" href="../mainCSS/prettify.css" media="screen">
<script src="../js/prettify.js"></script>
<!-- AnythingSlider -->
<link rel="stylesheet" href="../mainCSS/anythingslider.css">
<script src="../js/jquery.anythingslider.js"></script>
<script>
$(function(){
prettyPrint script here;
</script>
<script>
$(function(){
slider script here
</script>
Whilst this loads the body script but none of the others.:
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/jquery.min.js"><\/script>')</script>
<!-- Syntax highlighting -->
<link rel="stylesheet" href="../mainCSS/prettify.css" media="screen">
<script src="../js/prettify.js"></script>
<!-- AnythingSlider -->
<link rel="stylesheet" href="../mainCSS/anythingslider.css">
<script src="../js/jquery.anythingslider.js"></script>
<script>
$(function(){
prettyPrint script here;
</script>
<script>
$(function(){
slider script here
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="../js/helperFunctions.js"></script>
I then tried putting the script src in the include, including the src twice and lots of other stupid senseless ideas.
If anyone could help it'd be great! Many thanks
Your include jQuery like three times in this code. i'm not sure if thats the problem but it ain't the solution
// jquery from jquery.com
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- jQuery (required) --> // jQuery from google
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/jquery.min.js"><\/script>')</script>
// both of these are expendable
this might cause a conflict since the last one to be included is an older version of the library. you only need only inclusion. I'm assuming your using migrate because you have older jQuery code running in your scripts.
CODE ERROR
<script>
$(function(){ // syntax error
prettyPrint script here;
</script>
<script>
$(function(){ // same error
slider script here
</script>
you have syntax errors here, and any script that comes after this code will not run or work.
I had a function in one f the scripts that was returning an error. That seemed to be halting the est of the code. -.-
Also only have one instance of jquery in the head now.
I have been trying to find a way to stop my local version of Jquery and Jquery ui being loaded multiple times because of the pages I'm using are pulled in by Ajax and are reloading by Jquery every time.
The Jquery files I'm loading are
<script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.mouse.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.draggable.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.position.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.resizable.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.button.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css">
It does not matter how do you send the request. If page must be reloaded, let browser and server do theirs cashing job.
If you use ajax, load only a part of page, if you have some troubles. But you should post more code to show places with possible bugs...
I'm working in an PHP coded site. In here I want to add the jQuery plugin Barousel. I tested in a HTML page outside my site and it works fine. But when I add the code in the page where it has to work (PHP), it isn't working.
In chrome I got the next message;
Uncaught Type Error: object#<object> has no method 'barousel'
This is the page.
The image has to be a carousel with text.
Please can anyone help me; I really don't know what to do.
Your page head has loaded jquery.js twice.
The second load will overwrite the first, and $.fn.barousel will no longer be defined.
<script type="text/javascript" src="jquery.js"></script>
<script src="barousel/js/jquery.barousel.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//BAROUSEL - ITEM NAVIGATION
jQuery('#barousel_itemnav').barousel({
manualCarousel: 0,
slideDuration: 3000
});
});
</script>
<!-- remove this -->
<script type="text/javascript" src="jquery.js"></script>
<!-- remove this -->
I am adding a dynamic commenting system from ( here ) ( here the files ) to my site
Well the thing is that I can't make it work.
The script detects the full url of the webpage and saves the comments to a file associated to that url.
But since I have only one file (index.html) I think the system can't make the difference inside the file. I mean the code is like this:
<link rel='stylesheet' type='text/css' href='./jscomms/style_light.css'/>
<script type="text/javascript" src="./jscomms/jquery.js"></script>
<script type="text/javascript" src="./jscomms/jquery.comments.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#comments").comments();
});
</script>
<div id='cont' style='width:450px; margin:45px;'>
<div id='comments'>
<noscript>Need Java to comment</noscript>
</div>
</div>
So, if I am able to make some variable identifier in this code maybe it will work, I don't know really.
I was trying to change this line
......
$("#comments_identifier").comments();
.......
<div id='comments_identifier'>
.....
And the script shows, but I am unable to "click" the publish button.