Backbone view rendering through multiple templates

Backbone view rendering through multiple templates - javascript

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

Related

Change icon if a div has an specific background color

Hi i hope you could help me, i have a progress bar whith some PNG pin icons that have to change from active pin image to inactive pin image depending of the color of another div here is what im doing, but it doesnt seem to work, i learning JavaScript and Jquery so i don't know if im doing something wrong.
Thanks :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.quadrant {
border-radius: 5px;
border: .5px solid #d8d8d6;
padding: 10px;
margin-bottom: 20px;
}
.quadrant > p {
text-align: center;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font-size: 20pt;
color: #ffffff;
font-weight: 700;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
}
.progress {
width: 100%;
height: 25px;
background-color: #F1F1F1;
box-shadow: 1px 1px 1px 1px #d8d8d6;
}
.bar {
width: 25%;
height: 25px;
background-color: #003E8B;
}
.number {
border-radius: 10px;
border: 5px solid #ffffff;
height: auto;
margin-left: auto;
margin-right: auto;
color: #ffffff;
font-weight: 700;
text-align: center;
margin-top: 10px;
padding-top: 15px;
}
.number:hover {
opacity: 0.8;
}
.number > p {
font-size: 12px;
}
.color-pin {
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col--xs-12">
<div class="row">
<h3>Diagnostico en</h3>
</div>
<br><br>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="quadrant" style="background-color: #009BF3;">
<img src="icons/instutucional.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
<p>20%</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div classs="quadrant">
<div class="quadrant" style="background-color: #007305;">
<img src="icons/economico.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
<p>40%</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div classs="quadrant">
<div class="quadrant" style="background-color: #EA8C1C;">
<img src="icons/economico.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
<p>40%</p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div classs="quadrant">
<div class="quadrant" style="background-color: #21AAA0;">
<img src="icons/economico.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
<p>40%</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<!---<img src="icons/pin_insitucional.png" class="color-pin" id="institucional">--->
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<img src="icons/pin_inactivo_economico.png" class="color-pin" id="economico">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<img src="icons/pin_inactivo_social.png" class="color-pin" id="social">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<img src="icons/pin_inactivo_naturaleza.png" class="color-pin" id="naturaleza">
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="progress">
<div class="bar">
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<h2>Consejos de Uso</h2>
<p>Comienza por contestar primero todas las variables y después sube las evidencias conforme las obtengas.</p>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #d8d8d6; cursor: pointer;" id="btn-institucional">
<p>1</p>
<img src="icons/institucional.png" width="50%">
<p>Desarrollo Institucional para un Buen Gobierno</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #007305; cursor: pointer;">
<p>2</p>
<img src="icons/economico.png" width="50%">
<p>Desarrollo Económico Sostenible</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #EA8C1C; cursor: pointer;">
<p>3</p>
<img src="icons/social.png" width="50%">
<p>Desarrollo Social Incluyente</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #21AAA0; cursor: pointer;">
<p>4</p>
<img src="icons/natural.png" width="50%">
<p>Desartrollo Ambiental Sostenible</p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script>
var color= $"btn-institucional");
if( color.css('background-color') == "rgb(216,216,214)"){
document.getElementById("institucional").src="icons/pin_inactivo_insitucional.png";
} else {
document.getElementById("institucional").src = "icons/pin_insitucional.png";
}
</script>
</body>
</html>

