We Keep Coding

Bootstrap js with kendo Conflicting

I am creating a project using Javascript. In my project i am using kendo with bootstrap. The Problem some of the kendo and bootstrap are conflicting.I know there is $.noconflict, But this create me lot of problems. Mainly the kendodropdown is conflicting.
<!-- Mainly scripts -->
<script src="$themeDisplay.getPathThemeRoot()/js/jquery-2.1.1.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/bootstrap.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/jquery.mousewheel.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/jquery.jscrollpane.min.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/custom.js?v=$version"></script>
If I remove the bootstrap file then kendo functions working properly.Please help me for using kendo and bootstrap together.
The exact issue is when i open dropdown and scrolls it automatically closes.
This is the code:
$("#searchTktID").kendoDropDownList({
filter: "startswith",
});
and am handling this situation using
close: function(e){
if(isScroll) {
e.preventDefault();
}
},
open:function(){
isScroll = true;
},
But this is not correct way i think.

Without knowing your exact problem it sounds like it may be a script ordering problem.
For example this is how I include the scripts in my projects for kendo and bootstrap integrated MVC apps.
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap-switch.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2019.2.514/kendo.bootstrap-v4.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/kendo.aspnetmvc.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/cultures/kendo.culture.en-GB.min.js")"></script>
<script src="#Url.Content("~/Scripts/umd/popper.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.js")"></script>
#Scripts.Render("~/bundles/fa")
#Scripts.Render("~/bundles/Custom")
As long as you ensure that the bootstrap.js file is loaded after the kendo.js files you should be good.
As I said in my comment I have been using this approach for both version 3.x and 4.x
Edit: Please see a this dojo with bootstrap and kendo libraries working together.
https://dojo.telerik.com/AkIBOjOr/2
One thing to check is that you aren't reloading JQuery after you have loaded the kendo js files as that will show the kendoDropDownList is not a function error.
Edit 2: I have added filtering on the cap colour dropdown list.

That is one of the downsides of Kendo, you will need to customize your controls to look the way you would like. Kendo override your base bootstrap css, and mainly on the controls like dropDown, comboBox, autoComplete they are quite problematic. One solution is to use the telerik theme builder
You are able to customize your controls and download the CSS files. Other solution will be choosing a different theme from the bootstrap theme but both solutions need to override your css to get the final design you intend.
general documentation for setup a theme

I can't make SmartWizard Jquery 4 to work with Bootstrap 4

I'm new to StackOverflow and I would like to ask if someone can help me fix my code. I can't make SmartWizard jquery 4 to work. I absolutely copied every line of code (except the sources of the css and js files) yet it still doesn't work. I'm sorry but I don't know what's wrong, I'm just a newbie in coding and I hope that you can help me understand this little problem.
I will attach my source code and images here.
Code from Jquery SmartWizard that I wish to copy is from http://techlaboratory.net/smartwizard. Download the Zip file and open the index.html file under examples folder of the zip file.
Here is the output of the code I wish to copy:
Output of the code I wish to copy
Here is my source code.
<!DOCTYPE html>
<html>
<head>
<title>Smart Wizard - a JavaScript jQuery Step Wizard plugin</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Only difference is i'm using Bootstrap 4 -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"/>
<link href="/sample2/resources/css/smart_wizard.min.css" rel="stylesheet" type="text/css" />
<link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
<link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
<link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
//the same as the code in index
<script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>
</body>
</html>
Here is my project folder architecture: project folder architecture
Here is the output of my code: My output
Once again I'm sorry I'm just a newbie in coding and thank you for replying to my question.
EDIT: I just found out that Jquery SmartWizard 4 is not compatible / does not work with Bootstrap 4 based on the comments but someone made it work with,as the commenter said, "It works after modifications. I still have small problems to solve. Thanks". Does anybody know how to make Jquery SmartWizard 4 work with Bootstrap 4? Thanks a lot!
EDIT2: I made it work with Bootstrap 4 now and here is what I did:
Changed this line of code:
From:
<script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>
In this syntax it fetches this version of SmartWizard Jquery SmartWizard 4.2.2 is being fetched.
To:
<script type="text/javascript" src="/sample2/resources//js/jquery.smartWizard.min.js"></script>
In this syntax it fetches the latest version of SmartWizard Jquery SmartWizard 4.3.1 is being fetched.
Now my question is how come the extra slash made a difference on how the SmartWizard fetches its version, I would love to know why. Thanks a lot! But now I'm able to make Jquery SmartWizard 4.3.1 work with Bootstrap.

To make Jquery SmartWizard 4 work with Bootstrap 4, I had to change lines of code
From:
<script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>
To:
<script type="text/javascript" src="/sample2/resources//js/jquery.smartWizard.min.js"></script>
I did the same for the css files so it looks like this now
<link href="/sample2/resources//css/smart_wizard.min.css" rel="stylesheet" type="text/css" />
to use the minified version since when I used the minified version but the syntax of the link is "/sample2/resources/css/smart_wizard.min.css" the document fetches the SmartWizard v4.x version. I absolutely don't know why this happens ,where adding an extra slash after resources changes the version that is being used, so if anyone can provide answers to it that would be great! Thanks a lot! Cheers!

