We Keep Coding

jquery function include only once?

I'm building single page application with jquery. so assume I have a sidebar like this
dashboard.html
order.html
and each time i click on it I load the content via ajax. It work fine but I go back and forth btw pages I notice the script got loaded twice or more. How to solve this?

Put the scripts and HTML in separate files. Then keep track of whether you've already loaded a script, and don't load it again.
var dashboard_js_loaded = false;
$("#dashboard").click(function() {
$("#content").load("dashboard.html", function() {
if (!dashboard_js_loaded) {
$.getScript("dashboard.js", function() {
dashboard_js_loaded = true;
});
}
});
});
Maybe a library like require.js can be used to manage this more generally. Or you can just write a simple function that keeps track of which JS files have been loaded in an object.

Jquery on Wordpress Frontend not woorking

Maybe I am so noob with jQuery but cant reach my objective. I need to add the attribute target="_blank to all the links inside certain divs. But anything I do works.
I have checked for jquery loaded with:
if(wp_script_is('jquery')==false) {
wp_enqueue_script("jquery");
}
Using the the following code nothing happens:
jQuery("#adagal").html("<p>asdf*</p>");
The #adagal element remains with previous content. I have checked in the source if my javascript file was correctly added, and it is.
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/AdManagerAdagal/js/ads/show_ad.js?ver=4.3.1'></script>
So, what is the problem¿?

Use that:
jQuery(document).ready(function($)
{
$(".your_class a").attr("target", "_blank");
});
Don't forget $ in ready(function to use jquery in your js

Get remote .js to work

I wrote a tiny piece of script. It's working when I add it directly into my page. But how do I make it working when the script is in a .js file? And is it enough to put the code into a .js file? Or do I need to add extra lines of code?
I know I have to refer to the file in the header. But that doesn't do the trick. This is the script:
$("#david").mouseover(function() {
$('#charlotte').addClass('hover');
$('#timon').addClass('hover');
}).mouseout(function() {
$('#charlotte').removeClass('hover');
$('#timon').removeClass('hover');
});
$("#charlotte").mouseover(function() {
$('#david').addClass('hovert');
$('#timon').addClass('hovert');
}).mouseout(function() {
$('#david').removeClass('hovert');
$('#timon').removeClass('hovert');
});
$("#timon").mouseover(function() {
$('#david').addClass('hovertt');
$('#charlotte').addClass('hovertt');
}).mouseout(function() {
$('#david').removeClass('hovertt');
$('#charlotte').removeClass('hovertt');
});
I hope you guys can help me out!
I know it's a very basic question, but I can't find the answer I need and I'm still a noob at making scripts..

Within the your HTML document add the second line after your jQuery script.
<script src="/js/jquery.js"></script>
<script src="/js/name-of-your-file.js"></script>
In the example, I've prepended /js/ to your scripts. It's best practice to separate your files into specific folders, so you'll have to create a new js folder. Also, jQuery needs to be in place and ready for you to start using it. If you need to wait for the document to load then you'll need to wrap your code in the following.
$(function() {
// Past your code here.
// This syntax is simply a shortcut for
// $(document).ready(function(){});
});

First of all you will need to include that javascript file in your html page:
<script src="yourscript.js"></script>
or
<script src="pathToYourScript/yourscript.js" type="text/javascript"></script>
furthenrmore you will need to tell the js when to execute and I would recomend either wrapping your code in
$(document).ready(function{
// your code here
})
or in window.load
$(window).load(function{
// your code here
})
or in self executing function :
(function(){
// your code here
})();

how do I include an external javascript file with bootstrap

I'm trying to figure out how to include an external javascript file while I am using the bootstrap framework. I figure it should be very simple to do but it seems to be giving me fits.
I have scripts/dsc.js that I am trying to load into a <div id="loadedContent"></div>
The line of code in the JSP file is:
<li>View Job (All Runs)</li>
in the external javascript file I have this as my simple javascript:
$(function() {
alert("Hi");
loadlLocation = function(location) {
$("#includedContent").load(location);
};
});
I put this in the head declaration:
<script src="scripts/dsc.js" type="text/javascript"></script>
I know that the src path is correct because the other includes for the bootstrap scripts work just fine. The alert located in the dsc.js is not showing up with is pointing me to it not being included. Now, Bootstrap by default was loaded at the bottom (so I left it there), but I included my javascript file in the head declaration. Is there something special that I have to do to include javascript files when using Bootstrap?

That cant work! You have no access outside the jQuery Wrapper!
var loadlLocation = function(location) {
$(function() {
$("#includedContent").load(location);
});
};

It actually ended up being an ordering problem. Was already solved here by KirKill.
How do i add jquery ui date picker, while already working with bootstrap library?

JQuery load() will break facebook like button/comment box. How to workaround?

I am coding a big website but I have cut down my problem into the following tiny html file:
http://dl.dropbox.com/u/3224566/test.html
The problem is that if I (re)load with JQuery a content that features a facebook code, the latter won't appear, even if I reload the script (leading to a duplication of that all.js script, which is another issue).
How can I fix this?
Regards,
Quentin

Use the FB.XFBML.parse() docs after you load the new content
function loadPage() {
$('#test').load('test.html #test', function() {
FB.XFBML.parse( );
}).fadeOut('slow').fadeIn('slow');
}
Note, that loading a fragment with id test in a div with id test will create multiple (two) elements with the same id (nested in each other) in the page, which should never happen as it is invalid.
To avoid this use the more verbose $.get method
$.get('test.html',
function(data) {
var temp = $('<div>').html(data).find('#test');
$('#test').html(temp.html());
}
);