I have the below code, which is also contained in this fiddle.
<div id="box"><div>click in the box</div></div>
<p>Click a name</p>
<ul>
<li id="id-1">tom</li>
<li id="id-2">jerry</li>
</ul>
<div id="result"></div>
<script>
var id;
var person;
jQuery(document).on("click", "li", function (event) {
id = jQuery(this).attr('id') || '';
person = jQuery(this).text();
$("#box").show();
});
$(function () {
$("#box").click(function (e) {
var d = new Date();
$( "#result" ).append( "<div class='item'>" + person + " last clicked the box at " + d + "</div>");
});
});
</script>
Currently you click on a persons name, then when you click on the box it appends the persons name and the time you clicked on the box.
Instead of having this happen repeatedly I want to append the person if they haven't been clicked before and if they have I want to update there latest item with the last time they clicked the box.
I am really stuck with how I would go about doing this, something like if blank append else update? What is the best way to handle something like this?
You could store the last click date as a data parameter on the item itself. Then you can easily tell if it has or has not been clicked. Try this:
$(document).on("click", "li", function (event) {
$(this).data('clickdate', new Date());
$("#box").show();
});
$("#box").click(function (e) {
var $box = $(this).empty();
$('li').each(function(i, el) {
var clickDate = $li.data('clickdate');
var $item = $('<p />', {
text: $(el).text() + ' : ' + (clickDate || 'Not clicked')
});
$box.append($item);
});
});
Example fiddle
As you can see in the fiddle, this shows all li elements, even if they have not been clicked. If required, you can remove the unclicked ones by appending the append line to:
clickDate && $box.append($div);
var cache = {},person,id;
jQuery(document).on("click", "li", function (event) {
id = jQuery(this).attr('id') || '';
$(this).data('appended' , true);
person = jQuery(this).text();
cache[person] = true;
$("#box").show();
});
$(function () {
$("#box").click(function (e) {
var d = new Date();
if( cache[person] ){
//update
}else{
$( "#result" ).append( "<div class='item'>" + person + " last clicked the box at " + d + "</div>");
}
});
});
I wish this code above can help you
Try
$(function () {
$("#box").click(function (e) {
var d = new Date();
var $div = $('#result .item[data-id="' + id + '"]');
if ($div.length == 0) {
$div = $('<div/>', {
"class": 'item',
"data-id": id
}).appendTo('#result');
}
$div.html(person + ' last clicked the box at ' + d);
});
});
Demo: Fiddle
I might have done it slightly different using a class attribute to mark the clicked item: http://jsfiddle.net/arunpjohny/CDCLF/2/
Related
How to change mouseenter and mouseleave to working with click?
I have images and on click show another inside.
How to fix mouseleave, here is code in Javascript:
$("div.mitarbeiterfoto")
.mouseenter(function() {
var id = $(this).attr("id");
var idInfo = $(this).attr("id").substr(5);
($(this).find('img').css('display', 'none'));
($('#' + id + '_o').css('display', 'block'));
showInfo(idInfo);
})
.mouseleave(function() {
var id = $(this).attr("id");
var idInfo = $(this).attr("id").substr(5);
($(this).find('img').css('display', 'block'));
($('#' + id + '_o').css('display', 'none'));
hideInfo(idInfo);
});
Please i need help!
Assigning events like this would work
$('.mitarbeiterfoto').on('mouseenter', function () {
var id = $(this).attr("id");
var idInfo = $(this).attr("id").substr(5);
($(this).find('img').css('display', 'none'));
($('#' + id + '_o').css('display', 'block'));
showInfo(idInfo);
});
$('.mitarbeiterfoto').on('mouseleave', function () {
var id = $(this).attr("id");
var idInfo = $(this).attr("id").substr(5);
($(this).find('img').css('display', 'block'));
($('#' + id + '_o').css('display', 'none'));
hideInfo(idInfo);
});
$('.mitarbeiterfoto').on('click', function () {
//click
});
On our Offices page if you click the dots on the map it opens a div below and changes the sidebar contents. We added a dropdown so you could select cities on mobiles. Since I recreated the website and copied over the code I've done something and it doesn't work anymore.
I know the problem has something to do with this bit of code
$('#continent').change(function() {
$('.targetDiv').hide();
$('#worldwide').hide();
var target = $("select option:selected").attr('target');
var value = $("select option:selected").attr('value');
console.log($('#' + value));
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#div' + target).show();
if (value == "worldwide") {
$('.slidingDiv').slideUp();
}
});
Here is the full code
jQuery(function($) {
$(".dot").show();
$('.dot').click(function() {
$(".slidingDiv").slideDown('slow');
});
$('#continent').change(function() {
$(".slidingDiv").slideDown('slow');
});
});
jQuery(function($) {
$('#showSingle').click(function() {
$('.targetDiv').show();
});
$('.dot').click(function() {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
var value = $(this).attr('city');
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#' + value).show();
$('#continent').val(value);
});
$('#continent').change(function() {
$('.targetDiv').hide();
$('#worldwide').hide();
var target = $("select option:selected").attr('target');
var value = $("select option:selected").attr('value');
console.log($('#' + value));
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#div' + target).show();
if (value == "worldwide") {
$('.slidingDiv').slideUp();
}
});
});
I'm sure this is something simple for someone who knows Javascript.
Thanks.
There you go:
$('#continent').change(function() {
$('.targetDiv').hide();
$('#worldwide').hide();
var target = $("#continent").find(":selected").attr('target');
var value = $("#continent").val();
console.log($('#' + value));
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#div' + target).show();
if (value == "worldwide") {
$('.slidingDiv').slideUp();
}
});
Should work, but it's very ugly code i guess :P
I want that user to see an alert whenever he doesn't enter proper Google address (or select from suggestion box) on dynamically added text areas. How can I perform that?
I have tried the following code.
I want that when I add new divs at runtime the auto-complete method should apply on that input field and when the user clicks submit button without selecting any suggested address it should display an alert.
Please help me where am I wrong in my code?
function updateNames() {
var rows = $(".clonedInput");
var index = 0;
rows.each(function () {
var inputFields = $(this).find("input");
inputFields.each(function () {
var currentName = $(this).attr("name");
$(this).removeClass("hasDatepicker");
$(this).removeClass("hasTimepicker");
$(this).attr("name", currentName.replace(/\[(.*?)\]/, '[' + index + ']'));
});
var textareaFields = $(this).find("textarea");
textareaFields.each(function () {
var currName = $(this).attr("name");
$(this).attr("name", currName.replace(/\[(.*?)\]/, '[' + index + ']'));
var places = new google.maps.places.Autocomplete(currName);
var a = places.getPlace();
if (a == null) {
alert('Please Select a valid location');
}
else { }
var currId = $(this).attr("id");
$(this).attr("id", currId.replace(/\[(.*?)\]/, '[' + index + ']'));
});
var numberSpan = $(this).find("span.taskNumber");
numberSpan.html(index + 1);
index++;
});
}
I have the below code.
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
elem = $(this);
part = $(this).attr("data-part-name");
//alert(part);
selected_options = "";
$('.' + part).each(function () {
if ($(this).is(":checked")) {
selected_options += $(this).attr("data-option-name") + ' <b>,</b> '
}
});
$("#part_child_" + elem.attr("data-part-id")).html(selected_options);
});
});
If you see I am adding a "comma" to selected options.
Now problem is it adds comma even after the last element.
How can I remove the last comma
.map() will a perfect fit for this. Also you can filter the checked items using :checked and filter
$(document).ready(function () {
$('input[type="checkbox"]').click(function () {
var elem = $(this);
var part = $(this).attr("data-part-name");
//alert(part);
var selected_options = $('.' + part).filter(':checked').map(function () {
return '<b>' + $(this).attr("data-option-name") + '</b>'
}).get();
$("#part_child_" + elem.attr("data-part-id")).html(selected_options.join(', '));
});
});
You can use the index of iteration to compare with length of parts element and do the decision whether a comma needs to be added or not.Modify the code to:
var totalparts=$('.' + part).length;
$('.' + part).each(function (i) {
if ($(this).is(":checked")) {
selected_options += $(this).attr("data-option-name") + totalparts!=(i+1) ?' <b>,</b> ':'';
}});
Just remove last , substring from the string,
if(selected_options.length > 0){
selected_options = selected_options.slice(0,-1)
}
$("#part_child_" + elem.attr("data-part-id")).html(selected_options);
replace this line
$("#part_child_" + elem.attr("data-part-id")).html(selected_options.replace(/[\<\>\,b\/\s]+$/,''));
This is my all script, I know this is long, but just one line is important and I add all it for insurance:
//Add new Addable div
$('.AddNewE').click(function () {
var RemoveAddableButton = $('<input type="button" class="RemoveE button red" value="remove" />');
$(RemoveAddableButton).click(function () {
$(this).closest('.Addable').remove();
});
var TargetId = $(this).attr('id');
TargetId = TargetId.substring(3);
var Target = $('.Addable#' + TargetId + ':first');
var Count = $('.Addable#' + TargetId).size();
var CloneTarget = $(Target).clone();
CloneTarget.find('input').val('');
CloneTarget.insertAfter('.Addable#' + TargetId + ':last'); // ***importantOne
var TargetName = $(Target).find('input').attr('name');
if (Count == 1) {
var CloneName = TargetName + '[1]';
TargetName = TargetName + '[0]';
$(Target).find('input').attr('name', TargetName);
$(Target).find('span[class*="field-validation"]').attr('data-valmsg-for', TargetName);
$(CloneTarget).find('input').attr('name', CloneName);
$(CloneTarget).append($(RemoveAddableButton));
if ($(CloneTarget).find('span[class*="field-validation"]').size() > 0) {
$(CloneTarget).find('span[class*="field-validation"]').remove();
$(CloneTarget).append(
$('<span class="field-validation-valid invalid-side-note" data-valmsg-replace="true" data-valmsg-for="' + CloneName + '"></span>')
);
}
} else {
var indx = TargetName.length - 3;
var CloneTargetName = TargetName.substring(0, indx);
CloneTargetName = CloneTargetName + '[' + Count + ']';
$(CloneTarget).find('input').attr('name', CloneTargetName);
$(CloneTarget).append($(RemoveAddableButton));
if ($(CloneTarget).find('span[class*="field-validation"]').size() > 0) {
$(CloneTarget).find('span[class*="field-validation"]').remove();
$(CloneTarget).append(
$('<span class="field-validation-valid invalid-side-note" data-valmsg-replace="true" data-valmsg-for="' + CloneTargetName + '"></span>')
);
}
}
(function ($) {
$.fn.updateValidation = function () {
var form = this.closest("form").removeData("validator").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(form);
return this;
};
})(jQuery);
$(Target).updateValidation();
$(CloneTarget).updateValidation();
});
If I click the .AddNewE button then a new div added, but as my script I want to add this new div to the end of the divs so I use
CloneTarget.insertAfter('.Addable#' + TargetId + ':last');
but always the new div added as a second div it means always the :first and :last div is same and is first one also I checked by:
$('.Addable#' + TargetId).css('border', '');
$('.Addable#' + TargetId + ':last').css('border', '3px dotted green');
$('.Addable#' + TargetId + ':first').css('border', '3px dotted red');
So where is the problem? why the jQuery can't recognize last div ?
The problem is in the jQuery selector: $('.Addable#' + TargetId + ':last')
It is not valid HTML when you have multiple elements with the same id (#TargetId). ID is unique and you're not supposed to have more than 1 element with the same ID.
The jQuery selector assumes you use valid correct HTML markups, so it doesn't bother to collect all your elements with that ID. As soon as jQuery found the first element in the DOM with that ID, it stops and appends your new element right after that.
Try updating your jQuery selectors to simply: $('.Addable:first') and $('.Addable:last') and see if it works.