On a previous question i explained that i wanted to store images (at least file name) in a Symfony entity.
I followed the answers and installed ComurImageBundle in my project, by following the tutorial in the Readme.
It seems to work well since it display the button to choose the image, and the image's slot. But the button does nothing. The console print me an error :
TypeError: $(...).fileupload is not a function
It append on the $('#image_upload_file').fileupload({... line in the comur.imageLibrary.js file.
I know that the import order are tricky. I did mine like this:
<head>
...
<!-- Latest 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 theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
{% include "ComurImageBundle:Form:croppable_image_modal.html.twig" %}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
{my form with the button}
...
Hope that someone has already faces this issue ...
Thank you for your answers.
I saw your comment in the other post and choose to answer you here, If you are using twig forms and blocks so
1/ You have to call the Comur image under "body block" like this
{% block body -%}
{% include "ComurImageBundle:Form:croppable_image_modal.html.twig" with {'include_jquery': false, 'include_bootstrap': false} %}
(your form)
....
{% endblock %}
2/ For Js files calling, you have to call them under "javascript block" , and don't forget the route web call, like this :
{% block javascripts %}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
<script>var routeweb = "{{ app.request.getSchemeAndHttpHost() }}{{ app.request.getBaseURL() }}";</script>
{% endblock %}
3/ And for to be shure that the image will be uploaded, try to access your form under web directly, means access to
localhost/your_project/web/your_route/new
althought this
localhost/your_project/web/app_dev/your_route/new
Related
<script src="{{ asset('/assets/js/jquery.min.js') }}" ></script>
I need to add defer like
<script src="{{ asset('/assets/js/jquery.min.js') }}" defer></script>
when I add defer the jquery is not working on my site. I'm using laravel 6 version.
anyone can help me what is the reason?
Try with below codes,
// check your js file's path is public/assets/js/jquery.min.js
1. <script src="{{ asset('assets/js/jquery.min.js') }}" defer></script>
// if your js file's path is public/js/jquery.min.js
2. <script src="{{ asset('js/jquery.min.js') }}" defer></script>
I am developing a web application with Python Flask. I need a jQuery script to make an autocomplete search field. I found this one:
https://github.com/LukasSliacky/Flask-Autocomplete
It works perfectly fine.
The problem is coming when I tri to integrate this feature in my existing template which include a lot of other CSS and JS scripts.
Here is my file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{{ url_for('static', filename='css/materialdesignicons.min.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/vendor.bundle.base.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/dataTables.bootstrap4.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css')}}">
<link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
</head>
<body>
<div class="container-scroller">
{{ form.autocomp.label }}: {{ form.autocomp }}
</div>
<script src="{{ url_for('static', filename='js/vendor.bundle.base.js')}}"></script>
<script src="{{ url_for('static', filename='chart.js/Chart.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/jquery.dataTables.js')}}"></script>
<script src="{{ url_for('static', filename='js/dataTables.bootstrap4.js')}}"></script>
<script src="{{ url_for('static', filename='js/off-canvas.js')}}"></script>
<script src="{{ url_for('static', filename='js/hoverable-collapse.js')}}"></script>
<script src="{{ url_for('static', filename='js/template.js')}}"></script>
<script src="{{ url_for('static', filename='js/dashboard.js')}}"></script>
<script src="{{ url_for('static', filename='js/data-table.js')}}"></script>
<script src="{{ url_for('static', filename='js/jquery.dataTables.js')}}"></script>
<script src="{{ url_for('static', filename='js/dataTables.bootstrap4.js')}}"></script>
<script src="{{ url_for('static', filename='js/jquery.cookie.js')}}" type="text/javascript"></script>
<script>
$(function() {
$.ajax({
url: '{{ url_for("autocomplete") }}'
}).done(function (data){
$('#city_autocomplete').autocomplete({
source: data,
minLength: 2
});
});
});
</script>
</body>
</html>
When I try it, it shows some error console:
So after searching for solution, I tried to remove some of these jquery files:
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
, but I still have the same issue.
Does anyone knows how to fix my particular case?
Here is my Flask Python code:
from flask import Flask, Response, render_template, request
import json
from wtforms import TextField, Form
class SearchForm(Form):
autocomp = TextField('Insert City', id='city_autocomplete')
#app.route('/_autocomplete', methods=['GET'])
def autocomplete():
return Response(json.dumps(list_result), mimetype='application/json')
#app.route('/testsearch', methods=['GET', 'POST'])
def index():
form = SearchForm(request.form)
return render_template("search.html", form=form)
This loads jQuery (an ancient, unsupported version of jQuery with known security problems in it, but jQuery none the less):
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
This loads jQuery UI (also an out of date version), which adds the autocomplete plugin.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
So that that point $('#city_autocomplete').autocomplete should be a function.
You then load a bunch of other things and we only have the filenames to go on.
You imply that everything above was added specifically for this task so since you have:
<script src="{{ url_for('static', filename='js/jquery.dataTables.js')}}"></script>
… we can assume that one of the two previous lines already loads jQuery.
<script src="{{ url_for('static', filename='js/vendor.bundle.base.js')}}"></script>
… is the most likely candidate.
The new version of jQuery overwrites the one you added jQuery UI to so the autocomplete plugin goes away.
Don't load jQuery twice.
Load it once.
Load it first.
Then add jQuery UI to it.
I am encountering problems when trying to include the jQuery date/time picker in my appointment booking system. I have followed the Laravel convention as best I could and seem to still have no luck.
File path for css file: public/css/file_is_here
File path for js: public/js/files_are_here
A snippet of the code I tried to reference the files is below:
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/css/jquery.datetimepicker.min.css') }}"/>
<script type="text/javascript" src="{{ URL::asset('/js/jquery.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('/js/jquery.datetimepicker.full.min.js') }}"></script>
<script>jQuery('#datetimepicker').datetimepicker({
step: 30
});</script>
The input field is also shown:
<div class="col-md-6">
<input id="datetimepicker" type="text" class="form-control">
</div>
Any help appreciated.
**Discovered weird bug whenever the page loads in the calendar will display for a second before disappearing. Could this be due to some other js, jquery or css loading in? **
Assets are typically kept in packages. If you are in public/css and public/js then you can treat "public" like a webroot.
src="/js/jquery.js"
<script src="{{ asset('public/plugins/datetime/jquery.datetimepicker.full.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('public/plugins/datetime/jquery.datetimepicker.css') }}" />
it's work with me
I'm using Pixel Admin template, which is not a current version of now I think, to implement a jinja2 web application that using an old version of the select2 dependency version 3.5.1. It is working fine except when viewing it on iso device, that virtual keyboard is always showing on touch select2.
I know that this bug has already been fixed in select2 latest version 4.0.6, so I want to change it to this version.
layout.html
<!DOCTYPE html>
<html class="gt-ie8 gt-ie9 not-ie pxajs">
<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>Web Application</title>
<script src="{{ url_for('static',filename='js/jquery-1.11.1.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/pixel-admin.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/rtl.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/themes.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/pages.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/widgets.min.css') }}">
<script src="{{ url_for('static',filename='javascripts/dynamic_con.js') }}"></script>
<!-- Remove select2 old version -->
<!-- <script src="{{ url_for('static',filename='js/select2.js') }}"></script> -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="{{ url_for('static',filename='js/bootstrap-datepicker.js') }}"></script>
<script src="{{ url_for('static',filename='javascripts/toolbar.js') }}"></script>
<script>var init = [];</script>
{% block content %}
{% endblock %}
<script src="{{ url_for('static',filename='javascripts/pixel-admin.min.js') }}"></script>
<script type="text/javascript">
init.push(function () {
})
window.PixelAdmin.start(init);
</script>
</body>
</html>
Centre.html
{% extends "layout.html" %}
{% block content %}
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
{% endblock %}
when open the URL route http://127.0.0.1:5000/Centre, the select2 does not open at all ios devices but working fine on desktop view. Unless I remove main js file of pixel admin <script src="{{ url_for('static',filename='javascripts/pixel-admin.min.js') }}"></script>, the select2 is working fine, but other functionalities of theme will be missing as well as the main js script was removed. Therefore, this is not a solution I am looking for.
My question is how can replace select2 of version 3.5.1 in template pixel admin with select2 version 4.0.6 to make it working well on an ios device? Thanks.
Added:
I just found that in file pixel-admin.min.js which come along with themes consists of many other plugins including select2. I saw it contains an exact script of select2 script inside it. That might be a reason that I could not override it with a newer version of select2 because as said if I comment out file pixel-admin.min.js, it worked but other plugins and function inside that js file will be gone as well, I don't that. Therefore how can I overcome this trade-off? Please kindly help, I need that so badly, Thanks.
Just find the corresponding code inside pixel-admin.min.js and comment it.
Then, include Select2 version 4.0.6 in your html, as you would normally do it:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
and
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
Better try with Select2 version 4.0.5 because 4.0.6 is rc.
Have a look at the Select2 release page.
To disable Select2 in PixelAdmin and based on the file you posted, lines 1473-1475
if (window.Select2 !== undefined) {
return;
}
Change to
return;
if (window.Select2 !== undefined) {
return;
}
Which version of PixelAdmin are you using?
I'm developing a web app using Flask and nGinx. I am importing some Javascript modules in my main template, but it seems that this code is not being executed at all.
This is my code:
base.html (only the important part)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{% block title %}{% endblock %} Some Title</title>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<!--<script src="jquery-1.9.1.min.js"></script>-->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
<!--<script src="{{ url_for('static', filename='js/debug.js') }}"></script>-->
<script src="{{ url_for('static', filename='js/model.js') }}"></script>
<script src="{{ url_for('static', filename='js/control.js') }}"></script>
<script src="{{ url_for('static', filename='js/cmdmenu.js') }}"></script>
<script language="javascript" type="text/javascript" src="{{ url_for('static', filename='flot/jquery.flot.js') }}"></script>
<script language="javascript" type="text/javascript" src="{{ url_for('static', filename='flot/jquery.flot.axislabels.js') }}"></script>
<!--<link rel="stylesheet" type="text/css" href="css/test-div.css">-->
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/final.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/menu.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/tipsy.css') }}">
</head>
debug.js
window.alert('hola');
model.js
window.alert('holbbbba');
control.js
var namespace = '/test';
var socket = io.connect('http://' + document.domain + ':' + location.port + namespace);
socket.on('connect', function() {
socket.emit('my event', {data: 'I\'m connected!'});
});
window.alert('pre');
// moooooooore and moore code here
The problem is, that the debug.js alert appears but model.js and control.js alerts won't. The strangest thing is that the socket connection is being done correctly. I have tried putting some console.log inside these files but nothing happen at the browser console. Obviously, the original js files were larger before, but trying to minimize them, even making them equal (model and debug, for instance) does not seem to give me any insights. Besides, I have checked and rechecked the syntax, and everything seems ok.
The filenames are ok, as they are in the /static directory of my project and using the url_for jinja/flask's function. I really don't know what exactly is going on with this. I would be glad if you can help me.
Thanks in advance.