How to use Foundation CSS Calendar Inside ng-include Angular JS - javascript

I need to use Foundation CSS calendar in my AngularJS Application. I included the foundation-datepicker.min.js and foundation-datepicker.min.css in my project and referenced the same from my index.html.
In my .html page, I used the date picker like <input type="text" class="span2 dp1" /> and initialised the element in the controller like
$('.dp1').fdatepicker({
initialDate: '02-12-1989',
format: 'mm-dd-yyyy',
disableDblClickSelection: true
});
This initialises the element and works find with default date set.
But when I use the same input element in a view which is included using ng-include, it is not getting initialised. It shows an empty input field with no default value set.
How to initialise an element in ng-include view from a controller and make it work?
My Application have JQuery libraries included. Is that stopping anywhere. Also I don't want to include Bootstrap in my Application since it is already overloaded.
Thanks in advance.

I came up with a working solution to overcome this problem, at the bottom of every page included by ng-include I put the following:
<script>
$(document).foundation();
</script>
It launches foundation internals to load necessary JS code with CSS.

Related

Using JavaScript Plugins with Angular 4

I'm trying to use the Bootstrap 3 Datepicker plugin (http://eonasdan.github.io/bootstrap-datetimepicker/) with Angular 4.0.
I've included the necessary JS and CSS (and a custom JS script calling the plugin) in my angular-cli.json file and the script loads great on the first page that I open but stops working as soon as I route to another component.
I figure that I need a way to call $('.datetime-picker').datetimepicker() every time I route to the new component. How would I do that?
this is a different solution try using primeNg google it.

Tag Editor- $(...).jsonTagEditor is not a function

I just tried to implement the json tag editor to create a tag editor.
I want to implement it in a bigger laravel project. Therefore I included jQuery, as well as the js and css file from the json tag editor. It's all loading fine, which I figured out under the network tab.
Now I have:
an input element:
<input id="keywords" class="form-control" name="keywords"
autofocus></div>
and on top of the page I have:
$().ready(function(){
$('#keywords').jsonTagEditor();
});
But i get an error saying
Uncaught TypeError: $(...).jsonTagEditor is not a function...
As I said, the files are loaded as I can see in the network tab...
Any ideas what the problem could be?
Again to make everything clear, I'm using laravel, so the files are all included in the master-layout file and I'm trying to use it in a document that extends this master template. But shouldn't change anything as I'm already using some other plugins that work fine that way.
Any ideas?
After some discussion in chat, the problem turns out to be the suspected re-import and re-initialization of jQuery. The Laravel framework has it's own import of jQuery that happens via require(), and that was the happening after the plugin in question was imported.
Moving the plugin import to the end of the <body> worked around that, but in addition the plugin (as of this writing) has a bug and must be initialized with an empty object passed in (or probably any other value):
$("#keywords").jsonTagEditor({});
You are missing document and just to be certain that the element is accessible, place your script before the ending '</body>' tag so that it loads your page content first.
$(document).ready(function(){
$('#keywords').jsonTagEditor();
});
You forgot to write document
Instead of this
$().ready(function(){});
Use this
$(document).ready( () => {});
The => means, that you use newest standarts of JS
Or you can just use this alternative jQuery tagEditor

Just adding js script to typo3

I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:

'angular-backtop' back to top button not working

Hi I am trying to implement a back to top button as easily as possibly in my angular app.
I found the angular-backtop directive and it seems perfect but I can't get it to work.
I have angular-backtop.js and angular-backtop.css included in my index file and 'angular-backtop' included as a dependency in my main module.
In the angular-backtop.js the use of scope is present (without $) and I know there is a bug where scope doesn't work with the new angular router which I am using. Is this why the angular backtop isn't working?
It seems like this isn't correlated but I'm not sure why else this wouldn't work.
All you have to do is inject that directive anywhere you want into your html file as
<back-top></back-top>

Why are my angular-bootstrap tabs not rendering?

Here is the site where you can view my angular app and also view source on it: http://clearsoftinc.com/dist/
There should be three blue tabs on the screen. I'm using the tabs directive from the ui-bootstrap directive for tabs (http://angular-ui.github.io/bootstrap/). I used to have it working and now for some reason its broken. I have tried for two days to fix it, with no luck.
I have also posted a zip of the source code here: http://www.clearsoftinc.com/Archive.zip
In controller.js, change
angular.module('clearsoftDemoApp', [])
to
angular.module('clearsoftDemoApp')
If 2nd parameter of module() is presented, it defines a new application instead of getting the existing one defined in app.js.

Categories