Below is my code for code editor in template
{% load static %}
<script src="{% static 'codemirror.js' %}"></script>
<link rel="stylesheet" href="{% static 'codemirror.css' %}">
<script src="{% static 'clike.js' %}"></script>
<script>
var myCodeMirror = CodeMirror(document.getElementById('text_area'), {
value: "int main()",
mode: "text/x-c++src",
lineNumbers: true,
indentUnit: 4,
});
</script>
Using div tag
<div id="text_area" name="text_area" style="margin-top: 0px;" ></div>
How do i get the code after submit button from post method?
Note:
I am using CodeMirror library from github
you should be able to get the code with
myCodeMirror.getValue()
Related
Here is my code. I have a static folder in which i have all css and js files
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>template is working</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
<script href="{% static 'js/jquery.js' %}"></script>
<script href="{% static 'js/bootstrap.js' %}"></script>
<script>
var jQuery = django.jQuery;
var $ = jQuery;
$(document).ready(function () {
alert("Hello");
})
</script>
</head>
Here is the screenshot of directory structure
enter image description here
I don't know what you are trying to do but those line are not necessary:
var jQuery = django.jQuery;
var $ = jQuery;
I, as #Stéphane also have no idea what are you trying to do, because as I know, jQuery ready statement defined like this:
$( document ).ready(function() {
console.log( "ready!" );
});
or...
// Shorthand for $( document ).ready()
$(function() {
console.log( "ready!" );
});
Also, I think this question even don't related to Django framework. If you want use jQuery, you should read its documentation.
When adding a prepared template such as bootstrap template into a django project. I change all src path which is linking local statics files such as javascript, css and images.I want to automate this operations .Is there any way for doing this ? In my opinion,using regex it will be possible.Howeever I can not until now
I put a few patterns down to be the example
<img src="images/slide-dark.jpg" alt="" >
<link href="css/animate.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
will be like this
<img src="{% static 'images/slide-dark.jpg' %}">
<link href="{% static 'css/animate.css' %}" rel="stylesheet">
<script src="{% static 'js/bootstrap.min.js' %}"></script>
I tried to integrate this(having a layout.html and index.html) into my app. Before starting I only had index.html with all of my css/javascript includes at the top.
Current file struct
/app
- app_runner.py
/templates
- layout.html
- index.html
/static
/styles
- mystyle.css
Layout.html (mostly css and javascript CDN and my stylesheet)
<!doctype html>
<!-- Latest bootstrap compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jquery -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<!-- Latest bootstrap compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jstree -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<!-- my stylesheet -->
<link rel='stylesheet' type='text/css' href="{{url_for('static',filename='styles/mystyle.css')}}" />
<script type="text/javascript">
var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
{% block body %}{% endblock %}
The page, for the most part, renders the same: The jstree appears, bootstrap works, and the rest of my styling is applied. In my css file I have a line that doesn't get applied:
td {
padding: 5px;
}
The developer console shows padding:0, which comes from a bootstrap script. If I change it in the developer console I can get it to change to 5px.
I've heard using !important is bad practice but I tried it anyway with no change. I tried adding a class to all my td so it'd have higher precedent (based on this answer) and have that style (.my_row{padding:5px;}) apply but again it doesn't change. So it seems my css isn't being applied to my table. Other parts of mystyle.css work though.
Any thoughts on why the padding isn't being applied to my table?
So it turns out my stylesheet wasn't refreshing in the cache. I found an answer on this site.
I added these lines of code to my python (app-runner.py)
#app.context_processor
def override_url_for():
return dict(url_for=dated_url_for)
def dated_url_for(endpoint, **values):
if endpoint == 'static':
filename = values.get('filename', None)
if filename:
file_path = os.path.join(app.root_path,
endpoint, filename)
values['q'] = int(os.stat(file_path).st_mtime)
return url_for(endpoint, **values)
First, I am fairly new to javascript but I know my way around python. I am trying to learn javascript and I may be out of my league with trying this, but that is how you learn right.
Secondly, Flask and AngularJS play well together with a little help. Special thanks goes to shea256 (https://github.com/shea256/angular-flask)
Now, I am able to get the 'test application' up and running fairly easily.
However, I want to add DevExtreme to this stack and I am having some issues.
Here is what I have:
index.html
<!doctype html>
<html lang="en" ng-app="AngularFlask">
<head>
<meta charset="utf-8">
<title>AngularFlask</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/main.css">
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.1.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.1.5/css/dx.light.css" />
<!--<script src="/static/lib/jquery/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <!--2.7.0-->
<!--<script src="/static/lib/angular/angular.js"></script>
<script src="/static/lib/angular/angular-resource.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-sanitize.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
-->
<script type="text/javascript" src="http://cdn3.devexpress.com/jslib/16.1.5/js/dx.web.js"></script>
<script src="/static/js/app.js"></script>
<script src="/static/js/controllers.js"></script>
<script src="/static/js/services.js"></script>
<script src="/static/lib/bootstrap/bootstrap.min.js"></script>
</head>
<body>
<div id="header" class="header navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
</button>
<a class="brand" href="/">AngularFlask</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="">
Home
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container page">
<div id="content" class="container main" ng-view>
</div>
<hr>
<footer id="footer" class="footer">
<div class="footer-left">
About |
Home
</div>
<div class="footer-right">
<span>© 2013 AngularFlask</span>
</div>
</footer>
</div>
</body>
</html>
controllers.js
function IndexController($scope) {
}
function AboutController($scope) {
}
function PostListController($scope, Post) {
var postsQuery = Post.get({}, function(posts) {
$scope.posts = posts.objects;
});
}
function PostDetailController($scope, $routeParams, Post) {
var postQuery = Post.get({ postId: $routeParams.postId }, function(post) {
$scope.post = post;
});
}
app.js
'use strict';
angular.module('AngularFlask', ['angularFlaskServices', 'dx'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'static/partials/landing.html',
controller: IndexController
})
.when('/about', {
templateUrl: 'static/partials/about.html',
controller: AboutController
})
.when('/post', {
templateUrl: 'static/partials/post-list.html',
controller: PostListController
})
.when('/post/:postId', {
templateUrl: '/static/partials/post-detail.html',
controller: PostDetailController
})
/* Create a "/blog" route that takes the user to the same place as "/post" */
.when('/blog', {
templateUrl: 'static/partials/post-list.html',
controller: PostListController
})
.otherwise({
redirectTo: '/'
})
;
$locationProvider.html5Mode(true);
}])
;
With this, when I navigate to localhost:5000, this error is reported
https://docs.angularjs.org/error/$injector/modulerr?p0=AngularFlask&p1=%5B$injector:unpr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.5.7%2F$injector%2Funpr%3Fp0%3D%2524routeProvider%0AO%2F%3C#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:6:412%0Adb%2Fn.$injector%3C#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:43:84%0Ad#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:40:344%0Ae#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:41:78%0Ah%2F%3C.invoke#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:41:163%0Ad#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:39:313%0Ag%2F%3C#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:39:445%0Ar#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:7:353%0Ag#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:39:222%0Adb#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:43:246%0ABc%2Fc#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:20:359%0ABc#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:21:163%0Age#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:19:484%0A#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js:315:135%0An.Callbacks%2Fi#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.12.4%2Fjquery.min.js:2:27444%0An.Callbacks%2Fj.fireWith#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.12.4%2Fjquery.min.js:2:28213%0A.ready#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.12.4%2Fjquery.min.js:2:30004%0AK#https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.12.4%2Fjquery.min.js:2:30366%0AO%2F%3C()%20angular.min.js:6g%2F%3C()%20angular.min.js:40r()%20angular.min.js:7g()%20angular.min.js:39db()%20angular.min.js:43Bc%2Fc()%20angular.min.js:20Bc()%20angular.min.js:21ge()%20angular.min.js:19%3Canonymous%3E%20angular.min.js:315n.Callbacks%2Fi()%20jquery.min.js:2n.Callbacks%2Fj.fireWith()%20jquery.min.js:2.ready()%20jquery.min.js:2K()%20jquery.min.js:21%20angular.min.js:6:412
It may be worth mentioning that if I use AngularJS 1.0.7 (included with Angular-Flask) the issue is cleared up until I add my html dev tag
<div dx-button="{
text: 'Generate random value'
}"></div>
then these are the errors:
Error: e.$$postDigest is not a function
Error: t.$root is undefined
Error: a.$watch is not a function
Error: c.$watch is not a function
Error: a.$watch is not a function
Error: t.dxTemplateModel is undefined
So this tells me that DevExpress is missing some functions in AngularJS 1.0.7; However, when using AngularJS 1.2.X Angular-Flask breaks. Is there anyway to get these two to play well together?
DevExtreme supports AngularJS 1.2 - 1.4. Your try to use too old version of AngularJS. Scripts in this repo were updated 3 years ago. But you can easily use another angularjs version. Your flask layout can look like below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }} - My Flask Application</title>
<link rel="stylesheet" type="text/css" href="/static/content/site.css" />
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.1.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.1.5/css/dx.light.css" />
</head>
<body class="dx-theme-generic-typography" ng-app="myApp">
<div ng-controller="defaultCtrl">
<div dx-button="buttonOptions"></div>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-sanitize.js"></script>
<script src="http://cdn3.devexpress.com/jslib/16.1.5/js/dx.all.js"></script>
<script src="/static/scripts/application.js"></script>
</body>
</html>
And the /static/scripts/application.js file:
var myApp = angular.module("myApp", ["dx"]);
myApp.controller("defaultCtrl", function($scope) {
$scope.buttonOptions = {
text: "My button",
onClick: function(){
alert("Hi!");
}
};
});
I have one phone number with a request url which works (speaks the text and then forwards the call) but then I have an app (a browser outbound call) going to the same request url and only the text to speech works, and the forwarding of the call gives an error and hangs up. Why doesn't it forward like the number's request url? I checked and the capability token renders fine...
views.py
def once_connected_view(request):
response = twiml.Response()
response.say("Please wait while we connect your call.", voice='alice')
response.dial("xxx-xx-xxx-xxxx")
return HttpResponse(str(response))
def home_view(request):
capability = TwilioCapability(account_sid, auth_token)
capability.allow_client_outgoing(application_sid)
token = capability.generate()
query_set = Model.objects.all()
return render(request, "base.html", {"query_set":query_set, "token":token})
urls.py
urlpatterns = [
url(r'^$', views.home_view, name="home"),
url(r'^once_connected/', views.once_connected_view, name="once_connected"),
]
number request url
http://xx.xx.com/once_connected/ http GET
app request url
http://xx.xx.com/once_connected/ http GET
main site url
https://xx.xx.com/
base.html
<!doctype html>
<head>
<script type="text/javascript" src="https://static.twilio.com/libs/twiliojs/1.2/twilio.min.js"></script>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'cars/responsive.css' %}">
</head>
<body>
<div class="container" id="wrapper">
<div class="video-background-container">
<video preload="auto" autoplay="" loop="" muted="" class="video-background hidden-xs hidden-sm">
<source type="video/mp4" src="omitted">
</video>
</div>
<div class="grid-overlay text-center">
<nav class="navbar navbar-default navbar-fixed-top" style="background:none;">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" id="logo" href="#">Brand Name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="replace-call">Contact Us</li>
</ul>
</div>
</div>
</nav>
...
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript">
/* Create the Client with a Capability Token */
Twilio.Device.setup("{{ token }}");
/* Let us know when the client is ready. */
Twilio.Device.ready(function (device) {
$(".replace-call").html("<a href='#' onclick='call()'>Call From Browser</a>");
});
/* Report any errors on the screen */
Twilio.Device.error(function (error) {
$(".replace-call").html('Contact Us');
});
Twilio.Device.connect(function (conn) {
$(".replace-call").html("<a href='#' onclick='hangup()'>End Call</a>");
});
/* Connect to Twilio when we call this function. */
function call() {
Twilio.Device.connect();
}
function hangup() {
Twilio.Device.disconnectAll();
$(".replace-call").html('Contact Us');
}
</script>
</body>
</html>
I am hosted on pythonanywhere.
After only minimal hair loss, I have made it work by adding a callerID attribute to the dial verb.
def once_connected_view(request):
response = twiml.Response()
response.say("Please wait while we connect your call.", voice='alice')
response.dial("xxx-xx-xxx-xxxx", callerId="+xxxxxxxxxx") # here
return HttpResponse(str(response))