Develop Reference

Self submit modal form so that form elements are reloaded and modal window is not closed

I'm building a form which gets displayed as a pop up modal when a user clicks "Create Test Case" button. The modal itself contains two tabs. One tab displays form fields for test details and the second tab displays form fields for test properties.
In the first tab "tests" if the user fills out the form and clicks "add test" then the form should trigger back end php processing and write data to MYSQL database. The modal form should close as well. On the other hand, if user clicks the "Properties" tab, it should allow them to add properties dynamically and also insert into mysql database. It should reload the properties page every time a new property is added.
The problem I'm having is that every time I click "Add" on the property page, the Modal window closes.
Can someone tell me how i can get the modal window to reload the properties form page and prevent the modal window from closing each time the Add button is pressed?
Here is my code:
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3>Test Management <small></small></h3>
</div>
</div>
<div class="clearfix"></div>
<!-- start real -->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Add Test Cases <small><?php echo $filenamePrefix; ?></small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>Settings 1
</li>
<li>Settings 2
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<p class="text-muted font-13 m-b-30">
Add new test cases to current project.
</p>
<button type="button" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-lg">Create new test case</button>
<!-- begin modal-->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Create new test case</h4>
</div>
<div class="modal-body">
<div class="" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
<li role="presentation" class="active">Tests
</li>
<li role="presentation" class="">Properties
</li>
</ul>
<form name="variables" id="variables" class="form-horizontal form-label-left" action=<?php echo htmlspecialchars($_SERVER[ "PHP_SELF"]); ?> method="post" enctype="multipart/form-data">
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
<div class="form-group">
<div class="row">
<div class="span col-md-2">
<label>Test Details</label>
<select class="form-control" name="rest_method">
<option value="GET">GET</option>
<option value="POST">POST</option>
<option value="PUST">PUT</option>
</select>
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-5">
<button type="submit" class="btn btn-primary">Cancel</button>
<button id="addTests" type="submit" value="true" name="addTests" class="btn btn-success">Add Test</button>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
<div class="form-group">
<div class="row">
<div class="span col-md-4">
<label>Property Name</label>
<input type="text" class="form-control" id="variable_name" name="variable_name">
</div>
<div class="span col-md-2">
<label>Add Properties</label>
<button type="submit" class="btn btn-success" id="addVariables" value="true" name="addVariables">Add</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- end MyyContentTab-->
</div>
</div>
<!-- end modal body -->
</div>
</div>
<!-- end modal -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->

Fetch selected item in page from bootstrap-modal

I'm using bootstrap modal to provide a functionality to user to select any desired item and than add the selected item to parent/current page.
I've created an example on fiddle for better and faster understanding.
In eg: there are 2 items (three li for each). When user selects certain item, the modal must close, its price (which is fetched from another page) must be displayed on the square box and a new box must be added to the left side (with current glyphicon).
I somehow understand this must be achieved using jQuery but am blank as to how should I proceed further. I'm totally new to both modals and jQuery so if any one has any idea about it?
UPDATE:
I did try my hands on it and I'm able to fetch the selected item from modal and add to the parent/current view but it doesn't work properly for the second time(second box). Here's updated fiddle. and here's the updated code:
jQuery:
var itemLayout = '<div class="square"><div class="content"><div class="table"><div class="table-cell numbers"><div class="glyphicon glyphicon-plus prices"></div></div></div></div></div>';
$(document).ready(function() {
$(".layout").append(itemLayout);
$(".square").click(function() {
$("#myModal").modal('show');
});
fetchPrice();
});
function fetchPrice() {
var users = $('.prices');
$(document).on('click', '.fetch', function() {
var stylesheet = $(this).text();
console.log(stylesheet);
$("#myModal").modal('hide');
users.removeClass('glyphicon glyphicon-plus').text(stylesheet);
$(itemLayout).insertAfter('.square');
$(".square").click(function() {
$("#myModal").modal('show');
});
});
}
HTML:
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="layout"></div>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Select to display</h4>
</div>
<!-- modal-header end -->
<div class="modal-body">
<ul class="list-group">
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Chinese</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Hakka Noodles </div>
<div class="pull-right">
<div class="fetch">Price1</div>
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Others</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Masala papad </div>
<div class="pull-right">
<div class="fetch">Price2</div>
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
OLD
Here's the code snippet:
<div class="row">
<div class="col-md-4 col-md-offset-4">
<!-- Button HTML (to Trigger Modal) -->
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
<div class="glyphicon glyphicon-plus"></div>
</div>
</div>
</div>
</div>
<!-- square end -->
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Select to display</h4>
</div>
<!-- modal-header end -->
<div class="modal-body">
<ul class="list-group">
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Chinese</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Hakka Noodles </div>
<div class="pull-right">
Price
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Others</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Masala papad </div>
<div class="pull-right">
Price
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery to open modal:
$(document).ready(function() {
$(".square").click(function() {
$("#myModal").modal('show');
});
});

