Modal error in ui kit - javascript

I want to use modal in my page.but when i call it browser console errors modal is not defined
included files to index file:
<link rel="stylesheet" type="text/css" href="./dist/semantic.min.css">
<script src="dist/components/modal.js"></script>
<link rel="stylesheet" type="text/css" href="dist/components/modal.css">
<script src="dist/components/modal.js"></script>
<link rel="stylesheet" type="text/css" href="dist/components/modal.min.css">
<script src="dist/components/modal.min.js"></script>
<script src="./dist/semantic.min.js"></script>
and this is my code for calling modal:
$(document).ready(function(){
alert("Document Was ready");
$('#sign').click(function(){
$('.modal').modal('show');
});
});
This is error:TypeError: $(...).modal is not a function
and this is link of modal in semantic-ui:http://semantic-ui.com/modules/modal.html
I use first modal ^_^

You have to move:
<script src="dist/components/modal.min.js"></script>
after:
<script src="./dist/semantic.min.js"></script>
because now you are trying to execute $().modal before Semantic have been loaded. Also, you are loading it twice and also a minified version; I assume you need only the minified version.
Your code should look like that:
<link rel="stylesheet" type="text/css" href="./dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="dist/components/modal.css">
<link rel="stylesheet" type="text/css" href="dist/components/modal.min.css">
<script src="./dist/semantic.min.js"></script>
<script src="dist/components/modal.min.js"></script>
And it's good practice to load CSS files before scripts.

Related

Using a HTML5 Theme in Angular 2

I am wondering how can i set up my current Theme that is designed using bootstrap and some css and js
I am using following css and js files in my theme and i don't want to put it in index.html like we did in angular 1 can any one tell me how to import all css and js effectively without compromising Angular 2 structure and behaviour.
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/bootstrap-select2/select2.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/switchery/css/switchery.min.css" rel="stylesheet" type="text/css" media="screen" />
<link href="theme/css/theme-icons.css" rel="stylesheet" type="text/css">
<link class="main-stylesheet" href="theme/css/theme.css" rel="stylesheet" type="text/css" />
<link href="theme/css/style.css" rel="stylesheet" type="text/css" />
Js files
<script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/modernizr.custom.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery/jquery-easy.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-bez/jquery.bez.min.js"></script>
<script src="assets/plugins/jquery-ios-list/jquery.ioslist.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-actual/jquery.actual.min.js"></script>
<script src="assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-select2/select2.min.js"></script>
<script type="text/javascript" src="assets/plugins/classie/classie.js"></script>
<script src="assets/plugins/switchery/js/switchery.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
I tried using ng2-bootstrap and bootstrap but can not get it working.
Your problem is your loading straight bootstrap along with jquery plugins instead of a something like angular-ui-bootstrap. Some boostrap stuff uses pure CSS(no compatibility issues) and others use jquery/ which can work iffy with Angular1/2 sometimes hence projects like angular-ui-bootstrap.
try the angular 2 version https://ng-bootstrap.github.io/
then load all the css files using webpack(just putting in the same css folder the current project css files are). Obviously you would need to change the existing bootstrap javascript code to angular-ui directives.

hide and show jquery - DOES NOT WORK But works fine with fiddle

Based on the selected option, hide and show div. Long story short.
Level 1 and 2 - hide div named "custompanel"
custom - show div named "custompanel"
Works fine with
JSFIDDLE
But I guess the problem would be with the CDNs. Not able to figure out. Need help.
HTML
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<title>Password Generator</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, projection" />
<script>
$(document).ready(function() {
$('#generator-mixcase').on('change',function(){
if($(this).val() == 'custom') {
$('.custompanel').show();
} else {
$('.custompanel').hide();
}
});
});
</script>
</head>
Problem: When I choose custom, it does not show the div. Please find the images below.
Exception shows error at the jquery CDN. Is my jquery CDN wrong??
"Error: Failed to execute 'querySelectorAll' on 'Element': '*,:x' is not a valid selector.↵
at Error (native)↵ at https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:10694↵
at ia (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:7550)↵
at fa.setDocument (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:10432)↵
at https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:22250↵
at https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:22970↵
at https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:207↵
at https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:212"
I had this error some time ago, try removing bootstrap includes.
Try This :
jQuery(document).ready(function($)
instead of
$(document).ready(function()
it works, verified!
You have to load jQuery before you load its dependent components.

Kendo UI Export into excel

I am using MVC4 with Razor.
Here is my css and java script files code
<link rel="stylesheet" href="~/Content/kendo/kendo.common.min.css" type="text/css" >
<link rel="stylesheet" href="~/Content/kendo/kendo.rtl.min.css" type="text/css" >
<link rel="stylesheet" href="~/Content/kendo/kendo.default.min.css" type="text/css" >
<link rel="stylesheet" href="~/Content/kendo/kendo.dataviz.min.css" type="text/css" >
<link rel="stylesheet" href="~/Content/kendo/kendo.dataviz.default.min.css" type="text/css" >
<link rel="stylesheet" href="~/Content/kendo/kendo.mobile.all.min.css" type="text/css" >
<script src="#Url.Content("~/Scripts/kendo/jquery-1.9.1.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/jszip.min.js")"></script>
but the problem is when I call kendo.all.min.js from live url mean when I add this url
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
then my grid sucessfully exported to excel but if I use this url
<script src="#Url.Content("~/Scripts/kendo/kendo.all.min.js")"></script>
then upon exporting nothing happens and one more thing that kendo.all.min.js file in the project is same as in live url.
Kindly help.
Its solved!
At my end its not working while debugging but when I deployed on my local server then it started working there.

Fancybox 2 don't work on localhost

I am pretty new to jQuery and I have never been using fancybox before. I tried to install it, but it doesn't work. I used several test scripts I found, but still nothing. Here is my code:
In head I have following (Paths to all files are correct):
<script type="text/javascript" src="http://localhost/scripts/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script src="http://localhost/scripts/jquery-2.1.1.js" type="text/javascript"></script>
And in my test document:
<script type='text/javascript'>
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
});
</script>
<a id="single_image" title="" href=""><img src="http://localhost/images/something.png" alt="" /></a>
But when I click on the image, nothing happens.
You are declaring your jquery script last. That include should be first, preceeded by any other script that uses jquery. nothing to do if it's on localhost or not.
<script src="http://localhost/scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript" src="http://localhost/scripts/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
I have been having the same issue when your jquery-2.1.1.js. Once I used fancybox's provided jquery-1.10.1.js it worked however I got curious and tried jquery-1.9.1.js and my document stopped rendering the results.
I don't know if it helps or you figured it out already but I thought I would add what I found.

TypeError: events.replace is not a function JqueryWebcam Plugin

For some strange reason i began to get this error TypeError: events.replace is not a function. I am using Jquery Webcam Plugin i was able to see the flash player camera moments ago until i did a recompile of the code and got this error. Under is my imported scripts:
Scripts
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script src="<%=request.getContextPath()%>/resources/js/jQuery-webcam/jquery.webcam.js"></script>
<script src="<%=request.getContextPath()%>/resources/js/citizen_registration.js"></script>
<link href="<c:url value="/resources/css/forms.css" />" rel="stylesheet" type="text/css" media="screen" />
<link href="<c:url value="/resources/css/citizen_registration.css" />" rel="stylesheet" type="text/css" media="screen" />
i updated the jquery plugin to <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Categories