I have a textbox in my site that can't seem to get focus. I tried adding focus on click with jQuery but that seems to have no effect. Can anyone help me out?
App link: http://test-app-andrew.herokuapp.com/
Jade:
div(id="templates",class="sideBarContent")
div(id="addPageBox")
input(type="text",id="addPage")
HTML(output from above):
<div id="templates" class="sideBarContent">
<div id="addPageBox">
<input type="text" id="addPage">
</div>
</div>
Coffeescript:
$ ->
$('input#addPage').click ->
$('input#addPage').focus()
Javascript (output from above):
// Generated by CoffeeScript 1.8.0
(function() {
$(function() {
return $('input#addPage').click(function() {
return $('input#addPage').focus();
});
});
}).call(this);
Any help would be great, thanks!
Related
I am learning Meteor and I created a test app and added accounts-ui and accounts-password packages, then I inserted {{>loginButtons}} into main.html. However all I got on the page was an empty . I didn't see any errors in the console either. Is the widget broken, or am I missing something? In all tutorials I saw it was just working with no other action required, so I'm confused. I am using Blaze. Also, is Meteor a good choice of framework for building a social media app, or should I use something else?
I installed older version (14.22.1) of node.js as it's what Meteor recommends, I also installed accounts-google package instead of accounts-password to see if that one works, and it worked fine.
Main.js and Main.html
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Accounts } from 'meteor/accounts-base';
import './main.html';
Template.hello.onCreated(function helloOnCreated() {
// counter starts at 0
this.counter = new ReactiveVar(0);
});
Template.hello.helpers({
counter() {
return Template.instance().counter.get();
},
});
Template.hello.events({
'click button'(event, instance) {
// increment the counter when button is clicked
instance.counter.set(instance.counter.get() + 1);
},
});
Accounts.ui.config({
passwordSignupFields: 'USERNAME_AND_OPTIONAL_EMAIL'
});
<head>
<title>Test</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
<nav class="main-nav">
<a>Test Link 1</a>
<a>Test Link 2</a>
<a>Test Link 3</a>
{{> loginButtons}}
<a>Test Link 4</a>
</nav>
{{> hello}}
{{> info}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
<template name="info">
<h2>Learn Meteor!</h2>
<ul>
<li>Do the Tutorial</li>
<li>Follow the Guide</li>
<li>Read the Docs</li>
<li>Discussions</li>
</ul>
</template>
I want videos playing in the reveal modal window to stop playing when the modal window closes (who doesn't?). This is easily done with jQuery by setting the iframe source to empty.
But I can't figure out how to make it work in a callback. The modal window itself functions as expected. And this works:
$('.close-button', '#video-reveal').on('click', function() {
$('#video-player').attr("src", "");
console.log("button event fired");
});
However, neither of the following has any effect:
// from documentation
$(document).on('close.fndtn.reveal', '[data-reveal]', function() {
var modal = $(this);
console.log("closing reveal event fired");
});
// my attempt to do it programmatically
$('[data-reveal]').on ('opened.fndtn.reveal', function() {
var modal = jQuery(this);
console.log("opened reveal");
});
So it feels like the event is not firing. I'm sure it is, but how to capture it?
The magic of Foundation 6 is not all obvious without some digging. Working with version 6.2.3
$(document).on(
'open.zf.reveal', '[data-reveal]', function () {
console.log("'open.zf.Reveal' fired.");
}
);
It appears as though you are using Foundation 5's callbacks, rather than Foundation 6...
For your callbacks, I'd suggest using 'closed.zf.reveal', 'open.zf.reveal' or 'closeme.zf.reveal' as mentioned here:
http://foundation.zurb.com/sites/docs/reveal.html
In HTML
<!--the button -->
<a class="button" data-open="videoModal" href="#">Example Video Modal</a>
<!--Modal Video -->
<div class="row" id="theVideo">
<div id="videoModal" class="reveal" data-reveal data-close-on-click="true">
<h2>This modal has video</h2>
<div class="flex-video">
<iframe id="youtubePlayer" width="854" height="480" src="https://www.youtube.com/embed/4z6aSO05YHg" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
</div>
<button class="close-button" data-close aria-label="Close reveal" type="button" onClick="destroyVideo()">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<!--in apps.js-->
function destroyVideo(){
var url = $('#youtubePlayer').attr('src');
$('#youtubePlayer').attr('src', '');
$('#youtubePlayer').attr('src', url);
}
I have installed meteor-typeahead via npm. https://www.npmjs.org/package/meteor-typeahead
I have also installed
meteor add sergeyt:typeahead
from https://atmospherejs.com/sergeyt/typeahead
I am trying to get the data-source attribute example to function so I can display a list of countries when the user begins to type. I have inserted all countries into the collection :-
Country = new Meteor.Collection('country');
The collection is published and subscribed.
When I type into the input field, no suggestions appear. Is it something to do with activating the API? if so how do I do this? Please reference the website https://www.npmjs.org/package/meteor-typeahead
My form looks like this:
<template name="createpost">
<form class="form-horizontal" role="form" id="createpost">
<input class="form-control typeahead" name="country" type="text" placeholder="Country" autocomplete="off" spellcheck="off" data-source="country"/>
<input type="submit" value="post">
</form>
</template>
client.js
Template.createpost.helpers({
country: function(){
return Country.find().fetch().map(function(it){ return it.name; });
} });
In order to make your input to have typeahead completion you need:
Activate typeahead jQuery plugin using package API
Meteor.typeahead call in template rendered event handler.
Meteor.typeahead.inject call to activate typeahead plugin for elementes matched by CSS selector available on the page (see demo app).
Write 'data-source' function in your template understandable by typeahead plugin. It seems your 'data-source' function is correct.
Add CSS styles for typeahead input(s)/dropdown to your application. See example here in demo app.
Try this way in your template:
<input type="text" name="country" data-source="country"
data-template="country" data-value-key="name" data-select="selected">
Create template like country.html (for example /client/templates/country.html) which contains:
<template name="country">
<p>{{name}}</p>
</template>
In your client javascript:
Template.createpost.rendered = function() {
Meteor.typeahead.inject();
}
and
Template.createpost.helpers({
country: function() {
return Country.find().fetch().map(function(it){
return {name: it.name};
});
},
selected: function(event, suggestion, datasetName) {
console.log(suggestion); //or anything what you want after selection
}
})
I'm trying to install this captcha plugin and this is what I have so far (straight from their code, just kind of tweaked up to my style)
Here is captcha and steps I'm following: https://github.com/mirhampt/node-recaptcha
In my router.js file:
app.get('/account/verification/:token/', require('./views/account/verification/index').verifyHuman);
In my /views/account/verification/index.js file:
exports.verifyHuman = function(req, res, next){
var Recaptcha = require('recaptcha').Recaptcha;
var recaptchaKeys = req.app.config.recaptchaKeys;
var recaptcha = new Recaptcha(recaptchaKeys.publicKey, recaptchaKeys.privateKey);
console.log(recaptcha.toHTML()); //this returns a script tag with an iframe and stuff in it
res.render('account/verification/captcha', {
layout: false,
locals: {
recaptcha_form: recaptcha.toHTML()
}
});
};
and then my /views/account/verification/captcha.jade file:
div#captcha
script(type='text/template', id='tmpl-captcha-verification')
form#captcha-verification
#{recaptcha_form}
button.btn.btn-primary.btn-captcha-verification(type='button') Check Captcha
I can't get it do display the captcha script. It comes up as undefined but in a strange way. This is what appears in my console:
<script type="text/template" id="tmpl-captcha-verification"><form id="captcha-verification"><undefined></undefined><button type="button" class="btn btn-primary btn-captcha-verification">Check Captcha</button></form></script>
I can even try and do #{layout}, and I get this in the console:
<script type="text/template" id="tmpl-captcha-verification"><form id="captcha-verification"><false></false><button type="button" class="btn btn-primary btn-captcha-verification">Check Captcha</button></form></script>
It's like jade is trying to format it, but one of the main issues is that it's undefined, when the variable in my /views/account/verification/index.js file that I console.log isn't.
Also, note that if I do != recaptcha_form, it just shows the form in the html as it would if this != recaptcha_form code wasn't even there.
I've searched around other questions for this answer and am still pretty confused. Any help would be greatly appreciated. Thanks
I have a problem with bootstrap modal window when using AngularJS together with NodeJS and socket.io. I have been googling and it seems like it is issue that has a solution, but for some reason it doesn't work when I am trying to implement it together with Socket.io. I used modals on two different places - when I click on a static div (works perfectly), when I receive a message from webSockets (opens only once and then nothing). I guess I might have a problem in my JS code since the modal when I click on a static div works fine, but I don't know.
I have an address and I am sending some data via WebSockets to the client when this link is visited. The client event looks like this:
socket.on('patient', function(data){
modalInstance = $modal.open({
templateUrl: 'templates/patient.js',
controller: 'patientModalCtrl',
resolve: {
details: function(){return data;}
}
});
});
and:
socket.on('alergy',function(data){
modalInstance = $modal.open({
templateUrl: "templates/alergy.js",
controller: 'alergyModalCtrl'
});
});
Both of these work only once and then the modal window stops to appear. Interesting is, that when I emit "alergy", then again and then "patient" I get an "alergy" window and then patient window the second "alergy" window under it.
emiting looks like this:
app.get('/api/socket/hash/:hash', function(req, res){
var hash = req.params.hash;
//allergy
if(hash === "3fDecCD"){
connected_sockets[0].emit('alergy', {alergy: true});
res.json({status: true});
}
//patient detail
else if(hash === "Vc43Sf"){
connected_sockets[0].emit('patient', {name: 'Jan', surname: 'Bjornstad'});
res.json({status: true});
}
else{
res.json({status: false});
}
});
My template looks like this:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body" style="background-color: #FFD1D1;">
<h1 style="text-align: center; color: red;">Allergy!</h1>
<h2 style="text-align: center; color: red;">The patient is allergic to opium!</h2>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Close</button>
</div>
</div>
</div>
I am using AngularJS 1.0.7, Bootstrap CSS 2.3.1
I would say that your socket-event listeners are firing "outside of AngularJS world" and as such AngularJS machinery is not kicking-in to do its 2-way data binding "magic". In precise terms, you are not entering AngularJS $digest loop so bindings are not updated, promises not resolved etc.
The easy fix is to wrap calls to AngularJS-specific code (here - call to the $modal service) into Scope.$apply method, ex.:
socket.on('alergy',function(data){
$scope.$apply(function(){
modalInstance = $modal.open({
templateUrl: "templates/alergy.js",
controller: 'alergyModalCtrl'
});
});
});