Meteor won't run jQuery code - javascript

I'm trying to run a block of jQuery code that shows and hides a form, but can't find a way to get Meteor to run the code on the client side. Here's the code I'm attempting to use at the moment:
if (Meteor.isClient) {
Template.post.onRendered(function(){
$(document).ready(function(){
$('.replybtn').click(function(){
if( $(this).parent().next().css('display') === 'none' ){
$(this).parent().next().css('display', 'block');
} else {
$(this).parent().next().css('display', 'none');
}
});
});
});
}
I've also tried putting the code in a script tag, which did not work. Strangely, the jQuery portion of the code alone works fine when pasted into the browser console - meaning the bug is likely in how I'm running the code in Meteor, not the jQuery itself. Also, I've confirmed that the template name is correct and can't think of any other issues that could be causing this. Any ideas on why the jQuery code may not be running?

This is probably not the best solution, but it appears that this issue can be fixed by defining a function that creates the event listener and then setting a 2 second timeout to run the function with setTimeout().

You're trying to apply a traditional jQuery pattern when Meteor provides a simple facility to attach event handlers to templates. Here would be the meteoric way:
if (Meteor.isClient) {
Template.post.events({
'.replybtn click'(e){
const selector = e.target.parentElement.nextSibling;
selector.css('display', selector.css('display') === 'none'? 'block' : 'none');
}
});
});

Related

Jquery is not working without settimeout in meteorjs

I have a code in helper in meteorjs
Template.tickets.helpers({
priorityClassColour(priority) {
setTimeout(() => {
$(".Low").css('background-color', 'red');
return 'Low'
});
}
})
This works fine without any error but when I move the code of jquery css outside settimeout, the style is not applied to css. When I run $(".Low").css('background-color', 'red'); in browser console then also this works perfectly fine. can somebody tell me why this happens ?
It's probably because you're trying to update something that hasn't rendered yet. That's why using a timeout makes it work, it gives Blaze a chance to finish rendering.
A better way to do it is to set the CSS style of the element using Blaze helper.
In your template use something like:
<element style={{priorityClassStyle}}/>
Where the priortyClassStyle helper would return the whole style string eg. background-color:red
$(".Low") might not exist at the time your jQuery code executes. When you setTimeout it allows $(".Low") to be available then your jquery works.
You can check $(".Low").length outside & inside the setTimeout to findout if it exists in both cases or not.

Something blocks addEventListener(type, handler) to work in DOM

I'm learning Vanilla JS and DOM, and I'm testing some codes in console. I have a question.
Step 1) Navigate to website "http://rehub.wpsoul.com" in chrome.
Step 2) Open a console.
Step 3) Write down below code in console.
var neww = window.open('/')
neww.addEventListener('click', function() {
alert('hi');
})
This code is not working. However, if I change the event type from 'click' to 'scroll', it does work well.
What makes it hinder to work in DOM?
Whenever I tested this code, some websites does not work event type, 'load' like this website.
I've had a headache for this for a few days. I would like to know the reason and principle of DOM and JS.
I need your help, thanks! :)
As you are opening a new window and its DOM is not yet available or ready, the event is not getting bind. Please try following code:
var neww = window.open('/')
neww.addEventListener('load', function() {
neww.document.body.addEventListener('click', function() {
alert('hi');
});
});

How do I use a Dojo tap.hold gesture

