how do I include an external javascript file with bootstrap - javascript

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?

Related

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

Javascript conflict in Wordpress between Theme and Gallery Javascript

I have been working on a specific justified gallery for more time than I care to admit, but I have finally managed to get the gallery looking how I need and all the javascript working.
I did all my testing in Dreamweaver but when it finally came to moving what I had into my Wordpress website there seems to be a conflict with some of the javascript already on the site and the javascript I need to make my gallery work.
I have included all my custom javascript into the footer as follows:
JAVASCRIPT
<script src="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/libs/jquery/jquery.min.js"></script>
<script src="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/dist/js/jquery.justifiedGallery.min.js"></script>
<link rel="stylesheet" href="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/dist/css/justifiedGallery.min.css" type="text/css" media="all">
<script>
jQuery(document).ready(function($) {
$('.x-nav > li.current-menu-item').removeClass("current-menu-item");
});
</script>
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery('.flip-btn-1').click(function(e) {
e.preventDefault();
jQuery(".front").toggleClass('flip');
jQuery(".back").toggleClass('flip');
});
});
jQuery( document ).ready(function() {
jQuery('.flip-btn-2').click(function(e) {
e.preventDefault();
jQuery(".front2").toggleClass('flip2');
jQuery(".back2").toggleClass('flip2');
});
});
</script>
<script>
$('#liveDemo').justifiedGallery({
rowHeight : 190,
sizeRangeSuffixes: {
'lt100':'_t',
'lt240':'_m',
'lt320':'_n',
'lt500':'',
'lt640':'_z',
'lt1024':'_b'
}
}).on('jg.complete', function () {
$(this).find('a').colorbox(colorboxConf);
});
</script>
I have figured out What is causing the conflict is the jquery.min.js It is stoping Revolution Slider from working and also causing a problem with a testimonial slider (it shows all the slides at once), and my fixed nav-bar is no longer fixed.
Is there a way to find out what is causing the conflict?
Website in question is www.dangoodeofficial.co.uk
Thank you,
Dan
You shouldn't include Javascript libraries like jquery.justifiedGallery.min.js and jQuery in the footer by a link; you need to correctly enqueue Javascript in WordPress in the theme's functions.php file. See https://codex.wordpress.org/Function_Reference/wp_enqueue_script
As a result, you have two copies of the main jQuery library being loaded.
The jQuery document ready functions can be added in the header or footer with <script type="text/javascript">**</script> tags.
You've got lots of Javascript errors in the console. Use the developer tools in Firefox (or Firebug) or Chrome or Safari or IE to see what javascript is loading on your site and the errors.
The cause of the conflict could be the inclusion of the jquery.js file. You don't need to include jquery separately in your plugin. By default, WordPress is shipped with a jquery file and it is available for use off the shelf.

JavaScript not Initializing in Drupal Block

I have the following fiddle: http://jsfiddle.net/VYbLX/125/
The purpose is to update a thumbnail with the appropriate selection in the dropdown menu. I'm attempting to implement this piece of code inside of a Drupal block that will be dropped into a specific page.
The page it is implemented on is: http://sulzbachercenter.org/fundraisers/give-a-good-night
In order to implement the code, I've rewritten the JS into a separate file and called it like this:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://sulzbachercenter.org/sites/default/files/ggn_js/dyn.js"></script>
The block can run PHP and HTML fully, so I know that's not an issue - but I'm out of troubleshooting ideas. Can anyone see why this code won't work in the Drupal environment?
The jQuery selector is looking for '#dynSelect', but the combobox in the form does not have an 'id'.
You can either add the id="dynSelect" to the combobox.
or
Change
$('#dynSelect').change(function () {
var val = $('#dynSelect').val();
$('#dynImg').attr("src",pictureList[val]);
});
to something like:
$("select[name='os0']").change(function () {
var val = $("select[name='os0']").val();
$('#dynImg').attr("src",pictureList[val]);
});

Programmatically create dropzone instance with jQuery not working?

I have a bit of an issue with getting Dropzone to work with jQuery. I was wondering if anyone could help.
I've tried both jQuery version 1.11.1 and 2.1.1 and neither seems to work. I've made it to work with straightforward Javascript but, I was planning on doing some major scripting and want dropzone to work with jQuery to save a few variables from being created to transfer data.
The Dropzone documentation mentions a jQuery plugin. But, I can't find it anywhere in the source and it's only mentioned here:
http://www.dropzonejs.com/#toc_4
With no information as to where it actually is.
I'm planning on using Dropzone with a div rather than a form and with no server code involved. It's a static one-off-use web page. For the time being I'm just following the documentation.
Here's some of my code:
HTML
<link href="css/dropzone.css" type="text/css" rel="stylesheet" />
<script src="dropzone.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</head>
<body>
<div id="dropthat" class="dropzone"></div>
<script src="script.js"></script>
jQuery
$(document).ready(function() {
$("div#dropthat").dropzone({ url: "/file/post" });
//Below is my older, working Javascript code, still here for comparison.
//var myDropzone = new Dropzone("div#dropthat", { url: "/file/post" });
});
I'm sure I've either missed something really small or it is indeed a problem with the lack of the jQuery plugin file. Does anyone know about the jQuery plugin file and it's name? I've run a search for jQuery in the source files for dropzone but can't find anything. It seems like Dropzone was made as a jQuery plugin first and has only recently become a standalone. Or maybe it's my version of jQuery.
If worst comes to worst, I can always grab variables using JavaScript event listeners rather than jQuery.
I'm not entirely sure what are you asking for, but if you want to know about the relationship between your library and JQuery, just look inside the source code:
if (typeof jQuery !== "undefined" && jQuery !== null) {
jQuery.fn.dropzone = function(options) {
return this.each(function() {
return new Dropzone(this, options);
});
};
}
First it checks if jQuery is already loaded on your page and if it does, then it attaches itself as a plugin, which means: in order to use the jQuery plugin you need to ensure that your jQuery library script runs before Dropzone.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="dropzone.js"></script>
Notes:
- I looked inside the source code provided in the INSTALLATION section from here
- Git wiki (maybe it will help you during development)

jQuery .load() function (not loading files completely)

I've been struggling with query for some time. I have a CMS that I want to use on my site, but I cant use PHP includes so I decided to use jquery. I have made all the necessary includes and when I open the webpage it doesn't load all the files... Rarely does load() function load every file. Any ideas to solve the problem or alternatives? thanks.
<script type="text/javascript">
$(document).ready(function () {
// find element with ID of "target" and put file contents into it
$('#welcome-container').load('admin/data/blocks/Slider/Text.html');
$('#slides').load('admin/data/blocks/Slider/Imagini.html');
$('#acasa-continut').load('admin/data/blocks/Acasa/Continut.html');
$('#sidebar').load('admin/data/blocks/Sidebar/Continut.html');
$('#sidebar-v1').load('admin/data/blocks/Sidebar/Video-1.html');
$('#sidebar-v2').load('admin/data/blocks/Sidebar/Video-2.html');
$('#principii').load('admin/data/blocks/Despre/Principii.html');
$('#echipa').load('admin/data/blocks/Despre/Echipa.html');
$('#echipament').load('admin/data/blocks/Despre/Echipament.html');
$('#contact-t').load('admin/data/blocks/Contact/Contact.html');
});
</script>

Categories