If you use bootsrap best way make
<div class="square" data-toggle="modal" data-target="#myModal">
for call modal, end do modal header like this
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
On this case u don't need write any jquery its will be work "from box"

filter groups of texts by category in bootstrap

I'm studying a way to post some articles on my site but I can not control this example code snippet I found on the net, it should filter items based on the subject , but do not know how to do this .
For example , clicking on " jobs " should only filter messages about Jobs , but that tag I define what belongs to which category? How do I filter function as it should?
Full example here code
<div class="container">
<div class="row">
<div class="col-md-3">
<h4 class="">Search</h4>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
<button type="button" class="btn btn-default btn-sm btn-block hidden-lg hidden-md" data-toggle="collapse" data-target="#demo">Refine your search <span class="caret"></span>
</button>
<div id="demo" class="collapse in">
<hr>
<div class="list-group list-group">
<h4 class="">Category</h4>
<span class="badge">14</span> Notices <span class="label label-primary">New</span>
<span class="badge">3</span> Jobs
<span class="badge">25</span> Third item
<div id="categories" class="collapse">
<span class="badge">14</span> Active item
<button class="btn btn-default btn-sm btn-block" data-toggle="collapse" data-target="#categories">More <span class="caret"></span></button>
<hr class="">
<h4 class="">Viewing Options</h4>
<span class="badge">14</span> Upcoming Sessions
<span class="badge">3</span> OnDemand
<hr class="">
Archived Courses
Courses In Development
</div>
</div>
<div class="hidden-sm hidden-xs">
<hr>
<div class="well">
<h4>Premium Membership</h4>
<p>Gain unlimited access to our entire course library.</p>
<button class="btn btn-sm btn-warning">Learn more</button>
<hr>
<p class="text-center ">Already a member? Sign in.</p>
</div>
<hr>
<div class="well">
<h4>Course Catalog</h4>
<p><img src="http://placehold.it/400X500" class="img-responsive"></p>
<p>Everything you need to know about our webinars, including speaker bios, topics, and courses.</p>
<button class="btn btn-sm btn-block btn-warning">Download</button>
</div>
<hr>
<h4 class="text-center">CPE Partners</h4>
<p><img class="center-block" src="http://placehold.it/100X100"></p>
</div>
</div>
<div class="col-md-9">
<div class="well hidden-xs">
<div class="row">
<div class="col-xs-4">
<select class="form-control">
<option>Featured</option>
<option>Recently Added</option>
<option>Next Upcoming Session</option>
<option>A-Z</option>
<option>Z-A</option>
</select>
</div>
<div class="col-xs-8">
<div class="btn-group pull-right">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-th"></span></button>
<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-th-list"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-list"></span></button>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4"><img src="http://placehold.it/1280X720" class="img-responsive">
</div>
<div class="col-sm-8">
<h3 class="title">How to Fight Fraud with Artificial Intelligence and Intelligent Analytics</h3>
<p class="text-muted"><span class="glyphicon glyphicon-lock"></span> Available Exclusively for Premium Members</p>
<p>Could card.</p>
<p class="text-muted">Presented by Ellen Richey</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4"><img src="http://placehold.it/1280X720" class="img-responsive">
</div>
<div class="col-sm-8">
<h3 class="title">Big Payment Data: Leveraging Transactional Data to Ensure an Enterprise Approach to Risk Management</h3>
<p class="text-muted"><span class="glyphicon glyphicon-calendar"></span> July 23, 2014 # 1:30 PM</p>
<p> risk increases year over year, the amount of data being collected increases as well.
</p><p class="text-muted">Presented by Mike Braatz, Jonathan Eber</p>
</div>
</div>
<ul class="pagination pagination-lg pull-right">
<li>«</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>»</li>
</ul>
</div>
</div>
</div>

