We Keep Coding

Gridstack: Dragging widget from one grid into another, nested one

I am trying to create this behavior and not sure whether Gridstack supports it or not. I have 3 Gridstack grids: Grid1, Grid2, and Grid3. Grid1 is a standalone grid and Grid3 is nested inside Grid2. I need to be able to drag widgets from Grid1 both into Grid2 (outer grid) and into Grid3 (nested grid). Following samples I was able to drag widgets between 2 top level grids and create a nested grid, but not combining these 2 together. If this is supported - any pointers are appreciated.
NB: Expand the snippet to full screen
$(document).ready(function() {
$('.grid-stack').gridstack();
});
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
.grid-stack .grid-stack {
/*margin: 0 -10px;*/
background: rgba(255, 255, 255, 0.3);
}
.grid-stack .grid-stack .grid-stack-item-content {
background: lightpink;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.js'></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.jQueryUI.min.js'></script>
<div class="container-fluid">
<h1> Multilevel Nested grids demo</h1>
<div class="grid-stack" id="container-stack">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="4">
<div class="grid-stack-item-content">
<span>Grid One</span>
<div class="grid-stack" id="grid-one">
<div class="grid-stack-item widget" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1">
<div class="grid-stack-item-content">1</div>
</div>
<div class="grid-stack-item widget" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1">
<div class="grid-stack-item-content">2</div>
</div>
</div>
</div>
</div>
<div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="8" data-gs-height="4">
<div class="grid-stack-item-content">
<span>Grid Two</span>
<div class="grid-stack" id="grid-two">
<div class="grid-stack-item widget" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1">
<div class="grid-stack-item-content">3</div>
</div>
<div class="grid-stack-item widget" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1">
<div class="grid-stack-item-content">4</div>
</div>
<div class="grid-stack-item" data-gs-x="6" data-gs-y="0" data-gs-width="6" data-gs-height="3">
<div class="grid-stack-item-content">
<span>Grid Three</span>
<div class="grid-stack" id="grid-three">
<div class="grid-stack-item widget" data-gs-x="0" data-gs-y="0" data-gs-width="6" data-gs-height="1">
<div class="grid-stack-item-content">5</div>
</div>
<div class="grid-stack-item widget" data-gs-x="6" data-gs-y="0" data-gs-width="6" data-gs-height="1">
<div class="grid-stack-item-content">6</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Following samples I was able to drag widgets between 2 top level grids and create a nested grid, but not combining these 2 together. If this is supported
Sad but true, that's not possible. At least, not with gridstack.
The key behind this dragging mechanism is accomplished by the acceptWidgets option. But this can't handle multilevel .grid-stack element. Hence, error appears.
You can try to modify the script added in the snippet to something like this:
$("#container-stack").gridstack({
acceptWidgets: '.grid-stack-item'
})
But sadly, this will cause error once you start dragging any widget. But it works with single level nesting, which is not definitely what you are looking for.
The documentation also does not indicate anything at all regarding the nested level dragging.
But the reason I am assuming this isn't possible is this issue, also this one.
I guess this is (almost) exactly what you wanted. but there is no response from any officials. Also, it's three years old. Another flaw that indicates this project is dying is when you try to access some of their files such as the script, you get a security warning, which prevented me to add this snippet for a while.
Therefore, if I were you I would go for jqueryUI and custom code this.
Update
Here is a snippet of something similar to what you expected I guess, let me know if this is right, then I will improve this once again, like adding resizing, snap to sibling widgets and a few more things:
Once again, check the snippet in fullscreen mode.
$("#gridThree").draggable({
snap: '#gridTwo',
snapMode: 'inner',
zIndex: 5,
containment: 'parent'
});
$(".widgetInOne, .widgetInTwo, .widgetInThree").draggable({
snap: '#gridOne, #gridTwo, #gridThree',
snapMode: 'inner',
zIndex: false,
stack: 'div',
cursor: 'grab',
// grid: [ 100, 100 ]
});
$("#gridOne, #gridTwo, #gridThree").droppable({
accept: '.widgetInOne, .widgetInTwo, .widgetInThree',
drop: function(event, ui) {
if ($(event.target).find($(event.toElement)).length == 0) {
$(event.toElement).css({
'left': '',
top: ''
});
$(event.target).append($(event.toElement));
}
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#gridOne {
background: #cecece;
width: 40%;
height: 400px;
display: inline-block;
margin-right: 4%;
vertical-align: top;
}
.widgetInOne,
.widgetInTwo,
.widgetInThree {
width: 100px;
height: 100px;
padding: 0.5em;
}
#gridTwo {
background: #bfe9f3;
width: 50%;
height: 400px;
display: inline-block;
margin-left: 4%;
vertical-align: top;
position: relative;
}
#gridThree {
background: #ffdda9;
width: 300px;
height: 300px;
display: inline-block;
vertical-align: top;
position: absolute;
right: 100px;
top: 0;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="gridOne">
<div class="ui-widget-content widgetInOne">
<p>One</p>
</div>
</div>
<div id="gridTwo">
<div class="ui-widget-content widgetInTwo">
<p>Two</p>
</div>
<div id="gridThree">
<div class="ui-widget-content widgetInThree">
<p>Three</p>
</div>
</div>
</div>
A Few Notable things here:
When you drag a widget into a grid, the widget element actually moves in that grid (in the DOM structure), so any parent dependent css selector might not work here. only apply css with the widget class.
For now the widgets only snaps to the grid inner edges (not to the outer side of other widgets), to find more check: here I couldn't find any other option but to use // grid: [ 100, 100 ] for this one.
Resizable option is not added here yet, hope you can tweak it as you need

This is code from an old drag/drop fiddle I composed (an age ago!), with areas that are both draggable and droppable. The items that can be pulled across to either of the droppable areas can be dragged again from one area to another and dragged up and down. While the items are not sized the same as are in your example, it goes to show that the same user experience can be achieved by using simply jquery/jquery-ui without sticking to gridstack. You may save yourself some laborious hours by working outside the grid! ;)
Hope this helps
fiddle
$("#launchPad").height($(window).height() - 20);
var dropSpace = $(window).width() - $("#launchPad").width();
$("#dropZone").width(dropSpace - 70);
$("#dropZone").height($("#launchPad").height());
$(".card").draggable({
appendTo: "#launchPad",
cursor: "move",
helper: 'clone',
revert: "invalid",
});
$("#launchPad").droppable({
tolerance: "intersect",
accept: ".card",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$("#launchPad").append($(ui.draggable));
}
});
$(".stackDrop1").droppable({
tolerance: "intersect",
accept: ".card",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
$(".stackDrop2").droppable({
tolerance: "intersect",
accept: ".card",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
body {
margin: 0;
}
#launchPad {
width: 200px;
float: left;
border: 1px solid #eaeaea;
background-color: #f5f5f5;
}
#dropZone {
float: right;
border: 1px solid #eaeaea;
background-color: #ffffcc;
}
.card {
width: 150px;
padding: 5px 10px;
margin: 5px;
border: 1px solid #ccc;
background-color: #eaeaea;
}
.stack {
width: 180px;
border: 1px solid #ccc;
background-color: #f5f5f5;
margin: 20px;
}
.stackHdr {
background-color: #eaeaea;
border: 1px solid #fff;
padding: 5px
}
.stackDrop1,
.stackDrop2 {
min-height: 100px;
padding: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div id="launchPad">
<div class="card draggable">
apple
</div>
<div class="card draggable">
orange
</div>
<div class="card draggable">
banana
</div>
<div class="card draggable">
car
</div>
<div class="card draggable">
bus
</div>
</div>
<div id="dropZone">
<div class="stack">
<div class="stackHdr">
Drop here
</div>
<div class="stackDrop1 droppable">
</div>
</div>
<div class="stack">
<div class="stackHdr">
Or here
</div>
<div class="stackDrop2 droppable">
</div>
</div>
</div>

I create fork which solves the problem of nested grids.

Javascript Drag and Drop Hover Temporary Div Placeholder similar to Trello?

I have a basic drag and drop trello-like kanban board. You can drag tasks between different grey boxes. It uses HTML drag and drop API found here https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API.
var dropTarget = document.querySelector(".drop-target");
var draggables = document.querySelectorAll(".drag-task");
// Tells the other side what data is being passed (e.g. the ID is targeted)
draggables.forEach(item => {
item.addEventListener("dragstart", function(ev){
ev.dataTransfer.setData("srcId", ev.target.id);
});
})
// The end destination, prevent browsers default drag and drop (disabling breaks feature)
// because it's disabled by browsers by default
dropTarget.addEventListener('dragover', function(ev) {
ev.preventDefault();
});
// End destination where item is dropped into
dropTarget.addEventListener('drop', function(ev) {
ev.preventDefault();
let target = ev.target;
let droppable = target.classList.contains('drag-box');
let srcId = ev.dataTransfer.getData("srcId");
if (droppable) {
ev.target.appendChild(document.getElementById(srcId));
}
});
/***********DRAGGABLE BACKGROUND ****************/
.drag-box {
background-color: lightgray;
float: right;
width: 120px;
min-height: 50px;
padding-bottom: 30px;
height: auto;
margin: 30px;
}
.drag-task {
background-color: white;
margin: 15px;
}
.drop-active {
border: 1px dashed red;
}
<div class="drop-target">
<div class="drag-box">
<div class="drag-card">
<div draggable="true" id="task1" class="drag-task">Test Card 1</div>
</div>
<div class="drag-card">
<div draggable="true" id="task2" class="drag-task">Test Card 2</div>
</div>
<div class="drag-card">
<div draggable="true" id="task3" class="drag-task">Test Card 3</div>
</div>
</div>
<div class="drag-box">
</div>
<div class="drag-box">
</div>
</div>
What I want to do to achieve is an effect similar to this gif found here. This creates another <div> element on the same level as drag-card class on a draghover effect, and repositions itself accordingly.
I know I have to use dragover and dragleave event listeners but that's as far as I got. I added this code at the end of the file. I have never used drag event listeners so this is new to me.
var makeHoverElement= true;
dropTarget.addEventListener("dragover", function(ev){
if(makeHoverElement){
let newNode =document.createElement('div');
newNode.className ='drop-active'
ev.target.parentElement.prepend(newNode);
makeHoverElement = false;
}
});
dropTarget.addEventListener("dragleave", function(ev){
// really I have no idea how to make this effect
});
Results so far have not turned out as I expected. Dragover is applying to element where the task item originated from

The problem is in ev.target.parentElement.prepend(newNode);
Your ev.target is still a child of the node you are dragging it from. That's why the dotted border div gets added to the 'old' box. I suggest that in your 'dragover' function you explicitly find the element the mouse is over and add your newNode to it. For example, you can select it by document.querySelector(":hover" ) or try to handle 'mouseover' events there.
As for the 'dragleave' effect, I suggest you clone your ev.target with Node.cloneNode() method and append the clone to the ev.target.parentElement using Node.insertBefore().
MDN on .insertBefore()

Using jquery and jquery UI, I did something quite like this a while ago. I didn't create a "make new card" function, I began with a "launchpad" and created two droppable areas that cards could be appended to and switched between - similar to what you have. Using "intersect" as I remember was a tipping point to getting it to work as I wanted - being able to move elements up and down the list (so they don't necessarily move back to where they originated). Perhaps it could be a starting point for you?
Here's the fiddle (the jquery is old.. recommend updating to newer versions)
Hope this helps.
EDIT: I made a couple of small tweaks to your code to add an outline and change the cursor on move. According to a comment on another question, adding a border is the most efficient way to create the visual 'outline' effect. There is a longer way to create the 'sortable' effect which is demoed in this codepen I found, and explained simply, the function is based around calculating hover position and if the dragged element is half-way over an item in the list, the effect displays and the item can be dropped in between list items.
Hope this is clear enough!
// Tells the other side what data is being passed (e.g. the ID is targeted)
var dropTarget = document.querySelector(".drop-target");
var draggables = document.querySelectorAll(".drag-task");
// Tells the other side what data is being passed (e.g. the ID is targeted)
draggables.forEach(item => {
item.addEventListener("dragstart", function(ev) {
ev.dataTransfer.setData("srcId", ev.target.id);
});
})
// The end destination, prevent browsers default drag and drop (disabling breaks feature)
// because it's disabled by browsers by default
dropTarget.addEventListener('dragover', function(ev) {
ev.preventDefault();
});
// End destination where item is dropped into
dropTarget.addEventListener('drop', function(ev) {
ev.preventDefault();
let target = ev.target;
let droppable = target.classList.contains('drag-box');
let srcId = ev.dataTransfer.getData("srcId");
if (droppable) {
ev.target.appendChild(document.getElementById(srcId));
}
});
.drag-box {
background-color: lightgray;
float: left;
width: 120px;
min-height: 80px; /*lengthened the height slightly*/
padding-bottom: 30px;
height: auto;
margin: 30px;
cursor: move; /*added the 'cross' cursor*/
}
.drag-task {
background-color: white;
margin: 10px;
padding: 5px; /*added padding to make tiles bigger*/
border:1px dashed #000000; /*set an outline*/
}
.drop-active {
border: 1px dashed red;
cursor: pointer; /*change the pointer back to the default cursor while moving between lists*/
}
<div class="drop-target">
<div class="drag-box">
<div class="drag-card">
<div draggable="true" id="task1" class="drag-task">Test Card 1</div>
</div>
<div class="drag-card">
<div draggable="true" id="task2" class="drag-task">Test Card 2</div>
</div>
<div class="drag-card">
<div draggable="true" id="task3" class="drag-task">Test Card 3</div>
</div>
</div>
<!-- added tiles to the 2nd list (and deleted 3rd box)-->
<div class="drag-box">
<div class="drag-card">
<div draggable="true" id="orange" class="drag-task">Orange</div>
</div>
<div class="drag-card">
<div draggable="true" id="apple" class="drag-task">Apple</div>
</div>
<div class="drag-card">
<div draggable="true" id="pear" class="drag-task">Pear</div>
</div>
</div>
$("#launchPad").height($(window).height() - 20);
var dropSpace = $(window).width() - $("#launchPad").width();
$("#dropZone").width(dropSpace - 70);
$("#dropZone").height($("#launchPad").height());
$(".card").draggable({
appendTo: "#launchPad",
cursor: "move",
helper: 'clone',
revert: "invalid",
});
$("#launchPad").droppable({
tolerance: "intersect",
accept: ".card",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$("#launchPad").append($(ui.draggable));
}
});
$(".stackDrop").droppable({
tolerance: "intersect",
accept: ".card",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
body {
margin: 0;
background-color: #ffffcc;
}
#launchPad {
width:170px;
float:left;
border: 1px solid #eaeaea;
background-color: #f5f5f5;
}
#dropZone {
float:right;
border: 1px solid #eaeaea;
background-color: #ffffcc;
}
.card {
width: 130px;
padding: 5px 10px;
margin:5px;
border:1px solid #ccc;
background-color: #eaeaea;
}
.stack {
display:inline-block;
vertical-align:top;
width: 180px;
border: 1px solid #ccc;
background-color: #f5f5f5;
margin: 20px;
}
.stackHdr {
background-color: #eaeaea;
border: 1px solid #fff;
padding: 5px
}
.stackDrop {
min-height:100px;
padding: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="launchPad">
<div class="card draggable" >
apple
</div>
<div class="card draggable">
orange
</div>
<div class="card draggable">
banana
</div>
<div class="card draggable">
car
</div>
<div class="card draggable">
bus
</div>
</div>
<div id="dropZone">
<div class="stack">
<div class="stackHdr">
Drop here
</div>
<div class="stackDrop droppable">
</div>
</div>
<div class="stack">
<div class="stackHdr">
Or here
</div>
<div class="stackDrop droppable">
</div>
</div>
</div>

remove class in jquery function

The issue I am having is if I click on the checkout button right after clicking the remove button it would still change the color of the box eventhough I already have the $(".blueClass").removeClass('classOne'); on the jquery function. What I am trying to accomplish is that when I click on remove, the said box should not change its color when I click checkout unless I click the box again. The complete source code is on the link below.
$( document ).ready(function() {
$(".boxes" ).click(function() {
$(this).addClass('classOne');
});
$(".btn-primary").click(function(){
$(".classOne").addClass('blueClass');
$(".classOne").append("<div class='wraps'><br><strong>Ordered</strong>");
$(".classOne").append("<br><button type='button' class='btn btn-info'>Remove</button></div>");
$(".blueClass").removeClass('classOne');
$(".btn-info").click(function(){
$(this).parent().removeClass('blueClass classOne').empty('');
});
});
});
.leftbox{
min-height: 100%;
}
.rightbox{
min-height: 100%;
}
.boxes{
border: 1px solid black;
border-radius: 10px;
min-height: 9em;
float: left;
margin: 1em 1em 1em 1em;
width: 100%;
}
.wrapper{
padding-top: 1em;
}
.btn-holder{
margin-top: 3em;
}
.redClass{
background-color: red;
}
.greenClass{
background-color: green;
}
.yellowClass{
background-color: yellow;
}
.blueClass{
background-color: blue;
}
.rightbox input{
width:50%;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" col-md-3 text-center">
Item 11
<div class="boxes text-center">
</div>
</div>
<div class=" col-md-3 text-center">
Item 12
<div class="boxes text-center">
</div>
</div>
</div>
<button type="button" class="btn btn-primary">Checkout</button>

When a .btn-info is clicked, the event bubbles to the .boxes element, then triggering the listener adding .classOne again :
$(".boxes" ).click(function() {
$(this).addClass('classOne');
})
You want to stop this bubbling, by simply adding event.stopPropagation in the .btn-info click listener :
$(".btn-info").click(function(e){
e.stopPropagation();
$(this).parent()
.removeClass('blueClass classOne')
.empty('');
});
And, by the way, adding the listener to the document outside the .btn-primary click callback as #Ankit Agarwal states is a better design, because you will add only one listener one time, not every time the checkout button is clicked.
EDIT
A more proper solution I think, if you don't want to stop your event propagation, which could cause you trouble if for example you want to listen for some "general clicks" on the whole document, you can check the event.target in the .boxes callback, and remove the event.stopPropagation part in the .btn-info callback :
$(".boxes").click(function(e) {
if(event.target === this)
$(this).addClass('classOne');
});
$(".btn-info").click(function(){
$(this).parent()
.removeClass('blueClass classOne')
.empty('');
});

Since btn-info button is added dynamically you need to assign click event to that button using the reference of document object. Changing that click function will fix your issue:
$( document ).ready(function() {
$(".boxes" ).click(function() {
$(this).addClass('classOne');
});
$(".btn-primary").click(function(){
$(".classOne").addClass('blueClass');
$(".classOne").append("<div class='wraps'><br><strong>Ordered</strong>");
$(".classOne").append("<br><button type='button' class='btn btn-info'>Remove</button></div>");
$(".blueClass").removeClass('classOne');
});
$(document).on("click",".btn-info",function(e){
$(this).parent().removeClass('blueClass classOne').empty('');
});
});
.leftbox{
min-height: 100%;
}
.rightbox{
min-height: 100%;
}
.boxes{
border: 1px solid black;
border-radius: 10px;
min-height: 9em;
float: left;
margin: 1em 1em 1em 1em;
width: 100%;
}
.wrapper{
padding-top: 1em;
}
.btn-holder{
margin-top: 3em;
}
.redClass{
background-color: red;
}
.greenClass{
background-color: green;
}
.yellowClass{
background-color: yellow;
}
.blueClass{
background-color: blue;
}
.rightbox input{
width:50%;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" col-md-3 text-center">
Item 11
<div class="boxes text-center">
</div>
</div>
<div class=" col-md-3 text-center">
Item 12
<div class="boxes text-center">
</div>
</div>
<button type="button" class="btn btn-primary">Checkout</button>

Make fields editable when a button is clicked

the user of my application should be able to change the email and the phone number by clicking in a button "Change", this is my code:
<div class="field-group">
...............
....................
<div class="field field-omschrijving">
<label class="label">E-mailadres</label><div>#client.email</div>
</div>
<div class="field field-omschrijving field-last">
<label class="label">Telefoonnummer</label><div>#client.phoneNumber</div>
</div>
<input type="submit" class="form-submit" value="Change" name="op">
</div><!-- /.field-group -->
I've been looking for a solution but no success, any idea about how can I do it? Thanks!
Thanks so much for the fast response! But.. my mistake, what I wanted to say is that the fields should appear in a "normal way" and when the user clicks the button change it should change to an "editable way", right now the field email looks like this:!
I want it looks like this:
And after clicking in the "Change" button it has to look like the first image. Thanks again!

Using this code after click you can change your label to input, as in you pictures.
It will help you now, hope
$( ".button_class" ).click(function() {
$('.class_Of_label_email').replaceWith($('<input>' + $('.class_Of_label_email').innerHTML + '</input>'));
});
Here is an example:
<div class="container">
<div class="first">Hello</div>
<div class="second">And</div>
<div class="third">Goodbye</div>
</div>
$( ".container" ).click(function() {
$( "div.second" ).replaceWith( "<h2>New heading</h2>" );
}
Result is:
<div class="container">
<div class="inner first">Hello</div>
<h2>New heading</h2>
<div class="inner third">Goodbye</div>
</div>
Hope, it will help

Give id to button and input fields for email and ph no.
On click of button, hide the lebel and show input fields.
<div class="field-group">
<div class="field field-omschrijving">
<label class="label">E-mailadres</label>
<div id="divemail">#client.email</div>
<div id="divemailinput"><input type="text" id="emailId"/></div>
</div>
<div class="field field-omschrijving field-last">
<label class="label">Telefoonnummer</label>
<div id="divno">#client.phoneNumber</div>
<div id="divnoinput"><input type="text" id="emailId"/></div>
</div>
<input id="btnchange" type="submit" class="form-submit" value="Change" name="op"/>
</div><!-- /.field-group -->
JS
$("#btnchange").click(function(){
$("#divemail").hide();
$("#divemailinput").hide();
$("#divno").hide();
$("#divnoinput").hide();
});

For the first you need is put your
#client.emailand #client.phoneNumber into inputs and set them inactive.
Then, and after clicking change them to active by using javascript.
<input type="text" class="emailand_clas" readonly="readonly" >#client.emailand </input>
and using jquery:
$( ".button_class" ).click(function() {
$('.emailand_clas').attr('readonly','')
});
Some thing like this

Look at this JSFiddle or my blog for a great example.
http://jsfiddle.net/biniama/YDcFF/
<!DOCTYPE html>
<head>
<title>jQuery enable/disable button</title>
<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
<script type='text/javascript'>
$(function(){
$('#submitBtn').click(function(){
$('.enableOnInput').prop('disabled', false);
$('#submitBtn').val('Update');
});
});
</script>
<style type='text/css'>
/* Lets use a Google Web Font :) */
#import url(http://fonts.googleapis.com/css?family=Finger+Paint);
/* Basic CSS for positioning etc */
body {
font-family: 'Finger Paint', cursive;
background-image: url('bg.jpg');
}
#frame {
width: 700px;
margin: auto;
margin-top: 125px;
border: solid 1px #CCC;
/* SOME CSS3 DIV SHADOW */
-webkit-box-shadow: 0px 0px 10px #CCC;
-moz-box-shadow: 0px 0px 10px #CCC;
box-shadow: 0px 0px 10px #CCC;
/* CSS3 ROUNDED CORNERS */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background-color: #FFF;
}
#searchInput {
height: 30px;
line-height: 30px;
padding: 3px;
width: 300px;
}
#submitBtn {
height: 40px;
line-height: 40px;
width: 120px;
text-align: center;
}
#frame h1 {
text-align: center;
}
#frame div {
text-align: center;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id='frame'>
<div class='search'>
<h1>jQuery Enable and Disable button</h1>
<input type='text' name='searchQuery' id='searchInput' class='enableOnInput' disabled='disabled'/>
<input type='submit' name='submit' id='submitBtn' value='Edit'/>
</div>
</div>
</body>
</html>

Now HTML5 is available so .
We can use attribute
contenteditable
More help and details
http://html5doctor.com/the-contenteditable-attribute/

<label class="label">E-mailadres</label>
<input type="text" class='email' value='#client.email' />
document.getElementsByClassName('form-submit').onclick=function(){
document.getElementsByClassName('email').disabled=false;
};

Rendering two div in a div horizantally

I have a parent div having two child divs which are in horizantal ,Now I want to add other div such that the pagination should come.
Here is the code.
<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>
Here, If i add other div to 'parent',It will append at last,but should not be shown and pagination should come.
Using floats, I am making the div's horizantal.I have to show only two div's,After that pagination should come.

This is just a DEMO:
HTML:
<div id="parent">
<div id="wrapper">
<div id="left">window 1</div>
<div id="right">window 2</div>
</div>
</div>
<div id="paginator"><span id="prev">Previous</span><span id="next">Next</span></div>
CSS:
#parent {
width: 850px;
overflow: hidden;
padding: 10px;
height: 320px;
border: 1px solid #f00
}
#wrapper div {
width: 400px;
border: 1px solid #ccc;
height: 300px;
display:inline-block;
margin: 10px
}
#paginator {
margin: 10px;
display: block
}
#paginator span {
width: 30px;
padding: 5px;
margin: 10px;
background: #1f1f1f;
color: #fff;
}
JQUERY:
$(function() {
$('#next').click(function() {
$('#wrapper').append($('<div>window 3</div><div>window 4</div>')); // you can add div using other way
$('#wrapper').animate({
marginLeft: '-=860px'
},
500, 'linear');
});
$('#prev').click(function() {
$('#wrapper').animate({
marginLeft: '+=860px'
},
500, 'linear');
});
});

Not sure I understand your question, but I'll give it a shot...
<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>
<div style="clear:both"></div>
<div id="pagination"></div>
... is this what you mean to do?