I want to put a tag system. I choose http://aehlke.github.io/tag-it/.
I have the code:
var availableTags = [
{
value: 1, label: 'tag1'
},
{
value: 2, label: 'tag2'
},
{
value: 3, label: 'tag3'
}];
$(document).ready(function() {
var version = $.ui ? $.ui.version || "pre 1.6" : 'jQuery-UI not detected';
alert(version);
$("#myTags").tagit({
tagSource: availableTags,
autocomplete: {
delay: 0,
minLength: 2,
source : availableTags
}
});
});
In jsfiddle it work (http://jsfiddle.net/jg9qw/) but in my website it doesn't. The version var is set with "1.8.12".
I have no error in my website console log.
I can put/delete tag but the autocomplete doesn't work.
Css (from header)
<link href="/css/jquery.fancybox.css" rel="stylesheet" type="text/css" media="all" />
<link href="/css/jquery.tagit.css" rel="stylesheet" type="text/css" media="all" />
<link href="/css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css" media="all" />
<link href="/css/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
Js (from header)
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="/js/tag-it.js"></script>
This is not much information you gave, but one thing I can think of with this much information is that probably the order of the scripts are reverse. If you could show us a code from your website's header it would help in solving your problem. (just the scripts you links)
Yes, probably that's the case. Check their website for the correct order: https://github.com/aehlke/tag-it/blob/master/README.markdown
And I don't think that everything is necessary.
And in your jquery ui make sure that the followings are contained: Core, Widget, Position, and Autocomplete
Try it with just the full jquery ui (just link the original one so you don't have to download) and the tag-it, nothing else. In case it doesn't work that way than something else is the source of the problem.
Related
I was trying to work with Toast UI calendar available here:
https://github.com/nhn/tui.calendar
I tried to use it via CDN which requires us to insert the following:
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css" />
<!-- If you use the default popups, use this. -->
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" />
<script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js"></script>
<script src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js"></script>
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>
When I tried to create a calendar in my html file, I noticed that it lacked a few functions such as date-picker, render-range, or even the event scheduler pop-up. I also noticed that they talk of tui-code-snippet as a dependency for this calendar:
https://github.com/nhn/tui.calendar#-dependency
However, I'm not sure what to include from the tui-code-snippet exactly, as there are a bunch of functions in there and they state that we should only import the functions we need from it:
https://github.com/nhn/tui.code-snippet#-usage
Any help in this would be greatly appreciated.
EDIT: I added the following tui-code-snippet file as well, and this only helped me to get the calendar to show/render, but all the functionalities are still missing:
<script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js"></script>
The code lacks a few js links such as :
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.13/chance.min.js"></script>
Once these links are attached, we simply need to create a tui.calendar instance and then post the custom options as required. An example of such can be:
<script type="text/javascript">
var cal, resizeThrottled;
var useCreationPopup = true;
var useDetailPopup = true;
var datePicker, selectedCalendar;
cal = new tui.Calendar('#calendar', {
defaultView: 'week',
useCreationPopup: useCreationPopup,
useDetailPopup: useDetailPopup,
calendars: CalendarList,
template: {
milestone: function(model) {
return '<span class="calendar-font-icon ic-milestone-b"></span> <span style="background-color: ' + model.bgColor + '">' + model.title + '</span>';
},
allday: function(schedule) {
return getTimeTemplate(schedule, true);
},
time: function(schedule) {
return getTimeTemplate(schedule, false);
}
}
});
</script>
and it should load the calendar just fine, and allow adding events to the scheduler.
I hope this helps anyone else stuck in a similar problem.
I am using preloadjs for large asset loading.
I am using lots of js libraries like 60+ jquery plugins.
I just want a nice loader that displays progress of assets loading with progress bar and listing file which were loaded successfully and which were failed.
I am using simple example to display my problem.
Previously I was using new createjs.LoadQueue(true) to load content using XHR But I find XHR very slow as compared to old-fashioned tags to load scripts.
As per doc, I want to switch to load content using tag-based loading instead of XHR but I cant figure out how. Please see the code below
Objective:
How to use tag-based loading ??
Is it true that old-fashioned <script>tags will load scripts faster than preloadjs XHR
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>preloadjs </title>
<script src="https://code.createjs.com/preloadjs-0.6.2.min.js" type="text/javascript"></script>
<script id="1" type="text/javascript"></script>
<script id="2" type="text/javascript"></script>
<script id="3" type="text/javascript"></script>
<script id="4" type="text/javascript"></script>
<script id="5" type="text/javascript"></script>
</head>
<body>
<div id="progress"> </div>
<script type="text/javascript">
//
var manifest = [{
"src": "https://code.jquery.com/jquery-1.12.4.min.js",
"id": "1"
}, {
"src": "https://code.jquery.com/ui/1.11.3/jquery-ui.min.js",
"id": "2"
}, {
"src": "https://code.jquery.com/ui/1.11.3/FAIL-IT.js",
"id": "3"
}, {
"src": "https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js",
"id": "4"
}, {
"src": "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js",
"id": "5"
}];
//
var queue = new createjs.LoadQueue(false);
queue.setMaxConnections(5);
queue.maintainScriptOrder = true;
queue.on('progress', function(event) {
//fired when the overall progress changes
var value = queue.progress.toFixed(2) * 100;
document.getElementById('progress').innerHTML = value + '%';
});
queue.on('complete', function(event) {
//fired when the entire queue has been loaded
document.getElementById('progress').innerHTML = '100% - all done';
});
queue.on('error', function(event) {
console.log(event);
});
queue.loadManifest(manifest);
</script>
</body>
</html>
After viewing your post, I have done some tests and realized that, when using
createjs.LoadQueue(false);
content is loaded as tags on HEADER section, so, the following code
loader = new createjs.LoadQueue(false);
loader.loadManifest([
{ type: createjs.AbstractLoader.CSS, src: '/node_modules/material-design-icons/iconfont/material-icons.css'},
{ type: createjs.AbstractLoader.CSS, src: '/node_modules/materialize-css/dist/css/materialize.css'},
{ type: createjs.AbstractLoader.CSS, src: '/styles.css'},
{ type: createjs.AbstractLoader.JAVASCRIPT, src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js' }
]);
will just create the following on
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="/node_modules/material-design-icons/iconfont/material-icons.css">
<link rel="stylesheet" type="text/css" href="/node_modules/materialize-css/dist/css/materialize.css">
<link rel="stylesheet" type="text/css" href="/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
Hope this helps with you first question.
I have the following in the header of my site
<link rel="stylesheet" id="swp-google-font-headline-css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&ver=4.5.3" type="text/css" media="all">
I want to retrieve the full <link> content as shown above with jquery.
I tried
var a = jQuery('#swp-google-font-headline-css').get(0);
console.log(a, typeof a)
But the console output displayed the actual content, but it seem to be an object rather than a string and i specifically want it to be a string.
See demo https://jsfiddle.net/collizo4sky/qh6dnmg9/
Please help
Use outerHTML property of the Element
The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants.
var a = jQuery('#swp-google-font-headline-css').get(0).outerHTML;
console.log(a,typeof a)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" id="swp-google-font-headline-css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&ver=4.5.3" type="text/css" media="all">ffff
Maybe this is what you want:
var a = jQuery('#swp-google-font-headline-css').clone();
console.log(a[0]);
You can use innerHTML property on your a variable.
$(document).ready(function() {
var a = $('#swp-google-font-headline-css').get(0);
console.log(a.innerHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" id="swp-google-font-headline-css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&ver=4.5.3" type="text/css" media="all">
There are two means by which this can be achieved, the first – as already shown – is to use the Node.outerHTML property, which in your posted code can by achieved like so:
var a = jQuery('#swp-google-font-headline-css').get(0).outerHTML;
console.log(a, typeof a)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" id="swp-google-font-headline-css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&ver=4.5.3" type="text/css" media="all">ffff
And the other approach is more of a shim, and achieved by appending the found-element, here the <a>, to another element and accessing the innerHTML of that parent element:
function getElementHTML(node) {
var wrapper = document.createElement('div');
wrapper.appendChild(node);
return wrapper.innerHTML;
}
console.log($('#swp-google-font-headline-css').get(0));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" id="swp-google-font-headline-css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&ver=4.5.3" type="text/css" media="all">ffff
You can use outerHTML.
var b = a.outerHTML;
Demo: https://jsfiddle.net/qh6dnmg9/2/
I have single page app in Polymer. Everything works works great but when I vulcanize it I always get Uncaught TypeError: undefined is not a function on many places of Polymer's default code. But after all my app still works. But I cannot see any paper toast after clicking on "Register" button in <my-register-box> element.
My index.html look like this:
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
....
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="bower_components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/flatiron-director/flatiron-director.html">
....
<link rel="import" href="register-box.html">
...
</head>
<body>
...
<my-register-box name="{{name}}" email="{{email}}" url="{{url}}"></my-register-box>
...
And register-box.html like this:
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-icon/core-icon.html">
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-input/paper-input-decorator.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-toast/paper-toast.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<polymer-element name="my-register-box" attributes="name email url">
<template>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="jsencrypt.min.js"></script>
<paper-input-decorator label="Enter your name" floatingLabel error="Required">
<input is="core-input" id="form_name" required>
</paper-input-decorator>
...
<paper-toast id="formTermsToast" text="You must agree with temrs"></paper-toast>
<paper-toast id="formValidToast" text="Form is not valid"></paper-toast>
....
<paper-fab id="fab" icon="check" title="Register"
on-click="{{register}}"></paper-fab>
</template>
<script type="text/javascript">
Polymer({
name: '?',
email: '?',
url: '?',
autoValidate: false,
valid: false,
observe: {
'$.form_name.validity.valid': 'validate',
'$.form_email.validity.valid': 'validate',
'$.form_sa_uname.validity.valid': 'validate',
'$.form_sa_pass.validity.valid': 'validate',
'$.formTerms.checked': 'validate'
},
validate: function() {
this.valid = true;
if((!this.readyState) || (!this.autoValidate))
return;
var $d = this.shadowRoot.querySelectorAll('paper-input-decorator');
var th = this;
Array.prototype.forEach.call($d, function(d) {
d.isInvalid = !d.querySelector('input').validity.valid;
if(d.isInvalid) {
th.$.formValidToast.show();
th.valid = false;
}
});
if(!this.$.formTerms.checked) {
this.$.formTermsToast.show();
this.valid = false;
}
},
registerEmail: function() {
...
},
register: function() {
this.autoValidate = true;
this.validate();
...
}
});
</script>
</polymer-element>
My vulcanization:
vulcanize --inline index.html
I get that error for example here (after calling {{register}})
....
renderOpened: function() {
this.notifyResize(); //Uncaught TypeError: undefined is not a function
....
but it's not even my code :-/
I ran into this exact same problem with the --csp option in the latest build of Polymer and Vulcanize.
It's related to the new resizer mixin that was recently introduced, and how that gets vulcanized. For some reason the mixin is rendered at the bottom of the page and that causes problems.
It's the function block that starts as follows:
(function (scope) {
/**
`Polymer.CoreResizable` and `Polymer.CoreResizer` are a set of mixins that can be used
in Polymer elements to coordinate the flow of resize events between "resizers" (elements
that control the size or hidden state of their children) and "resizables" (elements that
need to be notified when they are resized or un-hidden by their parents in order to take
action on their new measurements).
Elements that perform measurement should add the `Core.Resizable` mixin to their
Polymer prototype definition and listen for the `core-resize` event on themselves.
This event will be fired when they become showing after having been hidden,
when they are resized explicitly by a `CoreResizer`, or when the window has been resized.
Note, the `core-resize` event is non-bubbling.
`CoreResizable`'s must manually call the `resizableAttachedHandler` from the element's
`attached` callback and `resizableDetachedHandler` from the element's `detached`
callback.
#element CoreResizable
#status beta
#homepage github.io
*/
scope.CoreResizable = {
... [rest of code block here] ...
}
Move this piece of code to the top of your script block (it's referenced by the paper-toast), and it should work. I'm assuming that this will probably be corrected in an upcoming release of Vulcanize.
I'm building a small application in Play and have an 'outer' template which holds all my CSS and JS imports (jQuery and my main.js file). CSS at the top, JS at the bottom with a body tag in between... pretty basic stuff:
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="#routes.Assets.at("stylesheets/foundation.css")">
<link rel="stylesheet" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
</head>
<body>
#content
</body>
<script src='#routes.Assets.at("javascripts/jquery-1.9.0.min.js")' type="text/javascript"></script>
<script src='#routes.Assets.at("javascripts/index.js")' type="text/javascript"> </script>
</html>
Which is fine.
However, I have page specific javascript functions that should run based on what the page is. So if I go to localhost:9000/test, I want a particular set of functions to run.
If I go to localhost:9000/chips, I want another set of functions to run.
I can't see a neat way of doing this, really, except checking the current page url in the script and executing functions based on that... but the routes file is already doing stuff based on the current page url - seems strange to have to do something so similar twice.
One solution is to put all my scripts at the top and then execute inline scripts in the HTML... but I hate doing things like that.
You have very nice and clear sample available in the... documentation.
Scroll to the bottom and check section: moreScripts and moreStyles equivalents, you have there ready to use samples.
I use a ViewModel approach to solve this issue.
The default ViewModel:
class DefaultPage(
implicit val request: RequestHeader,
implicit val lang: Lang) {
var title: String = null
val styles = mutable.LinkedHashMap.empty[String, Int]
val scripts = mutable.LinkedHashMap.empty[String, Int]
def title(title: String) {
this.title = title
}
def style(style: String)(implicit priority: Int = 500) {
styles.put(style, priority)
}
def script(script: String)(implicit priority: Int = 500) {
scripts.put(script.toString, priority)
}
def translate(message: String, objects: Any*) = Messages(message, objects: _*)
}
Then I have two template tags:
styles.scala.html
#(styles: scala.collection.mutable.Map[String, Int])
#for(style <- styles.toList.sortBy(_._2)) {
<link rel="stylesheet" href="#routes.Assets.at(style._1)" />
}
scripts.scala.html
#(scripts: scala.collection.mutable.Map[String, Int])
#for(script <- scripts.toList.sortBy(_._2)) {
<script async="true" src="#routes.Assets.at(script._1)"></script>
}
My main template:
main.scala.html
#(page: util.view.models.DefaultPage)(content: Html)
#import tags.scripts
#import tags.styles
#page.style("css/vendor/normalize.min.css")(1)
#page.style("css/vendor/formalize.min.css")(1)
#page.style("css/sprites.min.css")(1)
#page.style("css/main.min.css")(1)
#page.style("css/quirks.min.css")(1000)
#page.script("js/vendor/jquery-1.9.1.min.js")(1)
#page.script("js/vendor/jquery.formalize.min.js")(1)
#page.script("js/plugins.min.js")(1)
#page.script("js/main.min.js")(1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#page.title</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
#styles(page.styles)
<script src="#routes.Assets.at("js/vendor/modernizr-2.6.2.min.js")"></script>
</head>
<body class="#page.lang.code #page.lang.language #page.lang.country">
#content
#scripts(page.scripts)
</body>
And a sub template:
#(page: util.view.models.ContactUsPage)
#page.title(page.translate("contact.us.title"))
#page.style("css/contact-us.min.css")
#page.script("js/vendor/jquery.expandable-1.1.4.js")
#page.script("js/contact-us.min.js")
#main(page) {
}
You can pass your javascript which is specific to a page as template parameter link