hi I want to use EasyUI GridView and Tab in Asp.net MVC4 and I put two Grid in a Tab.
but I have problem with it.
I added these Script and css in My Layout:
<link href="#Url.Content("~/Content/kendo/2013.1.319/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2013.1.319/kendo.blueopal.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2013.1.319/kendo.rtl.min.css")" rel="stylesheet" type="text/css" />
<link href="~/Content/1-ui.core.css" rel="stylesheet" />
<link href="~/Content/2-ui.theme.css" rel="stylesheet" />
<link href="~/Content/3-ui.datepicker.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="#Url.Content("~/Scripts/kendo/2013.1.319/jquery.min.js")"> </script>
<script src="#Url.Content("~/Scripts/kendo/2013.1.319/kendo.all.min.js")"> </script>
<script src="#Url.Content("~/Scripts/kendo/2013.1.319/kendo.aspnetmvc.min.js")"> </script>
<script src="#Url.Content("~/Scripts/kendo.modernizr.custom.js")"> </script>
<script src="~/Scripts/jquery-ui-1.9.2.min.js"> </script>
<script src="~/Scripts/jquery.ui.datepicker-cc.js"> </script>
<script src="~/Scripts/calendar.js"> </script>
<script src="~/Scripts/jquery.ui.datepicker-cc-fa.js"> </script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"> </script>
and I added in My Index these :
<script src="~/Scripts/MapScript/Sld.js"></script>
<script src="~/Scripts/MapScript/proj4js-compressed.js"></script>
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAl9RMqSzhPUXAfeBCXOussRSPP9rEdPLw3W8siaiuHC3ED5y09RTJKbutSNVCYFKU-GnzKsHwbJ3SUw'></script>
<script src="~/Scripts/MapScript/ToolsMenu.js"></script>
<link href="~/Content/MapStyle/MStyle.css" rel="stylesheet" />
<script src="~/OpenLayers.js"></script>
<script src="~/Scripts/MapScript/LoadMap.js"></script>
<script src="~/Scripts/mootools-core-1.4-full.js"></script>
<script src="~/Scripts/mootools-more-1.4-full.js"></script>
and in My page that I want to load EasyUI GridView I added these:
<link href="~/Scripts/easyui-1.3.6/themes/icon.css" rel="stylesheet" />
<link href="~/Scripts/easyui-1.3.6/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Scripts/easyui-1.3.6/themes/default/easyui-rtl.css" rel="stylesheet" />
but when I Load My page, first the Tab is not loaded and with reClick on its Link , it loaded.
I think it for conflicting between jqueries that added?????!!!
note: when I create this page without index and Layout ,there isn't no problem
what is the problem??
Try using $.noConflict() in order to avoid conflict between different js files.
see here :- http://api.jquery.com/jquery.noconflict/
NOTE :- Try including required js and css files at one place.
Load Mootools before jQuery. Then, use either
document.id("id_of_element")
or enclose any Mootools classes in
( function () {
$ = document.id;
this.MyClass = new Class({
...
});
})();
This will solve any conflicts between jQuery and MooTools, at least.
Related
i use JQuery DataTable plugin in a Asp.net MVC Project. JQuery, DataTable and Bootstrap are installed by Nugets. Adding the reference jquery.dataTables.min.css to the Layout make a styling troubles and problems.
the order of call:
<head>
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/website.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables/dataTables.bootstrap4.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/website.js"></script>
<script src="~/Scripts/moment.min.js"></script>
#RenderSection("scripts", required: false)
Thank you !
I'm struggling my head for 5 hrs to get out of this issue, I've put some <script> tags in the index.html file that resides in the public folder.
I want them to execute after the Browser has rendered the HTML completely, I know this is very basic question, but the problem is, I'm converting an HTML template to React, and it heavily uses animations, which I can't afford to write in react again from start. Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Galaxy App</title>
<!--CSS-->
<link href="asset/css/icofont.min.css" rel="stylesheet" />
<link href="asset/css/linearicons.min.css" rel="stylesheet" />
<link href="asset/css/magnific-popup.min.css" rel="stylesheet" />
<link href="asset/css/animsition.min.css" rel="stylesheet" />
<link href="asset/css/bootstrap.min.css" rel="stylesheet" />
<link href="asset/css/swiper.min.css" rel="stylesheet" />
<link href="asset/css/styles.css" rel="stylesheet" />
<link href="asset/css/main.css" rel="stylesheet" />
<link href="asset/css/homepage.css" rel="stylesheet" />
<!--Theme CSS-->
<link href="asset/css/theme.css" rel="stylesheet" />
<link href="asset/css/responsive.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="asset/js/polyfill.min.js"></script>
<script src="asset/js/jquery.min.js"></script>
<script src="asset/js/jquery.viewport.min.js"></script>
<script src="asset/js/jQuerySimpleCounter.min.js"></script>
<script src="asset/js/jquery.magnific-popup.min.js"></script>
<script src="asset/js/animsition.min.js"></script>
<script src="asset/js/isotope.pkgd.min.js"></script>
<script src="asset/js/bootstrap.bundle.min.js"></script>
<script src="asset/js/rellax.min.js"></script>
<script src="asset/js/swiper.min.js"></script>
<script src="asset/js/smoothscroll.js"></script>
<script src="asset/js/svg4everybody.legacy.min.js"></script>
<script src="asset/js/TweenMax.min.js"></script>
<script src="asset/js/TimelineLite.min.js"></script>
<script src="asset/js/typed.min.js"></script>
<script src="asset/js/vivus.min.js"></script>
<script src="asset/js/main.js"></script>
<!-- Theme JS -->
<script src="asset/js/theme.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="asset/js/cutsom.js"></script>
</body>
</html>
I manually checked by logging the document.getElementById() in the last script, and it returns undefined/null because at that time the HTML is not rendered completely, even though I've put the scripts at the end of file.
it works if I add setTimeout in my script, and it captures the elements perfectly.
So what should I do to only load all the scripts when my HTML has been rendered completely.
One way to accomplish this is to emit an Event from React.
Add this to your main react component:
useEffect(() => {
const event = new Event('rendered')
document.dispatchEvent(event)
}, [])
Listen for the event on the page:
<script>
document.addEventListener('rendered', function() {
// start animation
}, false)
</script>
I created a small nav to switch between different stylesheets using jquery, however once I moved my scripts out from the page and into a separate file they no longer respond.
$(document).ready(function() {
// teal stylsheet
$("#cssTeal").click(function() {
$("link[rel=stylesheet]").attr({href : "stylesheetteal.css"});
});
// pink stylesheet
$("#cssPink").click(function() {
$("link[rel=stylesheet]").attr({href : "stylesheetpink.css"});
});
// yellow stylesheet
$("#cssYellow").click(function() {
$("link[rel=stylesheet]").attr({href : "stylesheetyellow.css"});
});
});
<html>
<head>
<meta charset="UTF-8"/>
<title>Mission Statement</title>
<link href="stylesheetteal.css" rel="stylesheet" type="text/css" media="all" id="teal"/>
<link href="stylesheeetpink.css" rel="alternate stylesheet" type="text/css" media="all" id="pink"/>
<link href="stylesheetyellow.css" rel="alternate stylesheet" type="text/css" media="all" id="yellow"/>
<link href="scripts.js" rel="external" type="text/javascript"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui/jquery-ui.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="themes">
<div class="indiv"><a id="cssTeal" href="#teal"><img src="assets/tealcircle.png"></a></div>
<div class="indiv"><a id="cssPink" href="#pink"><img src="assets/pinkcircle.png"></a></div>
<div class="indiv"><a id="cssYellow" href="#yellow"><img src="assets/yellowcircle.png"></a></div>
</div>
The problem is the order of the loaded scripts and the tag you are using to load your custom scripts. You are using a link tag instead of a script tag.
Try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui/jquery-ui.min.js"></script>
<script src="scripts.js"></script>
Also add all the script tags just before the closing </body> tag. Scripts block content from loading, so you should add them last so they don’t block the rest of the content from being loaded.
I've checked other answers on here and I don't think there's one that covers my problem. I am trying to include two JQuery plugins (Datepicker and Select2) and I just want to download them, include them in the head of my site and initiate them in...
$(document).ready(function() {
// HERE!
$('[data-toggle="datepicker"]').datepicker();
$(".js-example-basic-single").select2();
});
...as both suggest I should be able to do... but both give me a ReferenceError: require is not defined in the console and if I go into the .js files and comment out the offending line (as suggested in other answers) the plugin doesn't work at all and I just get an undefined function in the console.
I'm sure this is something simple that's simply outside of my understanding, if anyone can help, that would be great.
This is the head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- fonts -->
<link rel="stylesheet" type="text/css" href="/fonts/roboto.css" media="screen" />
<!-- end fonts -->
<link rel="stylesheet" type="text/css" href="/css/general.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/message_boxes.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/loading_screen.css" media="screen" />
<link href="/css/datepicker.css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="/js/retina.min.js"></script>
<script type="text/javascript" src="/js/jscolor.min.js"></script>
<script type="text/javascript" src="/js/datepicker.js"></script>
<script type="text/javascript" src="/js/general.js"></script>
<script type="text/javascript" src="/js/message_boxes.js"></script>
<script type="text/javascript" src="/js/loading_screen.js"></script>
<script type="text/javascript" src="/js/tipped.js"></script>
<link rel="stylesheet" type="text/css" href="/css/tipped.css" />
<link rel="stylesheet" type="text/css" href="/css/icheck_blue.css" />
<script type="text/javascript" src="/js/icheck.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
I want to implement javascript flip counter. I included all needed files and added code as in this article - http://cnanney.com/journal/code/apple-style-counter-revisited/#demo.
I added html in my page:
<div id="counter" class="flip-counter"></div>
and added javscript to my application.js:
var myCounter = new flipCounter("counter", {inc: 23, pace: 500});
here is my included files(js and css):
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/counter.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery-ui-1.8.22.custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-flipcounter.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.8.22.custom.min.js?body=1" type="text/javascript"> </script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
I will also write here what files demo page is including:
<!-- My flip counter script, REQUIRED -->
<script type="text/javascript" src="js/flipcounter.js"></script>
<!-- Style sheet for the counter, REQUIRED -->
<link rel="stylesheet" type="text/css" href="css/counter.css" />
<!-- NOT REQUIRED FOR COUNTER TO FUNCTION, JUST FOR DEMO PURPOSES -->
<!-- jQuery from Google CDN, NOT REQUIRED for the counter itself -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- jQueryUI from Google CDN, used only for the fancy demo controls, NOT REQUIRED for the counter itself -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<!-- Style sheet for the jQueryUI controls, NOT REQUIRED for the counter itself -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" />
<!-- Style sheet for the demo page, NOT REQUIRED for the counter itself -->
<link rel="stylesheet" type="text/css" href="css/demo.css" />
and here is rar archive with working counter: https://dl.dropbox.com/u/86122402/cnanney-apple-style-flip-counter-13fd00129a41.rar.
add this to your application.js
$(function(){
var myCounter = new flipCounter("counter", {inc: 23, pace: 500});
});
Everything looks like it should work.
Try adding you JavaScript inside a self anonymous invoking function.
$(function(){
var myCounter = new flipCounter("counter", { inc:123, pace:600});
});
Also make sure all your included files point to the right location.
Replace it with the following to test.
<script type="text/javascript" src="js/flipcounter.js"></script>
<link rel="stylesheet" type="text/css" href="css/counter.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />