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...
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 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()
});
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'm getting the following warning message on my web page:
A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.
Script: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
How I can resolve it?
I'm using the following scripts:
<script src="https://www.markettrendsignal.com/beta/js/script.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://www.markettrendsignal.com/beta/js/thickbox.js" type="text/javascript"></script>
<script src="https://www.markettrendsignal.com/beta/js/jquery.treeview.min.js" type="text/javascript"></script>
<script src="https://www.markettrendsignal.com/beta/js/jquery.tipTip.minified.js" type="text/javascript"></script>
<script type='text/javascript' src='https://www.markettrendsignal.com/beta/js/jquery.colorbox-min.js'></script>
probably need to see more of the page. you may have some kind of recursive javascript that is taking advantage of jQuery, so the root cause is not jQuery, but the other javascript that uses it...
i installed this extension http://www.cniska.net/yii-bootstrap/ , is possible when i make an ajax request to unload from 'preload'=>array('bootstrap','log'), : bootstrap ,i don't need
to use bootstrap on ajax request , how to avoid that
<link rel="stylesheet" type="text/css" href="/tamada/assets/97e8be51/css/bootstrap.min.css" />
Content updated in AJAX<script type="text/javascript" src="/tamada/assets/cb84ef9f/jquery.min.js"></script>
<script type="text/javascript" src="/tamada/assets/97e8be51/js/bootstrap-button.js"></script>
<script type="text/javascript" src="/tamada/assets/97e8be51/js/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="/tamada/assets/97e8be51/js/bootstrap-popover.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery('a[rel="tooltip"]').tooltip();
jQuery('a[rel="popover"]').popover();
/*]]>*/
</script>
Thank You A LOT , sorry for my english
You can selectively load it in your config/main.php.
This might not be the best PHP but it should work. Basically, when loading the config, check whether the request is an AJAX request or not using Yii::app()->request->isAjaxRequest.
Add to top of config/main.php:
<?php
// Load it by default
$preload = array('bootstrap');
// Don't load it for AJAX requests
if (Yii::app()->request->isAjaxRequest) {
$preload = array();
}
Then pull in the module (either toggled on or off) using array_merge:
// preloading 'log' component (with selective bootstrap component)
'preload'=>array_merge(array('log'), $preload),
Now when you do an AJAX request to your application the bootstrap module should not be loaded.
Please, read: Yii + AJAX = Duplicate ClientScripts.