I am trying to understand how to use JQuery File Upload by blueimp. This is my test view with an Input from type file, a progress bar and a submit button. If I am selecting an Image in the Input, the value changes to undefined. What have I to do Upload this Image (and show the progression of the upload)?
HTML with JQuery:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="form" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div>
<input type="file" accept="image/png, image/jpeg">
</div>
<div>
<progress id="progress" value="0" max="100"></progress>
</div>
<div>
<input type="submit">
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="{% static 'blueimp/vendor/jquery.ui.widget.js' %}"></script>
<script src="{% static 'blueimp/jquery.fileupload.js' %}"></script>
<script src="{% static 'blueimp/jquery.iframe-transport.js' %}"></script>
<script type="text/javascript">
$('#form').fileupload({
url: '{% url 'upload' %}',
sequentialUploads: true,
dataType: 'json',
type: 'POST',
add: function (data) {
console.log(data, data.result);
},
progress: function (data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress').val(progress);
if (progress === 50) {
console.log('We made it half way...');
} else if (progress === 100) {
console.log('We made it...');
} else {
console.log(progress + '%');
}
},
done: function(data) {
console.log(data.result.name);
},
fail: function () {
console.log('Failed')
}
});
</script>
</body>
</html>
My Views:
def image_upload(request):
return render(request, 'test/image_upload.html')
def upload(request):
print('Files:', request.FILES)
return HttpResponse(request.FILES)
Related
hello I have the following code that tries to show the field "name" in the div "target2", but for this I use a form within another form I think is the problem. But I don't see a way to fix it.
index.php
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="ajax.js"></script>
</head>
<body>
<form method="post" id="fuera">
<div id="target1">
</div>
<button type='button' id="botonFuera">EnviarElDeFuera</button>
</form>
<div id="target2">
</div>
</body>
</html>
otro.php
<form method="post" id="dentro">
<input type='hidden' id='nombre' name='nombre' value='hola'>
<button type='button' id="botonDentro">EnviarElDeDentro</button>
</form>
otroMas.php
<?php
echo($_POST["nombre"]);
?>
ajax.js
(document).on('ready',function(){
$('#botonFuera').click(function(){
var url = "otro.php";
$.ajax({
type: "POST",
url: url,
data: $('#fuera').serialize(),
success: function(data)
{
$('#target1').html(data);
}
});
});
$(document).on('click',':button', function (evt) {
if(this.id=='botonDentro')
{
var url = "otroMas.php";
$.ajax({
type: "POST",
url: url,
data: $('#dentro').serialize(),
success: function(data)
{
$('#target2').html(data);
}
});
}
});
});
I've created a html list of buttons/text from an array called items in an .EJS template. How do I pass the specific item's id (item.id) to the button's function so I can send the right data to my api? Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
function print(id) {
$.ajax({
url: "https://www.example.com/api/1/print",
type: "POST",
data: {
"item_id": id
},
dataType: "json",
success: function (result) {
alert(result);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
};
</script>
</head>
<body>
<h2>Menu</h2>
<ul>
<% for(item of items) { %>
<li>
<button onclick="print(item.id)">PRINT</button>
<%= item.name %> - <%= item.id %>
</li>
<% } %>
</ul>
</body>
</html>
<button onclick="print('<%= item.id %>')">PRINT</button>
is how you would do it in every templating language I have used. After looking at the docs, it appears EJS is the same
<button onclick="print('<%= item.id %>')">PRINT</button>
wrap your variable up with the template tags, within a single quotes
I have an html page where I am trying to link an input box to an ajax autocomplete function. The problem is the function is not being called, for either success or failure.
If I change 'autocomplete' to 'keypress' it gets called, but it's not what I'm looking for.
Here is the page:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="~/Scripts/jquery-ui.css">
<script>
$(document).ready(function () {
$("#search-box").autocomplete(function () {
$.ajax({
type: "POST",
url: "http://localhost:52139/odata/WEB_V_CIVIC_ADDRESS?",
data: { enteredText: +$(this).val() },
dataType: 'json',
ContentType: "application/json, charset=UTF-8",
success: function (data) {
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background", "#FFF");
},
error: function (data, xml, errorThrown)
{
alert("here: " + errorThrown);
}
});
});
});
//To select country name
function selectCountry(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
</script>
</head>
<body>
<div class="frmSearch">
<input type="text" id="search-box" placeholder="Country Name"
autocomplete="on"/>
<div id="suggesstion-box"></div>
</div>
</body>
</html>
So like I said, the ajax function never fires. If I use 'keypress' it does, but I need it to fire for autocomplete.
Any ideas?
Thanks.
Looks like jquery-ui wasn't being loaded properly. Thanks j08691 for the tip.
enter image description hereI am not able Retrieve data from Json file using Angular Js.
Am trying to get the Json data from URL using click function in angular Js and also when click the button add empty tr td in table.
<!doctype html>
<html lang="en" ng-app="sampleapp">
<head>
{% load staticfiles %}
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="{% static 'bootstrap/js/angular.min.js'%}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/jquery.min.js'%}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js'%}" type="text/javascript"></script>
<script type="text/javascript" src="{% static '/bootstrap/js/app_ang.js'%}"></script>
</head>
<body >
<div class="col-sm-12" ng-controller="tablejsonCtrl">
<button class="clickbutton" ng-click="jsonclick();">Show-json</button>
<table rule="all" class="table table-bordered table-hover ">
<tr>
<th>Name</th>
<th>Price</th>
<th>Description</th>
<th>Calories</th>
<th>isbest</th>
</tr>
<tr ng-repeat="value in students.breakfast_menu.food">
<td>{{value.name}}</td>
<td>{{value.price}}</td>
<td>{{value.description}}</td>
<td>{{value.calories}}</td>
<td>{{value.isbest}}</td>
</tr>
</table>
</div>
</body>
</html>
var app =angular.module('sampleapp', [])
app.controller("tablejsonCtrl", function ($scope, $http) {
$scope.jsonclick = function () {
var url = "http://127.0.0.1:8000/static/waste/test.json";
$http.get(url).then(function(response) {
$scope.students = response.data;
});
}
});
Instead of use ".then" try with .success method, so replace this :
$http.get(url).then(function(response) {
$scope.students = response.data;
});
with this :
$http.get('url').success(function (response){
$scope.students= response;
});
You can use HTTP request in local.
Only works for Angular Versions above 1.6
$http.get('./path-to-JSON-file/../someFile.json').
then(function onSuccess(response) {
angular.extend(_this, data);
defer.resolve();
}).
catch(function onError(response) {
console.log(response);
});
for further research: CLICK HERE
I'm doing assignment, and essentially what I would like to do it have an autocomplete on the input box so the user can select a 'Starter' and 'Main' from a JSON file. When inputting characters, a dropdown list is displayed, but it is not populated with values.
The JSON file (spanish.php) is:
([{"course":"starter","name":"Chorizo Sausage Rolls","price":"5.99"},{"course":"starter","name":"Sardines in Lemon Sauce","price":"6.99"},{"course":"starter","name":"Spanish Tortilla","price":"5.99"},{"course":"starter","name":"Escabeche","price":"4.99"},{"course":"main","name":"Seafood Paella","price":"13.99"},{"course":"main","name":"Albondigas Soup","price":"9.99"},{"course":"main","name":"Linguine with Mussels","price":"13.99"},{"course":"main","name":"Spanish Rice with Shrimp","price":"11.99"},{"course":"main","name":"Roasted Red Pepper Salad","price":"8.99"},{"course":"main","name":"Chorizo Fritatta","price":"10.99"},{"course":"main","name":"Lamb Meatballs","price":"12.99"}]);
Here is my code:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
$( function() {
$( "#starter" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
dataType: "jsonp",
data: {
term: request.term
},
success: function( data ) {
response( data );
}
} );
},
minLength: 2,
} );
} );
</script>
And the HTML:
<label for="starter">Choose starter</label>
<input type="text" name="starter" id="starter"><br>
<label for="main">Choose main</label>
<input type="text" name="main" id="main"><br>
As I said, the list is returning nothing when 2+ digits are entered. Do I need to ask for it just starters? Am I goin about this correctly? I will be asking the user to choose a starter and main, then submitting the form.
Thanks.
I'm giving here a solution for auto-completing the starter menu. Hope that you can do the same for main menu searching. Or comment in this answer, if you're facing any problem implementing this.
<!doctype html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var starterSearchData;
$(function() {
$.ajax({
url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
dataType: "jsonp",
async: false,
success: function(data) {
starterSearchData = $.map(data, function(item) {
if (item.course == "starter")
return item.name;
});
EnableAutoComplete();
},
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
function EnableAutoComplete() {
$("#starter").autocomplete({
source: starterSearchData,
minLength: 2,
delay: 100
});
}
});
</script>
</head>
<body>
<label for="starter">Choose starter</label>
<input type="text" name="starter" id="starter">
</body>
</html>