Script tags needed in HTML? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
What are the script tags I HAVE TO insert into the <head> of my HTML???
Here is what I have:
<head>
<title>My Web Site</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<script type='text/javascript' src='scrollup.js'></script>
<script type='text/javascript' src='verticalsmoothscrolling.js'></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
</head>
But if I delete first three script tags above and add this one instead:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
...everything works the same way (plus it looks clean and neat).
Can anyone explain me in simple words what each of the first three script tags does, and how do they differ from the one I added instead of those three??? Which one would you use?
I prefer the bottom solution but I am not sure if that's correct/best option???

The core difference here between the libraries is that one is basic jQuery, while the other two are jQuery UI and its stylesheet. jQuery UI isn't often a library that's included in pages unless it's very deliberate. If you're not sure that you're using it, you're probably not using it.
The tag that you added is simply a newer version of jQuery. The reason everything works the same is that your code likely isn't using jQuery UI, so there's no issue if it goes missing.
Also, you don't HAVE to put your script tags in the head. They can go anywhere on the page. However, it's good practice to put your script tags at the BOTTOM of the page. This is so that your page is able to load and render the HTML elements without first having to load JavaScript, which can occasionally cause a bit of hangup on page load.
Update
As far as when to use jQuery UI, it's commonly used in projects with very dynamic UI elements. For instance, jQuery UI allows for click/draggable elements, dynamic sorting, resizable elements, etc. You can see a full listing of its features and demos here.
This library stands out because while standard jQuery does support these interactions, it's not quite as easy and clean as using jQuery UI. Note that jQuery UI is an extension of jQuery and relies on jQuery to run.

You replaced jquery 1.9.1 with jquery 2.0.0. If you want to know, what's different in the new version, you can always take a look at the patchnotes.

you dont HAVE to put any tags in the head of your page.
Although it is recommended you add META tags, the charset and the TITLE tag to name your page.
javascript can be placed anywhere on a page

Using the plugin Magnific Popup, I have to use jquery. However when I load the page it slows down dramatically

Here is the code that includes the jquery reference:
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet prefetch" href="popup.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
When I comment out the jquery reference the page loads much quicker (albeit without the necessary functionality). I have also tried storing the file locally but that did not help the issue.

First of all, consider using jQuery locally. It could speed up page dramatically. However, if this doesn't help, use remote sources. But,
don't link jQuery directly from their side! Use jQuery CDN instead:
http://codeorigin.jquery.com/,
jQuery Download Page -- see "Using jQuery with a CDN" section.
An alternative, though requiring a lot of work, would be dropping jQuery in favor of ZeptoJS, which gives you nearly exactly the same syntax, as jQuery, and most of its core functionallity, with 1/4 (25%) of code size. And it loads helly fast!

Windows store app - jQuery error

I'm trying to import jQuery into blank javascript app, but keep getting same error: JavaScript runtime error: 'jQuery' is undefined. I don know the reason for this.
My whole procedure:
Create new Blank app project
Add existing item jquery-1.8.2-win8-1.0 in js folder
Drag and drop added item into default.html head
Add some jquery code in default.js
and now, i'm getting this error: JavaScript runtime error: '$' is undefined.
But if I delete added jQuery code(didn't notice before) it throw's me another error:JavaScript critical error at line 4, column 1 in ms-appx://8cce31f0-7793-41f7-875e-c41dd9ade2c7/js/jquery-1.8.2-win8-1.0.js.
I'm trying to get jquery to work for last several hours, but without success.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- jquery references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="js/jquery-1.8.2-win8-1.0.js"></script>
</head>
<body>
<p>Content goes here</p>
</body>
</html>
jQuery code:
$("*").on("click", function () { });
Error's:
Video:
Error - jQuery

First of all, thank you for the video - this would have been nearly impossible to solve without it.
I noticed your jQuery file was 2.0mb; this didn't look right. And then the error message took us into its contents to point out a syntax error, where we saw a slew of HTML tags — you appear to have downloaded from the GitHub viewer page, rather than from the source file itself. You should instead download the RAW file.
Please note also that this is an older version of jQuery, and not a fully-supported version. I am the primary developer behind the appendTo repo, and am excited to announce that jQuery 2.0 (pre-release builds available) should work really well on its own in a Windows Store App.
I wrote about this recently over on nettuts: Building Windows Store Applications With jQuery 2.0

Try to put:
<script src="js/jquery-1.8.2-win8-1.0.js"></script>
after:
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
This error is probably because you're not include jQuery library before writting jQuery code and make sure the path to your file is correct

Try rearranging the scripts you added. Include jQuery js file before your default.js file. Something like this:
<script src="js/jquery-1.8.2-win8-1.0.js"></script>
<script src="/js/default.js"></script>
Default.js tries to use jQuery which is not yet added. So rearranging might help.