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.
Related
Recently, I have seen an amazing issue in a SPA web page. When I write a code using chrome developer console, it works once. When I change filter interactions, that code does not work.
Here is site link: https://www.butlins.com/latest-offers/prices.aspx?start=08/2017
My simple testing code is given below:
Thanks, it works but this code is work twice. Why?
function updateChanges(){
$("a#whatsOnLink").css({"position": "absolute" ,"margin-top": "110px", "margin-left": "-50px"});
$("p.latest-type").append("<p class='someText'><b>2 Adults and 2 Children</b></p>");
$("p.someText").css({"font-size": "12px","margin-top": "10px"});
$("p.latest-type").css({"font-size": "16px"});
$("a.button.bookingEngine.button-red").css({"margin-top": "-10px"});
$('.latest-offer-price').each(function(el){
var data = $(this).text().substring(1);
$(this).text('£'+(data*4));
});
}
$(document).ajaxSuccess(function(){
setTimeout(updateChanges,30)
});
updateChanges();
When I write code in console and press enter, append and calculation is made twice.
Furthermore, I change filter interactions, DOM element flashes with violate colour. I don't know why it is caused.
So, What is the reason for behaviour it ?
Why does DOM element flash with violate colour when filter interaction ?
Have any solution to fix it ?
Try inserting a new <style> tag instead. If it is really an SPA then the rule should stay there after the filters are applied. If the page does a full reload you would need to run new code after each new page loads
let rule ='a.button.bookingEngine.button-red{background-color: blue}'
$('head').append($('<style>', {text:rule}))
The css rules for that page have very specific selectors.
An alternative is to hook into their jQuery ajax and use ajaxSuccess global which will fire after any ajax request succeeds
function updateBtns(){
$("a.button.bookingEngine.button-red").css({"background-color": "blue"})
}
$(document).ajaxSuccess(function(){
setTimeout(updateBtns,30)
});
updateBtns()
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');
}
});
});
I have a application that loads CSS styles dynamic based on user preference. I use requirejs to load these like:
require(['css!dir/styles'], function(){ .... });
this works great but I don't want to show the screen until all the styles have fully initialized.
I've added a CSS class to the body of the page called hide-page and then remove that class when the callback occurs. Like:
setTimeout(function() { $(document.body).removeClass('hide-page'); }, 100);
but even with the settimeout, the page still loads jumbled until everything has initialized. I was thinking about doing a setInterval and checking if a particular style has been applied to a node like:
setInterval(function(){
if($(document.body).style('background'') === "#FFFFFF"){
$(document.body).removeClass('hide-page');
}
}, 10);
but thats kinda hackey. Is there a better solution anyone has to accomplish this?
You don't say how you're hiding the page content, but that could be the problem if you're using display:none.
Try visibility:hidden instead. This will allow the browser to allocate the space needed to construct the page, so you shouldn't see the jumbled FOUC.
I have this fiddle:
http://jsfiddle.net/6HKJZ/3/
This is the part of CSS that causes troubles:
.r .rp{
max-width:50%;
}
.r .r2{
padding:5px;
max-height:60px;
background-color:#292929;
}
And this is the Javascript code:
$(".rp, .r2").dotdotdot();
I get informations from an external page, everything worked before, but now it does not.
This is what I get on my site:
Everything is correct but it's not working...
P.S. Sorry about bad formatting
when you call dotdotdot() it is to early stage to calculate domElements. I wired thing to a button click and it is working.
http://jsfiddle.net/6HKJZ/5/
I don't know when you call it exactly but try jquery dom ready event
$(function(){
//Your code
});
if this does not work try to call it little bit later with a setTimeout
AS I understand it you are trying to use a jQuery plugin that adds the method "dotdotdot". Your fiddle only includes jQuery, not the dotdotdot library.
If you check your console, running your project, does it give an "undefined" on the line it runs "dotdotdot"? It does on the fiddle.
I included the lib on this updated fiddle: http://jsfiddle.net/6HKJZ/4/. And it works.
$(".rp, .r2").dotdotdot();
Given the following code on an ASP.NET MVC View:
<% using (Ajax.BeginForm("AddCommunity",
new AjaxOptions { UpdateTargetId = "community-list",
OnSuccess = "BindCommunityHover" }))
{ %>
Add Community: <input type="text" id="communityName" name="communityName" />
<input type="submit" value="Add" />
<% } %>
And the following JavaScript method in the file:
function BindCommunityHover() {
$(".community-item-li").hover(
function () { $(this).addClass("communityHover"); },
function () { $(this).removeClass("communityHover"); }
);
};
Is there any reason why BindCommunityHover is not being called when the AJAX result comes back?
The community-list div is properly updated (the action returns a partial view). I have also tried setting OnComplete (instead of OnSuccess) to no avail.
The BindCommunityHover method is called in a $(function(){...}); block when the page first loads, and for all existing .community-item-li elements, it works.
The partial result from my controller replaces all items in that div with more of the same class. The OnSuccess method is supposed to fire after the document is updated.
Update: k...this gets weird. I added the following to the BindCommunityHover method:
alert($(".community-item-li").size());
I'm getting 240 in the alert when the page loads and when the callback fires. So, the callback IS firing, jQuery is matching the elements but not applying the styles...
That's because your function is basically saying add a hover event for all of these items as they exist at the point in time when the function is called.
If you then add new elements they aren't automatically bound. There is a new feature in JQuery called Live Events. I've not dug into them but I think they might help here. Otherwise as you add new elements be sure to bind the hover functions.
Okay, there were two parts to this solution.
First culprit was some nasty caching thing that I can't figure out in Cassini/IE. I tried rebooting, stopping Cassini, restarting VS2010...nothing worked.
The code still won't work on IE on my account on this computer. The deployed-to-IIS version works on all browsers. It also works in IE if I change the filename. Something is borked there, though. If I run the project with Cassini/IE, then open FireFox and go to the site, it works.I tried to repro the error to file a bug, but I can't get it to go. I digress. To get around this I changed the name of the .js file and moved the reference to a different spot in the master page.
The other thing was that I did have to use OnSuccess. I switched to using OnComplete when I was trying to figure out what was wrong. After I figured out the file/browser/server problem, I realized that OnComplete (per the docs) fires before the document is updated; the elements were being updated but then thrown away.
The OnSuccess/OnComplete might help sort something out for someone, not sure about the file/browser/server issue...that might be environmental.