For example, I have a section called students
I allow user to add student dynamically
Each student has the fields Name, Points, & Image
The Name & Points works. The problem comes when I add the Image field
See the attachment above, when I try to select the file from 2nd student, the image value goes to the 1st student.
<label for="student-image-1"> was point to the 1st student
<label for="student-image-2"> was point to the 2nd student
And the id for file input was correct.
NOTE: I'm using jQuery.clone to duplicate the div
Any idea why I choose 2nd input will populate to 1st one?
Source code
$('#student-add-more').click(function(e) {
e.preventDefault();
var count = $('div[id^=student-row-]').length;
var last = $('div[id^=student-row-]').last();
var $clone = last.clone(true);
var next_id = count + 1;
$clone.attr('id', 'student-row-' + next_id);
$clone.find('.image-label')
.attr('for', 'student-image-' + next_id)
;
var fileinput = $clone.find('.filestyle')
.attr('id', 'student-image-' + next_id)
.attr('name', 'students_image['+count+']')
;
fileinput.wrap('<form>').closest('form').get(0).reset();
fileinput.unwrap();
$clone.find('.bootstrap-filestyle > label.btn')
.attr('for', 'student-image-' + next_id)
;
$clone.find('.bootstrap-filestyle > input').val('');
var delete_button = $clone.find('.btn-danger')
.attr('data-url', 'student-row-' + next_id)
.attr('href','#deleteModal')
.attr('class', 'btn btn-danger btn-sm btn-delete')
;
delete_button.closest('.form-group').removeAttr('style');
$clone.show().insertAfter(last);
});
html from firebug
<div id="student-row-1">
<div class="form-group ">
<div class="col-lg-3 col-md-3 col-sm-3 control-label">
<span class="badge bg-info student-no">1</span>
<div class="clearfix visible-xs"></div>
<label class="student-label" for="student-1">Name</label> <em class="red">*</em>
</div>
<div class="col-lg-6 col-md-7 col-sm-7">
<input type="text" value="" name="students[0][title]" class="form-control title-control" id="title-1"> </div>
</div>
<div class="form-group">
<div class="col-lg-3 col-md-3 col-sm-3 control-label">
<label class="point-label" for="point-1">Points</label> <em class="red">*</em>
</div>
<div class="col-lg-6 col-md-7 col-sm-7">
<input type="text" value="" name="students[0][point]" class="form-control point-control" id="point-1"> </div>
</div>
<div class="form-group">
<div class="col-lg-3 col-md-3 col-sm-3 control-label">
<label class="image-label" for="student-image-1">Image</label> <em class="red">*</em>
</div>
<div class="col-lg-6 col-md-8 col-sm-8">
<input type="file" name="students_image[0]" data-classinput="form-control inline input-s" data-classbutton="btn btn-default" data-icon="false" class="filestyle" id="student-image-1" style="position: fixed; left: -500px;"><div style="display: inline;" class="bootstrap-filestyle"><input type="text" disabled="" class="form-control inline input-s"> <label class="btn btn-default" for="student-image-1"><span>Choose file</span></label></div> </div>
</div>
<div class="form-group">
<div class="col-lg-3 col-md-3 col-sm-3 control-label"></div>
<div class="col-lg-6 col-md-7 col-sm-7">
<a title="Delete" data-toggle="modal" href="#" class="btn btn-danger btn-sm hidden" data-url="student-row-1">Delete</a>
</div>
</div>
</div>
<div id="student-row-2" style="display: block;">
<div class="form-group ">
<div class="col-lg-3 col-md-3 col-sm-3 control-label">
<span class="badge bg-info student-no">2</span>
<div class="clearfix visible-xs"></div>
<label class="student-label" for="student-1">Name</label> <em class="red">*</em>
</div>
<div class="col-lg-6 col-md-7 col-sm-7">
<input type="text" value="" name="students[1][title]" class="form-control title-control" id="title-2"> </div>
</div>
<div class="form-group">
<div class="col-lg-3 col-md-3 col-sm-3 control-label">
<label class="point-label" for="point-1">Points</label> <em class="red">*</em>
</div>
<div class="col-lg-6 col-md-7 col-sm-7">
<input type="text" value="" name="students[1][point]" class="form-control point-control" id="point-2"> </div>
</div>
<div class="form-group">
<div class="col-lg-3 col-md-3 col-sm-3 control-label">
<label class="image-label" for="student-image-2">Image</label> <em class="red">*</em>
</div>
<div class="col-lg-6 col-md-8 col-sm-8">
<input type="file" name="students_image[1]" data-classinput="form-control inline input-s" data-classbutton="btn btn-default" data-icon="false" class="filestyle" id="student-image-2" style="position: fixed; left: -500px;"><div style="display: inline;" class="bootstrap-filestyle"><input type="text" disabled="" class="form-control inline input-s"> <label class="btn btn-default" for="student-image-2"><span>Choose file</span></label></div> </div>
</div>
<div class="form-group">
<div class="col-lg-3 col-md-3 col-sm-3 control-label"></div>
<div class="col-lg-6 col-md-7 col-sm-7">
<a title="Delete" data-toggle="modal" href="#deleteModal" class="btn btn-danger btn-sm btn-delete" data-url="student-row-2">Delete</a>
</div>
</div>
</div>
Finally solved the problem, I just realized that the file input was using Bootstrap Filestyle.
// file
var file_container = $clone.find('.filestyle').parent();
file_container.empty();
var fileinput = $('<input>').addClass('filestyle').attr({
id: 'student-image-'+next_id,
name: 'students_image['+count+']',
type: 'file',
});
file_container.append(fileinput);
fileinput.filestyle({
icon: 'false',
classButton: 'btn btn-default',
classInput: 'form-control inline input-s',
});
var file_label_container = file_container.prev();
var new_label = $('<label>').addClass('image-label').attr('for', 'student-image-'+next_id).text(file_label_container.find('label').text());
file_label_container.find('label').remove();
file_label_container.prepend(new_label);
I remove the original input, and recreate a plain input, then use the filestyle to style the file input and append to the container. As well as the label on left hand side.
Related
I have group of input elements in my form. The user have to add rows to insert multiple values for different date transaction. Now before adding another row, I have to validate the date field and amount field.
My form:
<div id="content_add" class="d-none">
<div class="row i_bike_servicing">
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[from_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[from_date][]">
</div>
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[to_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[to_date][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[expenses][]">
</div>
</div>
</div>
<div class="row ">
<div class="col-md-2 ">From Location</div>
<div class="col-md-1 ">From Date</div>
<div class="col-md-2 ">To Location</div>
<div class="col-md-1 ">To Date</div>
<div class="col-md-1 ">Expenses</div>
<div class="col-md-1 ">
<i class="fa fa-plus"></i> add
</div>
</div>
<div id="content_show">
<div class="row i_bike_servicing">
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[from_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[from_date][]">
</div>
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[to_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[to_date][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[expenses][]">
</div>
</div>
</div>
<script>
$('#add_servicing').click(function (e) {
e.preventDefault();
let html_clone = $('#content_add').html();
$('#content_show').append(html_clone);
});
</script>
When the user presses the add button, I have to check for the added row, whether from date is smaller than to date or not and expenses should be always be less than 2500 for each row. How can I do this?
On click event, I'm cloning the section which is working fine. I also prepend the remove button when there is new section added.
I have only one issue, i want to remove the prepended button when there is only one section remain.
This is the code
$(document).ready(function() {
$('#taskForm')
// Add button click handler
.on('click', '.addButton', function() {
var $template = $('#taskTemplate'),
$clone = $template
.clone(true, true)
.removeClass('hide')
.removeAttr('id')
.insertBefore($template);
$('.dateofbirth').prepend($('<div style="height:0;"><a class="delete removeButton" href="#"><i class="fa fa-times"></i></a></div>'));
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).closest('.form--group');
$row.remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name-field row" id="taskForm">
<div class="form--group">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="“first" name="first[]" placeholder="“Firstname”" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
<div class="form--group hide" id="taskTemplate">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="firstname character" name="first[]" placeholder="Voornaam" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
</div>
<div class="col-lg-12 col-sm-12 col-xs-12">
<a class="btn-success addButton" href="#" id="addChild" name="addchild">Add Child</a>
</div>
</div>
</div>
Can anyone help me with this how can i achieve this?
Thanks in advance.
Make the following changes:
The template should not be a child of the first form--group, it should be a sibling. If not, your dynamically added rows are regarded children of the first row. So move the template out of it, as well as the Add button.
Do not add the HTML for the removal button via code. Instead add the HTML for that button in your static HTML, both in the first row and the template
Every time you add or remove a row, and also at page load, perform the following action:
$(".removeButton").toggle($(".removeButton").length > 2)
This will count the number of delete buttons (including the one that is in the template). If that counts to just two, then hide those buttons, otherwise show them.
Here is a little snippet:
$(document).ready(function() {
$('#taskForm')
// Add button click handler
.on('click', '.addButton', function() {
var $template = $('#taskTemplate'),
$clone = $template
.clone(true,true)
.removeClass('hide')
.removeAttr('id')
.insertBefore($template);
$(".removeButton").toggle($(".removeButton").length > 2);
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).closest('.form--group');
$row.remove();
$(".removeButton").toggle($(".removeButton").length > 2);
});
$(".removeButton").toggle($(".removeButton").length > 2);
});
.hide { display: none }
.field { margin-left: 20px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="name-field row" id="taskForm">
<div class="form--group">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="“first" name="first[]" placeholder="“Firstname”" type="text">
</div>
</div>
<div style="height:0;"><a class="delete removeButton" href="javascript:;"><i class="fa fa-times"></i></a></div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
</div>
<div class="form--group hide" id="taskTemplate">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="firstname character" name="first[]" placeholder="Voornaam" type="text">
</div>
</div>
<div style="height:0;"><a class="delete removeButton" href="javascript:;"><i class="fa fa-times"></i></a></div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
</div>
<div class="col-lg-12 col-sm-12 col-xs-12">
<a class="btn-success addButton" href="javascript:;" id="addChild" name="addchild">Add Child</a>
</div>
</div>
Quite new to angular JS and need some help. How do I use ng-if to display or hide different input fields? I'm currently using ng-show but it doesn't completely remove the DOM, therefore making it difficult during validation. I want the input fields displaying within a specific div to become mandatory ONLY when selected.
When I click Select Fund, I want the showme2 div to display and the fields to become mandatory. When I click Select Product, I want the showme1 div to display and the fields to become mandatory. See my current code below:
<div ng-show="showme1">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName1" required="required" placeholder="Product 1">
</div>
</div>
<<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName2" required="required" placeholder="Product 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" align="center" ng-click="showme2=true; showme1=false"><a>(or Select Fund)</a><br /></div>
</div>
</div>
<div ng-show="showme2">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Fund details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName1" required="required" placeholder="Fund 1">
</div>
</div>
<<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName2" required="required" placeholder="Fund 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" ng-click="showme1=true; showme2=false" align="center"><a>(or Select Product)</a></div>
</div>
</div>
Reference this stackoverflow answer to understand how ng-if is used.
You can use ng-if to achieve if(){..} else{..} in Angular.js.
<div ng-if="data.id == 5">
<!-- If block -->
</div>
<div ng-if="data.id != 5">
<!-- Your Else Block -->
</div>
Additionally, I've modified your code snippet in a CodePen to use ng-if, see here. https://codepen.io/silicaRich/pen/PjwwPv
JS
var TestApp = angular.module("TestApp", []);
HTML
<html>
<head>
</head>
<body ng-app='TestApp'>
<!-- Will display if showme == true -->
<div ng-show="showme">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details // showme1</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName1" required="required" placeholder="Product 1">
</div>
</div>
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details // showme1</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName2" required="required" placeholder="Product 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" align="center" ng-click="showme=false;"><a>(or Select Fund) // showme2</a><br /></div>
</div>
</div>
<!-- Will display if showme == false -->
<div ng-show="!showme">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Fund details // showme2 </h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName1" required="required" placeholder="Fund 1">
</div>
</div>
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Fund details // showme2 </h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName2" required="required" placeholder="Fund 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" ng-click="showme=true;" align="center"><a>(or Select Product) // showme1</a></div>
</div>
</div>
</body>
</html>
Hope this helps.
I wish to dynamically add the name attribute as 'pickup_city2' and 'pickup_address2' to select elements with ids, pickup_cityExtend and pickup_addressExtend.
$('#multiCheck').change(function() {
if (this.checked) {
var $pick = $('#cityPickExtend');
$clone = $pick.clone().removeClass('hide').removeAttr('id').insertAfter($pick);
var city = document.getElementById('pickup_cityExtend');
city.setAttribute('name', 'pickup_city2');
var address = document.getElementById('pickup_addressExtend');
address.setAttribute('name', 'pickup_address2');
}
if (!this.checked) {
$clone.remove();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="cityPick form-horizontal form-label-right" action="" method="POST" novalidate>{% csrf_token %}
<div class="form-group">
<div class="city col-md-4 col-sm-4 col-xs-10">
<div class="item form-group">
<label class="control-label" for="city">City<span class="required">*</span>
</label>
<div class="">
<select class="form-control" id="city" name="pick_up_city">
<option>Select City</option>
<option>Mumbai</option>
<option>Delhi</option>
<option>Jaipur</option>
</select>
</div>
</div>
</div>
<div class="address col-md-7 col-sm-7 col-xs-10">
<div class="item form-group">
<label class="control-label" for="address">Address<span class="required">*</span>
</label>
<div class="">
<input type="text" class="form-control" id="address" name="pick_up_address">
</div>
</div>
</div>
<div class="multiCheck col-md-4 col-sm-4 col-xs-12">
<input type="checkbox" value="Yes" id="multiCheck">Have more than one pickup point?
<br>
</div>
</div>
<div class="form-group hide" id="cityPickExtend">
<div class="city col-md-4 col-sm-4 col-xs-10">
<div class="item form-group">
<label class="control-label" for="city">City<span class="required">*</span>
</label>
<div class="">
<select class="form-control" id="pickup_cityExtend" name="">
<option>Select City</option>
<option>Mumbai</option>
<option>Delhi</option>
<option>Jaipur</option>
</select>
</div>
</div>
</div>
<div class="address col-md-7 col-sm-7 col-xs-10">
<div class="item form-group">
<label class="control-label" for="address">Address<span class="required">*</span>
</label>
<div class="">
<input type="text" class="form-control" id="pickup_addressExtend" name="">
</div>
</div>
</div>
<div class="removeBtn col-md-1 col-sm-1 col-xs-2">
<button type="button" id="removeBtn">Remove</button>
</div>
<div class="addBtn">
<button type="button" id="addBtn">Add another pickup location</button>
</div>
</div>
<div class="item form-group">
<label for="shipment_datetime" class="control-label dateTime">Pickup Date & time
<span class="required">*</span>
</label>
<div class="input-group date form_datetime col-md-4 col-sm-4 col-xs-12" data-date="" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
<input class="form-control" size="16" name="shipment_datetime" type="text" value="" readonly style="background-color: #fff;">
<span class="input-group-addon">
<span class="glyphicon glyphicon-remove"></span>
</span>
<span class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</span>
</div>
</div>
</form>
Below is my jquery code.
$('#multiCheck').change(function() {
if (this.checked) {
var $pick = $('#cityPickExtend');
$clone = $pick.clone().removeClass('hide').removeAttr('id').insertAfter($pick);
var city = document.getElementById('pickup_cityExtend');
city.setAttribute('name', 'pickup_city2');
var address = document.getElementById('pickup_addressExtend');
address.setAttribute('name', 'pickup_address2');
}
if (!this.checked) {
$clone.remove();
}
})
Within the part that you clone, there are four elements that have an id attribute. As id values must be unique, the DOM API will always return the first match when you query for a certain id, such as in these lines:
var city = document.getElementById('pickup_cityExtend');
var address = document.getElementById('pickup_addressExtend');
The results do not match the elements in the part you added to the document.
In order to make it work, you need to replace the id values with something that is unique (by adding a 2 for instance).
As a side note: you are mixing jQuery syntax with native DOM methods to retrieve elements. It would be more consistent if you would not use document.getElementById, but the jQuery $('#...') equivalent.
Here is some adjusted code:
var $clone;
$('#multiCheck').change(function() {
if (this.checked) {
var $pick = $('#cityPickExtend');
$clone = $pick.clone().removeClass('hide').removeAttr('id');
// Add '2' to all ID values, and set name value to the same.
$clone.find('[id]').each(function () {
var id = $(this).attr('id') + '2';
$(this).attr('id', id).attr('name', id);
});
// Now that the id value are unique, it is OK to add the clone:
$clone.insertAfter($pick);
} else if ($clone) { // Check whether we actually have a clone
$clone.remove();
}
});
I want to change the value of inputs of a modal when you click submit to a panel. So, if a user write the input, the value that he write replace the content of the panel below. JSFiddle:
Main structure of the modal:
<div id="dialog" title="Task detail">
<div class="modal-body">
<div class="row-fluid" style="padding-bottom: 0px;">
<form id="taskForm" class="form-horizontal" role="form">
<input type="hidden" name="id" value="2">
<div class="form-group">
<label for="inputName" class="col-xs-3 col-sm-3 col-md-1 control-label">Name</label>
<div class="col-xs-5 col-sm-5 col-md-10">
<input id="inputName" name="name" type="text" class="form-control" placeholder="Name" value="">
</div>
</div>
<div class="form-group">
<label for="inputURI" class="col-xs-3 col-sm-3 col-md-1 control-label">URI</label>
<div class="col-xs-2 col-sm-8 col-md-10">
<input id="inputURI" name="uri" type="text" class="form-control" placeholder="URI" value="">
</div>
</div>
<div class="form-group">
<label for="inputPlanning" class="col-xs-3 col-sm-3 col-md-1 control-label">Planning</label>
<div class="col-xs-5 col-sm-5 col-md-10">
<input id="inputPlanning" name="planning" type="text" class="form-control" placeholder="Planning" value="">
</div>
</div>
<div class="form-group">
<label for="inputOrder" class="col-xs-3 col-sm-3 col-md-1 control-label">Order</label>
<div class="col-xs-2 col-sm-2 col-md-10">
<input id="inputOrder" name="numOrder" type="text" class="form-control" placeholder="Order">
</div>
</div>
<div class="form-group">
<label id="chkActive" for="chkActive" class="col-xs-3 col-sm-3 col-md-1 control-label">Active</label>
<div class="col-xs-5 col-sm-5 col-md-10">
<div class="miniswitchmodal" style="float: left;">
<input type="checkbox">
<label><i class="glyphicon glyphicon-off"></i></label>
</div>
</div>
</div>
<div class="modal-footer">
<button id="btnSave" type="button" class="btn btn-success modalbtn">Save changes</button>
<button id="btnClose" type="button" class="btn btn-default modalbtn" data-dismiss="modal">Close</button>
</div> </form></div></div></div>
Main structure of the panel:
<div class="col-xs-6 col-sm-4 col-md-3">
<div id="7" class="panel panel-off2">
<div class="panel-heading">
<div class="row">
<div class="ptitle">Task 7</div>
<div class="optiongroup"> <span class="glyphicon glyphicon-edit yellow"></span>
<div class="miniswitch">
<input type="checkbox" data-id="7">
<label><i class="glyphicon glyphicon-off"></i></label>
</div>
</div></div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12"><strong>Planning:</strong><span> 0/10 * * * * ?</span></div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>URI:</strong><span> /cron/test</span>
</div>
</div>
</div>
</div>
</div>