Jquery ui tabs ajax content issue - javascript

The project i'm working on contains plenty of jquery and jqueryui. In every page there is one or more jquery-ui tab and all of them working with built-in ajax. I got several problems.
First of all there are different jquery plugins in nearly every page i'm pulling through ajax and i'm including same jquery libraru over and over in every request which is also used in the index page which i'm showing tabs. Is there a way to include jquery once and use it on every ajax page i'm pulling. That problem also causes several different problems like if i click that tab after differet tabs js. is not working. I'm putting some codes below so you can understand my problem easily.
ajax/slider.php (This page gets id through $_GET and generates a slider which i could not make it work with jquery 1.6.2)
<link rel="stylesheet" type="text/css" href="ajax/advanced-slider.css" media="screen"/>
<script type="text/javascript" src="ajax/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="ajax/jquery.advancedSlider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').advancedSlider({
width:600,
height:228,
alignType: 'centerCenter',
hideTimer:true,
effectType:'height',
horizontalSlices:'10',
verticalSlices:'1',
slicePattern:'leftToRight',
slicePoint:'centerBottom',
sliceDuration:'500',
captionSize:'228',
showThumbnails: false,
navigationButtons: false,
navigationArrows: false,
slideshowControls: false });
});
</script>
ajax/gallery.php
<link rel="stylesheet" type="text/css" href="../js/fancybox/jquery.fancybox-1.3.4.css" media="screen"/>
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../js/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$.noConflict(); // (that piece of code sometimes work sometimes doesn't and i have no idea why)
$('a.grouped_elements').fancybox({
titlePosition: 'inside'
});
});
</script>
ajax/g_maps.php
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAmwC95iK7Tp7hI6hDlNqLhBS5NlhQfHS3VfXEycw6BkztwAjcGBRR3F2hVVVhA0GciYJcjlYGoArYDg" type="text/javascript"></script>
<script type="text/javascript" src="../js/jquery.gmap-1.1.0-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.noConflict();
$("#maps").gMap({ markers: [{ latitude: <?php echo $maps_x; ?>,
longitude: <?php echo $maps_y; ?>,
html: "<?php echo $maps_adi.'<br />'.$maps_adres; ?>",
popup: true }],
zoom: 16 });
});
</script>
And also page i'm using tabs
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link type="text/css" href="css/jqueryui-project-spesific.css" rel="stylesheet" />
<link type="text/css" href="js/countdown/jquery.countdown.css" rel="stylesheet" />
<link type="text/css" href="js/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAmwC95iK7Tp7hI6hDlNqLhBS5NlhQfHS3VfXEycw6BkztwAjcGBRR3F2hVVVhA0GciYJcjlYGoArYDg" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/countdown/jquery.countdown.min.js"></script>
<script type="text/javascript" src="js/countdown/jquery.countdown-tr.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.15.custom.min.js"></script>
<script type="text/javascript" src="js/jqueryui-tr.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( "#tabs" ).tabs({
cache: true,
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Some error message");
}
}
});
});
</script>
I think you'll have some ideas about my problem. I'm very new to js so if you see any mistakes that i did unrelated to this question fire at will.
Sorry about my English if I have any errors.
Thanks.
EDIT : I kinda solved my problem with changing relative paths of js libs in ajax page to js/.. so i'm giving paths relative to page i'm calling ajax not the ajax page itself. But if you have any other tips that would be great.

you just need to include js on main page (where you have your tabs), content is loaded via ajax but it will be on the same page, so same js an css will apply.
I use to use it on my base page as it makes more sense, however, if you really need to have it on every page you can make the include server side giving it a key on header and check if js file haven't been included before adding it

Related

jQuery autoComplete doesn't work although jQuery-UI is included

