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.
Related
I have a plain js + jQuery app with a button protected by google recaptcha, everything works as expected, but I'm failing to update the sitekey on the fly. The reason I want this is that I have a couple of environments (staging, test, production etc.) and I'd like to have a separate sitekey for specific envs (in order to separate the test stats from data from real users).
I'm able to change the attribute on my recaptcha element, but it looks like the attributes are taken by the script on initialising the whole thing, how can I refresh/reset the widget to accept the new sitekey?
I've been experimenting with reset and render methods, but to no effect so far.
<div
id="google-recaptcha"
class="g-recaptcha"
data-sitekey="this-will-be-replaced-anyways"
data-callback="onSubmit"
data-size="invisible"
></div>
if (grecaptcha) {
$('#google-recaptcha').attr({
'data-sitekey': 'my-real-sitekey'
});
}
I think you are looking for Explicitly render the reCAPTCHA widget
1.Specify your onload callback function. This function will be called by JavaScript resource(see the next step)
<script>
function onloadCallback() {
grecaptcha.render('myCaptcha1', {
'sitekey': 'sitekey value', // required
'theme': 'light', // optional
'callback': 'onloadCallback' // optional
});
}
</script>
2.Insert the JavaScript resource, setting the onload parameter to the name of your onload callback function and the render parameter to explicit.
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
3.Define the target HTML control that is supposed to be a captcha on your page.
<div id="myCaptcha1"></div>
I hope it helps you as helped me, good luck
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 am using Lean Modal: http://leanmodal.finelysliced.com.au/ in a Rails app with a React front-end.
When I put the link to the modal in application.html.erb it works fine but when loaded through a React link using the same code, nothing happens.
I have jQuery loaded and checked 10 times if the code is the same. What could cause such an issue?
Here is the link code in React:
<a rel="leanModal" name="login" href="#login">
The template file (html.erb) script:
<script type="text/javascript">
$(function() {
$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });
});
And I am loading the modal JS from my application.js file in Rails.
Thanks for any help!
You should wrap things that interact with DOM (e.g. jQuery plugins) in a component.
var LeanModal = React.createClass({
componentDidMount: function(){
$(this.getDOMNode()).leanModal({
top: this.props.top || 200
});
},
render: function(){
return <div>{this.props.children}</div>;
}
});
Note that you also need to provide a componentWillUnmount to handle clean up, and that the plugin can't do things like add/remove elements. Plugins that don't allow cleanup or make destructive changes are incompatible with react.
Sometimes implementing it with just the existing CSS and using react components instead of the jQuery plugin can be very simple and end up with a better result.
I jsut started learning angular.js. Can you guys show me the right way to make a page that initially presents an ajax loader element saying 'Loading data' or something like that. Then after data's been fetched it would update the view and hide the element. I can put stuff in page load event using jquery, but how do you do that using pure angular? So far I figured out how to put that in click event:
<div ng-app="VideoStatus" ng-controller="VideoStatusCtrl">
<button ng-click="getVideos()">get videos</button>
</div>
<script type="text/javascript">
angular.module('VideoStatus', ['ngResource']).run(function(){
// I guess somehow I can start fetching data from the server here,
// but I don't know how to call Controller methods passing the right scope
});
function VideoStatusCtrl($scope, $resource) {
$scope.videoStatus = $resource('/Videos/GetStatuses', { callback: 'JSON_CALLBACK' });
$scope.getVideos = function () {
$scope.videoResult = $scope.videoStatus.get();
console.log('videos fetched');
};
};
</script>
Kudos to Adam Webber & Peter Bacon Darwin
Here is the working plunker
Here is my version plunker that make loading as a directive with modal popup feature
Here is the tutorial to use my version
you only need loading.js and modal.js and reference jQuery and twitterbootstrap css.
in your code,
Only 2 steps you need to do with your code.
Add the following code to HTML
< div data-loading> < /div>
Add LoadingModule module to your application module.
angular.module('YourApp', ['LoadingModule'])
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