I have jquery and angularjs in my c# project.
I see that I have to call angularjs before jquery to avoid conflict between them.
My MasterPage.master
<script src="Scripts/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.8.2/angular-sanitize.min.js" integrity="sha512-JkCv2gG5E746DSy2JQlYUJUcw9mT0vyre2KxE2ZuDjNfqG90Bi7GhcHUjLQ2VIAF1QVsY5JMwA1+bjjU5Omabw==" crossorigin="anonymous"></script>
<script src="Scripts/angular-resource.min.js"></script>
<script src="Scripts/angular-material.js"></script>
<script src="Scripts/angular-animate.js"></script>
<script src="Scripts/angular-aria.js"></script>
<script src="Scripts/angular-messages.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/metisMenu.js"></script>
<script src="Scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="Scripts/DataTables/dataTables.bootstrap.min.js"></script>
<script src="Scripts/sb-admin-2.js"></script>
<script src="Content/x-editable/js/bootstrap-editable.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<link href="Content/sb-admin-2.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/chosen.min.css" rel="stylesheet" />
<link href="/styles/StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="/Content/metisMenu.css" rel="stylesheet" />
<link href="Content/dataTables.bootstrap.css" rel="stylesheet" />
<link href="/styles/datepicker.css" rel="stylesheet" />
<link href="Content/x-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-zrnmn8R8KkWl12rAZFt4yKjxplaDaT7/EUkKm7AovijfrQItFWR7O/JJn4DAa/gx" crossorigin="anonymous" />
<link href="Content/chosen.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/waza.css" />
<script src="Scripts/chosen.jquery.js"></script>
<script src="Scripts/bootstrap3-typeahead.js"></script>
<script src="Scripts/typeahead-ci.min.js"></script>
<script src="Scripts/moment.min.js"></script>
<script src="Scripts/moment-with-locales.min.js"></script>
<script src="Scripts/validator.js"></script>
My homepage.aspx
<script src="Content/formvalidation/js/formValidation.js"></script>
<script src="Content/formvalidation/js/framework/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-leaflet-directive/0.10.0/angular-leaflet-directive.min.js" integrity="sha512-dtFpnbvMRGgxjWRrfWjqeiRwDk5iQR/d7FRIv5xs+7fIWzKI/376mEiYTcyfH1os/ed+BgMpIFO+p7rof14Hdg==" crossorigin="anonymous"></script>
<script src="Scripts/app/app.js"></script> -- angularjs file
My issue is even if i call angularjs before jquery in my project when I do some stuff in my homepage like modify an element in a table. After that I have this message on my page. There is other solutions to avoid conflict ? or I may do something wrong.
My problem is that when I made the website it functioned as it sould but when I put it on the server this block of css and js is shown:
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" />
<meta name="x-stylesheet-fallback-test" content="" class="sr-only" /><script>!function(a,b,c,d){var e,f=document,g=f.getElementsByTagName("SCRIPT"),h=g[g.length-1].previousElementSibling,i=f.defaultView&&f.defaultView.getComputedStyle?f.defaultView.getComputedStyle(h):h.currentStyle;if(i&&i[a]!==b)for(e=0;e<c.length;e++)f.write('<link href="'+c[e]+'" '+d+"/>")}("position","absolute",["\/lib\/bootstrap\/dist\/css\/bootstrap.min.css"], "rel=\u0022stylesheet\u0022 ");</script>
<link rel="stylesheet" href="/css/site.min.css?v=kHvJwvVAK1eJLN4w8xygUR3nbvlLmRwi5yr-OuAO90E" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-nova.min.css" />
<meta name="x-stylesheet-fallback-test" content="" class="k-common-test-class" /><script>!function(a,b,c,d){var e,f=document,g=f.getElementsByTagName("SCRIPT"),h=g[g.length-1].previousElementSibling,i=f.defaultView&&f.defaultView.getComputedStyle?f.defaultView.getComputedStyle(h):h.currentStyle;if(i&&i[a]!==b)for(e=0;e<c.length;e++)f.write('<link href="'+c[e]+'" '+d+"/>")}("opacity","0",["\/lib\/kendo-ui\/styles\/kendo.common-nova.min.css"], "rel=\u0022stylesheet\u0022 ");</script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.nova.min.css" />
<meta name="x-stylesheet-fallback-test" content="" class="k-theme-test-class" /><script>!function(a,b,c,d){var e,f=document,g=f.getElementsByTagName("SCRIPT"),h=g[g.length-1].previousElementSibling,i=f.defaultView&&f.defaultView.getComputedStyle?f.defaultView.getComputedStyle(h):h.currentStyle;if(i&&i[a]!==b)for(e=0;e<c.length;e++)f.write('<link href="'+c[e]+'" '+d+"/>")}("opacity","0",["\/lib\/kendo-ui\/styles\/kendo.nova.min.css"], "rel=\u0022stylesheet\u0022 ");</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js" crossorigin="anonymous" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script>(window.jQuery||document.write("\u003Cscript src=\u0022\/lib\/jquery\/dist\/jquery.min.js\u0022 crossorigin=\u0022anonymous\u0022 integrity=\u0022sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV\u002BrXbYlF2cqB8txI\/8aZajjp4Bqd\u002BV6D5IgvKT\u0022\u003E\u003C\/script\u003E"));</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js" crossorigin="anonymous" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script>(window.jQuery && window.jQuery.fn && window.jQuery.fn.modal||document.write("\u003Cscript src=\u0022\/lib\/bootstrap\/dist\/js\/bootstrap.min.js\u0022 crossorigin=\u0022anonymous\u0022 integrity=\u0022sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa\u0022\u003E\u003C\/script\u003E"));</script>
<script src="/js/site.min.js?v=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js">
</script>
<script>(window.kendo||document.write("\u003Cscript src=\u0022\/lib\/kendo-ui\/js\/kendo.all.min.js\u0022\u003E\u003C\/script\u003E"));</script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.aspnetmvc.min.js">
</script>
<script>(kendo.data.transports['aspnetmvc-ajax']||document.write("\u003Cscript src=\u0022\/lib\/kendo-ui\/js\/kendo.aspnetmvc.min.js\u0022\u003E\u003C\/script\u003E"));</script>
I did chek my layout file and it has the enviroment exclude tag for Develepment, Staging and Production for both css and js separately.
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-nova.min.css"
asp-fallback-test-class="k-common-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.nova.min.css"
asp-fallback-test-class="k-theme-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
</environment>
<environment exclude="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-nova.min.css"
asp-fallback-test-class="k-common-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.nova.min.css"
asp-fallback-test-class="k-theme-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
#* Place Kendo UI scripts after jQuery *#
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
asp-fallback-test="window.kendo">
</script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.aspnetmvc.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
</script>
</environment>
<environment exclude="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
#* Place Kendo UI scripts after jQuery *#
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
asp-fallback-test="window.kendo">
</script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.aspnetmvc.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
</script>
</environment>
So why does the excluded code show up when I publish my website?
Any help would be appreciated
Your final markup appears to be working properly so I'm a bit confused about your exact problem. You have defined two environmental conditionals, but both appear to have exact same markup therefore will render same on both development and production/staging which makes no sense.
First of all you want to define what will appear in development, this should be local unminified versions without fallbacks or versioning:
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-nova.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.nova.css" />
</environment>
Then you define your production markup which can use CDNs, fallbacks, minification and versioning.
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-nova.min.css"
asp-fallback-test-class="k-common-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.nova.min.css"
asp-fallback-test-class="k-theme-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
</environment>
Given environment variables are set properly on target systems, first block will be available in development and the second one in staging/production.
I just follow froala documentation and mix it with current layout using metronic.
Here is my css order.
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/css/components-md.css" id="style_components" rel="stylesheet" type="text/css"/>
<link href="assets/global/css/plugins-md.css" rel="stylesheet" type="text/css"/>
<link href="assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css"/>
<link href="assets/admin/layout2/css/themes/grey.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="assets/coeg-editor/css/froala_editor.min.css" />
<link rel="stylesheet" type="text/css" href="assets/coeg-editor/css/froala_style.min.css" />
and here is my JS order
<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="assets/admin/layout2/scripts/layout.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/coeg-editor/js/froala_editor.min.js"></script>
<script>
$(function() {
Metronic.init(); // init metronic core componets
Layout.init(); // init layout
$('a[href="{{ Request::url() }}"]').parent().addClass('active');
$('textarea#content').editable({inlineMode: false});
});
</script>
and I get Uncaught TypeError: undefined is not a function right at the $('textarea#content').editable({inlineMode: false});
But there is no error if I comment $('textarea#content').editable({inlineMode: false}); section.
How I can fix it ?
See https://www.froala.com/wysiwyg-editor/v2.0/docs/migrate-from-v1 for using
froalaEditor()
instead of
editable()
never mind the html which contain example still using v1 syntax instead of v2 :D
I am just importing the below javascript file and css but when i run this page the ajax-loader just keeps on spinning.
Note: there is no body or content in the file at all other than what is mentioned below.
Any idea why the ajax-loader.gif spins ?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.external-png-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.external-png-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.icons-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.icons-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-png-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-png-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-svg-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-svg-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.structure-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.structure-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.theme-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.theme-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.2.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
</body>
</html>
.However when i try the below links it works fine without the loader spinning.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
why two jquery mobiles just add one:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.js"></script> //<---either this
<script src="js/jquery.mobile-1.4.2.min.js"></script>//<--or this
you have to pick only one of it, so update to this:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
and you have loaded all the non-minified and minified css files too.
I am using twitter Bootstrap nav bar.
I am trying to make the nav bar behave properly for the mobile devices(i.e when the screen size is small).
nav-collapse works fine in this jsfiddle. But for the same code, in the browser when I reduce the window size it does not work. I don't know what seems to be the problem. Please help me.
Edit : included the content of the head
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css" />
<script src = "jquery-1.9.1.js" type = "text/javascript"></script>
<script src = "jquery-ui.js" type = "text/javascript"></script>
<script src = "jquery.validate.js" type = "text/javascript"></script>
<script src = "1.3.1.js" type = "text/javascript"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-wysihtml5.css"/>
<link rel="stylesheet" type="text/css" href="http://jhollingworth.github.com/bootstrap-wysihtml5/lib/css/bootstrap.min.css"></link>
<script src = "bootstrap.min.js" type = "text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://jhollingworth.github.com/bootstrap-wysihtml5/lib/css/prettify.css"></link>
<link rel="stylesheet" type="text/css" href="http://jhollingworth.github.com/bootstrap-wysihtml5/src/bootstrap-wysihtml5.css"></link>
<link rel="stylesheet" type="text/css" href="css/job.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>