How to make some page not automatically refresh in meteor? - meteor

For example, I have a postList page, which shows all posts. If somebody post a new post, this page got automatically refreshed.
This will get users confused.
So I want to make this page not automatically refresh, but inform the user: "there are new posts, click reload button to refresh". something like this.
How to do it in Meteor

It's quite simple, the refresh happens because you have reactive dependency in your case probably a helper that returns a cursor which is reactive by default like this
Template.any.helpers({
Posts: function () {
return Posts.find();
}
})
To disable reactivity use Posts.find({}, {reactive: false});

Related

Meteor - Execute code on every page load

I want to execute a function when any page loads.
Things like Meteor.startup() and Template.myTemplate.onRendered() are not what I want because they are triggered only once, when the app is loaded.
Basically I need an event that is triggered every time the URL changes, is there one?
You can use onRun or onBeforeAction to run arbitrary code on every route change.
Router.onRun(function(){
console.log('onRun', this.current().route.getName());
this.next();
});
Router.onBeforeAction(function(){
console.log('onBeforeAction', this.current().route.getName());
this.next();
});
Use this placeholder code to detect when this code will actually run.
onRun will run only once on every route change. (good for analytics related stuff)
onBeforeAction will reactively rerun when the current route data context is modified.

How to reset Meteor AutoForm validation when leaving form page?

We have a site with several AutoForms on different pages / routes. If a user triggers validation on a particular form and triggers some validation errors, and then leaves the page with that form, when they return to that page later on the data they have entered is gone, but any validation errors remain (fields are highlighted and validation error messages are shown).
How can we reset the form validation when a user leaves the form page?
I know we can use AutoForm.resetForm('our-form-id') to do the reset, and this works in the console, but I can't find the proper hook to hang it on. The onStop IronRouter hook for the page would seem to be the right place, but that triggers an error Can't call Tracker.flush while flushing. If I wrap it in a setTimeout with timeout 0, so it doesn't run until the next tick, it has no effect (presumably the template is destroyed by that point).
I would think when the template is destroyed the error state would be, too, but its not. Is there an undocumented way to "hard" reset errors even if an active template no longer exists?
We are using AutoForm 4.2.2.
You can reset the validations using
AutoForm.getValidationContext('form-id').resetValidation();
You need to use your router's exit hook to resetValidation, but you have to first get the context for your form. Here is how it is done in FlowRouter:
FlowRouter.route('/edit/:_id', {
name: 'editPage',
action: function() {
BlazeLayout.render('appLayout', {main: 'editPage'});
},
triggersExit: [function() {
AutoForm.getValidationContext('edit-form-id').resetValidation();
}]
});
For more information on flowRouter triggers see https://github.com/kadirahq/flow-router#triggers

is it possible to not reload user control when redirect to a page?

I have created a user control for side menu navigation and when user clicks on one of the item on a menu, it displays details of the company and information. Now it is redirecting to different page for each company using passing parameter (ex. company.aspx?ID=10) and everytime when I clicked, it refreshes whole page. I would like to keep side menu user control without refresh as there is a live search option.
Is this possible? or should I change opposite way to do it? should be the side menu in a page and company info in a user control??
If you want to do a proper way using Ajax, you'll need to change the entire site structure. Here is a quick and dirty way of doing it using jQuery.
<script>
$(document).ready(function () {
$("#left-pane a").click(function (e) {
e.preventDefault();
loadUrl($(this).attr("href"));
});
});
function loadUrl(url) {
$("#right-pane").load(url);
}
</script>
I think what you're talking about is partial page update, where, rather than posting and reloading the entire page, you only reload part of it.
Here's a good article: Understanding Partial Page Updates with ASP.NET AJAX

Validation using navigation

I have some pages in my website and a left menu control. Control helps to navigate from one page to another.
My query is -> While user try to navigate to another page, I want to impose some validation like in the current page if the form is not saved, user will be asked to save it by using a confirm messagebox and if user presses no button, then user will be allowed to navigate otherwise, system will first save the details and then navigate.
Edit - My page is a content page, I meant, this is using a master page.
Use the following steps
window.onbeforeunload = confirmExit;
and a function that stops/continue the page execution.
function confirmExit() {
var email= document.getElementById("email");
if (email.value != "")
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
The way I would do this is to have an onbeforeunload javascript event fire which gives the user the choice to save the form. I personally would also poll the form saving data back whist they are completing it. I think this is the method SO uses.
There is a pretty decent example over on Code Project that may help http://www.codeproject.com/KB/aspnet/AutoSaveFormData.aspx
EDIT:
If you only want to call the save method you can mark it with the [WebMethod] filter and call it using XmlHttpRequest or jQuery's $.post

Accessing and binding events to an ASP.NET Grid view using Jquery

I have an ASP page which displays a text box when it loads. It takes an input number, send it to the server through post back, and then displays some record in a grid view. After a number is input into the box, the server fetches some data from a database and add records to the grid view. It also contains a link column, whose URL is set to "#", so that the page isn't redirected when it is clicked.
Now I want to bind a jquery "click" event to that link. How can I do that ? I have tried that to do myself but failed, because it is not available when the DOM is loaded (since it only contains rows when a number is input through the box), and is being modified through ASP.NET Ajax post back.
You should be able to use the live handlers in jQuery to do this. I'd give these links a specific class to uniquely identify them and make it easier.
$('a.gridLink').live('click', function() {
... perform your action...
return false; // to cancel the default click action
});
i think you're looking for .live.
You need to call the live function:
$('#<%=myGrid.ClientID%> a').live("click", function(e) {
//Do things
return false; //You don't need to set the href to #
});

Resources