Jquery.min.js conflict - javascript

My site has a problem when I use the following type function located in the header:
<script>
$(document).ready(function() {
$('#showVolunteer').click(function() {
$('.vol_info').slideToggle("fast");
});
});
</script>
I have to include the following line of code in order to get it to do what I want within the site:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
The above function, is used in the link "How to Volunteer..." on the main page and allows for the expanding and collapsing of data. However, when I call the jquery.min.js library as I have, it causes the featured content show to stop rotating pictures every six seconds. When I remove the line:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
the slide show refreshes normally and the "How to Volunteer..." link STOPS working. I cannot get them both working together.
I realize that wordpress includes a copy of jquery.js at the following location \wp-includes\js\jquery\jquery.js which is the non compressed version, but somehow my function above does not recognize what is in this library. It only recognizes jquery.min.js when called in the fashion above.
My question is, what do I need to do to get the expand and collapse data link working on the front page TOGETHER with the featured content rotator changing the picture every few seconds? In other words BOTH working at the same time.
Should I place all my functions (similar to the ones above) in a .js file that is already resident in wordpress?
thanks

This question has been resolved. Apparently, you're not suppose to use the $ symbol in Wordpress .js files, as it is used by other libraries and causes confusion within calls to jQuery. Instead, you have to use "jQuery" in place of the "$" symbol. Once this was done, everything worked as it should.
jQuery() NOT $() for Wordpress.

Related

How can I add jQuery (SharePoint 2010)?

I have a HTML page that I need to be linked to within our organization's SharePoint 2010 portal. I have all needed files (CSS, images, jquery) stored in the same document library. The CSS seems to be working fine but I'm having trouble getting the jQuery to work. Any suggestions or thoughts on what could be the issue here? Thank you.
**Update: The HTML page consists of one image (image map) that I have sectioned into 100 or so clickable areas. When clicked, a jQuery plugin activates and (SHOULD) display a tooltip directly to the right of the clickable area. My issue is that the tooltip is being displayed to the right of the WHOLE image instead. So I think I was wrong in my initial question about the jQuery not working. The tooltip plugin indeed activates, it is just appearing outside the image instead of on top of the image where it should be. This works properly in a local environment but once the files are uploaded to the SharePoint server this behavior happens. Is there some internal JS/CSS files within SharePoint that I can/need to override? Thanks for helping!
Need some more details, is jQuery not loading at all? Or just errors calling jQuery functions? I'm guessing you're getting errors calling jQuery functions. You'll want to use jQuery.noConflict(); to prevent conflicts with SharePoint javascript functions. The $ symbol that jQuery uses by default is also used by SharePoint. So you call jQuery.noConflict(); at the top of your javascript, and then you just swap using the $ for calling jQuery functions to just writing jQuery. So $(document).ready becomes jQuery(document).ready. $.ajax becomes jQuery.ajax, and so on.
jQuery.noConflict Details

How can I get the jQuery I worked on in jsfiddle to my website?

I'm working on a website mostly just for fun and am using HTML and CSS. I have some limited knowledge of these languages, but have never used jQuery before. But for only one page of the website, I wanted to have "linked sliders," which I found could be created using jQuery. I found a jsdiddle with some sliders and modified them to fit my project.
Here's the jsdiddle with the end product that I'd like to be embedded on one page of my site: http://jsfiddle.net/7e8xwjer/8/
I looked up how to add jQuery to a page, and took the following steps:
1) Downloaded jquery-1.12.3.js and renamed it jquery.js.
2) Added the following line of code in the head of the page:
<script type="text/javascript" src="jquery.js"></script>
3) Created a new .js file called js1.js with all the jQuery code from the jsdiddle.
4) Added the following line of code in the head of the page (in addition to the first):
<script type="text/javascript" src="js1.js"></script>
5) Added the CSS styling and HTML table from the diddle as needed.
The CSS and HTML table work fine, but none of the jQuery works. I'm sure I've made a simple error here, but I can't figure it out! Please let me know what other steps I need to take to get the jQuery script functioning on the site.
Thanks in advance for the patience and help.
JSFiddle, usually, (depends on the settings you choose [see image, point 1]) encloses all JS code into a document ready event so your js1.js should look something like:
$(document).ready( function(){
// your code from JSFiddle here
});
EDIT:
looking at your Fiddle, you are using JqueryUI [see image, point 2] so have to include it as others said in comments.
EDIT 2
your fiddle is set "onLoad" [see image, point 3] so to reproduce exactly the same condition you would have to replace $(document).ready with $(window).load; however I'm not sure that in your case you need to wait until all resources are loaded... So don't change it unless needed.
jQuery is a library of functions. You need to import them. When you download the library, you need to point the src= correctly. The directory where jquery is in relation to the overall file structure.
myharddrive
\ myfolders
\ mysubfolders
\ jquery
index.html
mycss.css
\ myfolders
src=/jquery/jquery.min.js

