I have a really basic django app that displays .png images using django ImageField and ask the user to vote on different choices.
Now I need to make it interactive so that the user can also zoom and pan the images in the form.
I've downoad this github https://github.com/timmywil/jquery.panzoom and followed the instructions in my detail view: detail.html :
<div id="img">
<img src="{{question.image.url}}"/>
</div>
{% load static %}
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="{% static 'polls/node_modules/jquery.panzoom/dist/jquery.panzoom.js' %}"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("img").panzoom();
$("img").panzoom({ minScale: 0, $zoomRange: $("input[type='range']") });
});
</script>
But nothing happens at all, the image is displayed in a fixed manner.
Previously I had some issues with 404 errors and now It seems to properly load the .js but It still doesn't work.
Thank you in advance for your help.
You have to have:
1) <script type="text/javascript" src="_path_to_your_JS_panzoom_file"></script> - to import that file
2)
<script type="text/javascript">
jQuery(document).ready(function(){
$(".panzoom-elements").panzoom();
// Pass options
$("a.panzoom-elements").panzoom({ minScale: 0, $zoomRange: $("input[type='range']") });
});
</script>
OR 2-b) Add those your code to a separate .js file and import it at the same way as in paragraph 1.
OK, finally I found the problem. The documentation is probably done for people who have a bit more background in that field! But of course other imports are required to make it work:
{% load static %}
<script type="text/javascript" src="{% static 'polls/node_modules/jquery.panzoom/test/libs/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'polls/node_modules/jquery.panzoom/dist/jquery.panzoom.js' %}"></script>
<script type="text/javascript" src="{% static 'polls/node_modules/jquery.panzoom/test/libs/jquery.mousewheel.js' %}"></script>
<section>
<div class="parent">
<div class="panzoom">
<img src="{{question.image.url}}">
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>
</div>
<script>
(function() {
var $section = $('section').first();
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset")
});
})();
</script>
</section>
Related
As per the question here Can codemirror be used on multiple textareas?.
I have applied the exact config to my page and neither text areas are being converted to code mirrors.
there are no errors in the console either, im not sure what ive missed?
my code is as follows:
<script src="{% static 'home/scripts/codemirror/codemirror.js' %}"></script>
<link href="{% static 'home/scripts/codemirror/codemirror.css' %}" rel="stylesheet">
<script src="{% static 'home/scripts/codemirror/django/django.js' %}"></script>
<script type="text/javascript">
function editor(id) {
CodeMirror.fromTextArea(id, {
height: "400px",
continuousScanning: 500,
lineNumbers: true
});
}
editor('id_config');
editor('id_remote_config');
</script>
<form id="edit_template" action="" method="post">
{% csrf_token %}
{{ TemplateForm.template_name }}
{{ TemplateForm.config }}
{{ TemplateForm.remote_config }}
<input type='submit' value='Update' />
</form>
the django form renders the text areas with the IDs I have specified
anyone have any ideas?
Thanks
Those textareas don't exist at the time you call editor(). Either move your script tag below the form or call editor() inside a window load event handler
I am trying to inject iframe after image is clicked, I can make it to work without injecting so it appear at the start of the page but not when image is pressed. How do I do that?
View:
#extends('layouts.master')
#section('title', 'Best programmer ever')
#section('content')
<script type="text/javascript" src="{!! asset('/js/jquery-3.1.1.min.js') !!}"></script>
<script type="text/javascript" src="{!! asset('/js/template.js') !!}"></script>
#endsection
#section('template')
<div class= "template_class">
#foreach ($templates as $template)
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
#endforeach
</div>
<iframe class="content-link" src="{{ asset($template->file )}}">
#show
Jquery:
$(function(){
$('.content-link').click(function(e){
e.preventDefault();
$('.template_class').load(this.src);
});
});
Why is my js not working as it should in edit.blade.php view. My views are structured as follows:
Filename: profile_main.blade.php
#extends('layouts.main')
#section('head')
#yield('style')
#stop
<!-- Available at the footer of page before body tag closes -->
#section('scripts')
<script src="{{ URL::asset('js/jquery-ui-1.11.4.custom/jquery-ui.js') }}"></script>
<script src="{{ URL::asset('js/search.js') }}"></script>
<script src="{{ URL::asset('js/application.js') }}"></script>
<script type="text/javascript">
$.ajaxSetup({
headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
});
</script>
#stop
Filename: training_main.blade.php
#extends('layouts.profile_main')
#section('style')
<link href="{{ URL::asset('css/application/index.css') }}" rel="stylesheet">
#stop
#section('body')
<div id="content-header">
<img alt="user_icon" src="{{ asset('images/general/admission_page_logo.jpg') }}" class="img-responsive"/>
<h1>#yield('page_heading')</h1>
<h3>#yield('page_desc')</h3>
</div>
<hr class="header_underline"/>
#yield('training_body')
#stop
Filename: edit.blade.php
#extends('trainings.training_main')
#section('page_heading')
Edit Training Details
#stop
#section('page_desc')
General
#stop
#section('training_body')
#stop
I have some jquery functions in application.js. I notice that these functions are not working in edit.blade.php. For example
Filename: application.js
$("document").ready(function() { alert('Great') });
It does not alert when the edit.blade.php view is loaded. But when I look at the page source, everything seems to be loaded fine like so:
<!-- Javascript -->
<script src="http://localhost:8000/js/jquery-1.11.3.js"></script>
<script src="http://localhost:8000/js/bootstrap.min.js"></script>
<script src="http://localhost:8000/js/main.js"></script>
<script src="http://localhost:8000/js/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script src="http://localhost:8000/js/search.js"></script>
<script src="http://localhost:8000/js/application.js"></script>
<script type="text/javascript">
$.ajaxSetup({
headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
});
</script>
</body>
What could be the problem here? What are my missing?
The problem was with my js. My js look like so:
$("document").ready(function() {
limitCharacters();
$("#edit_academic_form").on('submit', updateAcademic);
$("#edit_training_form").on('submit', updateTraining);
}
The function limitCharacters() had some syntax errors thus preventing the codes beneath it from ever getting called. I resolved issues with the function and now everything is working fine.
check with php artisan route:list on your terminal,
in 'edit' URI, will showed :
home/{home}/edit
its reason why your js not run, to solve the problem you can rewrite js path in your edit.blade.php.
Or if you have other solution please tell me. Thanks
I am new to javascript. I am working on django project. I need to pass the dictionary template variable to javascript and I have not been able.
views.py includes:
def index(request):
name={'bishal':509,'bishnu':510}
return render_to_response("test.html",Context({'name':simplejson.dumps(name)}))
test.html includes:
{% load staticfiles %}
{% block include_js %}
<script src="{% static "js/chart.js" %}"></script>
<script src="{% static "js/test.js" %}"> </script>
{% endblock include_js %}
{% block main_content %}
<script type="text/javascript" src="static/js/test.js"></script>
<script type="text/javascript">
var name={{name}};
</script>
<button class="btn btn-primary" id="btn1" type="button" onclick="myfunction()">1st visualization</button>
{% endblock %}
test.js includes:
$(function myfunction() {
document.getElementById('btn1').onclick=function(){
name=JSON.parse(name);
alert(name);
};
});
But error occurs saying:
[30/Jul/2013 02:50:51] "GET /visualize/static/js/test.js HTTP/1.1" 404 2732
I tried similar thing in html as:
<html>
<head>
<script type="text/javascript">
function myfunction()
{
dict=JSON.parse(dict);
alert(dict);
}
</script>
</head>
<body>
<script type="text/javascript">
var dict='{"bishnu": 509, "bishal": 510}';
</script>
<form>
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
<p>By pressing the button, a function will be called. The function will alert a message.</p>
</body>
</html>
which worked perfectly. Please help!
Ignore all the JavaScript. The key line in your problem is:
[30/Jul/2013 02:50:51] "GET /visualize/static/js/test.js HTTP/1.1" 404 2732
404 is the HTTP code for 'file not found', which means that you're using the incorrect path to reference your JavaScript file. Fix that, and you may find that your solution then works - or, if not, at least breaks differently.
#Adrian is right about the error message, but I suspect that the problem you're thinking of is caused by not putting quotes around {{name}} in test.html. Try:
<script type="text/javascript">
var name='{{name}}';
</script>
I have
base.html
pageA.html
pageB.html
pageA.js
pageB.js
pageA.js has code for pageA.html, pageB.js has code for pageB.html.
both pageA.js and pageB.js uses jQuery.
currently I am including all of the scripts in base.html, like so:
<html>
<body>
<div id="contents">
<!-- pageA.html / pageB.html comes here -->
</div>
<script src="js/jquery.js"></script>
<script src="js/pageA.js"></script>
<script src="js/pageB.js"></script>
</body>
</html>
I'd like to load pageA.js only for pageA.html and pageB.js for pageB.html, as the code in each file is not needed in the other page.
I've looked into requires.js library, but I'm not sure yet if it is the right solution for my problem. What are the best practices for structuring javascript files in this type of situation?
I think that the best you can do is add the <script src="js/pageX.js"></script> in the end of the pageX.html IF this page is loaded dynamically.
If the page isn't loaded dynamically, it may load before jquery.js and break you javascript.
Or you can read the current URL and load the correct script based on this info, like this:
var scriptPath;
var currentPage = window.location.pathname;
if (currentPage == "pageA.html")
{
scriptPath = "pageA.js";
}
else if (currentPage == "pageB.html")
{
scriptPath = "pageB.js";
}
var scriptElement = document.createElement("script");
scriptElement.setAttribute("type", "text/javascript");
scriptElement.setAttribute("src", scriptPath);
document.getElementsByTagName("head")[0].appendChild(scriptElement);
Do you have JavaScript to load in the contents of each html file? If so, and you have JavaScript code to run once each file is loaded you can call the required setup functions inside the load function like this:
base.html
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/pageA.js"></script>
<script type="text/javascript" src="js/pageB.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#loadPageA').on('click', function()
{
$('#contents').load('pageA.html', function()
{
setupPageA(); // defined in pageA.js
});
});
$('#loadPageB').on('click', function()
{
$('#contents').load('pageB.html', function()
{
setupPageB(); // defined in pageB.js
});
});
});
</script>
</head>
<body>
<div id="contents"></div>
<a id="loadPageA">Load Page A</a>
<a id="loadPageB">Load Page B</a>
</body>
<html>
Or, you if you just want to run pageA.js when pageA.html is loaded in you can just include the pageA.js script element in page pageA.html itself, like this:
pageA.html:
<div id="pageAContent">Page A</div>
<script type="text/javascript src="js/pageA.js"></script>
pageB.html:
<div id="pageBContent">Page B</div>
<script type="text/javascript src="js/pageB.js"></script>
base.html:
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#loadPageA').on('click', function()
{
$('#contents').load('pageA.html');
});
$('#loadPageB').on('click', function()
{
$('#contents').load('pageB.html');
});
});
</script>
</head>
<body>
<div id="contents"></div>
<a id="loadPageA">Load Page A</a>
<a id="loadPageB">Load Page B</a>
</body>
<html>
The dynamic script src solution:
base.html:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function loadScript(script)
{
// Modify the existing script tag
if($('#dynamicScriptTag').length != 0)
{
$('#dynamicScriptTag').attr('src', script);
}
else // Create script tag
{
$('<script>').attr('type', 'text/javascript')
.attr('src', script)
.attr('id', 'dynamicScriptTag')
.appendTo('head');
}
}
$(document).ready(function()
{
$('#loadPageA').on('click', function(event)
{
event.preventDefault();
$('#contents').load('pageA.html', function()
{
loadScript('js/scriptA.js');
testScriptB(); // test if we can still call a function in scriptB.js
});
});
$('#loadPageB').on('click', function(event)
{
event.preventDefault();
$('#contents').load('pageB.html', function()
{
loadScript('js/scriptB.js')
testScriptA(); // test if we can still call a function in scriptA.js
});
});
});
</script>
</head>
<body>
<div id="contents"></div>
<a id="loadPageA" href="#">Load Page A</a>
<a id="loadPageB" href="#">Load Page B</a>
</body>
</html>
pageA.html:
<div id="pageAContents">Page A</div>
pageB.html:
<div id="pageBContents">Page B</div>
js/scriptA.js:
console.log($('#pageAContents').text());
function testScriptA(){ console.log('Can still call testScriptA!'); }
js/scriptB.js:
console.log($('#pageBContents').text());
function testScriptB(){ console.log('Can still call testScriptB!'); }
I ended up using Jinja(a template engine) to place the javascript files like following:
base.html
<html>
<body>
<div id="contents">
{% block contents %}
{% endblock %}
</div>
<script src="js/jquery.js"></script>
{% block scripts %}
{% endblock %}
</body>
</html>
pageA.html
{% block contents %}
..page A contents..
{% endblock %}
{% block scripts %}
<script src="js/pageA.js"></script>
{% endblock %}
If you are using a template engine, it could be a viable solution.