I am trying to implement transitions between pages by using iron:router. I defined the animations in the css and now everything I need is to call them with the iron:router. For some reason the following code:
animateContentOut = function() {
$('#content').removeClass("animated fadeIn");
return $('footer').addClass("hide");
}
fadeContentIn = function() {
$('#content').addClass("animated fadeIn");
return $('footer').removeClass("hide");
}
Router.onBeforeAction(animateContentOut);
Router.onAfterAction(fadeContentIn);
returns an exception:
Route dispatch never rendered. Did you forget to call this.next() in
an onBeforeAction?
As specified in the Iron-Router documentation, now both onBeforeAction and onAfterAction callbacks require this.next(). https://github.com/iron-meteor/iron-router
So simply simply add that line to the end of your fadeContentIn and animateContentOut code.
If you have login try like this
Router.onBeforeAction(function () {
if (!Meteor.user()) {
this.render('Login');
} else {
this.next();
}
});
Related
I have a strange situation (you can read about the context here. I'm not sure that the answer to this question will answer the question in the link, hence two questions.), where I'd like to modify an AngularJS service after the framework has already been loaded. Here's some code we'd like to do:
<script>
document.onload = function () {
angular.module('common')
.config(function ($provide) {
$provide.factory("$exceptionHandler", function () {
return function (exception) {
throw exception;
};
});
});
}
</script>
This works fine when it's not wrapped in a document.onload. But when it's put in an onload, it doesn't seem to have any effect. How can I modify a service in a document.onload?
For what it's worth, I'm on angular 1.2.
This worked when we tried it:
<script>
window.onload = function () {
angular.element(document.body).injector().invoke(function($log) {
$log.error = function(message) {
throw new Error(message)
};
});
}
</script>
I was trying to see if element enabled on the page before clicking on that. I want to create command that will check if element is enabled or not before clicking on it. I was going over API of nightwatch and still not sure how this commands works. I was trying following:
browserObj.elementIdEnabled(Cssselector, function (res) {
console.log(res);
});
But I think I should pass something else and not css selector into elementIdEnabled function. Ideally I want to chain 3 commands before clicking on element:
browserObj.perform(function () {
this.waitForElementPresent(cssSelector, timeout, function () {
this.waitForElementVisible(cssSelector, timeout, function () {
this.api.elementIdEnabled(cssSelector, function (res) {
browserObj.click(cssSelector, function (clickStatus) {
this.assert.equal(clickStatus.status, 0 );
});
})
})
});
});
module.exports.command = function (selector) {
this.waitForElementVisible(selector).click(selector);
return this;
};
By beatfactor from
https://github.com/nightwatchjs/nightwatch/issues/705
In my Meteor app, I am trying to load a random image from this API and I get a JSON like:
{
"id":2026
"url": "https:// ... " ,
"large_url":null,
"source_id":609,
"copyright":"CC0",
"site":"unsplash"
}
I do it this way:
if (Meteor.isClient) {
Template.body.helpers({
randomImage: function() {
Meteor.call("unImage", function(error, results) {
Session.set('url', results.data.url);
});
return Session.get('url');
}
});
}
if (Meteor.isServer) {
Meteor.methods({
unImage: function() {
this.unblock();
return Meteor.http.call("GET", "http://www.splashbase.co/api/v1/images/random");
}
});
}
In my html:
<div class="header" style="background-image: url('{{randomImage}}')">
...
</div>
This is working, but it reloads the image every second - more or less. I guess this is happening because the function unImage, which is on server side, loads all along with the server or something like that (not sure); anyway I cannot make it stop. Any ideas on how to solve it? And why is this happening?
This is because session variable inside of your randomImage helper.
And Session variables are reactive in nature, in which it re-runs in a block whenever its value is changed.
In this case, helper code is re-running again and again and hence, Meteor methods gets called again and again
So, move Meteor.call in helper to rendered event as shown below
if (Meteor.isClient) {
Template.body.rendered= function(){
Meteor.call("unImage", function(error, results) {
Session.set('url', results.data.url);
});
}
Template.body.helpers({
randomImage: function() {
return Session.get('url');
}
});
}
Which should call the Meteor method once template is ready and setting url variable and thus reactively helper randomImage gets re-run and gets value of same
I have two files - main, and events. I'm trying to call some function from one file to another.
So, this is how it looks:
events
require(['app/main'], function(call) {
// click event respond test
document.body.addEventListener("click", function(e) {
var target = e.target;
if (target.hasClass === "call"){
functionCall()();
}
});
});
main
define(["jquery"], function() {
// Call
var box = $('.box');
return function functionCall(){
box.addClass('visible');
}
});
What is wrong, can anyboyd help?
main:
define(["jquery"], function($) {
var main = {
functionCall: function(){
$('.box').addClass('visible');
}
}
return main;
});
events:
require(['jquery','app/main'], function($, main) {
$('body').on('click', function () {
if($(this).hasClass('call')){
main.functionCall();
}
});
});
One way is to add this code where you need to make call to function:
require('pathToModuleOrModuleName').functionYouWantToCall()
But if you have module defined or required in the beggining (as 'main' in the events), then in place where call to function needed just add:
call.functionName();
Unless my eyes deceive me the simplest change to make to your code would be to replace this:
functionCall()();
with this:
call();
since the function that the main module returns is imported as call in your events module, because that's how you name it in the callback passed to define.
Firstly your code has some basic problems
In the following code
define(["jquery"], function() {
Where are you referring the query inside the function definition.
I think you should first map the jquery defined into the function declaration like below
define(["jquery"], function($) {
Secondly, what is the () doing after the calling function?
if (target.hasClass === "call"){
functionCall()();
}
Remove the trailing () from that call. It should just be functionCall();
I'm trying to run a function twice. Once when the page loads, and then again on click. Not sure what I'm doing wrong. Here is my code:
$('div').each(function truncate() {
$(this).addClass('closed').children().slice(0,2).show().find('.truncate').show();
});
$('.truncate').click(function() {
if ($(this).parent().hasClass('closed')) {
$(this).parent().removeClass('closed').addClass('open').children().show();
}
else if ($(this).parent().hasClass('open')) {
$(this).parent().removeClass('open').addClass('closed');
$('div').truncate();
$(this).show();
}
});
The problem is on line 13 where I call the truncate(); function a second time. Any idea why it's not working?
Edit jsFiddle here: http://jsfiddle.net/g6PLu/
That's a named function literal.
The name is only visible within the scope of the function.
Therefore, truncate doesn't exist outside of the handler.
Instead, create a normal function and pass it to each():
function truncate() { ...}
$('div').each(truncate);
What's the error message do you get?
You should create function and then call it as per requirement
Define the function
function truncate(){
$('div').each(function(){
});
}
Then call the function
truncate();
Another approach is to establish, then trigger, a custom event :
$('div').on('truncate', function() {
$(this).......;
}).trigger('truncate');
Then, wherever else you need the same action, trigger the event again.
To truncate all divs :
$('div').trigger('truncate');
Similarly you can truncate just one particular div :
$('div#myDiv').trigger('truncate');
The only prerequisite is that the custom event handler has been attached, so ...
$('p').trigger('truncate');
would do nothing because a truncate handler has not been established for p elements.
I know there's already an accepted answer, but I think the best solution would be a plugin http://jsfiddle.net/g6PLu/13/ It seems to be in the spirit of what the OP wants (to be able to call $('div').truncate). And makes for much cleaner code
(function($) {
$.fn.truncate = function() {
this.addClass('closed').children(":not('.truncate')").hide().slice(0,2).show();
};
$.fn.untruncate = function() {
this.removeClass('closed').children().show();
};
})(jQuery);
$('div').truncate();
$('.truncate').click(function() {
var $parent = $(this).parent();
if ($parent.hasClass('closed')) {
$parent.untruncate();
} else {
$parent.truncate();
}
});