Im trying to use registerHelper to respond to a click event on my page.
i seem to be having difficulty getting the page to perform a function based on a click event.
The function below runs when the page renders.
Template.registerHelper('deletetask', function () {
Tasksdb.remove(this._id);
how do i get it to run on a click event? I have tried something like:
Template.registerHelper('deletetask', 'click.delete' : function () {
Tasksdb.remove(this._id);
it just errors out.I think my syntax is off or i have to do it some other way.
Thanks
Template helpers return values for display. Template events are designed for, you guessed it, handling events.
Template.myTemplate.events({
'click .delete': function(ev){
Tasksdb.remove(this._id);
}
});
Note that this will be the data context corresponding to the instance of myTemplate that was clicked on.
Related
I have created an Accordion dynamically and added AccordionPanes through backend with respective controls and data click here to view my problem and how I solved it. I have added a link button in each AccordionPane but now I want to add a click event so that I can access data in that specific pane and I need to use functions to populate data.
I create my controls in the page_init event.
How can I go about doing this?
I have come across a solution that is almost the same as what I want to do.
One way to achieve this is by adding the event handlers with Javascript Like this:
function pageLoad()
{
var accordionControl = $find('Accordion1_AccordionExtender');
accordionControl.add_selectedIndexChanging(PaneChanging);
accordionControl.add_selectedIndexChanged(PaneChanged);
}
function PaneChanged(sender, args)
{
alert('In Changed handler.');
}
function PaneChanging(sender, args)
{
alert('In Changing hanlder.');
}
A similar question has been posted here
The specific control you would be looking for is:
$addHandler(header, "click", acc._headerClickHandler);
How to get event name in GMap V3.
Tried as,
function initialize(){
-------------------
google.maps.event.addListener(map, 'click',function(){handleViewUpdate();});
google.maps.event.addListener(map, "dragend", function () {handleViewUpdate();});
-------------------
}
function handleViewUpdate(){
alert(map.getEvent()+' Event');
}
but fails. :(
Any help please :)
why don't you use some flag variable send it as a parameter to the function
for eg:
handleViewUpdate(1) for first thing
handleViewUpdate(2) for other.
then you can get the event name.
There is no map method named getEvent, but some of the event listener callbacks do pass arguments (but not all). For example, you could change your click event listener definition to:
google.maps.event.addListener(map, 'click', function( event ) {
//do something with the event parameter here
handleViewUpdate();
});
In contrast, the dragend event does not pass anything to the event listener. The google.maps.Mapapi-doc has full details if you scroll down to the Events table.
All that said, the google.maps.MouseEventapi-doc doesn't include a "name" or "type" property that could be used to address your specific question. I've inspected the incoming event in Chrome's console and there is nothing that you can use to perform a switch action. When you define the event listener, the callback function is about the only thing that you can use to give you the context of the event that was fired. So the suggestion in #NejiHyuga's answer is pretty much your best option.
I'm building a calendar-based web app with fullcalendar, which is for college students to use. There are some categories I've defined. e.g, sport, art, mind, etc... every event in the fullcalendar would be assigned to a category.
What i want to do is: there're some checkboxes corresponding categories on the top of the calendar, and the user can check or uncheck some checkboxed to hide/show the related events
how would I achieve this?
One way is to put appropriate classes on each event by setting the 'className' property on the event objects you're sending to the calendar and use jquery to hide those events (e.g. $(.myClassName).hide()) when they check the checkboxes. The trouble is the events would vanish leaving a gap where they were which might not be what you want.
A better way would be to add a filter function to the events option when you first call fullCalendar like this:
fullCalendar({
...
events: {
url: ....,
success: function(events) {
$.map(events, function (e) {
if (userHasFilteredOut(e))
return null;
else
return e;
});
},
...
});
This will filter out the events before they are displayed. The function userHasFilteredOut returns true if the event object passed in is of a class the user's checkbox values indicate is filtered out. When the user checks or unchecks a checkbox, you will need to refetch all the events from the server. You need to do this:
$('#mycal').fullCalendar('refetchEvents');
I have a questions..
when initially page load I have two radio button in the page..
Add
Edit
when I select Add radio button I need to go the controller Action Add
$("#Add").change(function () {
// what should I write here to hit the controller?
});
Thanks
Well technically if you want to to do something with the controller, like get/send data you'd use the ol' ajax call
This call will vary depending on get/post type. Look up this function for more details but here's an idea.
$.ajax({
url: 'directorie/controllername'
type:Get
success: function(data) {
do some stuff with data
}
});
but just going to a controller is pretty simple, it's doing something with the controller that makes it meaningful.
window.locatation.href = "<%= Url.Action("Add", "Controller") %>";
That is in the case the script is in the view so you can use the advantage of the Url.Action method. Otherwise it's just something like
window.location.href = "/Controller/Add";
window.location.href = '/my/url/to/be/called';
If I understand correctly your question, you want to activate an event when you click on your radio button. If so, you are probably looking for the .trigger() function.
Your code would be something like this :
$("#Add").change(function () {
$("#WhateverController").trigger('click');
});
I have a partial view that is rendered within a main view. The partial view takes advantage of System.ComponentModel.DataAnnotations and Html.EnableClientValidation().
A link is clicked, and div containing the partial view is displayed within a JQuery.Dialog().
I then click the save button without entering any text in my validated input field. This causes the client side validation to fire as expected, and display the '*required' message beside the invalid field.
When the cancel button is clicked, I want to reset the client side MVC validation back to it's default state and remove any messages, ready for when the user opens the dialog again. Is there a recommended way of doing this?
This answer is for MVC3. See comments below for help updating it to MVC 4 and 5
If you just want to clear the validation-messages so that they are not shown to the user you can do it with javascript like so:
function resetValidation() {
//Removes validation from input-fields
$('.input-validation-error').addClass('input-validation-valid');
$('.input-validation-error').removeClass('input-validation-error');
//Removes validation message after input-fields
$('.field-validation-error').addClass('field-validation-valid');
$('.field-validation-error').removeClass('field-validation-error');
//Removes validation summary
$('.validation-summary-errors').addClass('validation-summary-valid');
$('.validation-summary-errors').removeClass('validation-summary-errors');
}
If you need the reset to only work in your popup you can do it like this:
function resetValidation() {
//Removes validation from input-fields
$('#POPUPID .input-validation-error').addClass('input-validation-valid');
$('#POPUPID .input-validation-error').removeClass('input-validation-error');
//Removes validation message after input-fields
$('#POPUPID .field-validation-error').addClass('field-validation-valid');
$('#POPUPID .field-validation-error').removeClass('field-validation-error');
//Removes validation summary
$('#POPUPID .validation-summary-errors').addClass('validation-summary-valid');
$('#POPUPID .validation-summary-errors').removeClass('validation-summary-errors');
}
I hope this is the effect you seek.
If you are using unobtrusive validation that comes with MVC you can simply do:
$.fn.clearErrors = function () {
$(this).each(function() {
$(this).find(".field-validation-error").empty();
$(this).trigger('reset.unobtrusiveValidation');
});
};
------------------------------------------------------------------------
Third Party Edit:
This mostly worked in my case, but I had to remove the $(this).find(".field-validation-error").empty(); line. This appeared to affect the re-showing of the validation messages when resubmitting.
I used the following:
$.fn.clearErrors = function () {
$(this).each(function() {
$(this).trigger('reset.unobtrusiveValidation');
});
};
and then called it like this:
$('#MyFormId input').clearErrors();
function resetValidation() {
$('.field-validation-error').html("");
}
You can simply define a new function in jQuery:
$.fn.resetValidation = function () {
$(this).each(function (i, e) {
$(e).trigger('reset.unobtrusiveValidation');
if ($(e).next().is('span')) {
$(e).next().empty();
}
});
};
and then use it for your input fields:
$('#formId input').resetValidation();
Thank you. I had a similar question for a slightly different scenario. I have a screen where when you click one of the submit buttons it downloads a file. In MVC when you return a file for download, it doesn't switch screens, so any error messages which were already there in the validation summary remain there forever. I certainly don't want the error messages to stay there after the form has been submitted again. But I also don't want to clear the field-level validations which are caught on the client-side when the submit button is clicked. Also, some of my views have more than one form on them.
I added the following code (thanks to you) at the bottom of the Site.Master page so it applies to all of my views.
<!-- This script removes just the summary errors when a submit button is pressed
for any form whose id begins with 'form' -->
<script type="text/javascript">
$('[id^=form]').submit(function resetValidation() {
//Removes validation summary
$('.validation-summary-errors').addClass('validation-summary-valid');
$('.validation-summary-errors').removeClass('validation-summary-errors');
});
</script>
Thanks again.
You can tap into the validation library methods to do this.
There are two objects of interest: FormContext and FieldContext. You can access the FormContext via the form's __MVC_FormValidation property, and one FieldContext per validated property via the FormContext's fields property.
So, to clear the validation errors, you can do something like this to a form:
var fieldContexts = form.__MVC_FormValidation.fields;
for(i = 0; i < fieldContexts.length; i++) {
var fieldContext = fieldContexts[i];
// Clears validation message
fieldContext.clearErrors();
}
// Clears validation summary
form.__MVC_FormValidation.clearErrors();
Then, you can hook that piece of code to whichever event you need.
Sources for this (quite undocumented) insight:
http://bradwilson.typepad.com/presentations/advanced-asp-net-mvc-2.pdf (Mentions FieldContext)
https://stackoverflow.com/a/3868490/525499 (For pointing out this link, which metions how to trigger client-side validation via javascript)
In order to complete clear the validation artifacts including the message, the coloured background of the input field, and the coloured outline around the input field, I needed to use the following code, where this was (in my case) a Bootstrap modal dialog containing an imbedded form.
$(this).each(function () {
$(this).find(".field-validation-error").empty();
$(this).find(".input-validation-error").removeClass("input-validation-error");
$(this).find(".state-error").removeClass("state-error");
$(this).find(".state-success").removeClass("state-success");
$(this).trigger('reset.unobtrusiveValidation');
});
Here you can use simply remove error message
$('.field-validation-valid span').html('')
OR
$('.field-validation-valid span').text('')
I've this issue for "Validation summery" after form ajax submit and done it like this:
$form.find('.validation-summary-errors ul').html('');
and complete code is:
$("#SubmitAjax").on('click', function (evt) {
evt.preventDefault();
var $form = $(this).closest('form');
if ($form.valid()) {
//Do ajax call . . .
//Clear validation summery
$form.find('.validation-summary-errors ul').html('');
}
});