tab is not getting clicked in protractor - javascript

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.

Related

Trigger action of re-click/double click on first click of button

I have an HTML such that when I click on "Continue" button then an overlay appears. That overlay has "Skip and Continue" button. When I click on "Skip and Continue" button then second overlay appears replacing the first one.
My Expectation is to display the second overlay on the click of Continue button, the first overlay should never appear and the action of "Skip and Continue" should be triggered on the click of Continue button.
I have written below code which is partially working. the Single click on Continue button is not triggering anything however when I re-click or doubleclick the Continue button then second overlay appears. I want second overlay to appears on the single/first click of Continue button.
$('button.yelbtn').click(function() {
$('button.btn.btn-indigo.skip-cnt-btn').trigger('click');
$('.flexi-promotion-popup').hide();
});
P.S:
Selector for Continue button:
$('button.yelbtn')
Selector for Skip and Continue Button:
$('button.btn.btn-indigo.skip-cnt-btn')
HTML CONTINUE BUTTON :
<button id="continue-button" class="yelbtn">
<span><!-- react-text: 40 -->Continue<!-- /react-text --><!-- react-text: 41 --> <!-- /react-text -->
<i class="fa icon-chevron-right" aria-hidden="true">
</i>
</span>
</button>
DIV APPEARS IN DOM WHEN CONTINUE BUTTON IS NOT CLICKED YET
<div class="flexi-promotion-popup">
<div data-reactroot="">
</div>
</div>
DIV APPEARS IN DOM WHEN CONTINUE BUTTON HAS BEEN CLICKED (FIRSY OVERLAY)
<div class="flexi-promotion-popup">
<div data-reactroot="" class="ReactModal__Overlay ReactModal__Overlay--after-open popup-overlay-desktop black upgrade-popup">
<div class="ReactModal__Content ReactModal__Content--after-open popup-container-desktop modal-dialog upgrade-popup-ie" tabindex="-1" aria-label="Flexi-Promotion-Popup">
<div class="modal-content">
<div class="modal-header">
<h4 id="myModalLabel">
<span class="f22">Add flexibility to your travel</span>
<button type="button" class="closeBtn pull-right" data-dismiss="modal" aria-label="Close">
<i class="icon-close-stroke"></i>
</button>
</h4>
</div>
<div class="modal-body text-left">
<div class="title">
<span><!-- react-text: 12 -->BLR<!-- /react-text --><!-- react-text: 13 --> <!-- /react-text --></span>
<i class="icon-flight-right"></i>
<span><!-- react-text: 16 --> <!-- /react-text --><!-- react-text: 17 -->IXC<!-- /react-text --></span>
<span><!-- react-text: 19 --> (<!-- /react-text -->
<span>Saver Fare</span><!-- react-text: 21 -->)<!-- /react-text -->
</span>
</div>
<div class="media">
<div class="media-left">
<div class="pp-img text-center">
<img src="/etc/designs/abc-reservation/clientlibs-react/images/popups/unlimited-changes.png" alt="">
</div>
</div>
<div class="media-body bg-flight text-left">
<div class="jumbo-text">
<span>Make unlimited changes to your booking at additional
</span>
<span><!-- react-text: 30 --> <!-- /react-text -->
<span>₹ 354</span><!-- react-text: 32 -->*<!-- /react-text -->
</span>
<div>
<button class="btn btn-abc"><!-- react-text: 35 -->Add to trip<!-- /react-text --><!-- react-text: 36 --> <!-- /react-text -->
<i class="icon-angle-right"></i>
</button>
<button type="button" class="btn btn-abc skip-cnt-btn ml20" data-dismiss="modal"><!-- react-text: 39 -->Skip and continue <!-- /react-text -->
<i class="icon-angle-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<span>
<p>*Fare difference applies. For more details,
Click here.
</p>
</span>
</div>
</div>
</div>
</div>
</div>
DIV WHEN SKIP AND CONTINUE BUTTON IS CLICKED:
<div class="ReactModalPortal">
<div data-reactroot="" class="ReactModal__Overlay ReactModal__Overlay--after-open popup-overlay-desktop black">
<div class="ReactModal__Content ReactModal__Content--after-open popup-container-desktop modal-password" tabindex="-1" aria-label="IndiGo" style="border: none; background: transparent;">
<div class="modal-dialog login-wide gst-wrapper">
<div class="modal-content indilogin">
<div class="modal-header">
<h4 class="modal-title text-left">
<img class="indigo-logo" src="/etc/designs/indigo-reservation/clientlibs-react/images/vector-icons/IndiGo-Airlines-Logo-White.svg" alt="IndiGo Airlines Logo">
<button class="closeBtn pull-right">
<span class="icon-close-stroke" aria-hidden="true">
</span>
</button>
</h4>
</div>
<div class="modal-body clearfix">
<form>
<div class="indilogin-wrappertop">
<div class="title_small">Passenger Mobile Number & Email ID
</div>
<div class="description"><!-- react-text: 15 -->Note: Entering mobile number & email ID is mandatory to proceed for your booking.<!-- /react-text --><!-- react-text: 16 --> <!-- /react-text --><br><!-- react-text: 18 -->*All notifications will be sent to this mobile number and email address.<!-- /react-text -->
</div>
<div class="form-table">
<div class="form-cell clearfix">
<div class="telip-code">
<div>
<div name="mobileCountryCode" role="combobox" aria-owns="rw_1__listbox" aria-expanded="false" aria-haspopup="true" aria-busy="false" aria-live="polite" aria-autocomplete="list" aria-disabled="false" aria-readonly="false" tabindex="0" class="rw-dropdownlist rw-widget">
<span tabindex="-1" title="open dropdown" aria-label="open dropdown" class="rw-dropdownlist-picker rw-select rw-btn">
<span aria-hidden="true" class="rw-i rw-i-caret-down">
</span>
</span>
<div class="rw-input">
<div>
<span class="iti-flag in">
</span>
<div class="selected-dial-code"><!-- react-text: 30 -->+<!-- /react-text --><!-- react-text: 31 -->91<!-- /react-text -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="telip-num">
<div><input type="tel" name="mobileNum" value="" placeholder="Enter Mobile No." class="form-control indilogin-wrappertop_mob">
</div>
<div class="format">e.g (89687xxxxx)
</div>
</div>
</div>
<div class="form-cell">
<div>
<input type="email" name="emailId" value="" placeholder="Email Id" class="form-control indilogin-wrappertop_email">
</div>
<div class="format">e.g (xxx#gmail.com)
</div>
</div>
</div>
<div class="gstSwitch text-left">
<label class="gstSwitch-switch">
<input type="checkbox" value="on">
<div class="slider round">
</div>
</label>
<span class="gstSwitch-switch_label">GST Information (optional)
</span>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary btn-lg btn-block signin-btn btn-nxt">Next
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

Try hide/show the continue button
$('button.yelbtn').click() {
$('button.yelbtn').hide();
$('button.btn.btn-indigo.skip-cnt-btn').show();
$('button.btn.btn-indigo.skip-cnt-btn').trigger('click');
...
}

How to make collapse uncollapse entire row not only plus icon

How can I make the entire row when I click to collapse uncollapse, because now I have only when I click plus/minus icon I want to be able when I click anywhere on row to collapse/uncollapse.
<link href="https://adminlte.io/themes/AdminLTE/dist/css/AdminLTE.min.css" rel="stylesheet"/>
<link href="https://adminlte.io/themes/AdminLTE/dist/css/skins/_all-skins.min.css" rel="stylesheet"/>
<link href="https://adminlte.io/themes/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://adminlte.io/themes/AdminLTE/bower_components/Ionicons/css/ionicons.min.css" rel="stylesheet"/>
<div class="box box-default collapsed-box box-solid">
<div class="box-header with-border">
<h3 class="box-title">Expandable</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
</button>
</div>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body">
The body of the box
</div>
<!-- /.box-body -->
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/dist/js/adminlte.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/dist/js/demo.js"></script>
Make full snipet and you can see only when you click to the right corner, which is supposed to be a plus sign but I don't know why it is not showing here, any way can someone help me how can I make when I click box-header to collapse/uncollapse

Give the data-widget="collapse" to the header container like this:
<div class="box box-default collapsed-box box-solid">
<div class="box-header with-border" data-widget="collapse">
<h3 class="box-title">Expandable</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" ><i class="fa fa-plus"></i>
</button>
</div>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body">
The body of the box
</div>
<!-- /.box-body -->
</div>

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 -->

I wish to populate a particular div with a html page

I have two widgets in a row with 6columns each. I have written code for dynamically populating one widgets and i wish to add that widget in the home dashboard. I need it to load the content of that particular div on the go of the page load.I had written that div in seperate file to be used in multiple places. So i want to know how to load that div in my html. I have here mentioned the code here below of my 'main.html' which contains two 6 columns and i wanted to populate the first 6 column with other.html file which contains angular div.
<!-- WIDGETS SPACE, PLACE SOME UIKITS HERE OR MAKE YOUR OWN KITS ;) -->
<div class="row">
<div class="col-md-6">
<!-- UPCOMMING NEW TESTS -->
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-actions-input">
View all Test
</div>
<h3 class="panel-title">Upcoming Test New Tests</h3>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces1.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<i class="fa fa-check fa-fw"></i>
<i class="fa fa-credit-card fa-fw"></i>
<i class="fa fa-times fa-fw"></i>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading">Purchase 4 items ($80)</h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i> Rose Davies</small>
<small><i class="fa fa-user fa-fw"></i> 16 minutes</small>
</div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces2.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<i class="fa fa-check fa-fw"></i>
<i class="fa fa-credit-card fa-fw"></i>
<i class="fa fa-times fa-fw"></i>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading">Purchase an item - Wrapkit Admin Template</h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i> Dilara Elmas</small>
<small><i class="fa fa-user fa-fw"></i> 20 minutes</small>
</div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces3.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<i class="fa fa-check fa-fw"></i>
<i class="fa fa-credit-card fa-fw"></i>
<i class="fa fa-times fa-fw"></i>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading">Payment for invoice #141213</h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i> George Florianu</small>
<small><i class="fa fa-user fa-fw"></i> 42 minutes</small>
</div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces4.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<i class="fa fa-check fa-fw"></i>
<i class="fa fa-credit-card fa-fw"></i>
<i class="fa fa-times fa-fw"></i>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading">Purchase an item - Wrapkit Admin Template</h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i> Gustavo Francisco</small>
<small><i class="fa fa-user fa-fw"></i> 1 hours</small>
</div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces5.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<i class="fa fa-check fa-fw"></i>
<i class="fa fa-credit-card fa-fw"></i>
<i class="fa fa-times fa-fw"></i>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading">Purchase an item - Wrapkit Admin Template</h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i> Bastien Guichard</small>
<small><i class="fa fa-user fa-fw"></i> 1 hours</small>
</div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
<!-- END OF RECENTS ORDER KITS -->
</div>
<div class="col-md-6">
<!-- TOP RANK (users, items or others) KIT -->
<div class="panel panel-default">
<div class="panel-body">
<h3 class="panel-title">Weekly list of Toppers
<br>
<small class="text-muted">Updated at 07:16 am</small>
</h3>
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces11.jpg" alt="">
</a>
<div class="media-body">
<h5 class="media-heading">Emma Greene</h5>
<div class="progress progress-md">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="1500" style="width: 8.33%">
<div class="progress-text">0 Right Answers</div>
</div>
<!-- /.progress-bar -->
</div>
<!-- /.progress -->
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces12.jpg" alt="">
</a>
<div class="media-body">
<h5 class="media-heading">Júlia Márta</h5>
<div class="progress progress-md">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="1500" style="width: 74.8%">
<div class="progress-text">1,122 sales</div>
</div>
<!-- /.progress-bar -->
</div>
<!-- /.progress -->
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces13.jpg" alt="">
</a>
<div class="media-body">
<h5 class="media-heading">Tom Bonnet</h5>
<div class="progress progress-md">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="1500" style="width: 69.27%">
<div class="progress-text">1,039 sales</div>
</div>
<!-- /.progress-bar -->
</div>
<!-- /.progress -->
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces14.jpg" alt="">
</a>
<div class="media-body">
<h5 class="media-heading">Naia Gómez</h5>
<div class="progress progress-md">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="1500" style="width: 64.8%">
<div class="progress-text">972 sales</div>
</div>
<!-- /.progress-bar -->
</div>
<!-- /.progress -->
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces15.jpg" alt="">
</a>
<div class="media-body">
<h5 class="media-heading">Gary Lewis</h5>
<div class="progress progress-md">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="1500" style="width: 58.73%">
<div class="progress-text">881 sales</div>
</div>
<!-- /.progress-bar -->
</div>
<!-- /.progress -->
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<br>
<!--Just line-->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
<!-- /END TOP RANK KIT -->
</div>
<!-- /.cols -->
</div>
<!-- /.row -->
</div>
The other.html contains the below code.
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-actions-input">
View all Test
</div>
<h3 class="panel-title">Upcoming Test</h3>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="media" ng-repeat="item in testList track by $index">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces1.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<i class="fa fa-check fa-fw"></i>Going To Attend Test
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading">{{item.title}}</h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i>{{item.questionPoster}}</small>
<small><i class="fa fa-user fa-fw"></i> {{item.timePosted}}</small>
</div>
</div>
<hr>
<!-- /.media-body -->
</div>
<!-- /.media -->
<!-- /.panel -->
<!-- END OF RECENTS ORDER KITS -->
{{variable}}
</div>
</div>

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"

Categories

Resources