We Keep Coding

get data from modal and display it in a parent controller table

I would like to know how we can pass the data from modal and display them in a main controller table. On click of generate button in modal am getting input text data and displaying it in the table. But table is not updated with the data. Here is my plunkr- https://plnkr.co/edit/yk4Zcl6LF79cw4msYUrw?p=preview
// Code goes here
var myTable = angular.module('myTable', ['ui.bootstrap']);
myTable.controller('tableCtrl', function($scope, $http, $uibModal) {
$scope.Catalogs = [];
$scope.phNumber = [];
$scope.schema=[{"value":"2.0"},{"value":"2.2"}];
$scope.revision=[{"value":"ARev"},{"value":"XRev"}];
$http({ method:'GET',
url: 'http://100.96.16.175:8080/CGSDataManager/webapi/component_type',
headers: {'Accept': 'application/json'}
}).
success(
function (data) {
$scope.components = data;
/*for(var i = 0; i< data.length; i++) {
$scope.components = data[i].description;
//alert(data[i].description + components);
}*/
}
);
// rest call to get System Models
$http({ method:'GET',
url: 'http://100.96.16.175:8080/CGSDataManager/webapi/platform_info',
headers: {'Accept': 'application/json'}
}).
success(
function (data) {
$scope.systems = data
for(var i = 0; i< data.length; i++) {
phNumber = data[i].platform_id;
}
}
);
$scope.change = function() {
$scope.opts = {
backdrop: true,
backdropClick: true,
templateUrl : 'modalView1.html',
controller : 'ModalInstanceCtrl',
resolve: {} // empty storage
};
$scope.opts.resolve.item = function() {
return angular.copy({schema:$scope.schema, revision:$scope.revision, components:$scope.components, systems:$scope.systems, phNumber:$scope.phNumber, Catalogs:$scope.Catalogs}); // pass name to Dialog
}
var modalInstance = $uibModal.open($scope.opts);
modalInstance.result.then(function(){
//on ok button press
},function(){
//on cancel button press
console.log("Modal Closed");
});
};
});
myTable.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, item) {
$scope.item = item;
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
$scope.submitData = function() {
$scope.item.Catalogs.push({name: $scope.catalogName,validation: "true", publishing: "hello"});
$uibModalInstance.dismiss('submit');
};
});
// modal code
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" data-ng-click="cancel()">×</button>
<h4 style="color: #0085C3;" ><b style="font-size:14px;">Filter</b></h4>
</div>
<div class="modal-body" name="modalData">
<div class="row">
<div class="col-md-12 ">
<form>
Catalog Name: <input type="text" data-ng-model="catalogName"/>
</form>
</div>
</div>
<div class="row" >
<div class="col-md-3 dell-bannercolor line">
<span style="font-size: 12px">Schema</span>
<table class="table table-striped">
<tbody>
<tr data-ng-repeat="sc in item.schema">
<td style="padding-top: 2px; padding-bottom: 4px;"><input type="checkbox" data-ng-model="sc.selected" data-ng-true-value="'{{sc.value}}'" data-ng-false-value="''"> <span style="font-size: 10px; color: #000000; padding-top: 2px; padding-bottom: 4px;">{{sc.value}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3 dell-bannercolor line">
<span style="font-size: 12px">Revision</span>
<table class="table table-striped">
<tbody>
<tr data-ng-repeat="re in item.revision">
<td style="padding-top: 2px; padding-bottom: 4px;"><input type="checkbox" data-ng-model="re.selected" data-ng-true-value="'{{re.value}}'" data-ng-false-value="''"> <span style="font-size: 10px; color: #000000; padding-top: 2px; padding-bottom: 4px;">{{re.value}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3 dell-bannercolor line">
<span style="font-size:12px">Component Type</span>
<div style="height:180px; overflow:auto;">
<table class = "table table-striped" >
<tbody>
<tr data-ng-repeat="x in item.components">
<td style=" padding-top:2px; padding-bottom:4px;"><input type="checkbox" data-ng-model="x.selected" data-ng-true-value="'{{x.description}}'" data-ng-false-value="''"> <span style="font-size:10px; color:#000000; padding-top:2px; padding-bottom:4px;">{{x.description}}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-3 dell-bannercolor">
<span style="font-size:12px">System Model</span>
<br/>
<div style="height:150px; overflow:auto;">
<table class = "table table-striped" >
<tbody>
<tr data-ng-repeat = "y in item.systems">
<td style=" padding-top:2px; padding-bottom:4px;"><input type="checkbox" data-ng-model="y.selected" data-ng-true-value="'{{y.platform_id}}'" data-ng-false-value="''"> <span style="font-size:10px; color:#000000; padding-top:2px; padding-bottom:4px;">{{y.model}}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" data-ng-click="cancel()">Cancel</button>
<button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="submitData()">Generate</button>
</div>
// html code
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script data-require="jquery#2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="script.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<style>
.dell-bannercolor {
color: #0085C3;
}
//
adding this code for vertical line -- start
.line {
position: relative;
}
.line:after {
content: '';
position: absolute;
right: 0;
border-right: 1px solid #cfc7c0;
top: 10%;
bottom: 10%;
}
//
end
</style>
</head>
<body ng-app="myTable" ng-controller="tableCtrl">
<div class="containter">
<div class="jumbotron">
<h1>JSON to Table</h1>
</div>
<div >
<div id="table1Div" style="background:white;position absolute;">
<table class="table table-hover table-bordered" id="peopleTable">
<tbody>
<tr>
<th>Catalog Name</th>
<th>Validation</th>
<th>publishing</th>
</tr>
<tr data-ng-repeat="catalog in Catalogs">
<td>{{catalog.name}}</td>
<td>{{catalog.validation}}</td>
<td>{{catalog.publishing}}</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" ng-click="change()">Clone</button>
</div>
</div>
</div>
</body>
</html>

See this https://plnkr.co/edit/hxdkNBvccYDie1tiigZy?p=preview
you Need to pass it while closing modal and get in controller
$uibModalInstance.dismiss($scope.item.Catalogs);

you can use $rootScope
myTable.controller('tableCtrl', function($scope, $rootScope,$http, $uibModal) {
$rootScope.Catalogs = [];
})
in another controller just push into catalogs not into item.catalogs
myTable.controller('ModalInstanceCtrl', function ($scope,$rootScope, $uibModalInstance, item) {
$scope.submitData = function() {
$rootScope.Catalogs.push({name: $scope.catalogName,validation: "true", publishing: "hello"});
}
});

Dynamic form field in angularjs

I have form with input field and check box and two buttons , buttons are for add and delete. But i here want to remove add button and want to show next field with just checking the check box.How can i do this?
angular.module('ionicApp',['ionic'])
.controller('myctrl',function($scope){
$scope.data ={
names:[{ name:""}]
};
$scope.addRow = function(index){
var name = {name:""};
if($scope.data.names.length <= index+1 && $scope.data.names.length<10){
$scope.data.names.splice(index+1,0,name);
}
};
$scope.deleteRow = function($event,index){
if($event.which == 1)
$scope.data.names.splice(index,1);
}
})
.button-dark{
margin-top:10px;
}
.button-delete{
display: inline-block;
float: right;
position: relative;
width: 24px;
height: 33px;
top: -36px;
right: 5px;
color: #fff;
background: red;
border: 0;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Multiple input</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="myctrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic app</h1>
</ion-header-bar>
<ion-content>
<form id="valueForm" ng-submit="saveValues(values)">
<div ng-repeat="name in data.names track by $index">
<label class="item item-input" style="width: 92%">
<input type="text" placeholder="Answer" ng-model="data.names[$index].name">
<ion-checkbox ng-model="success.first" ng-disabled="!data.names[$index].name" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox>
</label>
<button type="button" class=" button-delete" ng-click="deleteRow($event,$index)" ng-disabled="$index == 0"><i class="ion-ios-minus-empty"></i></button>
<input type="button" ng-click="addRow($index)" value="Add" ng-show="$last">
</div>
</div>
<button type="submit" class="button button-dark button-shadow pull-right" style="">Submit</button>
</div>
</form>
</ion-content>
</body>
</html>

Remove the Add Button and add ng-click="addRow($index)" to checkbox.. check below working snippet
angular.module('ionicApp',['ionic'])
.controller('myctrl',function($scope){
$scope.data ={
names:[{ name:""}]
};
$scope.addRow = function(index){
var name = {name:""};
if($scope.data.names.length <= index+1 && $scope.data.names.length<10){
$scope.data.names.splice(index+1,0,name);
}
};
$scope.deleteRow = function($event,index){
if($event.which == 1)
$scope.data.names.splice(index,1);
}
})
.button-dark{
margin-top:10px;
}
.button-delete{
display: inline-block;
float: right;
position: relative;
width: 24px;
height: 33px;
top: -36px;
right: 5px;
color: #fff;
background: red;
border: 0;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Multiple input</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="myctrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic app</h1>
</ion-header-bar>
<ion-content>
<form id="valueForm" ng-submit="saveValues(values)">
<div ng-repeat="name in data.names track by $index">
<label class="item item-input" style="width: 92%">
<input type="text" placeholder="Answer" ng-model="data.names[$index].name">
<ion-checkbox ng-model="success.first" ng-disabled="!data.names[$index].name" style="border: none;padding-left: 30px;" class="checkbox-royal" ng-click="addRow($index)"></ion-checkbox>
</label>
<button type="button" class=" button-delete" ng-click="deleteRow($event,$index)" ng-disabled="$index == 0"><i class="ion-ios-minus-empty"></i></button>
</div>
</div>
<button type="submit" class="button button-dark button-shadow pull-right" style="">Submit</button>
</div>
</form>
</ion-content>
</body>
</html>

Backbone view rendering through multiple templates

So I am creating a project on backbone and I have two drugtype categories and each drugtype shows a div with different field form when they are being clicked. I have created two different templates in my HTML. But unable to figure out how to render them on the basis of drugtype in my view. here are few code snippets:
Router.js
app = {
models: {},
views: {},
collections: {},
routers: {},
init: function() {
directory = new app.views.medicine(directoryData);
appRouter = new app.routers.Router();
Backbone.history.start();
}}
app.routers.Router = Backbone.Router.extend({
routes: {
'filter/:type': 'urlFilter'
},
urlFilter: function(type) {
directory.filterType = type;
directory.trigger('change:filterType');
}});
drug-model.js
app = app || {};
app.models.drug = Backbone.Model.extend({
defaults: {
'drugId': '',
'drugName': '',
'drugType': '',
'pharmaCompName': '',
'compound': '',
'drugInteractions': ''
},
initialize: function() {
var self = this;
}});
app.collections.medicine = Backbone.Collection.extend({
model: app.models.drug,
comparator: function(drug) {
return drug.get('drugName');
}});
drug-view
app = app || {};
app.views.drug = Backbone.View.extend({
tagName: 'li',
attributes: function() {
return {
class: 'drug ' + this.model.get('type')
};
},
events: {
'click .list-header': 'showDetails'
},
template1: _.template1($('#TABLET_TEMPLATE').html()),
template2:_.template2($('#SYRUP_TEMPLATE').html())
render: function() {
if (this.model.get('drugType') == 'Tablet') {
this.$el.html(_.template1(this.model.toJSON()));
else if (this.model.get('drugType') == 'Syrup') {
this.$el.html(_.template2(this.model.toJSON()));
return this;
},
showDetails: function(e) {
$(e.target).toggleClass('active');
$(e.target).siblings('.details').slideToggle('fast');
}});
app.views.medicine = Backbone.View.extend({
el: '#wrapper',
initialize: function(data) {
this.collection = new app.collections.medicine(data);
this.render();
this.$el.find('#filters').append(this.createFilters());
this.on('change:searchFilter', this.filterBySearch, this);
this.on('change:filterType', this.filterByType, this);
this.collection.on('reset', this.render, this);
},
events: {
'keyup #searchBox': 'searchFilter',
'click a.filter': 'setFilter'
},
render: function() {
var self = this;
$('#listing').empty();
_.each(this.collection.models, function(drug) {
self.renderdrug(drug);
}, this);
},
renderdrug: function(drug) {
var newdrug = new app.views.drug({
model: drug
});
$('#listing').append(newdrug.render().el);
},
getTypes: function() {
return _.uniq(this.collection.pluck('type'));
},
setListLength: function(l) {
$('#count').html(l);
},
createFilters: function() {
var filters = '<a class="filter" href="#all">all</a>';
_.each(this.getTypes(), function(item) {
filters += '<a class="filter" href="#' + item + '">' + item + '</a>';
});
return filters;
},
searchFilter: function(e) {
this.searchFilter = e.target.value;
this.trigger('change:searchFilter');
},
setFilter: function(e) {
e.preventDefault();
this.filterType = e.currentTarget.innerHTML;
this.trigger('change:filterType');
},
filterBySearch: function() {
this.collection.reset(directoryData, {
silent: true
});
var filterString = this.searchFilter,
filtered = _.filter(this.collection.models, function(item) {
return item.get('drugName').toLowerCase().indexOf(filterString.toLowerCase()) !== -1;
});
this.setListLength(filtered.length);
this.collection.reset(filtered);
},
filterByType: function() {
if (this.filterType === 'all') {
this.collection.reset(directoryData);
this.setListLength(this.collection.length);
appRouter.navigate('filter/all');
} else {
this.collection.reset(directoryData, {
silent: true
});
var filterType = this.filterType,
filtered = _.filter(this.collection.models, function(item) {
return item.get('type') === filterType;
});
this.setListLength(filtered.length);
this.collection.reset(filtered);
appRouter.navigate('filter/' + filterType);
}
}});
data.json
directoryData = [
{
"drugId": 44332,
"drugName": "Nimkul Para 100,500mg",
"drugType": "Tablet",
"pharmaCompName": "Finecure",
"compound": "Nimesulide + Paracetamol",
"drugInteractions": "",
"drugIndications": "",
"drugContraIndications": ""
},
{
"drugId": 44331,
"drugName": "Nimkul Para 50,125mg/5ml",
"drugType": "Syrup",
"pharmaCompName": "Finecure",
"compound": "Nimesulide + Paracetamol",
"drugInteractions": "",
"drugIndications": "",
"drugContraIndications": ""
}]
index.html
<head>
<title>App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="css/style.css" rel="stylesheet" />
</head>
<style>
ul#listing li .list-header.active .part2 {
display: none;
}
ul#listing li .list-header.active .icon {
display: block;
}
.icon {
display: none;
}
</style>
<body>
<div class="col-xs-12 container-fluid" id="wrapper">
<div class="col-xs-12 parentdiv" style=" ">
<div class="col-xs-12 part1">
<div class="col-xs-1 spacer1"></div>
<div class="col-xs-10 searchsection">
<div class="col-xs-12 header" style="">
Prescription For Hrittika Bhowmick
</div>
<div class="col-xs-12 nextsec">
<div class="col-xs-1 spacer2"></div>
<div class="col-xs-10 tooldiv">
<div class="col-xs-12 tools">
<form class="navbar-form" role="search" >
<div class="col-xs-12 input-groupaddon">
<div class="col-xs-11 searchbar">
<div class="col-xs-12 gh" style="padding-left:0px; padding-right: 0px;">
<input class="form-control" type="text" id="searchBox" placeholder="Search For Latest drugs" name="srch-term" style="
width: 100%;
height: 52px;
border-bottom-left-radius: 22px;
" />
</div>
</div>
<div class="col-xs-1 input-group-btn" style="
padding-right: 0px;
padding-left: 0px;
">
<button class="btn btn-default" type="submit" style="
height: 52.3px;
border-top-right-radius: 22px;
"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
<div class="col-xs-1 spacer1"></div>
</div>
<div class="col-xs-12 showdiv">
<div class="col-xs-6 col-md-2 text" style="">We are showing</div>
<div class="col-xs-1 mid" style="" id="count">20</div>
<div class="col-xs-4 next" style="">results </div>
</div>
</div>
<div class="col-xs-12 section2" style="height: 464px;">
<div class="col-xs-2 spacer2"></div>
<div class="col-xs-12 col-md-8 listdiv" style="padding-left: 0px;
padding-right: 0px;
border-radius: 10px">
<ul id="listing" style="
background: linear-gradient(to right,rgb(203, 111, 21) , rgb(205, 186, 88));
overflow-x: hidden;
border-radius: 24px;
overflow-y: scroll;
height:411px;" class="list"></ul>
</div>
<div class="col-xs-2"></div>
</div>
</div>
<script type="text/template" id="TABLET_TEMPLATE">
<div class="col-xs-12 list-header">
<div class="col-xs-6 part1">
<%= drugName %>
</div>
<div class="col-xs-6 part2" style="text-align: right;">
<%= drugType %>
</div>
<div class="col-xs-12 icon" style="margin-top: -20px;
text-align: right;">
<div class="col-xs-10 glyphicon glyphicon-trash" style="text-align: right;"></div>
<div class="col-xs-2 glyphicon glyphicon-info-sign" id="add-button" data-toggle="modal" data-target="#myModal" style="text-align: left;"></div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="details" style="border-bottom-left radius: 24px;height: 263px;display:none;background-color: rgba(220, 151, 25, 0.45);border-bottom-right-radius: 24px;padding-left: 0px; padding-right: 0px;">
<form class="form-inline" role="form">
<div class="col-xs-12 leftform" style="
padding-left: 0px;
height: 189px;
">
<div class="col-xs-12 semidiv">
<div class="col-xs-12 form-inline" style="padding-left:0px;">
<div class="col-xs-9 col-sm-11 div1" style="padding-left: 0px;">
<label for="name" class="labelclass" style="">Tablets (per dosage)</label>
</div>
<div class="col-xs-3 col-sm-1 div2">
<input type="number" class="form-control" id="name" placeholder="1" style="
color: white;
background-color: rgba(128, 128, 128, 0.44);
border: 1px solid rgba(0, 0, 255, 0);
font-weight: bold;
width:100px;
">
</div>
</div>
</div>
</div>
</form>
</div>
</script>
<script type="text/template" id="SYRUP_TEMPLATE">
<div class="col-xs-12 list-header">
<div class="col-xs-6 part1">
<%= drugName %>
</div>
<div class="col-xs-6 part2" style="text-align: right;">
<%= drugType %>
</div>
<div class="col-xs-12 icon" style="margin-top: -20px;
text-align: right;">
<div class="col-xs-10 glyphicon glyphicon-trash" style="text-align: right;"></div>
<div class="col-xs-2 glyphicon glyphicon-info-sign" id="add-button" data-toggle="modal" data-target="#myModal" style="text-align: left;"></div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="details" style=" border-bottom-left-radius: 24px;
height: 263px;
display:none;
background-color: rgba(220, 151, 25, 0.45);
border-bottom-right-radius: 24px;padding-left: 0px; padding-right: 0px;">
<form class="form-inline" role="form">
<div class="col-xs-12 leftform" style="
padding-left: 0px;
height: 189px;
">
<div class="col-xs-12 semidiv">
<div class="col-xs-12 form-inline" style="padding-left:0px;">
<div class="col-xs-9 col-sm-11 div1" style="padding-left: 0px;">
<label for="name" class="labelclass" style="">Tablets (per dosage)</label>
</div>
<div class="col-xs-3 col-sm-1 div2">
<input type="number" class="form-control" id="name" placeholder="1" style="
color: white;
background-color: rgba(128, 128, 128, 0.44);
border: 1px solid rgba(0, 0, 255, 0);
font-weight: bold;
width:100px;
">
</div>
</div>
</div>
</div>
<a href="#" <div="" class="col-xs-12 footer" style="
padding-left: 0px;
height: 53px;
background-color: #33D281;
border-bottom-left-radius: 18px;
padding-right: 0px;
text-align: center;
font-size: 26px;
border-bottom-right-radius: 21px;
">
Create Prescription
</a>
</form>
</div>
</script>
<script src="js/libs/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/libs/underscore-min.js" type="text/javascript"></script>
<script src="js/libs/backbone-min.js" type="text/javascript"></script>
<script src="js/libs/curl.js" type="text/javascript"></script>
<script src="js/libs/lodash.js" type="text/javascript"></script>
<script src="js/routers/router.js" type="text/javascript"></script>
<script src="js/models/drug-model.js" type="text/javascript"></script>
<script src="js/views/drug-views.js" type="text/javascript"></script>
<script src="js/data.json" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</div>

One of these two suggestions should help. These assume you recall render() when switching between types:
Switch based on drugType in render():
render: function() {
if (this.model.get('drugType') == 'Tablet') {
this.$el.html(_.template(TABLET_TEMPLATE));
else if (this.model.get('drugType') == 'Syrup') {
this.$el.html(_.template(SYRUP_TEMPLATE));
return this;
},
Use a single template that behaves according to the drugType from the model you pass into it:
<% if (drugType == 'Tablet') { %>
<!-- Render things here -->
<% } else if (drugType == 'Syrup') { %>
<!-- Render other things -->
<% } %>

How could I read a file from url display on ace editor

These days I am studying ajax and ace editor, I want to read a url file and display it on ace editor, I don't know how to get it when the url is https, do you have a good method?
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/cerulean/bootstrap.min.css" media="all"/>
<style>
#code1,#code2{
height:800px;
font-size:14px;
border-bottom:2px solid #999;
}
ul.app_cat_ul{
padding:0px;
list-style:none;
overflow:hidden;
}
ul.app_cat_ul li a:hover{
background-color:#EEE;
}
/* nav */
ul.nav_ul{
margin:0px;
padding:0px;
list-style:none;
overflow:hidden;
}
ul.nav_ul li{
float:left;
margin-right:3px;
}
ul.nav_ul li a{
padding:12px;
display:block;
color:#555;
background-color:#FFF;
border:1px solid #EEE;
}
ul.nav_ul li a:hover{
background-color:#EEE;
}
ul.ul_buttons li a{
margin:5px 0px;
color:#555;
background-color:#FFF;
border:1px solid #C0C0C0;
}
</style>
</head>
<body>
<div class="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1>ACE ajax test</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-inline text-left">
<fieldset>
<div class="form-group buttons_div">
<div class="col-md-12">
<ul class="nav_ul ul_buttons">
<li><a id="load_url" href="#">Load Url</a></li>
<li><a id="browse" href="#">Browse</a></li>
</ul>
</div>
</div>
<input style="display:none;" id="file" name="file" class="btn btn-default" type="file">
</fieldset>
</form>
<div class="row">
<div class="col-md-12 div_code1">
<div class="h_text">Enter here:</div>
<div id="code1"></div>
<div id="code2" style="display:none"></div>
</div>
</div>
</div><!-- Modal -->
<div class="modal fade" id="url_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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" id="myModalLabel">Enter Url</h4>
</div>
<div class="modal-body">
<input id="url" name="url" type="text" placeholder="Enter full url" class="form-control input-md">
</div>
<div class="modal-footer">
<button data-dismiss="modal" id="load" name="load" class="btn btn-success">Load</button>
<button data-dismiss="modal" id="cancel" name="cancel" class="btn btn-danger">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="well well-sm data_tb text-left" style="overflow:auto;display:none;"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zclip/1.1.2/jquery.zclip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ext-language_tools.js"></script>
<script>
$(document).ready(function(e) {
ace.require("ace/ext/language_tools");
var editorAce1 = ace.edit("code1");
editorAce1.focus();
editorAce1.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
editorAce1.setTheme("ace/theme/chrome");
editorAce1.getSession().setMode("ace/mode/plain_text");
var editorAce2 = ace.edit("code2");
editorAce2.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
editorAce2.setTheme("ace/theme/chrome");
editorAce2.getSession().setMode("ace/mode/html");
editorAce2.getSession().setUseWorker(false);
$("#load_url").click(function(e) {
e.preventDefault();
$("#url_modal").modal({backdrop : false});
});
$("#load").click(function(e) {
e.preventDefault();
url = $.trim($("#url").val());
if(url != "")
{
editorAce1.getSession().setUseWorker(false);
editorAce1.setValue("Please wait while loading file from url.");
$.ajax({
type : "POST",
url : "/get_data.php",
dataType: "text",
data : {"url" : url},
success : function(data)
{
if(data == "file_not_found")
{
editorAce1.setValue("Unable to load file from url!");
}else
{
editorAce1.getSession().setUseWorker(true);
editorAce1.setValue(data);
}
},
error : function()
{
editorAce1.setValue("Unable to load file from url!");
}
});
}
});
$("#browse").click(function(e) {
e.preventDefault();
$("#file").click();
});
function read_file(e)
{
f = e.target.files[0];
if(f)
{
r = new FileReader();
r.onload = function(e)
{
var contents = e.target.result;
var file_name = f.name;
editorAce1.getSession().setUseWorker(true);
editorAce1.setValue(contents);
}
r.readAsText(f);
}
else
{
editorAce1.getSession().setUseWorker(false);
editorAce1.setValue("Unable to load file!");
}
}
$("#file").change(function(e) {
e.preventDefault();
read_file(e);
});
themelist = ace.require("ace/ext/themelist");
theme = "";
$(themelist.themes).each(function(key, value) {
theme += '<option value="' + value.name + '">' + value.caption + '</option>';
});
$("#themes").append(theme);
$("#themes").val("chrome");
$("#font_size").val("14");
$("#themes,#font_size").change(function(e) {
setTheme();
editorAce1.focus();
});
});
</script>
</body>
</html>
The userface pic
Core code pic
Most of codes have worked well. Could you help me write the get_data.php file for me, let the page work. Thanks.

How to use JQuery noConflict() to load page

I want to use JQuery noConflict() in my load page.
This is my javascript to load the page:
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
// initial page load
$('#area').load('pages/home/home.php');
$("ul.sidebar-menu li a.Dashboard").addClass("hidups");
$('ul.sidebar-menu li a').click(function() {
var page = $(this).attr('href');
document.title = "Admin | " + page;
$("ul.sidebar-menu li a").removeClass("hidups");
$(this).addClass("hidups");
$('#area').load('pages/' + page + '/' + page + '.php', '', function(response, status, xhr) {
if (status == 'error') {
$("#area").load('pages/error/404.php');
}
});
return false;
});
});
</script>
and this is script on my page after load (product.php) :
<link rel="stylesheet" href="build/css/alertify.core.css" />
<link rel="stylesheet" href="build/css/alertify.default.css" id="toggleCSS" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<style type="text/css">
.modal-body2 {
height: 300px;
overflow-y: scroll;
padding: 15px;
position: relative;
}
.centerd {
bottom: 0;
left: 0;
margin: auto;
position: static;
right: 0;
top: 0;
width: 50%;
}
</style>
<script src="plugins/jQuery/jquery-1.8.3.min.js"></script>
<script src="build/js/alertify.min.js"></script>
<script type="text/javascript" src="plugins/tinymce/tinymce.min.js"</script>
<script type="text/javascript" src="pages/produk/aplikasi.js"></script>
<?php
// memanggil berkas koneksi.php
require '../../config/koneksi.php';
?>
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Jammin
<small>Data</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li>Tables</li>
<li class="active">Data Produk</li>
</ol>
</section>
<!-- tempat untuk menampilkan data mahasiswa -->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Data Produk</h3>
<a href="#myModal" id="0" class="tambah btn btn-default" data-toggle="modal" style="color:black">
Tambah Data </a>
<button type="button" class="btn btn-danger" id="delete-all">
<i class="icon-plus"></i> Hapus Semua Data
</button>
</div>
<div class="box-body">
<div id="data-produk"> </div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- awal untuk modal dialog -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Tambah Data Produk</h3>
</div>
<div class="modal-body2">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
<button id="simpan-produk" class="btn btn-success" data-dismiss="modal" aria-hidden="true" >Simpan Data</button>
</div>
</div>
</div>
</div>
But this won't work because JQuery.min has "crashed". I think I should use jquery.noConflict to fix it but I don't know how to use jquery.noConflict to my load page.

There's a few ways of approaching this, my favourite is a closure.
;(function($){
//$ is now safe here eg. $.('.selector');
})(jQuery);
Or
Just use $.noConflict before using the other libraries that require the dollar sign such as prototype
OR
Just use jQuery instead of $ everywhere, this will make your code less portable and less pretty :)

Use this for jQuerynoConflict
<script type="text/javascript">
JQuery(document).ready(function($) {
// initial page load
JQuery('#area').load('pages/home/home.php');
JQuery("ul.sidebar-menu li a.Dashboard").addClass("hidups");
JQuery('ul.sidebar-menu li a').click(function(){
var page = JQuery(this).attr('href');
document.title="Admin | "+page;
JQuery("ul.sidebar-menu li a").removeClass("hidups");
JQuery(this).addClass("hidups");
JQuery('#area').load('pages/'+page+'/'+ page +'.php' , '', function(response, status, xhr) {
if (status == 'error') {
JQuery("#area").load('pages/error/404.php');
}
});
return false;
});
});
</script>