We Keep Coding

Importing Leaflet-Library in a OpenUI5-App

so what am I trying to do?
I am creating an OpenUI5 webapp, the purpose of which is to route users in a given area.
For this I should use OpenStreetMap, and after a few minutes of research I came across the Leaflet-Library. So I want import the library and use it to show the given area.
My problem is that all the tutorials i came across so far just tell me how to do this with html, sadly I only have xml views.
Has anyone a tutorial for this rather specific scenario?

You can add the library you want to use in your Openui5 application's index.html file, inside head tag next to ui5 bootstraping, like this:
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/1.77.2/resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3" data-sap-ui-resourceroots='{
"project": "./"
}' data-sap-ui-oninit="module:sap/ui/core/ComponentSupport" data-sap-ui-compatVersion="edge"
data-sap-ui-async="true" data-sap-ui-frameOptions="trusted">
</script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
I don't know the library you want to use, but if you need to create any HTML elements you can use the sap.ui.core.HTML class.
This should work!

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!

jQuery UI dialog widget not appearing

For the last two days I've been trying to understand why I can't build a jQuery Dialog. I am trying to integrate it into another project but I couldn't so I created a new test html page for the sole purpose of building a simple one that works. I've tried multiple configurations and nothing works. I've attempted it on js fiddle and it works (on an older version, mind) leading me to assume I've messed up my headers.
<script src="../jQuery/jquery-ui-1.11.0.custom/external/jquery/jquery.js"></script>
<script src="..jQuery/jquery-ui-1.11.0.custom/jquery-ui.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.css">
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.theme.css">
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.structure.css">
test.js contains jquery code as seen in js fiddle link above. Am I missing anything? What am I doing wrong?

jquery ui - how to use google CDN [duplicate]

This question already has answers here:
Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
(23 answers)
Closed 8 years ago.
I want to use Google CDN for jQuery and jQuery UI..
I'm using the answer from here for jQuery.
Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
but i don't understand this bit:
if (typeof jQuery == 'undefined')
so how can i do it for jQuery UI?
also, will this work with custom jQuery UI theme as this produces a custom js file too?

You can make the call using
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
You can also link to other Ui themes by changes the name of the theme. In This case change the name base to any other theme name /base/jquery-ui.css to any other theme.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
Check out the jQuery UI Blog for a link of all CDN links http://blog.jqueryui.com/
If you're concerned that the Google CDN ever fails or goes down, you can fall back to a local copy when the CDN is offline (this example is baked into templates like HTML5 Boilerplate):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')
</script>

If you are having a custom jQuery UI theme, you have to host that on your own server. Google only hosts the main jQuery UI themes.
If you want to check whether or not the jQuery UI library has loaded, you can do this:
if (jQuery.ui) {
}

Here is the list, just change to the version you need.
https://developers.google.com/speed/libraries/devguide#jquery-ui