Hi All Thank you in advance.
I am faced with a task of converting an HTML and jQuery intensive website and make it work with AngularJs. The issue is that it has a lot of plug-ins like
http://adnantopal.github.io/slimmenu
https://github.com/inuyaksa/jquery.nicescroll
http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/
https://dev7studios.com/dropit/
http://fitvidsjs.com/
They are loaded as follows on the HTML page
```
<script src="js/slimmenu.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/gridrotator.js"></script>
<script src="js/js/ionrangeslider.js"></script>
other scripts
```
Then there is a main.js file that is used to init the lib's in a section that is needed
E.G
````
// main.js
$(document).ready(function(){
$('html').niceScroll({
cursorcolor: "#000",
cursorborder: "0px solid #fff",
railpadding: {
top: 0,
right: 0,
left: 0,
bottom: 0
},
....etc
});
owlCarouselSlider.owlCarousel({/*--code--*/});
});
$('div.bg-parallax').each(function(){/*//code*/});
$('input.time-pick').timepicker({
minuteStep: 15,
showInpunts: false
})
$('.form-group-cc-number input').payment('formatCardNumber');
$(function() {
$('#ri-grid').gridrotator({})
});
````
The Issue
These plug-ins only work if your page is static and they do not work when I use them with AngularJs. I get errors like gridrotator is undefined
Question
How can I make the jQuery-plugin and other libraries be a module that I can use with Angular
Here is an example plnkr that I try to make.
But now do I put the original lib code on the Factory or Service providers in Angular?
Related
This is my file graph.json
{
"nodes":[
{"data":{"id": "Node 1"}},
{"data":{"id": "Node 2"}}
],
"edges":[
{"data":{"source":"Node 1", "target":"Node 2"}}
]
}
which I am trying to visualize with cytoscape.js in the CoSE layout using the code below. Unfortunately I only get an empty graph without any nodes. It does work however if I use the 'concentric' or 'grid' layout, or if I write the graph data directly into the cytoscape.js initialization part. Why does it not work the way I did it: with the 'CoSE' layout and a graph loaded from a JSON file?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.js"></script>
<script>
$(function () {
$('#cy').cytoscape({
layout: {name: 'cose'},
style: cytoscape.stylesheet()
.selector('node')
.css({'content': 'data(id)'}),
ready: function () {window.cy = this;}
});
$.getJSON('graph.json', function(data) {cy.load(data)});
});
</script>
</head>
<body>
<div id="cy" style="height: 100%; width: 100%; position: absolute; left: 0; top: 0;">
</div>
</body>
</html>
(1) Cytoscape is doing exactly what you're telling it to do. You initialise with no elements, running CoSE on them. You load additional elements asynchronously, which will certainly happen after init.
(2) This blog seems to have a decent description of sync/async. You may want read a book on JS if you're new to the language or if you're new to programming in general.
(3) If you want to keep things simple, pass a fetch promise as options.elements. Read the init section for more info: http://js.cytoscape.org/#core/initialisation
Trying to get gist-embed (https://github.com/blairvanderhoof/gist-embed) working within my Angular app but with no luck.
It works no problem on my homepage (which is not part of the Angular app) but when I use something like:
<code data-gist-id="<gist-id>"></code>
within the app it won't show. There are no messages in the console to explain why though.
Could someone explain why and offer a solution?
(function($) {
$(function() {
// find all elements containing "data-gist-id" attribute.
$('[data-gist-id]').each(function() {
var $elem = $(this),
id,
that lib is coded in such a way one cant really use it in angular,you'll have to look for a fork that offers a proper jquery plugin architecture you can use into a directive.That lib doesnt respect basic jQuery plugin architecture.
And no Error will show up because it's likely the .each will execute before your angular app runs.
As of June (version 1.8), the gist-embed project is now a jQuery plugin.
var $code = $('<code data-gist-id="474f6d7839fccffc4b2a"/>');
$code.appendTo('body').gist();
Basically you have to trigger "gist()" on the dom elements.
Try this, it worked for me very well.
// register trigger gist on every template include
$rootScope.$on('$includeContentLoaded', function() {
// initialize gist on new elements
angular.element(document).ready(function() {
if (typeof(angular.element(document).gist) === 'function') {
angular.element('[data-gist-id]').gist();
}
});
});
I put together a small library hoping to solve the problem.
Check it out : https://github.com/pasupulaphani/angular-gist-embed
Chekout this angular module : https://github.com/kiran3807/another-angular-gist-embed
This allows you to include the gists in your angular project in the form of a directive, one of the attributes for which is the gist-id :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="path/to/another-angular-gist-embed.js"></script>
<script>
angular.module('example',['another-angular-gist-embed']);
angular.module.controller('exampleCtrl',['$scope',function($scope){
$scope.gistId = 'a85770344febb8e30935';
}]);
</script>
</head>
</head>
<body ng-app="example">
<div ng-controller="exampleCtrl">
<!-- This loads a gist with a specific id-->
<gist-embed data-gist-id="gistId"></gist-embed>
</div>
</body>
</html>
Declaration : I am the author of this module
I haven't used jQuery before, and I wanted to use DateTimePicker plugin on my web page.
I downloaded the plugin file and placed them in the same directory as the HTML files.
I directly applied the code at How to use it? in http://xdsoft.net/jqplugins/datetimepicker/.
It threw the following error.
Uncaught TypeError: undefined is not a function pixelcrawler:61 (anonymous function)
My code follows.
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="file:///jquery.datetimepicker.css"/ >
<script src="file:///jquery.datetimepicker.js"></script>
<script>
jQuery('#datetimepicker').datetimepicker();
</script>
<div class="container">
<div class="text-center">
<div class="page-header">
<h1>${conf['title']} <small>${conf['description']}</small></h1>
</div>
</div>
<div class="text">
<input id="datetimepicker" type="text" >
.
.
.
.
.
I could not figure out what the problem was. I have tried many other seemingly likely options, but it just did not work either.
(The ${} tags are used for the Mako template language. I am using Cherrypy.)
UPDATE:
I figured out the source of the problem.
It's from jQuery('#datetimepicker').datetimepicker();.
When tested, the datetimepicker() function was undefined. Maybe the way I imported the library was wrong?
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
I don't know your file-structure. I never include local files like this as I use relative URLs from the start rather than having to change everytime I'm ready to use the code, but it's likely one of the files isn't being loaded in. I've included the standard datepicker below using Google CDN's jQuery UI. Does your console log any resources not found?
I think your jQuery is loaded OK, because it's not telling you jQuery is not defined so it's one of your files.
BTW, PHP gets the home URL:
$home="http://" . $_SERVER['HTTP_HOST'].'/';
Demo code datepicker, jQuery UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">
This is about the HTML parse mechanism.
The HTML parser will parse the HTML content from top to bottom. In your script logic,
jQuery('#datetimepicker')
will return an empty instance because the element has not loaded yet.
You can use
$(function(){ your code here });
or
$(document).ready(function(){ your code here });
to parse HTML element firstly, and then do your own script logics.
use jQuery.noConflict()
var j = jQuery.noConflict();
j(document).ready(function(){
j('#datetimepicker').datepicker();
})
For my situation, it was a naming conflict problem. Adding $J solves it.
//Old code:
function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
}
And the following is new code.
$j(function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$j("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
});
});
Hope it could help someone.
Usually when you get this problem, it happens because a script is trying to reference an element that doesn't exist yet while the page is loading.
As richie mentioned: "The HTML parser will parse the HTML content from top to bottom..."
So you can add your JavaScript references to the bottom of the HTML file. This will not only improve performance; it will also ensure that all elements referenced in your script files have already been loaded by the HTML parser.
So you could have something like this:
<html>
<head>
<!-- Style sheet references and CSS definitions -->
</head>
<body>
<!-- HTML markup and other page content -->
<!-- JavaScript references. You could include jQuery here as well and do all your scripting here. -->
</body>
</html>
You may see if you are not loading jQuery twice somehow. Especially after your plugin JavaScript file loaded.
I has the same error and found that one of my external PHP files was loading jQuery again.
The issue because of not loading jquery ui library.
https://code.jquery.com/ui/1.11.4/jquery-ui.js - CDN source file
Call above path in your file.
And if you have this problem in slider or slideshow you must use jquery.easing.1.3:
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
I had trouble getting selectable to work with ASP.NET. It turns out I wasn't properly including everything, but this gentleman made it foolproof: Three steps to use jQuery UI in ASP.NET MVC 5.
I don't think jQuery itself includes datetimepicker. You must use jQuery UI instead (src="jquery.ui").
I am developing a Web-Application using ASP.NET MVC 4 and I am trying to use CKEditor for some content editing.
In debug everything works fine as long as no bundeling or minification is happening, but as soon as this does CKEditor generates wrong URLs even if I have set baseHref:
CKEDITOR.replace('ckeditor',
{
autoUpdateElement: true,
baseHref: '#Url.Content("~/Scripts/ckeditor/")',
filebrowserImageUploadUrl: '/Uploads/Upload'
});
In debug the following is included:
<script src="/Scripts/ckeditor/ckeditor.js"></script>
And after bundeling/minifaction it is just:
<script src="/bundles/ckeditor?v=dLE-_JqB4vxXJ9idGep_8yUL8KfOwGhfYoEZAeIudoE1"></script>
and it trys to load the following JS files:
http://DOMAIN.net/CONTROLLER/ACTION/config.js?t=D26D
Which is wrong as it should be:
http://DOMAIN.net/Scripts/ckeditor/config.js?t=D26D
Does anyone know what I am doing wrong or how to fix this?
Alternatively I would also be fine with a possibility to disable bundeling/minification for that one bundle to avoid that problem.
Try to add the following content before include the ckeditor's js file:
<script type="text/javascript">
var CKEDITOR_BASEPATH = '#Url.Content("~/Scripts/ckeditor/")';
</script>
More information: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Specifying_the_Editor_Path
And it will also work with ckeditor 4.x.
I had similar problem but found this to work. Include it in the cshtml layout file.
<script>
CKEDITOR.basePath = "#Url.Content("~/lib/ckeditor/")";
</script>
or with JQuery
$(document).ready(function() {
CKEDITOR.basePath = "#Url.Content("~/lib/ckeditor/")";
});
I found that a similar approach to #bluee worked for me:
I put the following in my cshtml layout file:
<script type="text/javascript">CKEDITOR_BASEPATH = "#Url.Content("~/Scripts/ckeditor/")";</script>
#Scripts.Render("~/Scripts/ckeditor/ckeditor.js")
The subtle difference being using CKEDITOR_BASEPATH rather than CKEDITOR.basePath. This resolves the 'CKEDITOR is not defined' issue.
I met the same problem. In fact, the bundle system trouble the ckeditor loading. So you can avoid it doing the following :
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/Script/CKEditor/ckeditor.js")
#Scripts.Render("~/Script/CKEditor/adapters/jquery.js")
I am Implementing ace into my site for the first time and I have some noob questions. I have only been programming for about a year so bear with me.
I have downloaded the code from https://github.com/ajaxorg/ace. I am assuming (could be wrong) the code I need lies in /lib/ace/ so I copied the ace folder to my /lib/js/ in my dev environment. I imported the ace.js per the instructions on the github wiki.
<script type="text/javascript" src="lib/js/ace/ace.js" charset="utf-8"></script>
I have my HTML code also:
<script>
window.onload = function() {
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
var JavaScriptMode = require("ace/mode/javascript").Mode;
editor.getSession().setMode(new JavaScriptMode())
};
</script>
<div id="editor"></div>
CSS:
#editor {
width: 800px;
height: 690px;
}
Firebug tells me ace is not defined where I am declaring my variable "editor" and also gives me this output:
missing variable name
const function (require, exports, module) {
that is from the ace.js. So I am missing something with getting this basic Implementation working.
You downloaded the source which requires require.js.
You should download one of the builds from https://github.com/ajaxorg/ace-builds
to get started without additional requirements.
You must position your editor-div, either use "position:relative;" or "position:absolute;" in your css too.
Have you tried removing the window.load action?
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
</script>
<div id="editor"></div>
It's described on their official website completely clear.
Just clone ace-builds github repository
and then create html file as described on ace official website.
HTML file should load this js script /ace-builds/src-noconflict/ace.js