Adding New Div In Editable Mode - javascript

I have following JsFiddle for editing a Div, now I some how want too add a div which in edit mode by default.
When i click on Add New div,new div is added and then it can be edited by clicking Edit .
But i was wondering is there a way when i click on ADD New Div the div should be by default in Edit mode. Is there any way i can achieve it.
Following is Js Fiddle
Thanks For Help :)

Change your function as follows:
$("#add").click(function () {
$('#accordion').prepend($("#appendpanel").clone().removeAttr('id').find('.panel-title, .panel-collapse').attr('contenteditable',true).css('border','2px solid'));
});
check this JSFiddle
Updated Fiddle as per comments
Note:
There are other neat ways for doing what you want.
You can simply keep a hidden editable div, add its clone and make it visible..
Or create a function that dynamically adds the mark up you need..
Side notes: Please avoid using inline-css, here is why: Why Use CSS # MDN
for changing style attributes jQuery has a dedicatedcss() function
You don't need two $(document).ready() functions

Not a one-liner, but does the job ;)
$("#add").click(function () {
var clone = $("#appendpanel").clone().removeAttr('id');
$('#accordion').prepend(clone);
// trigger a click event on the button, which makes the required div's content-editable
clone.find("#edit1").trigger("click");
});
Updated fiddle
Updated:
Use this code in $('#accordion').on('click', '.delete-link', function () {
var children = $(".panel");
// get those not hidden
children = children.filter(
function(index){
return children.eq(index).css("display") !== "none";
}
).length;
if(children === 1){ // the only child left is "Add new div"
$("#message").show(500);
}
And this in $("#add").click(function () {
$("#message").hide(500);
Updated fiddle

Related

Why is my element.classList.add working but toggle is not working?

I need to add/remove a class upon button click. For some reason, classList.toggle will not work but classList.add works fine.
document.querySelectorAll('.view-now').forEach( function (){
this.addEventListener('click', function(e) {
const property = e.target.closest('.property');
property.classList.toggle('expand');
});
});
Could you please change the this in the forEach since its referring to the document context instead of the specific a tag. In the original code, the page was listening for a click on the entire page, which was causing the issue you were facing.
/**** Your JS Here ****/
//define DOM element
//this makes whatver you click dissappear both boxes
document.querySelectorAll(".view-now").forEach(function(item) {
item.addEventListener("click", function(e) {
const property = e.target.closest(".property");
property.classList.toggle("expand");
});
});
Codepen

Problems onclick function on child button

I am trying to create a table, made with buttons, that allow me to get into a Geological Time Chart. I create 4 buttons with class "levels" and then I execute a function that return the childs from an API.
The point is that the function works the first time, but then it stop working for the new created buttons. Here is my code:
$(".levels").click(function clickLevel(){
var buttonName = $(this).text();
console.log($(this).text());
$.each(JsonObject, function(index,value){
if (buttonName == value.nam){
lvloid = value.oid;
console.log(lvloid);
}
if(lvloid == value.pid){
console.log(lvloid == value.pid);
var button = "<button class=\"btn-flat levels\" style=\"background-color:"+value.col+";\">"+value.nam+"</button>";
$(".conti").append(button);
}
});
});
I guess the problem is that I am creating the class within the function, but I don't find any other solution (I tried to declare the function and then call it in the .click event, but this don't even work!).
Thank you to all of you!!
Instead of :
$(".levels").click()
Use
$(document).on('click', '.levels', function(){
});
The reason behind this is, $(".levels").click() searches in the static dom, and you are generating the button dynamically. For dynamic content $(document).on() is used.
Use
$(".levels").on('click', function(){
});
instead of
$(".levels").click(function clickLevel(){
});

Toggling if a condition is met on table elements

I have a table. Each column has a button at the top. If the td elements below within the column have content in them, then hide the button. If not then display the button and onClick add class active too the td element.
$(document).ready(function (){
$('.button-fill').on("click", function() {
var i=$(this).parent().index();
if($(this).closest("tr").siblings().find("td:eq("+i+")").text()=="")
$(this).hide();
else
$(this).show();
});
<!-- Fill in the td -->
$('.button-fill').on("click", function() {
var i=$(this).parent().index();
$(this).closest("tr").siblings().find("td:eq("+i+")").addClass("active");
//});
});
});
http://jsfiddle.net/ujw0u6au/
I've created a jsfiddle. I don't know what i'm doing wrong? Thank you
Since you have bind the button toggle logic inside button click - you will always have the button in the starting. When you will click on the button only then it will first hide the button and then make the content active.
In case you want this behavior in the starting as soon as the page loads, you should change below line (the 2nd line in your code) from your code -
$('.button-fill').on("click", function() {
to
$('.button-fill').each( function(i,e) {
also, you should not use <!-- Fill in the td --> style of commenting in JavaScript.
I can see you are having two "click" event handler on same class. Instead of it, you can merge it as well.
Here is the optimized version of your code :
JavaScript :
$(document).ready(function (){
$('.button-fill').on("click", function() { //Only one click event handler
var $this = $(this);
var i=$this.parent().index();
var $trSibling = $this.closest("tr").siblings();
$this.toggle($trSibling.find("td:eq("+i+")").addClass("active").text() != ""); //adds the class as well and check the text as well.
})
$(".button-fill").trigger("click");
// explicitly clicking on button to make sure that initially button should not be shown if column text is not empty
});
JSFiddle link : http://jsfiddle.net/ujw0u6au/1/
Is this the same what you want?
#Vijay has the right answer, but as a side note, you need to change this:
if($(this).closest("tr").siblings().find("td:eq("+i+")").text()=="")
to this
if($(this).closest("tr").siblings().find("td:eq("+i+")").text()!="")
if you want to hide the button when there is content, instead of the other way around (notice the != near the end).

how to add data dynamically in jQuery? [duplicate]

This question already has an answer here:
How to add data dynamically with jQuery?
(1 answer)
Closed 8 years ago.
Can you please tell me how to add data dynamically? I am not able to make same as static.
http://jsfiddle.net/eHded/1537/
Please check this fiddle and open panel it show menu as well as submenu options.
Now I need to make same on button click. I have add button. I want add menu option (which is submenu of Additem in panel) can we do this.
I get the button click event, but that is not working fine.
http://jsfiddle.net/eHded/1538/
$('#add').click(function(){
// alert('e')
$('#tree li').append('<ul><li> <span>jjjj</span><ul>')
var tree = $('#tree').goodtree({'setFocus': $('.focus')});
})
Try this instead:
$('#add').click(function(){
var data = $('#tree li').html();
$('#tree li').html(data+'<ul><li> <span>jjjj</span><ul>')
var tree = $('#tree').goodtree({'setFocus': $('.focus')});
});
JsFiddle
You did not close your <ul> and <li> tag.
Also, you probably don't want to add the new element to every <li> in the tree.
Try the following instead (http://jsfiddle.net/eHded/1541/):
$(function() {
var tree = $('#tree').goodtree({
'setFocus': $('.focus')
});
$('.slider-arrow').click(function() {
var anchor = this;
var removeClass = "show";
var addClass = "hide";
var diff = "+=300";
var arrows = "«";
if ($(anchor).hasClass("hide")) {
diff = "-=300";
removeClass = "hide";
addClass = "show";
arrows = "»";
}
$(".slider-arrow, .panel").animate({
left: diff
}, 700, function() {
// Animation complete.
$(anchor).html(arrows).removeClass(removeClass).addClass(addClass);
});
});
$('#add').click(function() {
$('#tree').children().last().append('<ul><li><span>jjjj</span></li></ul>');
$('.goodtree_toggle').off();
$('#tree').goodtree({
'setFocus': $('.focus')
});
})
});
There also seems to be a problem with the goodtree plugin you are using.
The items only expand every second time you click them.
Ideally the plugin would use event delegation to make sure that the expanding still works even if you change the tree, without having to re-initialize. Since you re-initialize the tree after every insertion, there are multiple event handlers attached to the nodes. So when you have an odd number of nodes inserted, it will toggle the element an even times (since you initialized it in the very beginning when it was empty), giving you no result.
You can fix it by removing all event handlers on the toggle before you re-initialize:
$('.goodtree_toggle').off();
I would really look for a better plugin instead.

Trigger event on specific condition

I have a div that will serve as container to other element, I have buttons that add element to that div.
Please see the demo for a get an idea about it.
So, what I want to do is to check before adding a new element is the div reached a maximum number of elements that I define, let's say 4.
I can check this condition before every add, but I am sure this is not the best way (we learned that if the code contains copy/paste then is not the best solution) Also, this is just a sample, in my case, I have many buttons..
Is there a way to have a listener like this?
$('#container').bind('divFull', function(){
//My code
});
So that I can disable buttons..
First, you have to listen to DOM change event, then you can trigger a custom event based on the number of children
$('#container').bind('DOMSubtreeModified', function(){
if($(this).children().length>=4){
$(this).trigger('divFull');
}
});
then you can bind to your custom divFull event
$('#container').bind('divFull', function(){
alert('container is full');
$('button').prop('disabled',true);
});
a working demo based on your example
I change a bit the #skafandri method because the event DOMSubtreeModified doesn't work on IE < 9 and it's depreciated.
The main change is to create a function which will call the divFull event if their is 4 children in the container.
var checkFull = function() {
if ($container.children().length === 4) {
$container.trigger('divFull');
}
}
$('#button1').click(function(){
$container.append('<div class="element">some text</div>');
checkFull();
});
Here is the demo.

Categories