I need to have a Javascript press and hold (long-press) event attached to a dom element. The example on Dojo's site (https://dojotoolkit.org/reference-guide/1.9/dojox/gesture.html#dojox-gesture) doesn't work at all, and I haven't found any working example.
define(["dojo/on", "dojox/gesture/tap"], function(on, tap){
var node = document.getElementById("box");
on(node, tap.hold, function(e){ alert('held') });
});
Associated fiddle: http://jsfiddle.net/L8Tp6/1/
I don't mind doing this in straight Javascript, if the Dojo option doesn't work out, but I'd like to know if I'm doing something wrong.
The problem is not the gesture or the event, but you using define(). define() should only be used when defining modules (as the name explains). When you load such a file, it will actually don't do anything. It won't load the modules and it won't execute the callbacks. The only way to make the callback run is when you call it from a require().
Your main Dojo file should always use require(). So to your code: replace define() with require() and it will work like a charm.
Code:
require(["dojo/on", "dojox/gesture/tap"], function(on, tap){
var node = document.getElementById("box");
on(node, tap.hold, function(e){ alert('held') });
});
I also updated your JSFiddle.
To Detect hold end:
on(node, tap.hold, function(e){
e.target.ontouchend = function(){
console.log('You quit holding');
}
});

Removing a DOM element using CasperJS

Okay basically I have a post:
<div class=post>
<div class=content></div>
<div class=content-meta></div>
</div>
thats the prototype of it to help explain
so what I want to do is use some JS to basically delete or hide the div 'content-meta'
Using JQuery I have:
$('.content-meta').remove();
however when I am using CasperJS I am a little puzzled as how I should implement this code.
I am looking to manipulate a post prior to screen capturing it (the screencapture part works fine)
Heres the code (URL's OMITTED) I have been testing with, It picks up the class just fine, but I have no idea where/how to execute the Jquery to remove the detected element prior to screen capture:
casper.start('http://pageurl.com/XYZ', function() {
if (this.exists('.content-meta')) {
this.echo('found .content-meta', 'INFO');
} else {
this.echo('.content-meta not found', 'ERROR');
}
this.captureSelector('resultingcapture.png', '.post');
});
casper.run();
TL;DR How do you execute JS/Jquery from within a CasperJS function?
For execute javascript code from CasperJS, You have to use evaluate() method
The evaluate() method as a gate between the CasperJS environment and the one of the page you have opened; everytime you pass a closure to evaluate(), you're entering the page and execute code as if you were using the browser console.
Your code should be something like this:
var casper = require('casper').create();
casper.start('http://pageurl.com/XYZ', function() {
if (this.exists('.content-meta')) {
this.echo('found .content-meta', 'INFO');
//evaluates an expression in the current page DOM context.
this.evaluate(function(){
//delete div 'content-meta'
$('.content-meta').remove();
});
this.then(function(){
this.captureSelector('resultingcapture.png', '.post');
});
} else {
this.echo('.content-meta not found', 'ERROR');
}
});
casper.run();
Note: This code is going to run only if the webcontext includes jQuery, otherwise you have to remove the div using just javascript.

$(window).load(function()-how it works with FF

I have a jquery code.
$(window).load(function() {
document.title = $("#myid").text(); //not working in FF
});
Here I have used $(window).load(function() because in the #myid I am getting value through another javascript, if I use ready(), its giving me error. so I am first loading the window then start reading value.
Now in IE, after the window loads itself , I am getting the value of document.title,
but for FF its coming as blank.undefined.
Why? any idea or alternate sln.
It might be a rendering/timing issue.
How are you setting the #myid text? Im assuming you are running this code on page load?
Personaly on another note, i like to use the shorthand version of jQuery DOM ready, this might also fix your problem too.
jQuery(function(){
document.title = jQuery("#myid").text();
});
And i would make sure that you call it at the end of the body or ideally in the head tag.
I think it is possible that firefox triggers ready and load at the same time when it loads quickly (localhost, small experiment page with one div, etc.)
Why not put the title setting in the ready function right after getting it? If You put it in a div, You can put it in the title too.
I didn't check this code and it isn't a good way, but maybe it help you...
If your code isn't working in Firefox only, you can check browser by Javascript and execute my code for Firefox only.
<script type="text/javascript">
var timerId = 0;
function checkElement() {
// If don't work: try .html() or $("#myid").text() != undefined or smth like this
if($("#myid").text()) {
document.title = $("#myid").text();
clearInterval(timerId);
}
}
$(document).ready(function() {
timerId = setInterval('checkElement()', 500);
});
</script>

Categories