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.
Related
I'm new with VueJS and I don't find a solution to my issue.
I use a jquery plugin, zoomslider that is load in main.js inside the mounted function.
My website is multi-page and i use the router plugin to switch around, but when I back on the page where i use zoomslider,
the plugin don't reload, i think the problem is because zoomslider is loaded when DOM is ready, how can reload the plugin?
Or better where is the best practice for loading globally an external plugin?
You can do $(yourElement).zoomSlider() to load the plugin on a new element!
You can select one element, or multiple ones, inside the $ function.
I use https://jquerymodal.com/ package for modal dialogues, it works out great when I am in need of editing small forms, which I embed in the same document.
But issue is; I also use jquery-ui-datepicker and Chosen package (https://harvesthq.github.io/chosen/) for my forms. It seems that javascript does not work inside modal.
As noted on jquerymodal.com, i have tried both using embedded in html and ajax loading as below. I couldn't get it working. Below route returns a view where I have a form partial. (I tried with extending layout a file, where I have proper links to my js files..., this didn't work either).
<a href="{{route('form_edit',['projectid' => $project->id])}}" rel="modal:open">
Load Edit Form
</a>
Is this possible or should i be trying out something different for this?
I am using one HTML file as the template for many pages and want to show different coloured buttons and links on some pages. I am trying to use CSS VARIABLES so that I can update them with javascript. But it all happens once the JS is loaded which causes a glitch.
Can anyone suggest a better solution or any alternative approach?
Project uses Jquery, Bootstrap and a Laravel backend.
I am using ionic to build hybrid app for mobile phones. I have a card type layout in div tag and want to change the functionality of a div to be clickable just like accordion in bootstrap. Where can I put the JS code? Do I need a separate file for the code or need to add it to existing file? (like app.js or controller.js or services.js)
I have tried to put it in app.js but not working.
you can use in html page also using script tag, or you can keep that code into related controller.js. best way is controller.
creating this Angular 2 project I am trying to add other dependencies to the global project that incorporate js files and css files.
The css files work fine... but the javascript files seem to not to apply correctly at all.
I am attempting to do this in the root index.html file.
In the dom everything appears to be correct and there are no warning, errors or conflicts which leads me to believe it is an injection issue.
Interestingly if I apply the html to the index.html everything works fine... but adding it to any component makes it useless.
There is something I am probably doing wrong.
You need to bootstrap your external libraries' code when the component bootstraps.
For example, if you are using the bootstrap collapse on some menu items in a component, you need to call $(class).collapse() in the ngOnInit of that component( or anywhere else in the lifecycle of the component ).