Two issues I found:
You forgot to add the id institucional to your img dom. It should be:
document.getElementById("btn-institucional").style.backgroundColor gives you the color in rgb, not in hex. In your code, the value it returns is rgb(216, 216, 214)
You can use a rgb2hex utility function:
function rgb2hex(rgb) {
if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
source
Here's an example:
console.log(document.getElementById("btn-institucional").style.backgroundColor); // returns rgb(216, 216, 214)
function rgb2hex(rgb) {
if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
let backgroundColor = rgb2hex(document.getElementById("btn-institucional").style.backgroundColor)
if( backgroundColor == "#d8d8d6") {
document.getElementById("institucional").src = "http://www.ptahai.com/wp-content/uploads/2016/06/Best-Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg";
}
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #d8d8d6; cursor: pointer;" id="btn-institucional">
<p>1</p>
<img id="institucional" src="institucional" src="https://www.w3schools.com/howto/img_fjords.jpg" width= "50%">
<p>Desarrollo Institucional para un Buen Gobierno</p>
</div>

.style.backgroundColor returns an rgb( string, not a #xxxxxx string. You'll have to parse the rgb( string's numbers and turn them into the appropriate hex string, like so:
const rgb = document.getElementById("btn-institucional").style.backgroundColor;
const rgbNums = rgb.match(/\((.+)\)/)[1].split(', ');
const rgbHex = rgbNums.map(num => {
const numStr = Number(num).toString(16);
if (numStr.length === 1) return '0' + numStr;
return numStr;
});
const hexStr = '#' + rgbHex.join('');
console.log(hexStr);
if(hexStr == "#d8d8d6"){
console.log('set src');
document.getElementById("institucional").src="icons/pin_inactivo_insitucional.png";
}
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<img src="icons/pin_insitucional.png" class="color-pin" id="institucional">
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #d8d8d6; cursor: pointer;" id="btn-institucional">
<p>1</p>
<img src="icons/institucional.png" width= "50%">
<p>Desarrollo Institucional para un Buen Gobierno</p>
</div>

You have a syntax error here: var color= $"btn-institucional");.
It should be: var color= $("btn-institucional");.
And, when you get the background-color CSS property value, it comes back as an rgb string with spaces after each comma:
// Notice that there will be spaces after each comma in the result
console.log($("div").css("color")); // rgb(255, 255, 0)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="color:#ff0;">test</div>
You can either adjust the rgb string you are comparing it to or simply extract the value of the style attribute, which will come back as the hex value it was written into the HTML with:
// This is a bit longer, but shows that you can get the original hex value
// Get the "style" attribute, split its value where the colon is and return the second part of the
// resulting array.
console.log($("div").attr("style").split(":")[1]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="color:#ff0;">test</div>

How to use $(this) selector to animate divs with the same class?

I have two divs, with the same class name of .pageSlide. When I click on the button with class name .moveup or .movedown, I specifically want that button's respective div to slide up or down. At the moment, if I click on the button associated with say, div A, then div B also animates. I'm guessing I need a $(this) selector in the JS somewhere. I'm not sure.
Here's a jsfiddle of working code
https://jsfiddle.net/hpe459ok/
Essentially I have this:
$('.moveup').click(function() {
if ($('.pageSlide').css('top') == '-420px') {
$('.pageSlide').animate({
top: '0'
}, 700);
} else {
$('.pageSlide').animate({
top: '0'
}, 700);
}
});
$('.movedown').click(function() {
if ($('.pageSlide').css('top') == '0') {
$('.pageSlide').animate({
top: '420'
}, 500);
} else {
$('.pageSlide').animate({
top: '420'
}, 500);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
<div class="page1">
content
<button class="moveup">Next page</button>
</div>
<div class="page2 pageSlide">
content
<button class="movedown">Previous page</button>
</div>
</div>
<div class="container2">
<div class="page1">
content
<button class="moveup">Next page</button>
</div>
<div class="page2 pageSlide">
content
<button class="movedown">Previous page</button>
</div>
</div>

Try using the below code:
$('.moveup').click(function() {
$(this).closest(".page1").siblings('.pageSlide').animate({
top: '0'
}, 700);
});
$('.movedown').click(function() {
$(this).closest(".page2").animate({
top: '420'
}, 500);
});

I would use data attributes on your .moveup and .movedown buttons. By setting an attribute data-parent to be the id of the top level parent <div> it becomes trivial to modify your existing functions to handle the proper animations.
$('.moveup').click(function() {
var parent = $(this).data('parent');
if ($('#'+parent).find('.pageSlide').css('top') == '-420px') {
$('#'+parent).find('.pageSlide').animate({
top: '0'
}, 700);
} else {
$('#'+parent).find('.pageSlide').animate({
top: '0'
}, 700);
}
});
$('.movedown').click(function() {
var parent = $(this).data('parent');
if ($('#'+parent).find('.pageSlide').css('top') == '0') {
$('#'+parent).find('.pageSlide').animate({
top: '420'
}, 500);
} else {
$('#'+parent).find('.pageSlide').animate({
top: '420'
}, 500);
}
});
.pageSlide {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 400px;
background: ghostwhite;
z-index: 0;
}
.page2 {
z-index: 1;
top: 420px;
}
.image-wrapper {
height: 400px;
overflow: hidden;
position: relative;
text-align: center;
border: black 1px solid;
}
.overlay-left {
background-color: white;
}
.overlay-right {
background-color: white;
}
.image-overlay-content-left {
background-color: white;
}
.image-overlay-content-right {
background-color: white
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small-12 columns" id="nominate">
<div class="image-wrapper overlay overlay-left">
<div class="image-overlay-content image-overlay-content-left" id="formslide">
<form id="foo" method="post" name="nomForm" action="nominate-test.html#thankyou">
<div class="page1">
<label class="row">
<h2 class="headline">Your name</h2>
<input placeholder="e.g. John Smith" type="text" name="name" id="name" tabindex="1" autofocus>
<span id="nameError" class="error headline"></span>
</label>
<label class="row email">
<h2 class="headline">Your email address</h2>
<input placeholder="example#rofordaward.co.uk" type="text" name="email" id="email" tabindex="2">
<span id="emailError" class="error headline"></span>
</label>
<label class="row">
<h2 class="headline">Company name</h2>
<input placeholder="e.g. Roford" type="text" name="company" id="company" tabindex="3">
<span id="companyError" class="error headline"></span>
</label>
<div class="next">
<button type="button" class="moveup" data-parent="nominate">Next page</button><i class="icon-down-open"></i></div>
</div>
<div class="pageSlide page2">
<label class="row reason">
<h2 class="headline">Reason for nomination</h2>
<textarea id="textarea" rows="6" cols="25" maxlength="1000" name="message" id="message" placeholder="A brief evidence based summary"></textarea>
<span id="messageError" class="error headline"></span>
<div id="text-area-wrap">
<div id="textarea_feedback"></div>
</div>
</label>
<div class="row button-wrap">
<div class="column small-12">
<input class="button" name="submit" type="submit" id="contact-submit" value="Submit">
</div>
</div>
<div class="prev">
<button type="button" class="movedown" data-parent="nominate">Previous page</button><i class="icon-up-open"></i></div>
</div>
</form>
</div>
</div>
</div>
<div class="small-12 columns" id="apply">
<div class="image-wrapper overlay overlay-right">
<div class="overlay-option-headline overlay-option-headline-right">
<h5>Tell us why you're a great business</h5>
<h1 class="headline">Apply</h1>
</div>
<div class="image-overlay-content image-overlay-content-right">
<div class="page1">
<h2 class="headline">Application Form</h2>
<div class="row apply-points">
<div class="column small-12">
<h5>Please make sure you have read our Criteria page and terms and conditions in full before applying.</h5></div>
<div class="column small-12">
<h5>Ensure you have gathered evidence to support your application.</h5></div>
<div class="column small-12">
<h5>Shortlisted companies will be contacted with further instructions.</h5></div>
</div>
<div class="next">
<button type="button" class="moveup" data-parent="apply">Next page</button><i class="icon-down-open"></i></div>
</div>
<div class="page2 pageSlide">
<h2 class="headline">Contact name</h2>
<div class="row apply-points">
<div class="column small-12">
<h5>aduhwijdaduhwijdaduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijdaduhwijdaduhwijdaduhwijdaduhwijdad aduhwijd aduhwijd aduhwijdaduhwijd aduhwijd ijdaduhwijdaduhwijdaduhwijdaduhwijdad aduhwijd aduhwijd aduhwijdaduhwijd aduhwijd</h5></div>
</div>
<div class="prev">
<button type="button" class="movedown" data-parent="apply">Previous page</button><i class="icon-up-open"></i></div>
</div>
</div>
</div>
</div>

Toggle class in closest parent

So I have this jquery that i need to make it work. But through all the parents() and children(), I can't get to where I want.
My objective is when I click in the button, the class icon-cross, toggle to icon-tick.
(In this snippet bellow, I made an example to explain better. In this case I want to change the color of the rectangle)
$(function() {
$(".addOpt").click(function(e) {
$(this).text(function(i, text) {
return text === "Add" ? "Remove" : "Add";
});
$(this).toggleClass("btn-primary btn-remove");
//the problem is the following line:
$(this).closest(".quoteCompare").children(".quoteCompareInside").p.toggleClass("icon-tick icon-cross");
e.preventDefault();
});
})
.icon-cross {
width: 50px;
height: 10px;
background-color: green;
}
.icon-tick {
width: 50px;
height: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row ">
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<p class="icon-cross"></p>
<p class="title noMarginBottom">10€</p>
</div>
</div>
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<div class="form-row valign">
<button type="button" class="btn btn-primary buttonOpt addOpt">Add</button>
</div>
</div>
</div>
</div>

You should take p as selector, not as property:
$(this).closest(".quoteCompare").children(".quoteCompareInside").find('p').toggleClass("icon-tick icon-cross");
If you want to get only 1st p element you can use eq method:
$(this).closest(".quoteCompare").children(".quoteCompareInside").find('p').eq(0).toggleClass("icon-tick icon-cross");
Edit:
Note that closest quoteCompare will return second div with classes medium-6 xsmall-12 small-12 column quoteCompare, so you probably also should use prev() in your code:
$(this).closest(".quoteCompare").prev().children(".quoteCompareInside").find('p').eq(0).toggleClass("icon-tick icon-cross");
$(function() {
$(".addOpt").click(function(e) {
$(this).text(function(i, text) {
return text === "Add" ? "Remove" : "Add";
});
$(this).toggleClass("btn-primary btn-remove");
//the problem is the following line:
$(this).closest(".quoteCompare").prev().children(".quoteCompareInside").find('p').eq(0).toggleClass("icon-tick icon-cross");
e.preventDefault();
});
})
.icon-cross {
width: 50px;
height: 10px;
background-color: green;
}
.icon-tick {
width: 50px;
height: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row ">
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<p class="icon-cross"></p>
<p class="title noMarginBottom">10€</p>
</div>
</div>
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<div class="form-row valign">
<button type="button" class="btn btn-primary buttonOpt addOpt">Add</button>
</div>
</div>
</div>
</div>

You can include the p in the children() selector:
$(function() {
$(".addOpt").click(function(e) {
$(this).text(function(i, text) {
return text === "Add" ? "Remove" : "Add";
});
$(this).toggleClass("btn-primary btn-remove");
//the problem is the following line:
$(this).closest(".quoteCompare").children(".quoteCompareInside p").toggleClass("icon-tick icon-cross");
e.preventDefault();
});
})
.icon-cross {
width: 50px;
height: 10px;
background-color: green;
}
.icon-tick {
width: 50px;
height: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row ">
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<p class="icon-cross"></p>
<p class="title noMarginBottom">10€</p>
</div>
</div>
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<div class="form-row valign">
<button type="button" class="btn btn-primary buttonOpt addOpt">Add</button>
</div>
</div>
</div>
</div>

We need to traverse to <div class="row"> to grab the associated <p> tag. Please have a look at below snippet:
$(function() {
$(".addOpt").click(function(e) {
$(this).text(function(i, text) {
return text === "Add" ? "Remove" : "Add";
});
$(this).toggleClass("btn-primary btn-remove");
//the problem is the following line:
if($(this).text() === "Remove")
$(this).closest(".row").find("p.icon-cross").toggleClass("icon-tick icon-cross");
else
$(this).closest(".row").find("p.icon-tick").toggleClass("icon-tick icon-cross");
e.preventDefault();
});
})
.icon-cross {
width: 50px;
height: 10px;
background-color: blue;
}
.icon-tick {
width: 50px;
height: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row ">
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<p class="icon-cross"></p>
<p class="title noMarginBottom">10€</p>
</div>
</div>
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<div class="form-row valign">
<button type="button" class="btn btn-primary buttonOpt addOpt">Add</button>
</div>
</div>
</div>
</div>

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.

Can I avoid "white" topBar, when JavaScript is executed?

I build my page with angularJS. When I test it every thing works well,
but sometimes the page flickers.
Here is a sample when I click M1 > Sub-Menu-Item, I see the page flicker.
Can anybody help me, please?
My ngRoute:
'use strict';
angular.module('ssdWebClientApp.Routes', [])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/m1/', {
templateUrl: '/views/m1/m1_list.html',
controller: 'M1'
})
...
.otherwise({
redirectTo: '/main'
});
}
]);
My Modules Main.js that enable pushState Featrue:
var App = angular.module('ssdWebClientApp', [
'ngGrid',
'ngCookies',
'ngResource',
'ngRoute',
'ngAnimate',
'angular.filter',
'ssdWebClientApp.Controllers',
'ssdWebClientApp.Routes',
'ssdWebClientApp.Services',
'ssdWebClientApp.Directives'
])
...
.config(function($interpolateProvider, $locationProvider, $httpProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$locationProvider.hashPrefix = '!';
$httpProvider.defaults.timeout = 300;
})
...
My Sub Module Script for M1:
'use strict';
angular.module('ssdWebClientApp.Controllers')
//s064
.controller('M1', ['$rootScope', '$scope', '$http', '$location', '$cookies', '$routeParams', '$filter', 'empty', 'm1',
function($rootScope, $scope, $http, $location, $cookies, $routeParams, $filter, empty, m1) {
console.debug('m1 init.');
$http.defaults.headers.common['X-CSRFToken'] = $cookies.csrftoken;
//
var params = {};
var sortingBy = ' +' || ' -';
var inquery_has_been_clicked = false;
//
$scope.inquery = function(reset){
$scope.hide_grid = false;
if(reset){
$scope.form.offset = 0;
params.downloadOrderId = $scope.form.downloadOrderId;
params.homeSIMMSISDN = $scope.form.homeSIMMSISDN;
params.iccid = $scope.form.iccid;
params.msisdn = $scope.form.msisdn;
params.limit = $scope.form.limit;
params.offset = $scope.form.offset;
}
else{
params.offset = $scope.form.offset;
if(!params.limit){
params.limit = $scope.form.limit;
}
}
// clean data for java server....lol
if(!params.downloadOrderId) delete params.downloadOrderId;
if(!params.homeSIMMSISDN) delete params.homeSIMMSISDN;
if(!params.iccid) delete params.iccid;
if(!params.msisdn) delete params.msisdn;
$scope.ajaxing = true;
m1.m1_downloaded_sim_list(params, function(data, status){
if (data.status != 200) {
$rootScope.go_error(status, data.error || data.message || data.error_message || data.msg);
$scope.customers = [];
$scope.total = [];
$scope.ajaxing = false;
return;
};
$scope.customers = data.objects;
$scope.customers.every(function(row){
row.origin_status = row.status;
return true;
});
$scope.total = data.meta.total_count;
$scope.ajaxing = false;
}, function(data, status){
$rootScope.go_error(status, data.error || data.message || data.error_message || data.msg);
$scope.ajaxing = false;
});
};
//
$scope.inquery_clicked = function(reset){
var input_params = [$scope.form.downloadOrderId, $scope.form.homeSIMMSISDN, $scope.form.iccid, $scope.form.msisdn];
var not_empty_count = 0;
for(var i = 0; i < input_params.length; i++){
if(input_params[i]){
not_empty_count += 1;
}
};
if(not_empty_count >= 2){
alert('Please keep only one input');
return;
};
if($scope.form.downloadOrderId || $scope.form.homeSIMMSISDN || $scope.form.iccid || $scope.form.msisdn){
$scope.inquery(reset);
inquery_has_been_clicked = true;
}
else{
alert('No input found.');
}
};
//
$scope.show_m1_iccid = function(item){
// console.log(item);
var url = item.iccidImage || '';
// url = CONFIG.file_path + url;
$('#m1_iccid_bar_code')
.modal('show')
.find('.bar_code')
.attr('src', url);
};
//
$scope.show_m1_msisdn = function(item){
// console.log(item);
var url = item.msisdnImage || '';
// url = CONFIG.file_path + url;
$('#m1_msisdn_bar_code')
.modal('show')
.find('.bar_code')
.attr('src', url);
};
//
$scope.input_security_code = function(item){
$scope.securityCode = '';
$scope.prepare_update_record = item;
$('#input_security_code').modal('show');
};
//
$scope.update = function(securityCode){
if(!securityCode){
alert("Please input security code.");
return;
}
var post_data = {
imsi: $scope.prepare_update_record.imsi,
homeSIMMSISDN: $scope.prepare_update_record.homeSIMMSISDN,
securityCode: securityCode,
status: $scope.prepare_update_record.status,
};
m1.m1_downloaded_sim_update(post_data, function(data, status){
if (data.status != 200) {
$rootScope.go_error(status, data.error || data.message || data.error_message || data.msg);
return;
}
alert('Update Success!');
$('#input_security_code button[data-dismiss=modal]').click();
$scope.inquery(false);
}, function(data, status){
$rootScope.go_error(status, data.error || data.message || data.error_message || data.msg);
});
};
//
$scope.sorting = function(field){
if($scope.customers && $scope.customers.length > 0){
$scope.customers.sort(function(first ,next){
if(sortingBy == ' +'){
return first[field] > next[field];
}
else{
return first[field] < next[field];
}
})
}
$('th[field] span.sortingBy').empty();
$('th[field=' + field + '] span.sortingBy').text(sortingBy);
if(sortingBy == ' +'){
sortingBy = ' -';
}
else{
sortingBy = ' +';
}
};
//
$scope.hide_grid = true;
$scope.ajaxing = false;
$scope.prepare_update_record = null;
$scope.form = {};
$scope.form.downloadOrderId = $routeParams.downloadOrderId || '';
$scope.form.homeSIMMSISDN = $routeParams.homeSIMMSISDN || '';
$scope.form.iccid = $routeParams.iccid || '';
$scope.form.msisdn = $routeParams.msisdn || '';
$scope.form.limit = $routeParams.limit || 12;
$scope.form.offset = $routeParams.offset || 0;
$scope.total = 0;
$scope.customers = [];
$scope.statusList = [];
$scope.query_string = $scope.form;
$scope.securityCode = '1';
//
m1.m1_downloaded_sim_status_list(function(data, status){
if(status != 200){
$rootScope.go_error(status, data.error || data.message || data.error_message || data.msg);
return;
}
$scope.statusList = data.statusList;
}, function(data, status){
$rootScope.go_error(status, data.error || data.message || data.error_message || data.msg);
});
//
$scope.$watch('form.offset', function(new_value, old_value){
if(inquery_has_been_clicked){
$scope.inquery();
};
}, true);
}
]);
My M1 Feature's View:
<div class="container r ssd-platform" style="width: 1300px; min-width: 1300px;">
<h3 style="text-align: center;">Inquire M1 SIM</h3>
<br>
<form role="form" class="form-inline m1">
<div class="row">
<div class="col-md-4 col-voucher">
<div class="input-group" style="width: 100%;">
<div class="input-group-addon m1_control_panel_label" style="font-size: 10pt;">Voucher No:</div>
<input class="form-control" type="text" ng-model="form.downloadOrderId" maxlength="24">
</div>
</div>
<div class="col-md-4 col-homesimmsisdn">
<div class="input-group" style="width: 100%;">
<div class="input-group-addon m1_control_panel_label" style="font-size: 10pt;">Home SIM MSISDN:</div>
<input class="form-control" type="text" ng-model="form.homeSIMMSISDN" maxlength="16">
</div>
</div>
<div class="col-md-4 col-m1iccid">
<div class="input-group" style="width: 100%;">
<div class="input-group-addon m1_control_panel_label" style="font-size: 10pt;">M1 ICCID:</div>
<input class="form-control" type="text" ng-model="form.iccid" maxlength="20">
</div>
</div>
<div class="col-md-4 m1-msisdn">
<div class="input-group" style="width: 100%;">
<div class="input-group-addon m1_control_panel_label" style="font-size: 10pt;">M1 MSISDN:</div>
<input class="form-control" type="text" ng-model="form.msisdn" maxlength="16">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 input-group m1-query-btn pull-right" style="margin-top: 5px;">
<button type="button" class="btn btn-info btn-lg" style="border-radius: 5px; width: 100%; height: 40px; border-radius: 0px; height: 38px;" ng-click="inquery_clicked(true);">Inquery</button>
</div>
</div>
</form>
<div ng-hide="create_paginator(total, form.limit, form.offset).length <= 0" style="position: relative;">
<ul class="pagination" style="margin: 0px; float: left;" ng-show="create_paginator(total, form.limit, form.offset).length > 0">
<li><a href ng-click="prev(form);">«</a></li>
<li ng-repeat="num in create_paginator(total, form.limit, form.offset)" ng-class="{true: 'active', false: ''}[form.offset/form.limit+1 == num]">
<a href ng-click="page(form, num)">{{num}}</a>
</li>
<li><a href ng-click="next(form, total)">»</a></li>
</ul>
</div>
<hr>
<br />
<table class="table table-bordered no-border-width top-spa" style="width: 100%;">
<tr>
<th field="downloadOrderId" style="cursor: pointer; width: 243px;" ng-click="sorting('downloadOrderId')">
Voucher No
<span class="sortingBy"></span>
</th>
<th field="homeSIMMSISDN" style="cursor: pointer; width: 178px;" ng-click="sorting('homeSIMMSISDN')">
Home SIM MSISDN
<span class="sortingBy"></span>
</th>
<th field="iccid" style="cursor: pointer; width: 190px;" ng-click="sorting('iccid')">
M1 ICCID
<span class="sortingBy"></span>
</th>
<th field="imsi" style="cursor: pointer; width: 200px;" ng-click="sorting('imsi')">
M1 IMSI
<span class="sortingBy"></span>
</th>
<th field="msisdn" style="cursor: pointer; width: 200px;" ng-click="sorting('msisdn')">
M1 MSISDN
<span class="sortingBy"></span>
</th>
<th field="status" style="cursor: pointer; width: 135px;" ng-click="sorting('status')">
Status
<span class="sortingBy"></span>
</th>
<th style="width: 108px;">
Action
</th>
</tr>
<tr ng-repeat="item in customers" ng-if="customers.length > 0 && ajaxing == false && !hide_grid">
<td style="text-align: center;">{{ item.downloadOrderId }}</td>
<td style="text-align: left;">{{ item.homeSIMMSISDN }}</td>
<td style="text-align: center;">
<a ng-click="show_m1_iccid(item);">
{{ item.iccid }}
</a>
</td>
<td style="text-align: center;">{{ item.imsi }}</td>
<td style="text-align: center;">
<a ng-click="show_m1_msisdn(item);">
{{ item.msisdn }}
</a>
</td>
<td style="text-align: center;">
<select class="form-control" ng-model="item.status" style="padding: 0px; width: 110px!important;" ng-disabled="item.origin_status == 'Reject' || item.origin_status == 'Collected'">
<option ng-repeat="status in statusList" value="{{ status }}" ng-selected="item.status == status">{{ status }}</option>
</select>
</td>
<td style="text-align: center;">
<button
type="button"
class="btn btn-default btn-lg"
style="border-radius: 0px; width: 100%; height: 25px; padding: 0px;"
ng-click="input_security_code(item)"
ng-disabled="item.status == 'Booking' || item.origin_status == 'Reject' || item.origin_status == 'Collected'">
Update
</button>
</td>
</tr>
<tr ng-show="customers.length == 0 && ajaxing == false && !hide_grid">
<td colspan="7">
<div style="width: 100%; background-color: transparent; text-align: center; color: red;">
No Data Found.
</div>
</td>
</tr>
<tr ng-show="ajaxing == true && !hide_grid">
<td colspan="7">
<div class="ajaxing-min" style="min-height: 30px; width: 100%;"></div>
</td>
</tr>
</table>
<!-- Modal -->
<div class="modal fade" id="m1_iccid_bar_code" style="z-index:9999;">
<div class="modal-dialog" style="width: 800px; margin-top: 200px;">
<div class="modal-content">
<div class="modal-header bg-primary" style="border-radius: 5px 5px 0px 0px;">
<div class="row">
<div class="col-md-8">
<h3 class="modal-title" id="ModalLabel" style="color: white;">M1 ICCID Bar Code</h3>
</div>
</div>
</div>
<div class="modal-body" style="text-align: center;">
<img class="bar_code" src="/images/glyphicons-halflings.png" alt="bar_code">
</div>
<div class="modal-footer">
<button type="button" style="margin-left: 40%; margin-right: 40%; width: 20%; padding: 0px 10px 0px 10px; border-radius: 0px; height: 25px;" class="btn btn-default btn-lg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="m1_msisdn_bar_code" style="z-index:9999;">
<div class="modal-dialog" style="width: 800px; margin-top: 200px;">
<div class="modal-content">
<div class="modal-header bg-primary" style="border-radius: 5px 5px 0px 0px;">
<div class="row">
<div class="col-md-8">
<h3 class="modal-title" id="ModalLabel" style="color: white;">M1 MSISDN Bar Code</h3>
</div>
</div>
</div>
<div class="modal-body" style="text-align: center;">
<img class="bar_code" src="/images/glyphicons-halflings.png" alt="bar_code">
</div>
<div class="modal-footer">
<button type="button" style="margin-left: 40%; margin-right: 40%; width: 20%; padding: 0px 10px 0px 10px; border-radius: 0px; height: 25px;" class="btn btn-default btn-lg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="input_security_code" style="z-index:9999;">
<div class="modal-dialog" style="width: 600; margin-top: 200px;">
<div class="modal-content">
<div class="modal-header bg-primary" style="border-radius: 5px 5px 0px 0px;">
<div class="row">
<div class="col-md-8">
<h3 class="modal-title" id="ModalLabel" style="color: white;">Input Security Code</h3>
</div>
</div>
</div>
<div class="modal-body" style="text-align: center;">
<input type="text" class="form-control" placeholder="Security Code" ng-model="securityCode" />
</div>
<div class="modal-footer">
<div class="btn-group-lg top-spa" style="text-align: center;">
<button type="button" style="width: 20%; padding: 0px 10px 0px 10px; border-radius: 0px; height: 25px;" class="btn btn-default btn-lg" ng-click="update(securityCode);">OK</button>
<button type="button" style="width: 20%; padding: 0px 10px 0px 10px; border-radius: 0px; height: 25px;" class="btn btn-default btn-lg" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Counter -->
<style>
form.m1 div[class^=col-md] {
font-size: 8pt;
padding: 0px;
padding-left: 5px;
font-weight: bold;
}
.ajaxing-min {
background-image: url('/images/ajaxing-min.gif');
background-repeat: no-repeat;
background-position: center;
}
.col-voucher {
width: 27%;
}
.m1-query-btn, .col-voucher {
padding-left: 0px!important;
}
.col-homesimmsisdn {
width: 25%;
}
.col-m1iccid {
width: 25%;
}
.m1-msisdn {
width: 23%;
}
.m1-query-btn {
width: 200px;
float: right;
}
th {
background-color: lightgrey;
text-align: center;
}
</style>
My index.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<!--[if lt IE 9]><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GreenRoam</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css /styles/app.css -->
<link rel="stylesheet" href="/components/jquery-ui/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/components/jqueryui-timepicker-addon/dist/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" href="/components/swipebox/src/css/swipebox.css">
<!-- <link rel="stylesheet" href="/components/jquery-resizable-columns/dist/jquery.resizableColumns.css"> -->
<link rel="stylesheet" href="/components/ng-grid/ng-grid.min.css"></script>
<link rel="stylesheet" href="/styles/bootstrap.css">
<link rel="stylesheet" href="/styles/main.css">
<link rel="stylesheet" href="/styles/ssd-platform.css">
<link rel="stylesheet" href="/styles/ssd-platform-ng-grid-extends.css">
<!-- endbuild -->
</head>
<body ng-app="ssdWebClientApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="{% get_static_prefix %}components/es5-shim/es5-shim.js"></script>
<script src="{% get_static_prefix %}components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- Add your site or application content here -->
<!-- Header - NaviBar -->
<ssd-navbar></ssd-navbar>
<!-- Render Part -->
<div ng-view></div>
<!-- Footer -->
<ssd-footer></ssd-footer>
<!-- Additional Template -->
<ssd-alert></ssd-alert>
<!-- build:js /scripts/app.js -->
<script src="/components/jquery/dist/jquery.js"></script>
<script src="/components/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="/components/jqueryui-timepicker-addon/dist/jquery-ui-sliderAccess.js"></script>
<script src="/components/jqueryui-timepicker-addon/dist/jquery-ui-timepicker-addon.js"></script>
<script src="/components/swipebox/src/js/jquery.swipebox.js"></script>
<script src="/components/angular/angular.js"></script>
<script src="/components/bootstrap/js/affix.js"></script>
<script src="/components/bootstrap/js/alert.js"></script>
<script src="/components/bootstrap/js/button.js"></script>
<script src="/components/bootstrap/js/carousel.js"></script>
<script src="/components/bootstrap/js/collapse.js"></script>
<script src="/components/bootstrap/js/dropdown.js"></script>
<script src="/components/bootstrap/js/modal.js"></script>
<script src="/components/bootstrap/js/scrollspy.js"></script>
<script src="/components/bootstrap/js/tab.js"></script>
<script src="/components/bootstrap/js/tooltip.js"></script>
<script src="/components/bootstrap/js/transition.js"></script>
<script src="/components/bootstrap/js/popover.js"></script>
<script src="/components/smoothscroll-for-websites/SmoothScroll.js"></script>
<script src="/components/angular-resource/angular-resource.js"></script>
<script src="/components/angular-cookies/angular-cookies.js"></script>
<script src="/components/angular-route/angular-route.js"></script>
<script src="/components/angular-animate/angular-animate.js"></script>
<script src="/components/angular-filter/dist/angular-filter.js"></script>
<script src="/components/ng-grid/build/ng-grid.js"></script>
<script src="/components/ng-grid/plugins/ng-grid-flexible-height.js"></script>
<script src="/components/ng-grid/plugins/ng-grid-layout.js"></script>
<!-- Base -->
<script src="/scripts/Config/config.js"></script>
<script src="/scripts/Config/base_config.js"></script>
<script src="/scripts/Config/code_config.js"></script>
<script src="/scripts/Modules/main.js"></script>
<!-- Routes -->
<script src="/scripts/Routes/routes.js"></script>
<!-- Services -->
<script src="/scripts/Services/services.js"></script>
<script src="/scripts/Modules/product/services.js"></script>
<script src="/scripts/Modules/customer/faq/services.js"></script>
<script src="/scripts/Modules/product/onstore_management/services.js"></script>
<!-- Directives -->
<script src="/scripts/Directives/directives.js"></script>
<!-- Modules -->
...
<script src="/scripts/Modules/m1/m1.js"></script>
...
<!-- Main -->
<script src="/scripts/app.js"></script>
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
</body>
</html>

Ok, I hava solved this problem, the top-bar-space in the moment cause by
CSS Style
style="width: 100%!important; position: fixed;"
or
style="position: fixed!important; width: 100%!important; top: 0px!important;"
After I remove it, It's work well. But I don't know why...

We Keep Coding

JavaScript is the programming language of the Web.

Backbone view rendering through multiple templates - javascript

Related

Change icon if a div has an specific background color

How to use $(this) selector to animate divs with the same class?

Toggle class in closest parent

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

Can I avoid "white" topBar, when JavaScript is executed?

Categories

Resources