I am new for MeteorJs. Some one could you please provide info for form area text tag.I tried to add text area and tried to implement using with event.
I got answer from refer few docs.. below is the correct one
html:
JS:
Template.body.events({
"submit .new-task": function (event) {
// Prevent default browser form submit
event.preventDefault();
var message=event.target.newMessage.value;
Related
I have been trying to display value of a datepicker in a div and two texboxes. I was able to do it in a normal PHP file however when i try to do it in a wordpress website. It is not happening The jquery code i am using is as follows:
jQuery(function() {
jQuery('#ui-datepicker-div').datepicker({
altField: '#wc_order_field_2563', //setting alternate field
onSelect: function(dateText, inst) {
$('#show_pickupdate_input').val(dateText);
$('#pickupdate_text').text(dateText);
//alert(dateText);
}
});
});
If you want to see this in action you an see it on twomoms.kitchen checkout page. However this does not seem to work no matter what I do.
Please let me know what is it that i am doing wrong :(
the issue got resolved by changing the code above with the following code below. This modification was done as the datepicker was added using a plugin that adds any fields as required. Code below changes div and textbox using the change in other textbox.
jQuery(function() {
jQuery('#wc_order_field_2563').datepicker({
onSelect: function(dateText, inst) {
$('#show_pickupdate_input').val(dateText);
$('#pickupdate_text').text(dateText);
//alert(dateText);
}
});
});
I am trying to set a Session variable to the text that a user clicks on when they click a link. For example if the link is The Link.
I would like to Session.set('clickedLink', <<The Link>>); but with "The Link" obviously replaced with the text string that the user has clicked on.
Is this possible? Am I going about this all wrong?
I figured I might be able to use something like:
Template.SingleQuote.events({
"click .link": function (event) {
Session.set("currentPageName", event.a.text);
}
});
Use event.target.text.
Template.SingleQuote.events({
'click .link'(event) {
Session.set('currentPageName', event.target.text);
}
});
Edit:
Instead of what has been posted, it has been suggested by reviewers that I update this answer to make use of the following syntax:
'click .link': function(event) { /* ... */ }
Both of these are perfectly valid syntax for a Meteor Template Event, use whichever you feel most comfortable with.
Hi I was displaying a confirm navigation when user closed my website like
I used below code to display custom navigation in my website
$(document).ready(function () {
var popit = true;
window.onbeforeunload = function () {
if (popit == true) {
popit = false;
return "Are you sure you want to leave?";
}
}
});
Can anyone suggest me how to customize confirm navigation.
No, it is not possible to style these as they are Browser generated UI. If you want to be able to style a confirmation box or an alert then you will need to use the <dialog> element or some other method - note you will not be able to stop the browser from unloading like you can with and alert or confirm
I am trying to implement searching in my Meteor app. I don't exactly understand how it ties together. At this point, I have this following code:
html:
<form class="navbar-search pull-left">
<input type="text" class="search-query" placeholder="Search">
</form>
js:
Template.menubar.events({
'keyup input.search-query': function (evt) {
console.log("Keyup value: " + evt.which);
if (evt.which === 13) {
console.log("Got an Enter keyup");
Session.set("searchQuery", "justATestVar");
}
}
});
I can see the values of keyup as I press different keys into the search box, so I know the event is being hit. Capturing the "enter" keyup also works, but pressing enter causes the enter site to reload and when I do:
Session.get("searchQuery")
it returns undefined.
I don't know if I'm handling this properly. Essentially, I just want to get the value from the search box and then use that value for making a search on my collection. Any help would be appreciated! Thank you.
You should really use a submit button for your search form to avoid ruining accessibility.
Using a submit button will also enable by default the behavior you're looking for : form submission on enter key pressed.
If you really want to get rid of the submit button, keep it in the DOM but use CSS to hide it.
It's very important to call preventDefault on the event you'll receive from "submit form" handler, if you forget to do so, the page will refresh ruining the meteor "Single Page App" experience (and by the way, page refresh will clear your Session variables, which is why you get an undefined value in the first place).
"submit form":function(event,template){
event.preventDefault();
Session.set("searchQuery",template.find(".search-query").value);
}
What is probably happening is your form is being submitted when you hit enter. Try an preventDefault(). Probably something like this would work:
Template.menubar.events({
'keyup input.search-query': function (evt) {
console.log("Keyup value: " + evt.which);
if (evt.which === 13) {
console.log("Got an Enter keyup");
Session.set("searchQuery", "justATestVar");
}
},
'submit form': function (evt) {
evt.preventDefault();
}
...
You could also try adding evt.preventDefault(); in your keyup but I think it's the form submission that's doing it.
In case anyone got here trying to implement the search function as well, I recommend the following:
meteor add matteodem:easy-search
On client and server:
Players = new Meteor.Collection('players');
// name is the field of the documents to search over
Players.initEasySearch('name');
On the client, make a template.html:
<template name="searchBox">
{{> esInput index="players" placeholder="Search..." }}
<ul>
{{#esEach index="players"}}
<li>Name of the player: {{name}}</li>
{{/esEach}}
</ul>
</template>
Reference
Thanks for reading. I have some codes on my wordpress site, the first one adds an overlay over an image with a color, the article title and a link to go to the project. The second code adds an ajax pagination using jQuery.
The thing is that i have my projects with images and the jquery overlay owrking perfect, but when they click on the previous projects link that calls the ajax pagination, the jquery overlay stops working.
I have been trying different options, but maybe i'm not on the correct way to solve it. Does anyone has a clue?
Thanks in advance.
The codes:
// PORTFOLIO HOVER EFFECT
jQuery('ul.portfolio-thumbs li').hover(function(){
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
}, function() {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
});
// POSTS NAVIGATION
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
I've found the solution in the same day and #BrockAdams helped me with the doubts. I'm putting here the code because it can be helpful for someone.
jQuery('ul.portfolio-thumbs li').live('hover', function(event){
if (event.type == 'mouseenter') {
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
} else {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
}
});
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
You can post answers to your own question.
And, you needed to use live()Doc on the hover, because the pagination presumably loads in new portfolio-thumbs lis.
Without the live(), these new lis would have no events attached to them (unless you re-called jQuery('ul.portfolio-thumbs li').hover after every pagination event).
Live is easier, and avoids the pitfall of having multiple copies of the same event-listener attached to an element.
And, yes, you can use both live() calls (or more) on the same page without problems.