I am trying to load DIV on button click inside another DIV and on another click it should create a new DIV inside the newly created DIV. Here is my fiddle:http://jsfiddle.net/LzCW5/4/ and my code:
HTML:
Generate
<div id='x0'>
0
</div>
JavaScript:
int level=1;
function nestDiv()
{
document.getElementById('x'+(level-1)).innerHTML="<div id='x"+level+"'>"+level+"</div>";
level++;
if(level==5)
//do somthing
}
I also want to perform some special operation when nesting level reaches 5. I am not so pro at JavaScript. So please tell me how can I achieve this?
In your code you only have to change int to var and call the function as a variable:
var level=1;
nestDiv = function()
{
document.getElementById('x'+(level-1)).innerHTML="<div id='x"+level+"'>"+level+"</div>";
level++;
}
You can see this working here
Here's how to append a div in jQuery:
var newDiv = $("<div id='x"+level+"'>"+level+"</div>");
$('#x'+(level-1)).append(newDiv);
This should replace your document.getElementById... line
My understanding as per your question:
When you click a button, add a div to another div.
Now when the user clicks another button, new div must be added in the previously created new div.
so let's break it down:
$("button").click(function() {
if($("#referenceDivId").children().length == 0) {
// if there are no children initially
$("#referenceDivId").append("<div>New div</div>");
} else if($("#referenceDivId").children().length == 5) {
// do your magic when children divs are 5
}
else {
// if it already had children
$("#referenceDivId").find("div:last").append("<div>New div</div>");
}
});
DEMO
Related
I'm working on this website www.betamaths.eu
When a user had clicked inside one of the divs that have placeholder text and then click a button on the left, I would like the text from that button to append inside the div.
I have this code from another user which appends or prepends text ouside the div (not what I am looking for. You can test it with the lowercase alpha button in the menu on the left of the webpage listed above if you wish to get a better understanding.
<script type="text/javascript">
var No = 0;
var focusedElement;
$(document).ready(function() {
$('#answer_step1').on('click','div',function() {
focusedElement = this;
});
$('#alpha').on('click',function() {
$('#answer_step1').prepend('<div>Test'+No+'</div>');
No++
});
});
If I change the line
$('#answer_step1').append('<div>Test'+No+'</div>');
to
$('#answer_step1').append('Test'+No);
nothing happens. Any help is appreciated. If I can get one of these working, the rest will be easy.
You must have a syntatically error in your code, because I used your same code and was able to accomplish the append();
HTML:
<button id="alpha">
Click
</button>
<div id="answer_step1">
hi
</div>
Javascript:
var No = 0;
var focusedElement;
$(document).ready(function() {
$('#answer_step1').on('click','div',function() {
focusedElement = this;
});
$('#alpha').on('click',function() {
$('#answer_step1').prepend('Test' + No);
No++
});
});
https://jsfiddle.net/typtzr7z/
Objective
What method to use to make item 3 move to another container.
Then if click again return the item to previous position
this function should be apply to all items.
Jquery
$('#item3').click(function(){
// What method to use to make item_1 move to another container.
// Then if click again return the item to previous position
});
Check DEMO
HTML
<div id="start">
<div class="element">one</div>
<div class="element">two</div>
<div class="element">three</div>
</div>
<div id="target"></div>
jQuery
$('.element').click(function() {
var cont = $(this).parent().attr('id');
if (cont == 'start') {
var place = '#target';
} else {
var place = '#start';
}
$(place).append($(this));
});
you can use drag and drop plugin of jquery UI.
if you cont want use this then you can try this code by onClick finction....
.JS
function onclickIteam(iteamId){
var x = if('#iteamId').html();
if(if('#iteamId').parent().prop("id") == "my_inventory"){
//$('#iteamId').detach();
$('#server_inventory').append(x);
}else{
//$('#iteamId').detach();
$('#my_inventory').append(x);
}
`}`
In my view file i have two div, in div1 there is some buttons, when i click a button in div1 it goes to div2 and in div2 it does same thing, this time it goes to div1.
Now my question is when there is several buttons in div2, how can i take all the button's id in an array. I want to pass this array in a hidden field of another model.
i tried in following way but it does not working.This is my scripting code.
function movebutton(elem){
var teamMember=[];
if( $(elem).parent().attr("id") == "officers_list" ){
$(elem).detach().appendTo('#add_member');
teamMember.push($(elem).attr("id"));
}
else{
$(elem).detach().appendTo('#officers_list');
teamMember.pop($(elem).attr("id"));
}
$("#TeamTeamMember").val(teamMember);
//console.debug('teamMember=>',teamMember);
}
You can use map function. Code below will return an array of ids.
$("#divId input[type='button']").map(function(index,element) { return element.id; });
Here scope of teamMember is local .so whenever you invoke your function it will create new empty array
Make it global
var teamMember=[];
function movebutton(elem){
if( $(elem).parent().attr("id") == "officers_list" ){
$(elem).detach().appendTo('#add_member');
teamMember.push($(elem).attr("id"));
}
else{
$(elem).detach().appendTo('#officers_list');
teamMember.pop($(elem).attr("id"));
}
$("#TeamTeamMember").val(teamMember);
//console.debug('teamMember=>',teamMember);
}
or You could use $.map() function
var teamMember = $("#add_member").find("button").map(function(){
return this.id;
}).get();
Assuming your 2nd div's id is div2 and your buttons marked up with the input tag, the following should create an array containing all buttons' ids that are in the desired div:
var btns = [];
$('#div2 input[type="button"]').each(function() {//if you are using the <button> markup just use $('div2 button').each(..)
btns.push($(this).attr('id'));
});
Hope this helps.
So I have two divs and inside there gona be some blocks:
<div class="list-block 01">
<span>21#epos.com</span>
<span class="moveSym" id="01">+</span>
</div>
if one clicks on
+
whole block moves to other div.
Everything works but only to move ech block to another div once,
but I need them to go both ways as much as .moveSym clicked.
my JS
//remove block on click
$('.del-block').on('click', function() {
var block = $(this).attr('id');
$('.' + block).remove();
})
//move form list blocks to different fields
$('.leftSide01 .moveSym').click(function() {
console.log($(this).attr('id'));
var id = $(this).attr('id');
$(this).text("-");
$('.leftSide01 .list-block.' + id).appendTo('.rightSide01');
})
$('.rightSide01 .moveSym').click(function() {
console.log($(this).attr('id'));
var id = $(this).attr('id');
$(this).text("+");
$('.rightSide01 .list-block.' + id).appendTo('.leftSide01');
})
I know there are plugins for this, but I really want to write it by myself and learn :)
Fiddle http://jsfiddle.net/A1ex5andr/CRvVK/
Need to use event delegation, because the handler to be executed depends on the parent element.
//move form list blocks to different fields
$('.leftSide01').on('click', '.moveSym', function () {
console.log($(this).attr('id'));
var id = $(this).attr('id');
$(this).text("-");
$('.leftSide01 .list-block.' + id).appendTo('.rightSide01');
})
$('.rightSide01').on('click', '.moveSym', function () {
console.log($(this).attr('id'));
var id = $(this).attr('id');
$(this).text("+");
$('.rightSide01 .list-block.' + id).appendTo('.leftSide01');
})
Demo: Fiddle
You can really simplify this logic into one function that works for both (if there are only ever going to be two divs) . . .
$('.moveSym').click(function() {
console.log($(this).attr('id')); // I just left in, because you had it in the original code :)
var targetParent = $(".rightSide01");
var linkText = "-";
if ($(this).parent(".rigthSide01") > 0) {
linkText = "+";
targetParent = $(".leftSide01");
}
$(this).text(linkText);
$(this).parent().appendTo(targetParent);
});
This code starts out assuming that the block is on the left-hand side . . . it sets up the targetParent value (i.e., where the block will move to) to the right-hand side and the new link text to be "-".
After that, it checks to see if the block is actually on the right-hand side, instead, and, if it is, then it updates the variables with the values needed to move it to the left.
At that point, it updates the text in the "move-sym" span element to the final linkText value, and moves its parent block to the new target div (the targetParent value).
No need to worry about the delegation or event handlers in this one, because the function is the same, regardless of the location, and will travel with the "move-sym" span element, wherever it goes.
The below code works properly, but it is hard coded. I would like to be able to create an array of field sets, hide those fields, then each time I click on the "#createEventForm-eventInformation-addElement" button it displays the next one. The problem with the below code is that it is hard coded and thus would break easily and be much larger than using loops. Can someone help me make this better.
$("#fieldset-group1").hide();
$("#fieldset-group2").hide();
$("#fieldset-group3").hide();
$("#fieldset-group4").hide();
$("#fieldset-group5").hide();
$("#fieldset-group6").hide();
$("#fieldset-group7").hide();
$("#fieldset-group8").hide();
$("#fieldset-group9").hide();
$("#createEventForm-eventInformation-addElement").click(
function() {
ajaxAddEventInformation();
if($("#fieldset-group1").is(":hidden"))
{
$("#fieldset-group1").show();
}
else
{
$("#fieldset-group2").show();
}
}
);
You should use the ^= notation of the jquery selectors which means starting with ..
// this will hide all of your fieldset groups
$('[id^="fieldset-group"]').hide();
Then
$("#createEventForm-eventInformation-addElement").click(
function() {
ajaxAddEventInformation();
// find the visible one (current)
var current = $('[id^="fieldset-group"]:visible');
// find its index
var index = $('[id^="fieldset-group"]').index( current );
// hide the current one
current.hide();
// show the next one
$('[id^="fieldset-group"]').eq(index+1).show();
}
);
A quick idea.
Add a class to each fieldset lets say "hiddenfields". Declare a global variable to keep track of which field is shown.
$(".hiddenfields").hide();//hide all
var num = 0;//none shown
$("#createEventForm-eventInformation-addElement").click(
function() {
ajaxAddEventInformation();
num++;
$("#fieldset-group" + num).show();
}
);
Here is one simple solution.
var index = 0;
var fieldsets = [
$("#fieldset-group1").show(),
$("#fieldset-group2"),
$("#fieldset-group3"),
$("#fieldset-group4"),
$("#fieldset-group5"),
$("#fieldset-group6"),
$("#fieldset-group7"),
$("#fieldset-group8"),
$("#fieldset-group9")
];
$("#createEventForm-eventInformation-addElement").click(function() {
ajaxAddEventInformation();
fieldsets[index++].hide();
if (index < fieldsets.length) {
fieldsets[index].show();
}
else {
index = 0;
fieldsets[index].show();
}
});
Add a class 'fieldset' to all fieldsets, then:
$("#createEventForm-eventInformation-addElement").click(
function() {
ajaxAddEventInformation();
$('.fieldset').is(':visible')
.next().show().end()
.hide();
}
);
This will show the first hidden fieldset element whose ID attribute starts with "fieldset-group"...
$("fieldset[id^='fieldset-group']:hidden:first").show();
How about to add (or only use) a class for that fields?
$(".fieldset").hide(); // hides every element with class fieldset
$("#createEventForm-eventInformation-addElement").click( function() {
ajaxAddEventInformation();
// I assume that all fieldset elements are in one container #parentdiv
// gets the first of all remaining hidden fieldsets and shows it
$('#parentdiv').find('.fieldsset:hidden:first').show();
});