Maddening scope issue

Little things like this drive me crazy!
Working with a typical Joomla website and all it's complexity.
Start with a functioning website. Edit a particular javascript file of a template to add a simple function:
function socialShare(title, url) {
alert("goop!");
}
I reference it in a link:
<a class="icon-facebook"
onclick="socialShare('blog-entries', '11-blog-article/15-oppressive-tyranny&title=Triumph Over Tyranny')"> </a>
The function is included along with 37 other external scripts in a file at the end of the page, included within the body element like this:
<script src="/bts/templates/vg_progressive/js/articleRev.js"></script>
I inserted the sociaShare function definition as the first thing in the include articleRev.js file. The list of external scripts include core functionality like bootstrap, jquery etc etc.
I can see the function in the included script file with firebug's debugger & the include line in the page source near the bottom. BUT IT DOESN'T GET EXECUTED!! If I include the exact same function within a element anywhere on the page it works just fine. For some reason the instance in the external script file is not within the scope of that page / article, tho I can see it clearly in the page source.
I can also put the function within script tags as the last thing inside the body and it is within scope and works fine. I discovered I can define the function in a different included javascript file that is found in the very same folder and it also works fine.
Like I said, things like this make me pull my hair out! What can cause this behavior? How can I narrow it down?
As per Ed Cotrel, here are 2 files which [may] be helpful, tho I don't think so. Rename articleRev.txt to .js and pageSrc.txt to pageSrc.html. As for your comments Ed, I believe I've stated the issue as clearly as I can.
The desired behavior is to see an alert box when the anchor tag is clicked. Simple. The anchor tag displays a social media icon based on one of the class definitions. The onclick attribute should call the javascript function socialShare and display an alert box containing a text message with the 2 parameters. The alert never shows up. If the socialSharing function is moved to the main.js script file located in the same folder and included the same way in the same place in the page flow it works. Is that clearer?
1) http://thecomingbitsharesrevolution.website/media/articleRev.txt
2) http://thecomingbitsharesrevolution.website/media/pageSrc.txt

.load() loads after scripts / in-page scripts do not work

Brief
Imagine your first website vastly growing in the amount of code, however particular parts you want to globally modify such as a menu seen on every page. So I've taken my header and added it to it's own file and load it using:
// Load Header
$(".Header").load("assets/HTML/header.html");
So I've got my header, added it to it's own place to allow a bit of CMS to my website.
What Makes It Tick?
Dependant Files:
jquery-1.11.0.min.js
jquery-migrate-1.2.1.min.js
jquery-ui-1.10.3.custom.min.js
jquery.ui.widget.js
jquery.ui.selectmenu.js
In page script for drop downs and whatnot
The Problem
The header is loading presumably after all my scripts have loaded regardless of the several places I've tried and tested adding to fetch the header code.
I'm HOPING this is enough to insight some help, some possible problems many encounter as posting my link, it is massively subject to change! Please specify how I could make this question anymore local to Stackoverflow, however for now my live version can be found here.
I don't think that is good implementation of jQuerys load() method.
Have you tried using this pattern instead of using jquerys .ready()?
$(window).load(function(){
# your code
$(".Header").html(yourContent);
});
From jQuery API:
"Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready."
Just remember to put this statement outside of $(document).ready(function() { ... });.

JQuery loading inside html file but not in linked javascript file (JqueryUI tabs)

I'm currently having a weird problem.
I'm using JqueryUI tabs, and am loading php pages with each tabs. This works well for me, but what I am trying to do, is loading another php page from within one of those tabs with the html "a" tag. For some reason, it doesn't work when I place the click function in a already linked javascript file, but works when I place the code in a script tag directly in the html file.
Here is the function:
$(function(){
$('a.commandsRecep').on('click',function(e){
e.preventDefault();
window.open(this.href,'','width=700,height=700');
});
})
I know that loading pages from within a tab is done by Ajax and am wondering if that's what causing me problems.
The link is inside a table :
<td><a class="commandsRecep" href="./Ben_test/page_principale.php">Réception des commandes</a></td>
What is the order of includes?
Make sure that jquery is included before javascript file.
The order should be like :
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="yourScript.js"></script>
Found it!
After a while, I got to the same type of error.
What I had to do was separate my script in two parts, one that required jqueryUI and one that didn't.
That way, in the html files where I don't import jqueryUI, I only import the one that doesn't require it.
Looks like having jquery that required jqueryUI without having imported jqueryUI was stopping the script from executing.

Categories

Resources