I am working with select2 library, and have a big problem. I start to use bootstrap, and for some reason select2 is not working properly ex:
As you can see it doesn't want to open, after opening, it selects all items on mouseover, and it is not possible to close.
Code in jsFidldle.
My code:
$(document).ready(function () {
$('select.form-control').select2({
dropdownParent: $(this).find('.modal-body'),
theme: 'bootstrap',
});
});
Library which i use:
<link href="~/lib/bootstrap-5/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/js/Library/Select2/select2.min.css" rel="stylesheet" />
<link href="~/js/Library/Select2/select2-bootstrap.css" rel="stylesheet" />
<script src="~/js/Library/Select2/bootstrap.bundle.min.js"></script>
<script src="~/js/Library/Select2/select2.full.js"></script>
<script src="~/js/Library/select2.min.js"></script>
Related
Error I recieve:
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'modal'
The minute I apply the links for the fullcalendar, modals break.
Any reason for this?
I also did verify modals only broke when the javascript/stylesheets were added [I tested the calendar without and modal ran]
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
If I define my calendar links before all my bootstrap it breaks the calendar saying it isn't supported as well.
So something with bootstrap and the fullcalendar either fights or overwrites each other.
My other local files
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
<script src="CSS/font-awesome-free-5.0.6/on-server/js/fontawesome-all.js"></script>
<link href="CSS/bootstrap-theme.css" rel="stylesheet" />
<link href="CSS/bootstrap-theme.min.css" rel="stylesheet" />
<link href="CSS/bootstrap.css" rel="stylesheet" />
<link href="CSS/bootstrap.min.css" rel="stylesheet" />
<link href="CSS/maxcdn.bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/ajax.jquery.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/JavaScript.js"></script>
<link href="CSS/Main.css" rel="stylesheet" />
<script src="Scripts/Splitter.js"></script>
<link href="CSS/Oxygen.css" rel="stylesheet" />
<link href="CSS/passionOne.css" rel="stylesheet" />
<link href="CSS/netdna_3.2.0_bootstrap.min.css" rel="stylesheet" />
<link href="CSS/4.2.0_font-awesome.min.css" rel="stylesheet" />
I think i remember having this issue a long time ago. I actually went into my conflicting file and looked for similar words. I think I would try naming everything in full calendar that is named modal, to modaltwo. Just a find and replace on the entire file. See if that works for you.
So a warning to people like me who like to call modal.show() from vb.net code... the required lib jquery file can't be referenced with fullcalendar.
The bootstrap jquery files are all you need.
At this very moment I can't determine why the lib jquery file caused this bootstrap modal javascript break.
so I did the following links for fullcalendar [plus all my bootstrap files]:
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script> <!-- need to calendar title -->
<%--<script src='lib/jquery.min.js'></script>--%>
<script src='fullcalendar.min.js'></script>
so that I could use a javascript function call to show a modal like so
<script type="text/javascript">
function openmodal() {
$('#myModal').modal('show');
}
</script>
I copied this example in jsfiddle to make a plunker. But the items in the sidebar can not be activated while scrolling. The follows are external links.
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
I also tried to copy them into 3 proper files, and test locally on my machine. It is the same problem.
Does anyone know what I am missing?
The fiddle is running the jQuery after page load. The plunker is not.
$(document).ready(function() {
$('body').scrollspy({
target: '.bs-docs-sidebar',
offset: 40
});
});
https://plnkr.co/edit/qiojBFqmZcpclWWpDbrb?p=preview
I'm trying to trigger a toast when the the page load using materialize.css and jquery, but it's now working, here my code:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script>
$(document).ready(function(){
Materialize.toast('I am a toast!', 4000);
});
</script>
This code is inside head tags.
Seems like you're missing Materialize js file. For me, your code is properly working.
Just add this to your head as well.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>
Demo
I am trying to incorporate the jQuery UI datepicker function into a website I'm creating, but for some reason it's showing up translucent. I've read around and aparently it's caused from not linking the css file.
I've linked all of these files in the head in this order:
jquery-ui.min.css
jquery-ui.structure.min.css
jquery-ui.theme.min.css
jquery-1.11.3.min.js
jquery-ui.min.js
They all came from when I DL'd jQuery UI (except the jQuery v1.11.3 of course)
Then, in the form area I have:
<form id="purchase">
<fieldset class="purchase">
<input type="text" id="datePicker">
</fieldset>
</form>
and then in my javascript file I have:
$(function() {
$( '#datePicker' ).datepicker();
});
The result is the date picker shows up but it is transparent. I've been staring at this for hours thinking there's something obvious I'm missing but I just can't see it. Any help would be greatly appreciated.
Theres something up with your style sheet, not sure what it is but something is inserting an empty style tag into your head, replacing it with jquery-ui.css seems to fix it. Hope fully this works in the source as well.
Change
<link type="text/css" rel="stylesheet" src="css/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.structure.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.theme.min.css">
To
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.structure.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.theme.min.css">
I am a novice with jquery and am having great trouble implementing fancy box. I've followed all of the instructions according to the user guide and have scoured the internet for many examples. I'm tying it into code-igniter so not sure if that is making a difference.
I am trying to just use it for a simple - click a link and show a text box with content and hyperlinks.
I have all of the files in a folder called 'fancybox' in my applications folder.
Here is my header:
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.3" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.0"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.3"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
content:kljsadlkfajsdlfkjasdflkjads;
});
</script>
and here is the html view:
<div class="resources">
<a class="fancybox" rel="group" href="#">test</a>
</div>
thanks for the help
If you want fancybox to automatically find the element to show, put the id of that element in the href attribute.
Show box 1
<div style="display:none"><div id="box1">I am in fancybox!</div></div>
And the javascript:
$(document).ready(function() {
$("a.fancybox").fancybox();
});
If you want to manually show a fancybox dialog, just call it:
$("#box1").fancybox();
The error is in how you are calling fancybox. You've got the syntax wrong.
You need to pass your options as an object.
e.g
// Override content
$(".fancybox").fancybox({
content: "kljsadlkfajsdlfkjasdflkjads"
});
Further examples are shown in the docs