tab is not getting clicked in protractor

This is my full html of Tab section
<tab heading="Meta Data" id="heading_meta-data">
<div id="meta-data" class="row">
<div class="col-md-3 col-xs-3">
<!-- output -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">Sensor Output</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="outputCollapsed" ng-click="outputCollapsed=!outputCollapsed"><i ng-show="!outputCollapsed" class="fa fa-plus"></i><i ng-show="outputCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="outputCollapsed" class="box-body">
<!-- show ouput fields here -->
<!-- output field box starts here -->
<div ng-repeat="outpt in sensorDetails.metaData.output" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{outpt.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="ocollapsed" ng-click="ocollapsed=!ocollapsed"><i ng-show="!ocollapsed" class="fa fa-plus"></i><i ng-show="ocollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="ocollapsed" class="box-body">
<!-- ouput fields details -->
<ul>
<li><b>name</b> : <small>{{outpt.name}}</small></li>
<li><b>type </b> : <small>{{outpt.type}}</small></li>
<li><b>unit </b> : <small>{{outpt.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- output field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- parameter -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">parameter</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="parameterCollapsed" ng-click="parameterCollapsed=!parameterCollapsed"><i ng-show="!parameterCollapsed" class="fa fa-plus"></i><i ng-show="parameterCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="parameterCollapsed" class="box-body">
<!-- parameter field box starts here -->
<div ng-repeat="param in sensorDetails.metaData.parameter" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{param.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="pcollapsed" ng-click="pcollapsed=!pcollapsed"><i ng-show="!pcollapsed" class="fa fa-plus"></i><i ng-show="pcollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="pcollapsed" class="box-body">
<!-- ouput fields details -->
<ul>
<li><b>name</b> : <small>{{param.name}}</small></li>
<li><b>value</b> : <small>{{param.value}}</small></li>
<li><b>type </b> : <small>{{param.type}}</small></li>
<li><b>unit </b> : <small>{{param.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- parameter field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- identifier -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">identifier</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="identifierCollapsed" ng-click="identifierCollapsed=!identifierCollapsed"><i ng-show="!identifierCollapsed" class="fa fa-plus"></i><i ng-show="identifierCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="identifierCollapsed" class="box-body">
<!-- identifier field box starts here -->
<div ng-repeat="iden in sensorDetails.metaData.identifier" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{iden.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="icollapsed" ng-click="icollapsed=!icollapsed"><i ng-show="!icollapsed" class="fa fa-plus"></i><i ng-show="icollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="icollapsed" class="box-body">
<!-- ouput fields details -->
<ul>
<li><b>name</b> : <small>{{iden.name}}</small></li>
<li><b>value</b> : <small>{{iden.value}}</small></li>
<li><b>type </b> : <small>{{iden.type}}</small></li>
<li><b>unit </b> : <small>{{iden.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- identifier field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- classifier -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">classifier</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="collapsed" ng-click="classifierCollapsed=!classifierCollapsed"><i ng-show="!classifierCollapsed" class="fa fa-plus"></i><i ng-show="classifierCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="classifierCollapsed" class="box-body">
<!-- classifier field box starts here -->
<div ng-repeat="classi in sensorDetails.metaData.classifier" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{classi.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="pcollapsed" ng-click="ccollapsed=!ccollapsed"><i ng-show="!ccollapsed" class="fa fa-plus"></i><i ng-show="ccollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="ccollapsed" class="box-body">
<!-- classifiers fields details -->
<ul>
<li><b>name</b> : <small>{{classi.name}}</small></li>
<li><b>value</b> : <small>{{classi.value}}</small></li>
<li><b>type </b> : <small>{{classi.type}}</small></li>
<li><b>unit </b> : <small>{{classi.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- classifier field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- capability -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">capability</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="collapsed" ng-click="capabilityCollapsed=!capabilityCollapsed"><i ng-show="!capabilityCollapsed" class="fa fa-plus"></i><i ng-show="capabilityCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="capabilityCollapsed" class="box-body">
<!-- capability field box starts here -->
<div ng-repeat="capab in sensorDetails.metaData.capability" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{capab.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="cacollapsed" ng-click="cacollapsed=!cacollapsed"><i ng-show="!cacollapsed" class="fa fa-plus"></i><i ng-show="cacollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="cacollapsed" class="box-body">
<!-- classifiers fields details -->
<ul>
<li><b>name</b> : <small>{{capab.name}}</small></li>
<li><b>value</b> : <small>{{capab.value}}</small></li>
<li><b>type </b> : <small>{{capab.type}}</small></li>
<li><b>unit </b> : <small>{{capab.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- capability field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- characteristics -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">characteristics</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="characteristicsCollapsed" ng-click="characteristicsCollapsed=!characteristicsCollapsed"><i ng-show="!characteristicsCollapsed" class="fa fa-plus"></i><i ng-show="characteristicsCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="characteristicsCollapsed" class="box-body">
<!-- characteristics field box starts here -->
<div ng-repeat="char in sensorDetails.metaData.characteristics" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{char.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="chcollapsed" ng-click="chcollapsed=!chcollapsed"><i ng-show="!chcollapsed" class="fa fa-plus"></i><i ng-show="chcollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="chcollapsed" class="box-body">
<!-- classifiers fields details -->
<ul>
<li><b>name</b> : <small>{{char.name}}</small></li>
<li><b>value</b> : <small>{{char.value}}</small></li>
<li><b>type </b> : <small>{{char.type}}</small></li>
<li><b>unit </b> : <small>{{char.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- characteristics field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- interface -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">interface</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="interfaceCollapsed" ng-click="interfaceCollapsed=!interfaceCollapsed"><i ng-show="!interfaceCollapsed" class="fa fa-plus"></i><i ng-show="interfaceCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="interfaceCollapsed" class="box-body">
<!-- interface field box starts here -->
<div ng-repeat="intrface in sensorDetails.metaData.capability" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{intrface.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="incollapsed" ng-click="incollapsed=!incollapsed"><i ng-show="!incollapsed" class="fa fa-plus"></i><i ng-show="incollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="incollapsed" class="box-body">
<!-- interface fields details -->
<ul>
<li><b>name</b> : <small>{{intrface.name}}</small></li>
<li><b>value</b> : <small>{{intrface.value}}</small></li>
<li><b>type </b> : <small>{{intrface.type}}</small></li>
<li><b>unit </b> : <small>{{intrface.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- interface field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- position global -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">position global</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="positionGlobalCollapsed" ng-click="positionGlobalCollapsed=!positionGlobalCollapsed"><i ng-show="!positionGlobalCollapsed" class="fa fa-plus"></i><i ng-show="positionGlobalCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="positionGlobalCollapsed" class="box-body">
<ul>
<li><b>altitude</b> : <small>{{sensorDetails.metaData.position_global.altitude}}</small></li>
<li><b>latitude</b> : <small>{{sensorDetails.metaData.position_global.location.lat}}</small></li>
<li><b>longitude </b> : <small>{{sensorDetails.metaData.position_global.location.lon}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
</div>
</tab>
In spec.js
var metaData = element(by.id('heading_meta-data')).click();
browser.wait(EC.presenceOf(metaData), 500);
metaData.click();
here the tab is not getting clicked..............
Please tell what could be the issue.............??????????
already increased the browser wait time but still no help.................................?????????

Wait for the presence of tab in the DOM using wait() function and then try to click it once the element is found. If the element is taking longer to be displayed, then increase the timeout in the wait() function. Here's how -
var metaData = element(by.id('heading_meta-data'));
browser.wait(protractor.ExpectedConditions.visibilityOf(metaData), 10000)
.then(function(){
metaData.click();
});
Hope this helps.

Get modal caller

I have a Twitter Bootstrap list whose items have badged to show the amount of each item. I want to open a modal dialog to edit that amounts. But since it is going to be a long dynamic list, I can't write a function for each badge, but an only function which is able to determine who called the modal and:
Get the actual amount of the caller badge to be shown at the modal
Store the new amount when user changes the modal
HTML:
<div class="panel panel-primary">
<div class="panel-heading">Shopping cart</div>
<div class="panel-body">
<ul id="cart-list" class="list-group">
<li href="#" class="list-group-item" data-type="banana">Bananas
<div class="pull-right"> <span id="badge" class="badge">5</span>
</div>
</li>
<li href="#" class="list-group-item" data-type="pear">Pears
<div class="pull-right"> <span id="badge" class="badge">2</span>
</div>
</li>
</ul>
</div>
</div>
<!-- Input-spinner modal dialog -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="input-group spinner">
<input type="text" class="form-control" value="42">
<div class="input-group-btn-vertical">
<button class="btn btn-default"><i class="fa fa-caret-up"></i>
</button>
<button class="btn btn-default"><i class="fa fa-caret-down"></i>
</button>
</div>
</div> <span class="help-block">Set the number of items</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
JS:
// Create shopping cart list
var cart_list_element = document.getElementById("cart-list");
var cart_list = new Sortable(cart_list_element, {
group: {
name: "fruit_group",
pull: true,
put: true
},
});
// Configure click action over the badges
jQuery(".badge").click(function() {
console.log('Clicked badge, showing modal');
$("#myModal").modal('show');
});
// Input-spinner function
(function ($) {
$('.spinner .btn:first-of-type').on('click', function () {
$('.spinner input').val(parseInt($('.spinner input').val(), 10) + 1);
});
$('.spinner .btn:last-of-type').on('click', function () {
$('.spinner input').val(parseInt($('.spinner input').val(), 10) - 1);
});
})(jQuery);
This is a jsfiddle with my attempt. I don't know why the modal does not show up, it works localy. I suppose I made some mistake writting the example, o maybe jsfiddle just don't like modals. Anyway I think it shows what am I trying to achieve.
Any help?

something like this? http://jsfiddle.net/upjy4s5b/
using jquery and formatting your html structure with classes allows you to find different things in relation to other things. calling the bootstrap modal via jquery call instead of the inline call allows for easy transfer of the information you want.
$(document).ready(function() {
$('.edit').on('click', function() {
var name = $(this).closest('.item').find('.name').html();
var count = $(this).closest('.item').find('.count').html();
$('#myModal').find('.modal-body').find('.itemName').html(name);
$('#myModal').find('.modal-body').find('.itemCount').html(count);
$('#myModal').modal('show');
});
});
<ul class="list">
<li class="item">
<span class="name">Item 1</span>
<span class="count">Count 1</span>
Edit
</li>
<li class="item">
<span class="name">Item 2</span>
<span class="count">Count 2</span>
Edit
</li>
<li class="item">
<span class="name">Item 3</span>
<span class="count">Count 3</span>
Edit
</li>
</ul>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
Name: <span class="itemName"></span>
Count: <span class="itemCount"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->