I m using Grails 1.3.2 along with jquery-1.4.2.1. For tab & dialog component i install the plugin jquery-ui 1.8.2. I follow the instraction given at http://www.grails.org/plugin/jquery-ui. But i m unable to show the jquery tab in my project.
Maybe this two pages can help you:
http://www.pubbs.net/201006/grails/37636-grails-user-grails-ui-plugin-info-to-get-it-working.html
That one explains it really well, is a little out dated but it should take just a little of understanding to figure it out.
I you wanna get more technical you can use this one, but with the link above should be more than fine.
http://www.pubbs.net/201006/grails/37609-grails-user-yeah-jqueryui-plugin-wont-work.html
You need to add following line for plugin.
plugins {
runtime ":jquery:1.8.3"
compile ":jquery-ui:1.8.24"
}
Add the following line on which gsp page you use Jquery UI.
< head>
< g:javascript library="jquery" />
< r:require modules="jquery-ui"/>
< r:script>
$(document).ready(function() {
your code...
});
< /r:script>
< /head>
Related
I am trying to recreate the basic dropright example for the Bootstrap 4 component: https://getbootstrap.com/docs/4.1/components/dropdowns/#dropright using Angular 6 and ngx-bootstrap (3.0.1 as of writing). I have found solutions to get the dropdown to open down (standard) or up (dropup) but dropright isn't working.
https://stackblitz.com/edit/ngx-bootstrap-dropdownplacement
From the docs, there seems to be a "placement" input - https://valor-software.com/ngx-bootstrap/#/dropdowns#dropdown-directive - but there are no examples of this and I've tried attaching it to any one of the elements dropdown, dropdownToggle or *dropdownMenu. Basically this is an important part of a sidebar menu, where the submenu dropright.
Can anyone point me in the right direction to get the dropright functionality working with ngx-bootstrap, please?
Sidenote: I have managed to get this working with ng-bootstrap but wouldn't want to switch packages if I don't really have to.
I got your point but I think this happen because of the bootstrap version.
https://getbootstrap.com/docs/4.1/components/dropdowns/#dropright
if you check this url you will see they are using bootstrap v.4.1 and you are using ngx-bootstrap, both have different CSS classes that's why you facing this issue.
If you want to fix this issue. Please do few step:
1) https://www.npmjs.com/package/bootstrap (npm install bootstrap)
2) Than include in angular-cli.json file, like -
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
3) Remove your BsDropdownModule from app.module.ts file
If I missed anything please let me know
Thanks !!
I found the solution to make the placement work. You should add container="body" and of course placement="top right". Although it doesn't work as expected
To show it on top use [dropup]="true"
I'm a vue.js beginner and I've been trying to integrate the Quill editor into Vue modules. At first, I tried with the vue-quill plugin but documentation is very poor and I couldn't understand how to use it. Very frustrating.
Now I don't know if I'm better off trying to create my own plugin or if I give the existing plugin a second try and maybe try to enhance it.
What I want is someone to please provide some sample working code to get this going.
Upon inspecting the vue-quill package.json file I noticed it depended on an old version of quill :
"dependencies": {
"quill": "^0.20.1",
...
}
Since I was getting fragment errors from that build I decided to take the original code to suit my needs. At this point, you can copy this modified component and use something like vue-cli to use it.
I can't give you precise steps on vue-cli because my project is based on Laravel, but the idea of storing different .vue files into a components folder should be similar.
Finally, I simply use the component in one of my views :
<quill :content.sync="content"></quill>
Note : I am still fiddling around the component that I uploaded on gist, so take it as a starting point. The code is fairly simple.
I have installed the latest Extension Library and am building an Xpages app with Bootstrap. Select 2 is not included in the current Ext Lib. It is included in Xpages4Bootstrap. While that is an excellent extension I am not sure if I really should include that just to get Select2 - unless there are other benefits. But how do I install Select 2 so it works with the Extension Library? I tried using the steps from this post but so far no luck. When I run the code I get
'JQuery' not found at [/select2.min.js.jss]
could had be an AMD loading problem. When I look at Github github.com/select2/select2/blob/master/dist/js/select2.js I see an AMD check at the beginning of the code. Just remove the AMD if then else and keep the latest else clause or change define.AMD by false
I've built a Rails 3 app and I'm trying to get it working with JQueryMobile. I've gone ahead and required query_mobile_rails and that works just fine, but I need to disable the AJAX loading as it seems to get in the way of many things. Looking at the jquerymobile docs, they recommend adding the following javascript after loading JQuery, but before loading JQueryMobile:
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
I've been reading through the docs on the Asset Pipeline, but I cannot figure out how I can manage to get my code (the above) inserted after JQuery and before JQueryMobile. Where do I place such a .js file so that it will be loaded at the proper time?
Any help would be greatly appreciated!
Nevermind. I got it. I created a file called app/assets/app_lib.js with the code above and then added a require app_lib between require jquery and require query.mobile in my application.js file.
I know how to use jquery alone but since I am pretty new to Rails 3.1 I have only little idea how to integrate jquery into Rails.
So far I have come up with following steps but the first (naive) way of programing things are usually wrong :-)
datepicker plugin for jquery (e.g. jquery-ui-timepicker-addon.js) into app/assets/javascripts
add line //= jquery-ui-timepicker-addon to application.js
When I want date picker in some VIEW I will create app/assets/javascripts/VIEW.js and in there I will use standard jQuery to hook up date picker
Is there a more elegant way?
You can try this:
Add the jquery-ui .js file to the app/javascripts folder. Which you can download [here][1]
[1]: http://jqueryui.com/download. Maybe your jquery-ui-timepicker-addon.js will do as well.
You don't need to add code to application.js. As all .js files in the javascripts folder
will be included and compiled automatically
Add the following line to
app/javascripts/{viewname}.js.coffee
$ -> $('.date').datepicker()
The line above is the coffeescript equivalent of:
$("#datepicker").datepicker();