I have a calendar script I got off the internet working fine. Recently, I tried incorporating a jQuery sorting script, but I can't get both working together. It's either the calendar script or the sorting one that works.
I don't have much jQuery experience. I've tried changing the order in lots of ways, changing the jQuery versions and commenting out a bunch of JS scripts but I still can only get either get or one or none of them working.
The page is password-protected and the information being pulled from the database is private, but if it helps I'll try and make a separate page with dummy data; but I hope the mistake is a glaring one.
Here's the page head:
<head>
<title>My Page</title>
<!-- css -->
<link rel="stylesheet" type='text/css' href="stylesheets/datatable.css"/>
<link href="stylesheets/pagination.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-timepicker-addon.css" />
<link rel="stylesheet" media="all" type="text/css" href="css/Aristo.css" />
<!-- scripts -->
<!-- [if lte IE 8]>
<script language="javascript" type="text/javascript" src="scripts/excanvas.js"></script> <![endif] -->
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="scripts/jquery.datatables.js"></script>
<script type="text/javascript" src="scripts/jquery.fullcalendar.js"></script>
<script type="text/javascript" src="scripts/jquery.placeholder.js"></script>
<script type="text/javascript" src="scripts/jquery.accordion.js"></script>
<script type="text/javascript" src="scripts/jquery.tabbed.js"></script>
<script type="text/javascript" src="scripts/application.js"></script>
<!-- If I enable this, the calendar works but the sorting script stops working:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script> -->
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
</head>
Is there an obvious mistake here? I'm using someone else's jQuery. Let me know if there is any other info I can add that might help with this...
The problem is that you are loading the jQuery library twice when you uncomment the part in question. This will result in the second script overwriting the $ and therefore also all functionality the plugins above have already attached to it (their functions are living inside the $ object).
Simple solution to your problem: Only load jQuery once (preferrably via a CDN), load the original library as the first script, then load its plugins, and then load your own scripts.
The correct order should therefore be:
<!-- Loading jQuery via Google -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!-- Loading jQuery scripts -->
<script type="text/javascript" src="scripts/jquery.datatables.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="scripts/jquery.fullcalendar.js"></script>
<script type="text/javascript" src="scripts/jquery.placeholder.js"></script>
<script type="text/javascript" src="scripts/jquery.accordion.js"></script>
<script type="text/javascript" src="scripts/jquery.tabbed.js"></script>
<script type="text/javascript" src="scripts/application.js"></script>
Your sorting script and your calendar script are using 2 different versions of jQuery. I assume the one your sorting script is pulling up is conflicting with the calendar one (the one commented out in your code). Specifically:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
and:
<script type="text/javascript" src="js/jquery-latest.js"></script>
are competing with each other.
Related
I am new to Heroku and trying to get my app working on it. All works fine except non of my scrips are working. I have a PHP header file that provides all the links to e.g. jQuery etc. which I have stored in the js directory.
<title><?=$head_title;?></title>
<link href="css/admin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/animatedcollapse.js" language="Javascript" type="text/javascript"></script>
<script src="js/functions.js" language="Javascript" type="text/javascript"></script>
I have an apache dyne (heroku-php-apache2) and a ClearDB MySQL database. How do I get jQuery running on Heroku?
I am using jQuery in php.
Plugin as jQuery-1.7.1.min.js
For validate: jQuery.validate.min.js
For date picker: jQuery-1.10.2.js, jQuery-ui.js
If I added the script tag in following manner validate js file is worked
<link rel="stylesheet" href="js/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
If I added the script tag in following manner datepicker js file is worked
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
Both are not working in the same time.
Is there any wrong in my code?
Please help to solve this problem...
Either use..
<script src="js/jquery-1.10.2.js"></script>
or
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
You were using both jQ version which will make confliction
You don't have to add two different versions of jQuery.
Use it like this:
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script src="js/jquery-ui.js"></script>
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 an index.php file that requires a common head.php file, in the head.php file are several Javascript files, when trying it like that, the code looks fine in the source, but the files don't actually do anything to the document. (The .css file works fine though)
If the Javascript files are put directly into the index.php (in the same head area as where the head.php is required) they work fine, even though the source show the exact same code.
Is there a trick to make this work properly, or do I have to put the Javascript manually into every single page on the website? (There are a lot and I would like to be able to use a single head.php just in case I want to update a file or add a script)
Any help would be very appreciated!
Below is some code for the different pages for reference:
head.php
<link rel="stylesheet" type="text/css" href="style/main.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="include/alajax.js"></script>
<script type="text/javascript" src="include/jtip.js"></script>
<script type="text/javascript" src="include/jquery.timeago.js"></script>
index.php
<head>
<?php require_once 'site/head.php'; ?>
</head>
index.php (Source Code as displayed by the browser)
<head>
<!--require_once 'site/head.php';-->
<link rel="stylesheet" type="text/css" href="includes/fancy/fancy.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="include/alajax.js"></script>
<script type="text/javascript" src="include/jtip.js"></script>
<script type="text/javascript" src="include/jquery.timeago.js"></script>
<!-- end of head.php -->
</head>
<body>
<!-- Site that uses jquery and other functions in the included javascript that do not work with the files when included through a .php, though works fine if directly on the same page as the functions -->
EDIT:
(Here is a more fleshed out index.php with the header.php and login.php)
index.php
<head>
<?php require_once 'site/head.php'; ?>
</head>
<body>
<div id="header">
<?php require 'site/header.php'; ?>
</div>
<div id="wrapper">
<div id="navbar">
<?php require 'site/navbar.php'; ?>
</div>
<div id="content">
<!-- Just basic php and html here, and some times that rely on jquery.timeago.js to calculate time, works fine when everything is loaded in head.php -->
</div>
</div>
</body>
header.php (not to be confused with head.php)
<div id="loginheader">
<img src="img/logo.png" width="200" height="100" alt="Logo" />
<?php
require 'login.php';
?>
</div>
login.php
<!--- Contains javascript that requires jquery (included in head.php) and alajax (also included in head.php) if jquery is loaded in here and not in head, the form works, but the times in index.php break. -->
Hi folks finally i found the answer, the reason behind js file not loading is the problem with my/your one of the js file which we have include. So please check all the js files one by one for identifying the corrupted one.
Explanation of my case.
I have included all the css and js files inside a file called html_header.php
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"> </script>
<script type="text/javascript" src="../js/excanvas.js"> </script>
<script type="text/javascript" src="../js/jquery.flot.js"> </script>
<script type="text/javascript" src="../js/jquery.flot.stack.js"> </script>
<script type="text/javascript" src="../js/jquery.flot.pie.js"> </script>
<script type="text/javascript" src="../js/jquery.quicksand.js"> </script>
<script type="text/javascript" src="../js/jquery.easing.1.3.js"> </script>
<script type="text/javascript" src="../js/jquery.tipsy.js"> </script>
<script type="text/javascript" src="../js/cl_editor/jquery.cleditor.min.js"> </script>
<script type="text/javascript" src="../uploadify/swfobject.js"></script>
<script type="text/javascript" src="../uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript" src="../js/jquery.autogrowtextarea.js"></script>
<script type="text/javascript" src="../js/form_elements.js"></script>
<script type="text/javascript" src="../js/jquery.ui.core.js"></script>
<script type="text/javascript" src="../js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../js/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../js/jquery.ui.progressbar.js"></script>
<script type="text/javascript" src="../js/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../js/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="../js/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="../js/jquery.ui.position.min.js"></script>
<script type="text/javascript" src="../js/fullcalendar.js"></script>
<script type="text/javascript" src="../js/gcal.js"></script>
<script type="text/javascript" src="../js/bootstrap-modal.js"></script>
<script type="text/javascript" src="../js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="../js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="../js/highlight.js"></script>
<script type="text/javascript" src="../js/jq_tables/jquery.dataTables.js"></script>
<!--<script type="text/javascript" src="../js/main.js"> </script>-->
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
<script type="text/javascript" src="../js/jquery.printElement.min.js"></script>
<script type="text/javascript" src="../js/addmethod.js"></script>
when i commented main.js the problem solved. After i have uploaded a fresh copy of main.js file.
Thank you
My saved credit card payment option works well in default magento theme but not working in a custom theme. When we click on "Credit Card (saved)" option nothing happens. No textbox or dropdown is showing up with options to enter card details.
When we click to proceed to next step,the validation error pops up as usual.
I think some where javascript is breaking up. But error console shows no errors as well! Can anyone point out what may be the possible reasons with this error? What is the js needed to get Saved credit card option work?
I am getting this error in a jquery-mobile theme and my header has following parameters..
<script type="text/javascript" src="js/prototype/prototype.js"></script>
<script type="text/javascript" src="js/lib/ccard.js"></script>
<script type="text/javascript" src="js/prototype/validation.js"></script>
<script type="text/javascript" src="js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="js/varien/js.js"></script>
<script type="text/javascript" src="js/varien/form.js"></script>
<script type="text/javascript" src="js/varien/menu.js"></script>
<script type="text/javascript" src="js/varien/payment.js"></script>
<script type="text/javascript" src="js/varien/product.js"></script>
<script type="text/javascript" src="js/mage/translate.js"></script>
<script type="text/javascript" src="js/mage/cookies.js"></script>
<script type="text/javascript" src="js/mage/directpost.js"></script>
<script type="text/javascript" src="js/mage/captcha.js"></script>
<script type="text/javascript" src="js/mage/centinel.js"></script>
<script type="text/javascript" src="js/varien/weee.js"></script>
<link rel="stylesheet" type="text/css" href="skin/frontend/mytheme/default/jquery.mobile-1.0b3.min.css" media="all" />
<script type="text/javascript" src="skin/frontend/mytheme/default/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="skin/frontend/mytheme/default/main.js"></script>
<script type="text/javascript" src="skin/frontend/mytheme/default/jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript" src="skin/frontend/mytheme/default/additional.js"></script>
<link rel="stylesheet" type="text/css" href="skin/frontend/mytheme/default/mobilephone.css" media="all" />
<link rel="stylesheet" type="text/css" href="skin/frontend/mytheme/default/mobiletheme.css" media="all" />
Here additional.js is Jquery.noConflict(); file.
Am I missing something?
If anyone can point out something, please share.
I found out Why it happens.
The jquery styles were missing in the page. So I gave a create event jQuery('#co-payment-form').trigger("create"); in checkout/onepage/payment/methods.phtml It conflicts the javascript of credit cards.
When I remove the create event. the code works well But Jquery-mobile styles are still missing. I need the styles too.
If anyone knows how to Overcome this situation please share it.