I am working with the external-dragging sample. I can easily add events to the calendar. But, I see no method to delete an event, either by clicking a delete button or by dragging the event off the calendar.
How have others solved this issue?
Here's what I ended up with, it's not perfect as the fullcalendar control renders it moving back to it's original location before it's removed, but it does work.
$('#calendarTrash').remove();
$('#calendar').children('.fc-content').children().append('<div id="calendarTrash" style="float: right; padding-top: 5px; padding-right: 5px; padding-left: 5px;"><img src="/Content/bin-red-icon.png" /></span></div>');
// Attaches drop event to Calendartrash
$("#calendarTrash").droppable({
tolerance: 'pointer',
drop: function (event, ui) {
var item = ui.helper.context.innerText;
var answer = confirm("Remove '" + item.trim() + "' from the calendar");
if (answer) {
remove = true;
}
}
});
Then in eventDragStop I have the following
if (remove) {
$('#calendar').fullCalendar('removeEvents', event.id));
remove = false
}
I'm guessing there's a better way, but I have yet to find it.
Related
So, i got a fancy dropdown that i want to slide back if clicks anywhere except on elements that are cursor:pointer..If you can understand me..
Currently I got this code:
$("html").click(function() {
if($(".user-dropdown").is(':visible')) {
$(".user-dropdown").slideToggle('fast');
}
});
You could simply verify the cursor type of element triggering event if its not pointer then slideback.
$("html").click(function() {
var cursorType = $(this).css('cursor');
if(cursorType!="pointer")
{
if($(".user-dropdown").is(':visible')) {
$(".user-dropdown").slideToggle('fast');
}
}
});
Try it out and see if it works for you.
After a postback, I want my page to have focus on a child control of a gridview, but scroll the page to a different part.
the standard myGridView.Focus(), called on the Page_Load or Page_prerender, insert a
WebForm_AutoFocus('myGridViewClientID');
in the rendered html.
This function move also the scroll not to the required position
Any suggestion?
my try: use some function injected by Asp.NET:
function FocusWithoutScroll(focusId) {
var targetControl;
if (__nonMSDOMBrowser) {
targetControl = document.getElementById(focusId);
}
else {
targetControl = document.all[focusId];
}
var focused = targetControl;
if (targetControl && (!WebForm_CanFocus(targetControl))) {
focused = WebForm_FindFirstFocusableChild(targetControl);
}
if (focused) {
try {
focused.focus();
}
catch (e) {
}
}
}
but in order to use this code, I have to include some .axd resource files: it seems ASP.NET automatically include them when you set
someControl.Focus();
in your server side code. but this in turn insert the
WebForm_AutoFocus('myGridViewClientID');
which scroll the page to the wrong position
There's a client-side method scrollIntoView that scrolls page till the element is visible. You can issue server-side command:
ClientScript.RegisterStartupScript(this.GetType(), "MyScript","document.getElementById('SecondElementID').scrollIntoView();", true);
Where 'SecondElementID' is id of the element you want to scroll to.
Demo: http://jsfiddle.net/v8455c79/ this demo shows how focus can be set on one element and page scrolled to another
I'm trying to prevent my buttons from losing the active class on mouseleave, but I can't get it working.
So, my buttons are initialized with jQuery's buttonset(). They are buttons, not checkboxes. Checkboxes are out of the question because they require IDs to work.
This is my code:
$('.jquery_ui_buttonset', this.scope).buttonset();
$('.jquery_ui_buttonset > button', this.scope).each(function() {
$(this).bind('mouseleave keyup mouseup blur', function(e) {
if ($(this).hasClass('ui-state-persist')) {
e.stopImmediatePropagation();
if (e.type == 'blur') {
$(this).removeClass('ui-state-focus');
}
$(this).removeClass('ui-state-hover');
}
});
});
The idea is that if the button has the ui-state-persist class, it should not lose the ui-state-active class until both are explicitly removed. Switching of active buttons is done on click by this handler:
CMSPage.prototype.switchEditTab = function(e) {
if (e.data.params.id == null) {
return;
}
$('.editor .body', this.scope).hide();
$('.editor .header button', this.scope).removeClass('ui-state-active').removeClass('ui-state-persist');
$('.editor .body[data-tab-id=' + e.data.params.id + ']', this.scope).show();
$('.editor .header button[data-id=' + e.data.params.id + ']', this.scope)
.addClass('ui-state-active').addClass('ui-state-persist');
}
I've also tried adding e.stopPropagation() and e.preventDefault() and all their combinations, but it doesn't work. And this exact same code works for regular UI buttons (ones not in buttonset).
Any help would be appreciated.
EDIT
I still haven't resolved this problem. I would love to give you guys bounty for helping me out, but I can't since I'm a new member. Has noone ever encountered this problem in which he wanted to use buttonset() with persistently active buttons, and not checkboxes?
I am working on an ASP.NET application that makes some AJAX background request using jQuery (I'm new to jQuery :)).
My jQuery codes are as following:
$(document).ready(function () {
$("#ctl00_cphContent_txtOrgName").keypress(function () {
var orgNameLen = $("#ctl00_cphContent_txtOrgName").val().length;
if (orgNameLen <= 4) {
$("#orgNameHints").empty();
$("#orgNameHints").css('display', 'none');
return;
}
$("#orgNameHints").css({ "visibility": "visible" });
$("#orgNameHints").html("Checking...");
var OrgName = $(this).val();
$.get("ProcessOrgName.aspx?n=" + OrgName, function (data) {
$("#orgNameHints").html(data);
$("#orgNameHints").show();
});
});
$("#ctl00_cphContent_txtOrgName").blur(function () {
$("#orgNameHints").empty();
$("#orgNameHints").css({ "visibility": "hidden" });
});
});
And ASP codes are:
<asp:TextBox ID="txtOrgName" runat="server" MaxLength="100"></asp:TextBox>
<div id="orgNameHints" style="border: 1px solid silver; display:none; position:absolute; padding: 5px; background: #EFEFEF; z-index: 100;"></div>
Here txtOrgName is the textbox that is used to check existing records with same data in background (Just like the hinting of search keywords in google). The .get() method will post the search keyword as querystring at ProcessOrgName.aspx, which returns the list of such existing records from the database.
Everyting works fine here, but the problems I am facing are:
Keypress() event invokes search like, if I am searching for
stackoverflow it will query for stackoverflo where w is missing. So, is there any way to get accurate result.
When I search for a keyword it is displays fine, but when I press backspace
to clear my textbox, it will still display the same results untill I
press backspace 2 times more after the textbox is already clear. So,
can u guys please give any idea to make it so that it does not
display the result in case I press backspace.
Any other way to display and hide the div named orgNameHints as show(); and hide(); does not work in my case, and I want it to be more accurate!
There will be some instances when the user will copy-paste the keywords instead of typing, so it should get search results in that case as well.
Any help is really appreciated.
This could be a result of when you are capturing the text; keypress/keyup/keydown. I think you might want to run this script on keyup() event. Refer to http://www.bloggingdeveloper.com/post/KeyPress-KeyDown-KeyUp-The-Difference-Between-Javascript-Key-Events.aspx for more information on this.
Refer to 1
Why does show/hide not work? Alternatively, you could use fadeIn/fadeOut or $("elem").css({display:none})
For pasting (CTL+V), I believe that is on a keydown() event, if (e.keyCode == 86) //86 is Paste event. As far as a mouse paste, I am not sure..couldn't find any good info on this.
Here is a starter block of code for you, with a fiddle link below.
$(document).ready(function(){
function DoWork(){
$("#searchOutput").append("<li>" + $("#tb1").val() + "</li>");
}
$("#tb1").keyup(DoWork);
$("#tb1").keydown(function(e){
if(e.keyCode == 86){
DoWork();
}
});
});
http://jsfiddle.net/TNCodeMonkey/CnDGw/3/
Best of luck!
I have two logical groups of input fields I need to validate separately using JQuery Validation however since I am using ASP.Net WebForms I'm restricted to having just one form tag on the page.
I've implemented validation groups even though I have one form using the following technique from Dave Ward's blog post. This works perfectly.
To bind the validation event to the ASP.Net form looks as follows:
$("#aspnetForm").validate({
onsubmit: false,
ignore: ":hidden",
errorClass: 'dynamic-class'
});
I need to take this further by having a different errorClass value based on whether I am trying to submit (and validate) Form A or Form B. E.g. "Form A" would have "error-class-a" and "Form B" would have "error-class-B". I actually want to do this with other validation settings such as errorPlacement and errorElement but I've tried to keep this explanation simple.
Is there a way I can inject this behaviour without having to hack away at the JQuery Validation plugin source code?
I started by adding validation groups (as per Dave Ward's blog post) so I had two logical groups. After a VERY long look into the JQuery Validate documentation and source code I narrowed the investigation down to a single function: showErrors(). This gets called each time before any error is potentially displayed whether it is on the form submission event or a blur event of one of the elements. By changing the settings accordingly this ensures the correct display settings are always used for the right element.
In the code below one validation group is set to display errors in a UL list summary and the other inline and with a different css class. I've extended the showErrors() function to dynamically switch the error settings based on which validation group the element that has an error is contained in. You could probably take this further and bind the settings to the validation container to avoid the clunky IF statement, but I've used the simple version below as it better illustrates the solution. Finally I call the defaultShowErrors() which as one would expect calls the default function in the validate framework.
$("#aspForm").validate({
onsubmit: false,
// This prevents validation from running on every
// form submission by default.
// Extend the show errors function
showErrors: function (errorMap, errorList) {
// here we get the element linked to the error.
// we then find out which validation group the element in question
// belongs to and set the correct properties
if (errorList[0]) {
var element = errorList[0].element;
// at the time of calling we configure the settings for the validate form
if ($(element).parents('.validationGroup').attr("id") == "signup") {
this.settings.errorClass = "errorSignUp";
this.settings.errorContainer = $("*[id$='uivalidation']");
this.settings.errorLabelContainer = $("*[id$='uivalidation'] ul");
this.settings.errorElement = "li";
} else {
// these are the defaults
this.settings.errorClass = "error";
this.settings.errorContainer = $([]);
this.settings.errorLabelContainer = $([]);
this.settings.errorElement = "label";
}
}
// call the default show errors function after we have hooked up the correct settings
this.defaultShowErrors();
}
});
This does exactly what I was looking for since it means I do not have to make any changes to the validate framework. This is demonstrated in the full working example below where I am using a CDN for JQuery and JQuery.Validate!
Full Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Multiple Form Validation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<style type="text/css">
*
{
font-family: Verdana;
font-size: 96%;
}
label
{
width: 10em;
float: left;
}
label.errorLogin
{
float: none;
color: blue;
padding-left: .5em;
vertical-align: top;
}
label.error
{
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
}
p
{
clear: both;
}
.submit
{
margin-left: 12em;
}
em
{
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
</style>
<script type="text/javascript">
$(function () {
$("#aspForm").validate({
onsubmit: false,
// This prevents validation from running on every
// form submission by default.
// Extend the show errors function
showErrors: function (errorMap, errorList) {
// here we get the element linked to the error.
// we then find out which validation group the element in question
// belongs to and set the correct properties
if (errorList[0]) {
var element = errorList[0].element;
// at the time of calling we configure the settings for the validate form
if ($(element).parents('.validationGroup').attr("id") == "signup") {
this.settings.errorClass = "errorSignUp";
this.settings.errorContainer = $("*[id$='uivalidation']");
this.settings.errorLabelContainer = $("*[id$='uivalidation'] ul");
this.settings.errorElement = "li";
} else {
// these are the defaults
this.settings.errorClass = "error";
this.settings.errorContainer = $([]);
this.settings.errorLabelContainer = $([]);
this.settings.errorElement = "label";
}
}
// call the default show errors function after we have hooked up the correct settings
this.defaultShowErrors();
}
});
// Search for controls marked with the causesValidation flag
// that are contained anywhere within elements marked as
// validationGroups, and wire their click event up.
$('.validationGroup .login').click(ValidateAndSubmit);
$('.validationGroup .signup').click(ValidateAndSubmit);
// Select any input[type=text] elements within a validation group
// and attach keydown handlers to all of them.
$('.validationGroup :text').keydown(function (evt) {
// Only execute validation if the key pressed was enter.
if (evt.keyCode == 13) {
ValidateAndSubmit(evt);
}
});
});
function ValidateAndSubmit(evt) {
// Ascend from the button that triggered this click event
// until we find a container element flagged with
// .validationGroup and store a reference to that element.
var $group = $(evt.currentTarget).parents('.validationGroup');
var isValid = true;
// Descending from that .validationGroup element, find any input
// elements within it, iterate over them, and run validation on
// each of them.
$group.find(':input').each(function (i, item) {
if (!$(item).valid())
isValid = false;
});
// If any fields failed validation, prevent the button's click
// event from triggering form submission.
if (!isValid)
evt.preventDefault();
}
</script>
</head>
<body>
<form id="aspForm" runat="server">
<fieldset class="validationGroup" id="login">
<div id="uivalidation">
<ul></ul>
</div>
<legend>Register</legend>
<p>
<asp:Label ID="uiFirstName" runat="server" AssociatedControlID="uxFirstName" Text="First name:"></asp:Label>
<asp:TextBox ID="uxFirstName" runat="server" CssClass="required"></asp:TextBox>
</p>
<p>
<asp:Button ID="uxRegister" runat="server" Text="Register" CssClass="login" />
</p>
</fieldset>
<fieldset class="validationGroup" id="signup">
<legend>Login</legend>
<p>
<asp:Label ID="uiUserName" runat="server" AssociatedControlID="uxUserName" Text="User name:"></asp:Label>
<asp:TextBox ID="uxUserName" runat="server" CssClass="required"></asp:TextBox>
</p>
<p>
<asp:Button ID="uxLogin" runat="server" Text="Login" CssClass="signup" />
</p>
</fieldset>
</form>
</body>
</html>
If this could be further improved please jump in and edit the code.