I am developing an Android application using Phonegap. I need to make the softkeyboard appear programatically. I am using the SoftKeyboard plugin which is found here. Can anyone tell me how to properly include this plugin & make it work? I have tried the tutorial found on the Phonegap Wiki, but the plugin is not working.
[Update] I have added the plugin to the path
com/zenexity/SoftKeyBoardPlugin/SoftKeyBoard.java
Updated plugins.xml and included
<plugin name="SoftKeyBoard" value="com.zenexity.SoftKeyBoardPlugin.SoftKeyBoard"/>
Then in the www folder added softkeyboard.js, and the following in index.html
plugins.SoftKeyBoard.show(function () {
// success
},function () {
// fail
});
But nothing happens, the keyboard is not displaying..
This is how I got SoftKeyBoard working in my application.
DroidGap Side
create /src/com/phonegap/plugins/SoftKeyboard with provided file SoftKeyBoard.java inside
add to /res/xml/plugins.xml:
< plugin name="SoftKeyBoard" value="com.phonegap.plugins.SoftKeyboard.SoftKeyBoard" />
/assets/www Side
add provided file softkeyboard.js to /assets/www/js
add to index.html in the head where your other javascripts are included after you have included the phonegap javascript:
< script type="text/javascript" charset="utf-8" src="js/softkeyboard.js"></script>
You can then call the following if you are on device or using something like Ripple:
window.plugins.SoftKeyBoard.show(function () {
// success
},function () {
// fail
});
or something like this if you want to make sure the namespace is available, which will prevent undefined problems:
((((window || {}).plugins || {}).SoftKeyBoard || {}).show || function(){})();
I think maybe where you went wrong was not including the js/softkeyboard.js in your head of index.html.
Hope this helps you
For the latest version of PhoneGap (Apache Cordova 2.1.0) I had to do the following:
Installed these plugin sources which reflected the project name change:
https://github.com/originalgremlin/phonegap-plugins/tree/master/Android/SoftKeyboard
Copy softkeyboard.js to your javascript library directory.
Copy SoftKeyBoard.java to src/org/apache/cordova/plugins/SoftKeyBoard.java
Put this in your HTML file, after including the cordova.js file:
<script src="/path/to/javascripts/softkeyboard.js"></script>
Add this to the bottom of the res/xml/config.xml plugins section:
<plugin name="SoftKeyBoard" value="org.apache.cordova.plugins.SoftKeyBoard" />
Now, assuming this HTML:
<button id="keyboard">Toggle Keyboard</button>
This jQuery should do something useful:
var softkeyboard = window.cordova.plugins.SoftKeyBoard;
$('#keyboard').toggle(softkeyboard.show, softkeyboard.hide);
Try it like this:
SoftKeyBoard.show(function () {
// success
},function () {
// fail
});
The code in the JS file does not put it in the "plugins" namespace.
Orjust use the PhoneGap plugins full namespace:
window.plugins.SoftKeyBoard.show(function () {
// success
},function () {
// fail
});
Cordova 3.0 + JQM 1.3.2: Changing "fullscreen" to "false" in config.xml fixed the "adjustPan" and prevented my inputs from being covered when the keyboard displayed. However, blur() would not close the keyboard and this plugin worked wonderfully.
For the almost latest version of phonegap:
Add SoftKeyBoard.java to your app package in src
Add softkeyboard.js to assets/www
Update config.xml with:
<feature name="SoftKeyBoard"><param name="android-package" value="com.yourAppPackage" /></feature>
Call your plugin: plugins.SoftKeyBoard.hide(function() {//success }, function() {//fail });
go through the link. here is the full project:--
SoftKeyboardPlugin by Simon McDonald
Related
I'm trying to use owl carousel in a wordpress ACF custom block.
owl carousel works if I don't put jQuery(document).ready in my script.
But if I have jQuery(document).ready, the console tells me "jQuery (...). OwlCarousel is not a function".
Then i don't know if there is link beetwen both but i have thumbnail gallery to click for launch slider on specific image and that code :
jQuery('.single_image_gallery').click(function(){
mySlide = parseInt(jQuery(this).attr('data-slide'));
jQuery(mySlider).trigger("to.owl.carousel", [mySlide, 1,true])
})
not working at all.
i know there is problem with jQuery migrate for wp 5.5 but I tried with the plugin "Enable jQuery Migrate Helper" and the result is the same....
Try doing this.. Sometimes plugins can interfere with jQuery
jQuery(function($) {
// then use it like this
$('.single_image_gallery').click(function(){
mySlide = parseInt($(this).attr('data-slide'));
$(mySlider).trigger("to.owl.carousel", [mySlide, 1,true])
});
});
This way you import $ locally and it should prevent it from interfering with other global scripts or plugins
I'm trying to load a cordova plugin using vue.js, and vue-cordova.
I'm using vue-cordova, with the plugin open-native-settings to access to the settings of the device (ios or android).
This works just fine with the demo app provided by the vue-cordova plugin on github, but when i add it to my apps (the same way) the event seems to never trigger.
So i tried to wait for the event using
Vue.cordova.on('deviceready', () => {
// here check for your variable
})
or with
document.addEventListener('deviceready', deviceReady, false);
but since the event never trigger they are doing nothing.
I'm kinda lost on the way to get this event to be triggered, so i can load my plugin properly.
I'm a beginner using this so i might be missing something.
UPDATE
I'm loading vue-cordova in my main.js this way:
import VueCordova from 'vue-cordova'
Vue.use(VueCordova, {
optionTestKey: 'optionTestValue'
})
after that, i try to load the plugins in another view this way:
import Vue from 'vue'
//some code here
mounted: function() {
this.cloudyConnection();
this.lastUpdateDate = this.getLastUpdateDate();
if (this.cordova.deviceready === true) {
this.onDeviceReady()
}
},
I also tried to do it out of the mounted function and with the function listed above.
I also added the <script src="cordova.js"></script> in www/index.html as indicated by a--m but this doesn't do anything
I thank you all for the time you take to help me !
Reading from http://kartsims.github.io/vue-cordova/ troubleshooting section:
“My events don’t seem to be fired”
Cordova documentation isn’t obvious about it but you need to include the following script tag in your www/index.html.
<script src="cordova.js"></script>
Ensure that cordova.js is loaded before your scripts and vue-cordova since the last depends on that.
I made an extension in Typo3 6.2 with extension builder, extbase and fluid.
I want to add a timepicker in the frontend.
I found a .js file online and want to include it whenever the extension is active because I need it often.
I placed that file here: EXT:/Resources/Public/JS/timepicker.js.
I saw a solution in this article but adding
page.includeJS.tx_myExtension = EXT:/Resources/Public/JS/timepicker.js
at the bottom of my setup.txt isn't working.
I didn't define a page there anyway so I think this might be the reason but I really have no idea - this is my setup.txt (autogenerated) in /typo3conf/ext//Configuration/TypoScript/:
plugin.tx_myext_test {
view {
templateRootPath = {$plugin.tx_myext_test.view.templateRootPath}
partialRootPath = {$plugin.tx_myext_test.view.partialRootPath}
layoutRootPath = {$plugin.tx_myext_test.view.layoutRootPath}
}
persistence {
storagePid = {$plugin.tx_myext_test.persistence.storagePid}
}
}
Ultimately I want my frontend function to work which already works with datepicker because I included jQuery in my root template. But I don't want to include the timepicker in there, just for my extension.
<script>
$(function () {
$('.lc-datepicker').datepicker();
$('.lc-timepicker').timepicker();
});
</script>
You can either use the correct syntax for EXT: like this:
page.includeJS.myextension = EXT:extkey/Resources/Public/JS/timepicker.js
(You forgot extkey.)
Keep in mind that it may improve performance of your website to use includeJSFooter instead of includeJS.
page.includeJS is a TypoScript property that is globally available. So if you use this in the root TS template of your site, the JavaScript file will be embedded to every page, regardless of whether the plugin is in use or not. So I suggest to use the Fluid approach below if you want to have the JS only on pages that have the plugin embedded.
To achieve this, use the Resource ViewHelper in your template:
<script src="{f:uri.resource(path: 'JS/timepicker.js')}"></script>
<script>
$(function () {
$('.lc-datepicker').datepicker();
$('.lc-timepicker').timepicker();
});
</script>
The Resource ViewHelper uses a path relative to the Resources/Public directory of your extension.
You could define to include JS in your controller class, to ensure it only loads for your extension.
In TypoScript, to have JS file configurable:
plugin.tx_myext.settings.javascript.file = EXT:myext/Resources/Public/JS/timepicker.js
In Controller action:
$this->response->addAdditionalHeaderData('<script src="' .
$GLOBALS['TSFE']->tmpl->getFileName($this->settings['javascript']['file']) .
'" type="text/javascript"></script>');
I'm trying to make jQuery UI work, but it doesn't. Here's what happens.
I'm loading dependencies:
<script src="assets/src/js/angular/angular.js"></script>
<script src="assets/src/js/angular-animate/angular-animate.js"></script>
<script src="assets/src/js/angular-route/angular-route.js"></script>
<script src="assets/src/js/jquery/dist/jquery.js"></script>
<script src="assets/src/js/jquery-ui/jquery-ui.js"></script>
<script src="assets/src/js/app.js"></script>
<script src="assets/src/js/main.js"></script>
That's my main.js file:
$(function () {
$("input[type=submit]")
.button()
.click(function (event) {
event.preventDefault();
});
});
$(function () {
$("#circum").buttonset();
});
$(function () {
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
});
When I run the code in Brackets jQuery UI is loaded but doesn't work, however, when I comment my main.js file out and then bring it back that's the error I get in the console and UI is suddenly working. It's extremely weird.
jQuery.Deferred exception: elem.getClientRects is not a function TypeError: elem.getClientRects is not a function
at jQuery.offset (http://127.0.0.1:27530/assets/src/js/jquery/dist/jquery.js:9779:14)
at Object.getWithinInfo (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1157:26)
at jQuery.$.fn.position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1179:23)
at _position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8709:17)
at ._position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8334:8)
at .open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8210:9)
at ._init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _createWidget (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:587:8) undefined
I've found this thread discussing the issue, but still wasn't able to fix it.
Github
Cheers.
What version is your jQuery UI? I had the same issue with jQuery UI 1.11.4 and jQuery 3.0.
After installing jQuery UI 1.12.0-rc.2, the problem was fixed.
Adding the jQuery 3 Migrate Plugin resolves this issue as noted here, updated UI will be coming out soon.
NOVEMBER 5, 2018 UPDATE
If using latest jQuery and jQuery UI , use latest jQuery migrate to prevent compatibility warnings/issues.
Turns out this is a compatibility between jQuery 3.x.x and jQueryUI prior to 1.12.0.
including below script resolved the issue for me.
https://code.jquery.com/jquery-migrate-3.0.0.min.js
After doing all of the updates and STILL having the problem, I just fixed it in the code:
Look for this:
if ( !elem.getClientRects().length ) {
return { top: 0, left: 0 };
}
Enter this just before it:
if (!elem.getClientRects()) {
return { top: 0, left: 0 };
}
I updated our legacy site, from jquery 1.12 to jquery 3.5 and hit this same problem.
The site is using jquery-ui 1.10 but sadly updating to jquery-ui 1.12 broke other things so I couldnt use that option.
Running the production site with the migration plugin felt wrong so instead I looked how this problem was fixed in jquery-ui 1.12.
Patching jquery-ui 1.10 with the fix from jquery-ui github "Position: Guard against passing window to Offset" worked for me.
This is an old post, but if someone like me need to update legacy sites, maybe this information can be useful.
I had same issue with jquery-3.0.0. I have just included jquery-migrate.3.0.0 reference after jquery reference. Issue is resolved and its working fine now.
> npm remove jqueryui
> npm i -S jquery-ui-dist
This will download a version of JQuery UI which can be included directly with <script> tags.
I had the same problem when I was trying to get X and Y position of the mouse using " .pageX/.pageY " on a click event.
Try to change the source of the libraries in order to get the latest update of them, making sure that they are compatible.
Those links are now working and they could fix the issues.
I'm building an application of Html5 + PhoneGap for Android.
I want that when a function call the Android keyboard be hidden.
I tried to do it in the following way:
function HideKeyboard() {
alert('HideKeyboard');
plugins.SoftKeyBoard.hide(function () {
alert('s');
}, function () {
alert('f');
});
}
It did not work! There is another way?
the alert 'HideKeyboard' appears, but other messages do not appear
Here my plugin:
<plugin name="SoftKeyBoard" value="com.phonegap.plugins.SoftKeyboard.SoftKeyBoard" />
Thank you ..
Did you:
Create /src/org/apache/cordova/plugins with SoftKeyBoard.java in it
Add the plugin definition to /res/xml/plugins.xml:
<plugin name="SoftKeyBoard"
value="org.apache.cordova.plugins.SoftKeyBoard" />
Add softkeyboard.js to /assets/www/js
Add to the head in index.html a reference to softkeyboard.js:
<script type="text/javascript"
charset="utf-8"
src="js/softkeyboard.js"></script>
Finally call the following on the device:
window.cordova.plugins.SoftKeyBoard.hide(function () {
// WooHoo!
},function () {
// BooHoo!
});
So far I can only see that you've done step 2 & 5.
Updated it was a namespace issue it seems, and I've also updated to reflect that. Glad it worked.