I tried to research this subject but everything I found referred to the common error of not including the jquery-ui file into the header. I however do have jquery first and then jquery-ui. I host the files locally but I have also tried to copy the most updated cdn links from the official sites to be sure of not having made whatever weird typing error or host an outdated file.
It still doesn't work, I always get "Uncaught TypeError: $(...).autoComplete is not a function"
Do you have any idea what could be wrong apart from the missing jquery-ui file?
My header looks like this:
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/dataTables.tableTools.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="icon" href="images/favicon.ico">
The Jquery code part of the autocomplete looks as follows:
$(document).ready(function() {
$(function () {
$(".auto").autoComplete({
source: "soplogsave.php",
minLength: 3
});
});
and html:
<p><label>Country:</label><input type='text' name='country' value='' class='auto'></p>
I can post the php code aswell but I'm not sure it's relevant, as I have already tried using preconfigured variables in jquery and it still didn't work, i still got the "autocomplete is not a function" error.
I think, you have to write autocomplete not autoComplete.
$( "#tags" ).autocomplete({
source: availableTags
});

prettyphoto undefined is not a function

I'm attempting to install prettyPhoto lightbox on my site and I keep getting them same error. The following code in the console generates this error
"undefined is not a function"
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Line 18
I've tried it in the footer and the head, both cause the same problem and the lightbox doesn't load.
Here's the files in my head tag...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
My site is www.jessicadraws.com
Any ideas?
Dave.
Your page loads 3 versions of jQuery. This is likely causing issues with other plugins. Pretty Photo is loading fine - it's just loading onto jQuery 1.9
I can see this by running this in the devtools:
var jquery162 = $.noConflict(true);
> undefined
$.fn.jquery
> "1.9.0"
$.prettyPhoto
> Object {version: "3.1.5"}
To fix this won't be simple unfortunately, you'll need to decide which version of jQuery you are using and stop loading the rest.
For reference in <head> you are loading:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
PrettyPhoto is loaded just after these, in the head.
In your <body>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Javascript html header strange behaviour

Consider the following html head javacsript and css referecnes:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
The above datepicker does not work, but this does:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
So if I place the referencve 'fadeslideshow.js' above the the reference to the main jquery library and ui file. Similarliy if I comment out the fadeslideshow.js reference the datepicker will work.
Why would this be the case, it took me over an hour to figure out why the datepciekr was not working?
Thanks,
Alan.
Because browsers evaluate Javascript files as soon as they are loaded. fadeslideshow.js depends on either jQuery or jQuery UI. it will try to reference a non-existant object, which, depending of the functionality of the script, may set a variable to a state not compatible to jQuery UI's datepicker.
Fixed by adding a reference to an old version of jquery which fadeslideshow.js must obviously depend on:
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

Jquery clash because of -jquery-1.10.2.min.js

My Menu does not seem to function properly on photogallery page :-http://www.vancha.in/Photogallery.aspx
However its seems to function on the home page.
If I remove jquery-1.10.2.min.js file on photogallery page ,then it functions properly.
I'm using lightbox script.
There is some clash that's happening.
Please Help !
Regards,
Vancha
I have tried something like this since now I'm using pretty Photo:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var $jq161 = jQuery.noConflict();
</script>
<script type="text/javascript">
$jq161(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto();});
</script>
Its still not working :(
try something like this,Use the library you required
<script type="text/javascript" src="jquery1.4.2.js"></script>
<script type="text/javascript">
var jq_4 = jQuery.noConflict();
jq_4(function () {
jq_4('#gallery a').lightBox({ fixedNavigation: true });
})
</script>
http://interface88.blogspot.in/2012/07/using-multiple-version-of-jquery-on.html
http://api.jquery.com/jQuery.noConflict/
I can see that Jquery is referenced multiple times on this URL
http://www.vancha.in/Photogallery.aspx
You may need to fix that.

carouFredSel in conjunction with pretty Photo

I am trying to place Pretty photo into CarouFredSel but I am having problems with what I think is conflicting jquery. Everything is working ok, but when I implement Pretty photo in the caraouFredSel collapses looking as if each li has no width or height.
I have very basic knowledge of javascript and I am currently trying to resolve the problem but would really appreciate it if I could get a hand as the deadline is closing in.
Here is the page, http://www.grahamwilsdon.com/stoves/grants.html
Also here are the scripts I am using also inline with the Libraries that are downloaded
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.carouFredSel-5.6.4-packed.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
// Scrolled by user interaction
$('#foo2').carouFredSel({
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
auto: false
});
});
</script>
<link rel="stylesheet" href="prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/pretty_photo/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>

Categories