I am trying to autofill input form fields by writing the number and pressing the search button. The data should come from a remote webservice. The goal is that AngularJS ng-model should bind the values and autofill them into the input fields. It doesn't work.
My HTML and JavaScript look like this:
'use strict';
var customerApp = angular.module('customerApp', ['ngRoute']);
customerApp.controller('CustomerUpdateCtrl', ['$scope', '$http', '$location', '$route', '$routeParams',
function($scope, $http, $location, $route, $routeParams) {
$scope.customer = {
cust_no: '',
cust_name: '',
customers: [],
currentCustomer: {}
};
// Update New Customer
$scope.updateNewCustomer = function() {
$http.get('http://office.insoft.net:9091/special_oystein_kunde_get/' + $scope.customer.cust_no).success(function(data) {
$scope.customer.customers = data;
$scope.whichCustomer = $routeParams.customerId;
$location.path("/update");
console.log('Message: ' + $scope.customer.customers);
console.dir($scope.customer.customers);
console.dir(data);
});
}
}
]);
<!DOCTYPE html>
<html ng-app="customerApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Customer</title>
<!-- bootstrap.min.css -->
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<!-- font-awesome.css -->
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- bootstrap-theme.min.css -->
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" />
<!-- foundation.css -->
<link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet" />
<!-- jquery.min.js -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- jquery-ui.min.js -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<!-- bootstrap.min.js -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- angular.min.js -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<!-- angular-route.min.js -->
<script src="https://code.angularjs.org/1.2.27/angular-route.min.js"></script>
<!-- js/app.js -->
<script src="js/app.js"></script>
<!-- js/controllers.js -->
<script src="js/controllers.js"></script>
<!-- directives.js -->
<script src="js/directives.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="text-center">
<div class="page-header text-center">
<h1>Rediger kunde</h1>
</div>
<form name="customer-form" novalidate ng-submit="" method="get">
<div>
<label>Customer Number</label>
<input name="cust_no" type="number" ng-model="customers[whichCustomer].cust_no" placeholder="Customer Number..." />
</div>
<div>
<label>Customer Name</label>
<input name="cust_name" type="text" ng-model="customers[whichCustomer].cust_name" placeholder="Customer Name..." />
</div>
<div>
<label>Postal Code</label>
<input name="postplace_id" type="number" ng-model="customers[whichCustomer].postplace_id" placeholder="Postal Code..." />
</div>
<div>
<label>City</label>
<input name="postplace_name" type="text" ng-model="customers[whichCustomer].postplace_name" placeholder="City..." />
</div>
<div>
<label>Phone Number</label>
<input name="cust_telephone" type="tel" ng-model="customers[whichCustomer].cust_telephone" placeholder="Phone Number..." />
</div>
<br>
<div>
<button id="autofillMe" class="btn btn-primary" ng-click="updateNewCustomer()">Update Customer</button>
Save New
</div>
</form>
<br>
</div>
</div>
</div>
</body>
</html>
Related
I am trying to integrate JQUERY datepicker with the following form. I can't seem to figure out why the datepicker doesn't work no matter what I try. I have looked everywhere on stack overflow and none of the solutions worked.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<link href="manage.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all">
<script>
$(document).ready(function() {
$(function() {
$( "#startdate" , "#enddate" ).datepicker( {dateFormat: 'yyyy-mm-dd' } );
});
});
</script>
</head>
<body>
<form action="" method="POST" name="form1">
<label>
<b>Start Date</b>
<span class="style1">*</span> (format YYYY-MM-DD)
</label>
<br />
<input type="text" name="time_start" id="startdate"/>
<br/>
<br/>
**strong text**
<label>
<b>End Date</b>
<span class="style1">*</span> (format YYYY-MM-DD)
</label>
<br />
<input type="text" name="time_end" id="enddate"/>
<br/>
<br/>
</form>
</body>
</html>
just replace $( "#startdate" , "#enddate" ) with $( "#startdate, #enddate" ). Your code will work
I just added class to the <input> field and use it in the script for multiple datepick. And reduced yyyy to yy for the required format. The yyyy will give you 20162016-12-07
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all">
<script>
$(document).ready(function() {
$(function(){$('.datepick').datepicker( {dateFormat: 'yy-mm-dd' } ); });
});
</script>
</head>
<body>
<form action="" method="POST" name="form1">
<label>
<b>Start Date</b>
<span class="style1">*</span> (format YYYY-MM-DD)
</label>
<br />
<input type="text" name="time_start" class="datepick" id="startdate"/>
<br/>
<br/>
<label>
<b>End Date</b>
<span class="style1">*</span> (format YYYY-MM-DD)
</label>
<br />
<input type="text" name="time_end" class="datepick" id="enddate"/>
<br/>
<br/>
</form>
</body>
</html>
I'm trying to set up EmberJS. This is my first website attempting this so please excuse my noobness. Currently nothing is outputting to the screen but the body's grey background color. I'm not sure where I went wrong in setting up my EmberJS page.
Here's the code and if you need to see it in action you can view it here http://andrewhnovak.com/newSite/index.html
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site Demo</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/mainPage.css">
</head>
<body>
<script type='text/x-handlebars' data-template-name='application'>
<div class="container">
<div class="header">
<div class='col-md-1'>
Logo
</div><!--end header container-->
<div class='col-md-2 col-md-offset-1'>
<div class='link1'>
Link1
</div>
</div>
<div class='col-md-3'>
<div class='link2'>
Link2
</div>
</div>
<div class='col-md-2'>
<div class='link3'>
Link3
</div>
</div>
<div class='col-md-2'>
<div class='searchBar'>
<input type="text" class="form-control" placeholder="Search Box">
</div>
</div>
<div class='col-md-1'>
<div class='searchButton'>
<button class="btn btn-search" type="submit">Search</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class='underHeader'>
</div>
</div>
<div class="container">
<div class='whiteBox'>
<div class='newProducts'>
</div>
{{outlet}}
</div>
</div>
</script>
<script type='text/x-handlebars' data-template-name='index'>
<h1>Testing the page</h1>
</script>
</body>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<!--<script src="js/jquery.easing-1.3.js"></script>-->
<script src="js/bootstrap.js"></script>
<script src="js/menu.js"></script>
<script type="text/javascript" src="js/libs/handlebars-v2.0.0.js"></script>
<script type="text/javascript" src="js/libs/ember-1.9.1.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</html>
CSS
var App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
Looks like from checking the JavaScript console that you’re missing jQuery.
I found an example how to copy text to clipboard with ZeroClipboard. However, I tried to convert the original code to flask and I run into TemplateSyntaxError: expected token 'end of statement block', got 'onload' because of {% block body onload="init();"%}. How is it possible to use onload="init();" with Jinja?
Here is app.py
#app.route("/table/", methods=["GET"])
def table():
return render_template('table.html')
Here is base2.html:
<!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">
<title>flask-bootstrap example</title>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap/css/bootstrap.css')}}" >
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css" >
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='web.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='tooltip.css') }}">
<style>
.clip_button {
background:#063;
padding:4px;
width:100px;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ url_for('index') }}">test</a>
</div>
<!--/.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="home-url">Home</li>
<li id="about-url">About</li>
<li id="contact-url">Contact</li>
</ul>
<!--/.navbar-nav -->
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</div>
<!--/.navbar -->
<div class="container">
{% block body %}{% endblock %}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="{{url_for('static', filename='bootstrap/js/bootstrap.js')}}"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js"></script>
<script type="text/javascript" >
$("a.my-tool-tip").tooltip();
$('.selectpicker').selectpicker();
$("#reference_select").selectpicker("refresh");
</script>
<script type="text/javascript" src="{{url_for('static', filename='ZeroClipboard/ZeroClipboard.js')}}"></script>
<script language="JavaScript">
////copy to clip
var clip = null;
function $(id) { return document.getElementById(id); }
function init()
{
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
}
function move_swf(ee)
{
copything = document.getElementById(ee.id+"_text").value;
clip.setText(copything);
if (clip.div)
{
clip.receiveEvent('mouseout', null);
clip.reposition(ee.id);
}
else{ clip.glue(ee.id); }
clip.receiveEvent('mouseover', null);
}
</script>
<script type="text/javascript">
{% block js %}{% endblock %}
</script>
</body>
</html>
Here is the (table.html):
{% extends 'base2.html' %}
{% block body onload="init();"%}
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table">
<tbody>
<tr>
<td><input type='text' id='textid5_text' value='your text 5' /></td>
<td><div id='textid5' onload="init();" onMouseOver='move_swf(this)' class='clip_button'>COPY</div></td>
</tr>
</tbody>
</table>
</div>
</div>
{% endblock %}
onload is an HTML attribute. It has nothing to do with Jinja. You can simply place it right on your <body> tag.
<body onload="init();">
If you don't need it in every page where you use this base template, you'll need to add a block inside the <body> tag
<body {% block body_attrs %}{% endblock %}>
And then override it in your child template
{% block body_attrs %} onload="init();" {% endblock %}
Is it impossible to have a orbit slider and a clearing lightbox within?
So that I can slide the image carousel and when I click or tab on a image the lightbox opens? So what can I do to force it?
<!doctype html>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
<script src="js/modernizr.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<div class="row">
<div class="small-12 columns">
<div class="orbit-container">
<ul class="example-orbit clearing-thumbs" data-orbit data-clearing>
<li>
<a href="img/galerie/tattoo/colored/col.jpg">
<img src="img/galerie/tattoo/colored/col.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</a>
</li>
<li>
<a href="img/galerie/tattoo/colored/col2.jpg">
<img src="img/galerie/tattoo/colored/col2.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</a>
</li>
<li>
<a href="img/galerie/tattoo/colored/col3.jpg">
<img src="img/galerie/tattoo/colored/col3.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/function.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
my js file to handle the slider crash the slider. syntax fail?
$(document).foundation({
orbit: {
animation: 'slide',
navigation_arrows: true,
slide_number: false,
bullets: false,
timer: false,
variable_height: false,
swipe: true
}
});
I am new in EmberJS and flowing on www.codeschool.com the Warming Up With Ember.js ...
I am stuck at level 1.4 Named Template, They ask me to: Move the content unique to our homepage into a new template and give it a template name that will be shown on the homepage of our site.
for this code,
<!DOCTYPE html>
<html>
<head>
<base href='http://courseware.codeschool.com/ember/' />
<link href='bootstrap.css' rel='stylesheet' />
<link href='application.css' rel='stylesheet' />
<script src='jquery.js'></script>
<script src='handlebars.js'></script>
<script src='ember.js'></script>
<script src='ember-data.js'></script>
<script src='app.js'></script>
</head>
<body>
<script type='text/x-handlebars' data-template-name='application'>
<div class='navbar navbar-default'>
<div class='container'>
<a href='#' class='navbar-brand'><img src='images/logo.png' alt='logo' height='34' width='224' /></a>
<ul class='nav navbar-nav navbar-right'>
<li href='#' class='active'>Home</li>
<li href='#/about'>About</li>
</ul>
</div>
</div>
<div class='container'>
<h1>Welcome to The Flint & Flame!</h1>
</div>
<footer class='container'>
<hr />
<p class='pull-left'>© 2013 The Flint & Flame</p>
<p class='pull-right'><a href='#/credits'>Credits</a></p>
</footer>
</script>
</body>
</html>
I did it but it still don't work after trying this:
<!DOCTYPE html>
<html>
<head>
<base href='http://courseware.codeschool.com/ember/' />
<link href='bootstrap.css' rel='stylesheet' />
<link href='application.css' rel='stylesheet' />
<script src='jquery.js'></script>
<script src='handlebars.js'></script>
<script src='ember.js'></script>
<script src='ember-data.js'></script>
<script src='app.js'></script>
</head>
<body>
<script type='text/x-handlebars' data-template-name='application'>
<div class='navbar navbar-default'>
<div class='container'>
<a href='#' class='navbar-brand'><img src='images/logo.png' alt='logo' height='34' width='224' /></a>
<ul class='nav navbar-nav navbar-right'>
<li href='#' class='active'>Home</li>
<li href='#/about'>About</li>
</ul>
</div>
</div>
<div class='container'>
<script type='text/x-handlebars' data-template-name='index'>
<h1>Welcome to The Flint & Flame!</h1>
</script>
</div>
<footer class='container'>
<hr />
<p class='pull-left'>© 2013 The Flint & Flame</p>
<p class='pull-right'><a href='#/credits'>Credits</a></p>
</footer>
</script>
</body>
</html>
You forgot to add an outlet to your application template and you nested your index template inside your application template, which is wrong.
<!DOCTYPE html>
<html>
<head>
<base href='http://courseware.codeschool.com/ember/'/>
<link href='bootstrap.css' rel='stylesheet'/>
<link href='application.css' rel='stylesheet'/>
<script src='jquery.js'></script>
<script src='handlebars.js'></script>
<script src='ember.js'></script>
<script src='ember-data.js'></script>
<script src='app.js'></script>
</head>
<body>
<script type='text/x-handlebars' data-template-name='application'>
<div class='navbar navbar-default'>
<div class='container'>
<a href='#' class='navbar-brand'><img src='images/logo.png' alt='logo' height='34' width='224'/></a>
<ul class='nav navbar-nav navbar-right'>
<li href='#' class='active'>Home</li>
<li href='#/about'>About</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type='text/x-handlebars' data-template-name='index'>
<div class='container'>
<h1>Welcome to The Flint & Flame!</h1>
</div>
<footer class='container'>
<hr/>
<p class='pull-left'>© 2013 The Flint & Flame</p>
<p class='pull-right'><a href='#/credits'>Credits</a></p>
</footer>
</script>
</body>
</html>