I'm just learning jquery-ui and have been playing with the sliders with the goal of integrating it into my app.
Caveat - the code below is in Coffeescript.
I have this slider (copied from the site example) and have tweaked some options. It seems to work fine.
$('#slider-range').slider
range: true
..........
slide: (event, ui) ->
$('#amount').val '$' + ui.values[0] + ' - $' + ui.values[1]
return
$('#amount').val '$' + $('#slider-range').slider('values', 0) + ' - $' + $('#slider-range').slider('values', 1)
return
I can use slider-range in any of my pages and it works.
I removed some of the code because it works. However I have tried to implement two more sliders but they do not appear to load.
$('#treble').slider
return
$('#bass').slider
return
I ran into a problem with the datapicker (which i use in another app) and that will not load either.
I'm using CDN for my files, that would be JQuery 3.2.1 and JQuery-UI 1.12.1
I find it puzzling that one slider works, the other two do not. Any suggestions? I didn't post my layout file to keep the post shorter.
I do not see any issues in Inspector / Devtools.
I'm adding my head directives in the event the problem is there.
doctype html
html lang="en"
head
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/styles.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="crossorigin="anonymous"></script>
<script src="/javascripts/application.js"></script>
Related
I installed bootstrap-material-design as instructed on the github website and everything said it was installed successfully:
I have inserted the recommended code into my application header:
<!-- Material Design fonts -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Bootstrap Material Design -->
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-material-design/dist/css/ripples.min.css">
<!-- Material Design Scripts -->
<script src="bower_components/bootstrap-material-design/scripts/index.js"> </script>
<script src="bower_components/bootstrap-material-design/scripts/material.js"> </script>
<script src="bower_components/bootstrap-material-design/scripts/ripples.js"> </script>
and
<script type="text/javascript">
$(document).ready(function() {
$.material.init();
});
</script>
However, when I try a sample element (e.g. "jumbotron" or "well") it still appears the way normal bootstrap does, not the way your material design website says it should.
Any ideas on how to get it to appear? I didn't get any error message, so I don't really have anything to go on, and I don't want to manually download the files for fear of duplicates.
Apparently you do not have a reference to the correct JS files. Trying adding these to you code in the head section
<script src="scripts/index.js"> </script>
<script src="scripts/material.js"> </script>
<script src="scripts/ripples.js"> </script>
You seems to be missing references to jQuery and bootstrap's .js file. You should include both before material design script in that order.
Trying to learn webix (and javascript at all). Usually the common practice is loading javascript libraries at the end of the body.
The webix quick start doc says:
<!DOCTYPE HTML>// specifies document type
<html>
<head>
<link rel="stylesheet" href="../../codebase/webix.css" type="text/css">
<script src="../../codebase/webix.js" type="text/javascript"></script>
</head>
<body>
e.g. it loads the library in the head.
Questions:
the webix lib should be loaded in the <head>?
if yes, where should be loaded jQuery and twitter bootstrap?
and in what order?
You can place webix.js anywhere on the page. Just be sure that JS code that uses Webix API is used after webix.js loading
Normally scripts are placed at the end of HTML file as they only add some interactivity to the page. In case of Webix UI, without webix.js you will not see any content on page at all, so there is no benefits from putting webix.js at the end of page.
As for jQuery - if you plan to use webix-jquery integration you need to load webix.js AFTER loading the jQuery ( at the head, or at the end of file, doesn't matter )
You need to follow the below syntax or process for using the webix.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:300|Raleway|Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" >
webix.ui({
view:"calendar",
id:"calendar1"
})
</script>
</body>
</html>
Any dependencies must load on top webix.js, so that you can use them in your JS file.
I see Telerik provides open source version of Kendo UI at following URL
http://www.telerik.com/download/kendo-ui-core
I downloaded it but not able to make it work in ASP.NET MVC application.
I am not sure what i am missing. I make a call to CSS and JS files as mentioned in below link:
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/asp-net-mvc-4
Although I am missing one step Add reference to Kendo.Mvc.dll because Telerik don't provide installer in free version and I need JavaScript version of Kendo UI not with MVC selector.
Any idea here?
If you go to: http://dojo.telerik.com/
The default page contains everything you will need to get up and running and in what order:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
</body>
</html>
If it is still not working after you put this in your page then something else is going on.
Comment out the following line in _layout.cshtml page
##Scripts.Render("~/bundles/jquery")#
and add the below lines at the end of the head section :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
I keep running in to strange issues when writing gadgets for Jira. I get problems like the options being clipped out of view, reconfiguration not working and most annoyingly: projectOrFilterPicker not working.
Most of the weird issues I run in to I can work around which is what I've done however I need to allow the user to use that quick search box for selecting a project or a filter. However, as soon as I include one of these dialog boxes the gadget just loads endlessly and if I resize the screen (one of the workarounds I use for other things) I get an error 500.
A weird thing is that it works locally on the Atlassian SDK test Jira (V 4.4) but not on my workplaces full test server (V 2.1.3).
This is some of the code I'm using and I can post more if necessary:
var projectPicker = AJS.gadget.fields.projectOrFilterPicker(gadget, "projectId", args.projectOptions);
args.projectOptions are defined here:
args: function()
{
return [
{
key: "projectOptions",
ajaxOptions: "/rest/gadget/1.0/filtersAndProjects"
}
];
}()
Any insight/suggestions would be greatly appreciated. Thanks in advance.
Carl
I added the following code to the top of the gadget javascript:
<link type="text/css" rel="stylesheet" href="http://iedev255/s/531/4/1.0/_/download/batch/jira.webresources:autocomplete/jira.webresources:autocomplete.css" media="all">
<link type="text/css" rel="stylesheet" href="http://iedev255/s/531/4/4.1.2/_/download/batch/com.atlassian.jira.gadgets:common/com.atlassian.jira.gadgets:common.css" media="all">
<link type="text/css" rel="stylesheet" href="http://iedev255/s/531/4/4.1.2/_/download/resources/com.atlassian.jira.gadgets:common/global.css" media="all">
<script type="text/javascript" src="http://iedev255/s/531/4/2.1.3/_/download/batch/com.atlassian.auiplugin:ajs/com.atlassian.auiplugin:ajs.js" ></script>
<script type="text/javascript" src="http://iedev255/s/531/4/1.0/_/download/batch/jira.webresources:jira-global/jira.webresources:jira-global.js" ></script>
<script type="text/javascript" src="http://iedev255/s/531/4/1.0/_/download/batch/jira.webresources:autocomplete/jira.webresources:autocomplete.js" ></script>
<script type="text/javascript" src="http://iedev255/s/531/4/4.1.2/_/download/batch/com.atlassian.jira.gadgets:common/com.atlassian.jira.gadgets:common.js" ></script>
It solved a lot of my problems
I have a JSP that uses DOJO Datepicker. It runs fine on my laptop where I have Netbeans6.9/tomcat 6.x installed. However, when I upload it to my hosting service, the DOJO Datepicker doesn't show while the rest of the page shows up fine!
My web app is developed using Java Struts2.
I compared the source code between the two environments (local & remote). And I noticed that has no effect on the remote page. Where on the local page it translates to some DOJO configuration.
Remote page:
<head>
<title>Profile</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="MainLayout.css" rel="stylesheet" type="text/css">
</head>
Local Page:
<head>
<title>Contract Profile</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="MainLayout.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript">
// Dojo configuration
djConfig = {
isDebug: false,
bindEncoding: "UTF-8"
,baseRelativePath: "/sm/struts/dojo/"
,baseScriptUri: "/sm/struts/dojo/"
,parseWidgets : false
};
</script>
<script language="JavaScript" type="text/javascript"
src="/sm/struts/dojo/struts_dojo.js"></script>
<script language="JavaScript" type="text/javascript"
src="/sm/struts/ajax/dojoRequire.js"></script>
<link rel="stylesheet" href="/sm/struts/xhtml/styles.css" type="text/css"/>
<script language="JavaScript" src="/sm/struts/utils.js" type="text/javascript"> </script>
<script language="JavaScript" src="/sm/struts/xhtml/validation.js" type="text/javascript"></script>
<script language="JavaScript" src="/sm/struts/css_xhtml/validation.js" type="text/javascript"></script>
</head>
In addition, FireBug, gives me object dojo not defined message on loading the page remotely. These are clear signs that it's not behaving the same.
But the question is what do I do so it does?
Your help is much appreciated as I really getting disperate.
"dojo not defined" means dojo didn't load.
Go to the network tab in firebug and find the full path for dojo.js
http://mydomain.com/contextPath/static/dojo/dojo.js
Chances are this will be in red, meaning that firefox couldn't load the resource.
The problem is probably one of the following:
The dojo files are in a different path. The contextPaths might be different between your development and production environments and you have it hard coded for your development environment.
Your build script that builds the war file did not include the dojo javascript and it is missing entirely on the production environment.