I am implementing an inline edit kind of functionality.
So initially a date label (say 05/01/1999) will be displayed and on click of it, it would be replaced with an input box with the same value (05/01/1999). Now user can select any date using the jQuery UI date picker and on select of any date (say 05/01/2005), I would again show a label (05/01/2005)
Currently I am using the below code;
$(document).on("click",".editableDateTxt", function () {
var currElmModelAttr = $(this).attr('data-model-attr');
var input = $('<input />', {'type': 'text','name':currElmModelAttr, 'style':'width:100px','class':'datePicker', 'value': $(this).html()});
var parent = $(this).parent();
parent.append(input);
$(this).remove();
input.datepicker().focus();
});
What is the best way to implement the same?
Now here is the crucial point: I am using jQuery UI datepicker, which uses the jQuery data() internally. So I do not want to loose it while jumping from div > input and vice versa.
How can I modify the above code to consider that the jQuery data() info stays?
Updated code
var MyView = BaseModalView.extend({
el: "#myModalContainer",
initialize: function() {
var self = this;
},
render: function() {
var self = this,
$el = $(self.el);
$el.find(".datePicker").datepicker();
self.initEventListeners();
},
initEventListeners: function() {
var self = this,
$el = $(self.el);
var $this;
$(document).on("click", ".editableDateTxt", function () {
var currElmModelId = $(this).attr('data-model-id');
var currElmModelAttr = $(this).attr('data-model-attr');
$this = $(this);
var input = $('<input />', {
'type': 'text',
'name': currElmModelAttr,
'data-model-id': currElmModelId,
'data-model-attr': currElmModelAttr,
'style': 'width:100px',
'class': 'datePicker',
'value': $(this).text()
});
$(this).replaceWith(input);
input.datepicker({
onSelect: function (date) {
$this.text(date);
input.replaceWith($this);
// input.blur();
}
}).focus();
$(document).on("blur change", "input", function () {
setTimeout(function () {
var value = input.val();
$this.text(value);
input.replaceWith($this);
}, 100);
});
});
}
You can do that better swapping with replaceWith()
$(document).on("click", ".editableDateTxt", function () {
var currElmModelAttr = $(this).attr('data-model-attr');
var $this = $(this);
var input = $('<input />', {
'type': 'text',
'name': currElmModelAttr,
'style': 'width:100px',
'class': 'datePicker',
'value': $(this).text()
});
$(this).replaceWith(input);
input.datepicker({
onSelect: function (date) {
$this.text(date);
input.replaceWith($this);
console.log(date);
}
})
});
Updated Demo
Also, I suggest, you hide/show the elements, which would be better in this case, instead of creating and swapping elements every time.
Here is a simpler version, as suggested by #Shaunak D, using the basic hide() and show().
^_^ jsfiddle sample
Html code:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div id="lbl"></div>
<input type='text' id="date-picker" />
Js codes:
$('#lbl').html('2014-01-01');
$('#date-picker').hide();
$('#date-picker').datepicker({
onSelect: function(date) {
$('#lbl').html(date);
$(this).hide();
$('#lbl').show();
}
});
$('#lbl').click(function(){
//alert();
$(this).hide();
$('#date-picker').show();
});
The best way to do this is to use a readonly input field with the date picker. Is there any reason behind using the div and replacing with input field?
Related
I have the following on click method on an Element:
$('.searchInputContainer a.dnnSearchBoxClearText').on('click', function () {
var $this = $(this);
var $wrap = $this.parent();
$('.searchInputContainer input').val('').focus();
$this.removeClass('dnnShow');
$('.searchSkinObjectPreview', $wrap).remove();
return false;
});
But after initializing the menuzord element, the on click method isn't working anymore.
jQuery(document).ready(function () {
jQuery("#menuzord").menuzord({
align: "left",
indicatorFirstLevel: "<span class='hide-on-desktop hide-on-tablet'> <i class='fa bw-ico-arrow-small-down' aria-hidden='true'></i></span>",
indicatorSecondLevel: "<i class='bw-ico-arrow-small-down hide-on-mobile' aria-hidden='true'></i><i class='bw-ico-arrow-small-down hide-on-desktop hide-on-tablet' aria-hidden='true'></i>"
});
});
Does anyone know what this can be due to? Or maybe Menuzord overwrites the event?
After using the selector in the JQuery "on" method, it worked:
$('.searchInputContainer').on('click', 'a.dnnSearchBoxClearText', function () {
var $this = $(this);
var $wrap = $this.parent();
$('.searchInputContainer input').val('').focus();
$this.removeClass('dnnShow');
$('.searchSkinObjectPreview', $wrap).remove();
return false;
});
But I don't understand the different. Would be nice if someone can explain it to me.
When i click on a <span>, the span changes to an input field
$('table td').on('click', 'span', function() {
var $el = $(this);
var $input = $('<input/>').val($el.text()).attr('class', 'form-control');
$el.replaceWith($input);
var save = function() {
var $p = $ ('<span>').text( $input.val() );
$input.replaceWith($p);
};
$input.one('blur', save).focus();
});
$('input').on('change', function() {
var target = $(this);
$.ajax({
url: 'url',
data: {
value: target.val(),
ruleId: target.data('rule'),
date: target.data('date')
},
type: 'POST',
success: function(data) {
console.log('updated');
}
});
});
After it, i need to catch when the input changes
But it does not trigger the $('input').on('change', function() { function anymore...
Can you try to use this instead
$(document).on('change','input',function(){
// your code here
}
Hope the helps
bind event to document and not to element will solve your problem.
$(document).on('change', '.item', function(event) {
refer jQuery doc
How do I get the id of the ".item" element from inside the getJSON function?
jQuery(document).ready(function() {
$(".item").tooltip({
items: "div",
content: function(callback) {
$.getJSON('mydata.json', function(data) {
var country = event.target.id;
console.log(country);
});
}
});
});
I've seen an explanation here, but I'm not sure how to pass the event(s) in my case.
In your content callback, this refers to the element whose tooltip is being invoked, so you could use this.id to get the id of the current element
jQuery(function ($) {
$(".item").tooltip({
items: "div",
content: function (callback) {
var el = this;
$.getJSON('mydata.json', function (data) {
var country = el.id;
console.log(country);
});
}
});
});
This is how I would do it
jQuery(document).ready(function() {
$(".item").tooltip({
items: "div",
content: function(callback, this) {
var $obj = $(this);
$.getJSON('mydata.json', function(data, $obj) {
var country = event.target.id;
console.log(country);
console.log($obj.attr("id"));
});
}
});
});
Try to use the
$(this)
to access the current element, then you can access its ID by using
$(this).attr('id')
See http://jqueryui.com/tooltip/#custom-content
I want to, when I double click the card the dialog pop up. Then it is possible to create dynamic checkBoxes. When creating the checkBoxes it is possible to edit the text, of each CheckBoxes. The problem comes if I have eg. created 3 checkboxes and want to edit one of them, all the others checkboxes get the same name as the one I want to edit. You can see the problem in the image below:
Jquery:
function addCheckbox(name, status) {
status = status || false;
var container = $('#divboxs');
var inputs = container.find('input');
var id = inputs.length + 1;
var data = {
status: status,
name: name
};
var div = $('<div />', { class: 'allcheckbox' });
$('<input />', {
type: 'checkbox',
id: 'cb' + id,
value: name
}).prop('checked', status).on('change', function () {
data.status = $(this).prop('checked');
}).appendTo(div); /* set checkbox status and monitor changes */
$('<label />', {
'for': 'cb' + id,
text: name
}).appendTo(div);
var $editCheckBox = $('<p />', {
class: 'editCheckBox',
text: 'Edit'
}).appendTo(div);
div.appendTo(container);
container.data('checkboxes').push(data);
}
$('#divboxs').on('click', '.editCheckBox', function () {
var text = $(this).parents(".allcheckbox").find("label").text();
var input = $('<input id="attribute" value="' + text + '" />')
$('.allcheckbox').text('').append(input);
input.select();
input.blur(function () {
var text = $('#attribute').val();
$('#attribute').parent().text(text);
$('#attribute').remove();
});
});
});
I think this is the part of the code that gives me problems:
var input = $('<input id="attribute" value="' + text + '" />')
I think I should use the ID of CheckBox: id: 'cb' + id, instead of id="attribute". How to insert the id of checkBox at this place ?
Live Demo
Ok. So there are a few issues with your code.
The first being. You append the newly created input to all "allcheckbox" class elements
$('.allcheckbox').text('').append(input);
The second issue, is in that same line you are emptying that entire DIV. Which will create issues once you want to update the input and label with the new value.
So rather hide any elements you would not want to display, once the blur event is called, remove the new input, update the values then show the elements you previously hide.
Find an updated fiddle below:
http://jsfiddle.net/62QY8/122/
Also, on a bit of a side note. "class" is a JavaScript reserved word. So rather use "classname". ie.
var $editCheckBox = $('<p />', {
classname: 'editCheckBox',
text: 'Edit'
}).appendTo(div);
I am not so sure what exactly is being done here.
But if the idea is to edit on checkbox at a time then please chek the following fiddle
http://jsfiddle.net/62QY8/121/
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
var cnt = 0,
$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id", "div" + cnt);
$newDiv.data('checkboxes', []);
$('#userAddedCard').append($newDiv);
// alert($('#userAddedCard').find("div.sortable-div").length);
});
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('.allcheckbox').remove(); // Remove checkboxes
$('#modalDialog').data('checkboxes', []); /* Reset dialog checkbox data */
/* Add checkboxes from card data */
$.each($currentTarget.data('checkboxes'), function (i, checkbox) {
addCheckbox(checkbox.name, checkbox.status);
});
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center'
});
return false;
});
$("#Getbtn").on("click", function () {
$currentTarget.data('checkboxes', $('#modalDialog').data('checkboxes'));
/* Copy checkbox data to card */
$('#modalDialog').dialog("close");
});
// Add a new checkBox
$('#btnSaveCheckBox').click(function () {
addCheckbox($('#checkBoxName').val());
$('#checkBoxName').val("");
});
function addCheckbox(name, status) {
status = status || false;
var container = $('#divboxs');
var inputs = container.find('input');
var id = inputs.length + 1;
var data = {
status: status,
name: name
};
var div = $('<div />', { class: 'allcheckbox' ,id: 'div_'+ id });
$('<input />', {
type: 'checkbox',
id: 'cb' + id,
value: name
}).prop('checked', status).on('change', function () {
data.status = $(this).prop('checked');
}).appendTo(div); /* set checkbox status and monitor changes */
$('<label />', {
'for': 'cb' + id,
'div': 'div_' + id,
text: name
}).appendTo(div);
var $editCheckBox = $('<p />', {
class: 'editCheckBox',
text: 'Edit'
}).appendTo(div);
div.appendTo(container);
container.data('checkboxes').push(data);
}
$('#divboxs').on('click', '.editCheckBox', function () {
var text = $(this).parents(".allcheckbox").find("label").text();
var id=$(this).parents(".allcheckbox").find("label").attr('div');
var input = $('<input id="attribute" value="' + text + '" />');
$('#'+id).html('').append(input);
input.select();
input.blur(function () {
var text = $('#attribute').val();
$('#attribute').parent().text(text);
$('#attribute').remove();
});
});
});
Here is my code. Please help me
$(document).ready(function(){
$(document).delegate(".view","click",function(){
var id = $(this).attr("id");
alert(id);
$("#"+id).popover({
html : true,
content: function() {
return $("#"+id+"tt").html();
},
title: function() {
return $('#popoverTitle').html();
}
});
alert("thisa");
});
});
Try replacing the function .delegate() by .on(), this function has been superseded in the last versions of Jquery.
jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
jQuery 1.7+
$( elements ).on( events, selector, data, handler );
The code would be:
$(document).ready(function(){
$(document).on("click",".view",function(){
var id = $(this).attr("id");
alert(id);
$("#"+id).popover({
html : true,
content: function() {
return $("#"+id+"tt").html();
},
title: function() {
return $('#popoverTitle').html();
}
});
alert("thisa");
});
});
Try doing this way..
$('.view')
.popover({trigger: 'manual'})
.click(function() {
if($(this).hasClass('pop')) {
$(this)
.popover('hide')
.removeClass('pop');
} else {
var id = $(this).attr("id");
var title = $('#popoverTitle').html();
var response = $("#"+id+"tt").html();
$(this)
.attr({'title': title, 'data-content': response})
.popover('show')
.addClass('pop');
}
});