I'm following the Heroku image upload tutorial which includes the following code in application.js -
fileInput.fileupload({
fileInput: fileInput,
url: '<%= #s3_direct_post.url %>',
type: 'POST',
autoUpload: true,
formData: <%= #s3_direct_post.fields.to_json.html_safe %>,
paramName: 'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
dataType: 'XML', // S3 returns XML if success_action_status is set to 201
replaceFileInput: false
});
...you can see that formData: does not have quotes around the erb - this is causing a javascript error when I deploy the code - SyntaxError: Unexpected token '<'
That erb should be in quotes, right? Any comment greatly appreciated.
Don't do that - it might work in development, but will break in production as default production configuration assumes all the assets are precompiled and are served by the server. This obviously can be changed, but might cause some performance issues.
If you need to pass any data from your controller to your javascript, use gon gem:
controller:
gon.fileUpload = {
url: #s3_direct_post.url,
data: #s3_direct_post.fields.to_json
}
Then you can use it within 100% static javascript:
fileInput.fileupload({
fileInput: fileInput,
url: gon.fileUpload.url
type: 'POST',
autoUpload: true,
formData: gon.fileUpload.data,
paramName: 'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
dataType: 'XML', // S3 returns XML if success_action_status is set to 201
replaceFileInput: false
});
Naturally you need to follow gon installation guide.
Related
My project works locally
I have deployed my project with django/gunicorn/supervisor in a remote server
I have a select button (id = id_patient) with a list of options. When the user selects an option, information related to this option are displayed using an ajax request. But on a remote server, information is not displayed.
When I look with my web browser debug tool (see image), it looks like it is not the good js files that are served
But in my static folder on the server, it is the good js files...
// affichage des informations sur le patient sélectionné pour la ré-allocation
$("#id_patient").on("click", function (event) {
var csrftoken = getCookie('csrftoken');
if ($(this).val() != "") {
$.ajax({
type: "POST",
url: $("#form_reallocation").data("patient-url"),
data: {
csrfmiddlewaretoken: csrftoken,
'patient': $(this).val(),
},
dataType: 'html',
success: function (data) {
$("#information_patient").html(data);
}
});
} else {
$("#information_patient").children().remove();
}
});
To collect the new static files, I have run python manage.py collectstatic and files are collected but I have a warning message that indicate possible duplicate in static files :
Found another file with the destination path 'randomization/js/script.js'. It will be ignored since only the first encountered file is collected. If this is not what you want, make sure every static file has a unique path.
How can I fix this issue?
settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'crispy_forms',
'widget_tweaks',
'bootstrap4',
'registration.apps.RegistrationConfig',
'monitor.apps.MonitorConfig',
'randomization.apps.RandomizationConfig',
'parameters.apps.ParametersConfig',
'unblind.apps.UnblindConfig',
'pharmacy.apps.PharmacyConfig',
'export.apps.ExportConfig',
'randomization_pk.apps.RandomizationPkConfig',
'django_extensions',
'debug_toolbar',
'partial_date',
'safedelete',
'simple_history',
]
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'static'),
os.path.join(BASE_DIR,'randomization/static'),
os.path.join(BASE_DIR,'unblind/static'),
os.path.join(BASE_DIR,'pharmacy/static'),
)
STATIC_ROOT = '/home/test/intensetbm_static'
If you are running in production mode, with DEBUG=False, you must configure a webserver to serve static files.
An alternative is use whitenoise to serve the static files as a middleware, that wont process the Django pipeline to serve statics.
Try to remove STATICFILES_DIRS, by default Django look for all "static" folders inside INSTALLED_APPS, and use relative path to STATIC_ROOT.
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
After that, run :
python manage.py collectstatic
again.
I have a piece of Javascript code that worked before on PHP5.6
However, when I upgraded to PHP7.2 it stopped working and getting this error below:
VM505:2 Uncaught SyntaxError: Unexpected token <
at Function.globalEval (jquery.tools.min.js:49)
at Function.httpData (jquery.tools.min.js:152)
at XMLHttpRequest.x.onreadystatechange (jquery.tools.min.js:149)
globalEval # jquery.tools.min.js:49
httpData # jquery.tools.min.js:152
x.onreadystatechange # jquery.tools.min.js:149
XMLHttpRequest.send (async)
ajax # jquery.tools.min.js:150
chkpwd # hw.php:295
onclick # hw.php:877
I can't figure out that the error said chkpwd # hw.php 295, but this function is actually in LINE 387. So, I don't know where to look into.
What's the best way to debug this and fix it?
function chkpwd() {
var pwd_val = $("#engpassword").val();
$.ajax({
url: 'password.php',
dataType: 'jsonp',
jsonp: 'processData',
data: {
pwd: pwd_val,
callback: 'pwdaction'
},
error: function(xhr) {
alert('Ajax request error!');
$(e.target).attr('disabled', false);
}
});
}
Usually it refers to a response that instead of being a parsable JSON returns (IE) an HTML which opening tag begins with <
If you are working with React app and you see this error in your console, it might be due to the missing "type" attribute of the script tag in your index.html file. Make sure to include type="text/jsx".
Also, the URL that you are trying to access is not returning Javascript or JSON but HTML, give the correct path to the "src" attribute of your script tag beginning with "/" followed by the path of the .js file.
I took reference from the following link, do take a look as I have just briefed what was written in this article: https://idiallo.com/javascript/uncaught-syntaxerror-unexpected-token#n
PS - Go through the comments section within the article
In my case ( Webpack v.5 + React ) it was happen on pages with 2nd or more nested level of pages. All assets are included using relative path like sct="./index.js". So for nested pages become broken.
To fix it need to add <base href="http://yoursitename.com">
If you are using webpack you can add:
const htmlWebpackPlugin = new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'index.html'),
title: WebSiteName,
base: isLocal ? 'http://localhost:4008' : 'http://yoursitename.com',
});
which will inject the element <base href="...">
Could someone help me with this (I'm new to YAML):
application: baking-tutorial
version: secureable
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /robots\.txt
static_files: static/robots.txt
upload: static/robots\.txt
- url: /static
static_dir: static
secure: optional
- url: /main\.html
mime_type: text/html
static_files: static/\1
upload: static/main\.html
- url: /static/.*
script: mirror.app
secure: optional
- url: /.*
script: mirror2.app
secure: optional
Basically I'm trying to host a password protected site so I have the mirror2.app directing you to it then if you get it right the JavaScript redirects you to the main.html except it's not there.
Your file is not a correct YAML file. You have to take care to properly indent everything at the same level that belongs together:
application: baking-tutorial
version: secureable
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /robots\.txt
static_files: static/robots.txt
upload: static/robots\.txt
- url: /static
static_dir: static
secure: optional
- url: /main\.html
mime_type: text/html
static_files: static/\1
upload: static/main\.html
- url: /static/.*
script: mirror.app
secure: optional
- url: /.*
script: mirror2.app
secure: optional
the value for the mapping key 'handlers' is a list of mappings. Each of those latter mappings has at least a 'url' key and then some others.
In YAML, if you outdent to a previous level, you essentially end the previous construct (sequence, mapping). Also note that the - for the list items in a mapping value can align with the key (the don't have to, they can be more indented, as long as they all are indented the same level).
routes.rb
post 'pets/pets_you_liked' => 'pets#pets_you_liked'
pets.js.coffee
$.ajax
type: 'POST',
data: {pet_id: pet_id},
url: "/pets/pets_you_liked"
rake routes
rake routes | grep pets_you_like
pets_pets_you_liked POST pets/pets_you_liked(.:format) pets#pets_you_liked
pets_controller.rb
def pets_you_liked
raise 'checking'
end
I am Getting a routing error, Not able to understand where could be the error
Try as follow,
post '/pets/pets_you_liked' => 'pets#pets_you_liked
Thanks for taking time to read my question.
I'm trying to embed something like this on my website using google app engine. To accomplish this my understanding is I have to upload a .js file. I currently have this code on my page:
<script src='/ytembed.js' type="text/javascript"></script>
<div id="youtubeDiv"></div>
<script type="text/javascript">ytEmbed.init({'block':'youtubeDiv','type':'search','q':'03728D7DF4BBDC66','results':'50','order':'highest_rating','width': 200, 'height': 200, 'layout': thumbnails});</script><br>
It only returns a blank page. I figured it's because i have some sort of failed implementation of the .js file.
This is my app file currently :
application: *********
version: 1
runtime: python
api_version: 1
handlers:
- url: /(.*\.(gif|png|jpg|ico|js|css))
static_files: \1
upload: (.*\.(gif|png|jpg|ico|js|css))
- url: .*
script: main.py
- url: \1
script: ytembed.js
I recommend you to use the static_dir configuration like this:
application: *********
version: 1
runtime: python
api_version: 1
handlers:
- url: /static/
static_dir: static
- url: .*
script: main.py
And put the ytembed.js in static/js/ytembed.js from the root directory of your application, and point to the js file with the url http://APPHOST/static/js/ytembed.js.