I need to select all td's within my table with a drag event. What I am trying to achieve is to create a date range based on my first selected td, until the last selected td, but they can span over multiple rows.
At the moment, I am using nextUntil() with andSelf() to include the last selected, but it only selects td's within the current tr.
Below is a sample of my code.
Any help please.
this.BindCalendarMouseDrag = function () {
var isMouseDown = false;
var isHighlighted;
var selectedDays = [];
$(".tabCalendarContainer tr.trCalWeek td")
.mousedown(function () {
isMouseDown = true;
$(this).addClass("highlighted");
isHighlighted = $(this).hasClass("highlighted");
selectedDays.push($(this));
return false; // prevent text selection
})
.mouseover(function () {
if (isMouseDown) {
$(this).addClass("highlighted", isHighlighted);
var firstSelectedDay = selectedDays[0];
firstSelectedDay.nextUntil($(this)).andSelf().add($(this)).addClass("highlighted", isHighlighted);
selectedDays.push($(this));
}
})
.bind("selectstart", function () {
return false;
});
$(document).mouseup(function () {
isMouseDown = false;
//alert(selectedDays.length);
});
};
I took the liberty of constructing a jsFiddle that illustrates a calendar with draggable weekdays. It doesn't cater for BACKWARDS dragging yet, but you should be able to easily adjust the code to accommodate it.
You can access it here.
Related
I need an idea and maybe a solution to get the date from the <td>s which are selected by mouse.
Heres my code, to select (until now its only a function to change the class) the TD:
$(function () {
var isMouseDown = false,
isHighlighted;
$("#schichtplan td")
.mousedown(function () {
isMouseDown = true;
$(this).toggleClass("highlight");
isHighlighted = $(this).hasClass("highlight");
return false; // prevent text selection
})
.mouseover(function () {
if (isMouseDown) {
$(this).toggleClass("highlight", isHighlighted);
}
});
$(document)
.mouseup(function () {
isMouseDown = false;
});
});
A screenshot from the calendar:
Screenshot
This is, how the days are displayed:
echo "<td class=\"td kal_standard_tag\"> - </td>";
The "-" is displayed, because at this day is no entry for this user.
Maybe I could add something like this and read it out with jQuery?
timestamp=\"".$timestamp_tag."\"
My target: After selecting the days, the user has to use rightclick and a Dialog shows up where the user can add some informations and save it to a database.
But I dont know how to get the selected days... :(
Does anyone have an idea and maybe a solution for that?
The best practice to do such things is to add a data attribute. So you would add a timestamp or datestamp as you said. E.g.: <td data-timestamp="1231232131"> and then get it with jQuery in an event with $(this).data('timestamp').
I am trying to show the values based on Checkbox check and uncheck
I have got two checkboxes MNC and Worth (Only the Top Ones), i am trying to show or hide the values based on it (pesent under class pack-panel div)
This is my code
$(document).on('change', '.filtermnc', function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.mnccheckbox').prop('checked')
$(this).toggle(visible);
});
});
$(document).on('change', '.filterworth', function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.worthcheckbox').prop('checked')
$(this).toggle(visible);
});
});
When i tried with this code , it is not working and also it is checking all the correspondng checkboxes
Could you please let me know how to achieve this .
http://jsfiddle.net/F8Vk2/121/
I made for one, but it's just a mater of changing the other one likewise:
$(document).on('change', '.filterworth, .filtermnc', function() {
var $this = $(this),
isChecked = $this.is(':checked'),
$packPanel = $('.pack-panel');
isChecked ? $packPanel.show() : $packPanel.hide()
});
You could use this to get the target of the event and verify if it's checked by .is(':checked'). Also, you don't need to iterate over $('.pack-panel') in order to apply your changes. .toggle() will change the visibility by it's previous one, so I think you should hard code to hide or show the panels.
Change your js to
$(document).on('change', '.filtermnc', function() {
var visible = $(this).prop('checked')
if(visible)
$('.mnccheckbox').closest("li").show();
else
$('.mnccheckbox').closest("li").hide();
});
$(document).on('change', '.filterworth', function() {
var visible = $(this).prop('checked')
if(visible)
$('.worthcheckbox').closest("li").show();
else
$('.worthcheckbox').closest("li").hide();
});
http://jsfiddle.net/F8Vk2/123/
You could try ->
$(document).on('change', '.filtermnc', function() {
$('.mnccheckbox').
closest("li").
toggle($(this).prop('checked'));
});
This is basically finding all with .mccheckbox class, and then toggling based on the property of the checkbox you assigned the event too.
I have this code for clone/copy a tr element from a modal to a page.
$(function () {
$('#toggleCheckbox').on('click', function () {
var $toggle = $(this).is(':checked');
$("input:checkbox").attr('checked', $toggle);
$('#btnAplicarNorma').prop('disabled', !$toggle);
});
$('#resultadoNormaBody').on('change', 'input[type=checkbox]', function () {
var $my_checkbox = $(this);
var $my_tr = $my_checkbox.closest('tr');
if ($my_checkbox.prop('checked')) {
$my_tr.addClass('copyMe');
}
var $all_checkboxes = $my_checkbox.closest('tbody').find('input[type=checkbox]');
$all_checkboxes.each(function () {
if ($(this).prop('checked')) {
$('#btnAplicarNorma').prop('disabled', false);
return false;
}
$('#btnAplicarNorma').prop('disabled', true);
});
});
$('button#btnAplicarNorma').on('click', function (ev) {
var $tr_to_append = $('#resultadoNormaBody').find('tr.copyMe');
$('#tablaNorma').removeAttr('style');
$('#alertSinNorma').hide();
if ($tr_to_append.length) {
$tr_to_append.find('input[type=checkbox]').prop('checked', false);
$tr_to_append.clone().appendTo('#normaBody').removeClass('copyMe');
$tr_to_append.removeClass('copyMe');
$(this).prop('disabled', true);
}
});
});
But I'm having some issues:
If I mark all checkboxes using the first on the table head then I the code stop working and doesn't clone any tr even if all of them are marked
How do I avoid to clone/copy the same tr twice?
It's possible to modify the checkbox before clone it? If you take a look at the example you'll notice how the clone tr copy exactly as the one on the modal and I want to uncheck the checkbox first, it's possible?
Here is a fiddle to play with, any advice?
The main problem is that your checkboxes inside the table do not really get properly triggered when you programmatically set them selected. To make sure all associated Events get properly triggered you should be triggering a .click() event instead:
$("#resultadoNormaBody").find("input:checkbox").click();
to ensure that you don't end up with duplicate clones the easiest thing is to not clone all the rows in one batch, but iterate thru them, and comparing the html to the ones that have already been added like this:
//fetch all the rows that have already been cloned
var clonedRows = $("#normaBody").find("tr");
//iterate thru all the rows that have been checked
$.each($tr_to_append, function (i, v) {
var added = false;
//fetch their html (for easier compare)
var currentRowHtml = $(v).html();
//now compare against the rows that have already been cloned
$.each(clonedRows, function (i, cRow) {
var clonedRowHtml = $(cRow).html();
if (currentRowHtml == clonedRowHtml) {
added = true;
}
});
//if the row hasn't been added yet- go ahead and clone it now
if (!added) {
$(v).clone().appendTo('#normaBody').removeClass('copyMe');
}
});
Here's a link to your updated fiddle:
http://jsfiddle.net/wq51zL9x/4/
Here is some more info on comparing table rows: Compare two tables rows and remove if match
and here's the more elaborate answer to using .click()
Need checkbox change event to respond to change of checked state done programmatically
I have 2 issues here. Clicking an input on a row should check the row's checkbox. Currently, only the first text input will check the checkbox because of .prev(). Is there a different way to do this? All inputs for that row should check that row's checkbox.
// check checkbox for clicked row
$('table').on('click', 'input[type=text]', function () {
$(this).closest('td').prev().find('input').prop('checked', true);
});
Also, the second block of code isn't working as it should. If you focus on a different row, if the text inputs from the previous (or any) row are blank - remove the checkbox. The checkbox will be a save, and there is no point of saving blank text inputs.
// remove check in inputs are empty for that row
$('input[type=text]').blur(function () {
$('table tr').each(function () {
if ($(this).find('input[type=text]:empty').length()) {
$('td').find('input').prop('checked', false);
}
});
})
http://jsfiddle.net/Ldge5qzn/
Find the closest tr instead and then find the inputs that are checkboxes and set the checked property
$(this).closest('tr').find('input[type=checkbox]').prop('checked', true);
For the second part, the :empty selector tests against the element having child elements not against empty values so that has to also be modified. Loop through each rows text inputs set a flag if any of them are not empty. Set checkbox accordingly
$('table tr').each(function () {
var emptyRow = true;
$(this).find("input[type=text]").each(function(){
if($(this).val().length > 0) {
emptyRow = false;
}
});
if (emptyRow) {
$(this).find('input[type=checkbox]').prop('checked', false);
}
});
JSFiddle Demo
You can do it by checking the closest tr - then finding the checkbox in that tr
$('table').on('click', 'input[type=text]', function () {
$(this).closest('tr').find('input[type=checkbox]').prop('checked', true);
});
Same thing with the second problem - check using the closest tr
Then you can use filter to get all the text inputs with values
Then check the length to see if there are any inputs returned - and set the checked property accordingly using .prop('checked',function()
$('input[type=text]').blur(function () {
var $tr = $(this).closest('tr'); // get closest tr
// get all of input[type=text] with value in that row
var inputsWithValue = $tr.find('input[type=text]').filter(function () {
return $.trim(this.value).length;
});
// set the checked to true if any element has value - else set checked to false
$tr.find('input[type=checkbox]').prop('checked', function () {
return inputsWithValue.length;
}).length;
});
FIDDLE
have a look at this .Hope this helps ...
$('table').on('click', 'input[type=text]', function () {
$(this).closest('td').parent('tr').find('input[type="checkbox"]').prop('checked', true);
});
full code below :-
JSFiddle
I've been at this problem for a while now, and I can't seem to figure it out. I have a checkbox that when checked, deletes a div containing a textbox. When that checkbox is unchecked the aforementioned textbox should return to the page. The removal works, but the append doesn't.
This is what I'm currently working with code wise:
$('#ResultsNoData1').click(function () {
var parent = document.getElementById('Results1').parentNode;
var child = document.getElementById('Results1');
if (this.checked) {
parent.removeChild(child);
}
else {
parent.appendChild(child);
}
});
My original design worked by doing the following:
$('#ResultsNoData1').click(function () {
(this.checked) ? $('.results1').hide() : $('.results1').show();
});
However the functionality I need to recreate is actually removing the data from this textbox from being accessed on the site while hiding the textbox itself at the same time. This doesn't provide that functionality.
Current example
Here you go: http://jsfiddle.net/cx96g/5/
Your issue is that you were trying to set parent inside your click, but once child is removed it would fail.
var parent = document.getElementById('Results1').parentNode;
var child = document.getElementById('Results1');
$('#ResultsNoData1').click(function () {
if (this.checked) {
node = parent.removeChild(child);
}
else {
parent.appendChild(child);
}
});
You need to show and hide that TextBox not remove.
$('#ResultsNoData1').click(function () {
if (this.checked) {
$("#Results1").hide();
}
else {
$("#Results1").show();
}
});
Working example
$('#ResultsNoData1').click(function () {
(this.checked) ? $('#Results1').val('').parent().hide() : $('#Results1').parent().show();
(this.checked) ? $('.results1casual').hide() : $('.results1casual').show();
});
JSFiddle
You are doing it right way but missing one small thing need to remove value from the textbox.
$('#ResultsNoData1').click(function () {
(this.checked) ? $('.results1').hide() : $('.results1').show().val("");
});
or
$('#ResultsNoData1').click(function () {
(this.checked) ? $('.results1').hide().val("") : $('.results1').show();
});
And this is the right way(show/hide) the textarea.