could someone help me with one problem? I want to add a process bar when you waiting for a response from the server (Django 3.x).
Step to reproduce:
On the page 'A' we have the form.
Enter data to form.
Submit POST request by clicking to button on the page 'A'.
Waiting for getting the result on the page 'A'.
Get the result on the page 'A'.
So, I want to add process bar after 4th and before 5th points on the page 'A'. When you will get the result on the page 'A' it should disappear.
Python 3.7
Django 3.x
You can use nprogress, it's a library used for progress bars. Use this inside the interceptor where you can config it for displaying only when request is in progress until finished.
There are lots of ways to do this. I think using jquery would be easier. Basically you just need to prevent submitting the page and do an Ajax request to server. something like
<script type='text/javascript'>
$(document).ready(function () {
$("form").submit(function (e) {
// prevent page loading
e.preventDefault(e);
$('#loadinAnimation').show();
// preapre formdata
$.ajax({
type: "yourRequestType",
url: "yourUrlEndpoint",
data: formdata,
success: function (data) {
$('#loadinAnimation').hide();
// do rest of the work with data
}
});
});
});
</script>
and show appropriate loading animation in your html part
<div id='loadinAnimation' style='display:none'>
<div>loading gif</div>
</div>
You can also do it using UiKit Library in Javascript on your Django Template Page.
Below code is when a file is Uploaded
In your template file (template.html)
<body>
..
<form>
<progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
...
<div class="uk-alert-danger uk-margin-top uk-hidden" id="upload_error" uk-alert></div>
...
</form>
</head>
<script type="text/javascript">
$(document).ready(function(){
var bar = document.getElementById('js-progressbar');
UIkit.upload('.js-upload-list', {
url: '',
name : "customer-docs",
params :{
"csrfmiddlewaretoken":"{{csrf_token}}"
},
method : "POST",
concurrent:1,
allow:'*.(csv|xlsx)',
beforeSend: function (environment) {
console.log('beforeSend', arguments);
// The environment object can still be modified here.
// var {data, method, headers, xhr, responseType} = environment;
},
beforeAll: function (args,files) {
console.log('beforeAll', arguments);
},
load: function () {
console.log('load', arguments);
},
error: function (files) {
console.log("---------------")
},
complete: function () {
console.log('complete', arguments);
},
loadStart: function (e) {
console.log('loadStart', arguments);
bar.removeAttribute('hidden');
bar.max = e.total;
bar.value = e.loaded;
},
progress: function (e) {
console.log('progress', arguments);
bar.max = e.total;
bar.value = e.loaded;
},
loadEnd: function (e) {
console.log('loadEnd', arguments);
bar.max = e.total;
bar.value = e.loaded;
},
completeAll: function (data) {
console.log('completeAll', arguments);
console.log('completeAll', data);
let redirect_loc = ""
setTimeout(function () {
bar.setAttribute('hidden', 'hidden');
}, 1000);
// This is the response from your POST method of views.py
data.responseText = JSON.parse(data.responseText)
if(data.responseText.status == 201){
// swal is another library to show sweet alert pop ups
swal({
icon: data.responseText.status_icon,
closeOnClickOutside: true,
text: data.responseText.message,
buttons: {
Done: true
},
}).then((value) => {
switch (value) {
case "Done":
window.location.href = ""
break;
}
});
}
else if(data.responseText.status == 500){
swal({
icon: data.responseText.status_icon,
closeOnClickOutside: true,
text: data.responseText.message,
buttons: {
Ok: true
},
}).then((value) => {
switch (value) {
case "Ok":
window.location.href = ""
break;
}
});
}
}
});
// This block of code is to restrict user to upload only specific FILE formats (below example is for CSV & XLSX files)
(function() {
var _old_alert = window.alert;
window.alert = function(e) {
console.log(e)
if(e.includes("csv|xlsx") || e.includes("Invalid file type")) {
$("#upload_error").html("Invalid file format. Valid formats are CSV, XLSX").removeClass('uk-hidden')
}else if(e.includes("Internal Server Error")) {
$("#upload_error").html("Internal Server Error Kindly upload Documents again").removeClass('uk-hidden')
}
else {
_old_alert.apply(window,arguments);
$("#upload_error").addClass('uk-hidden').html("")
}
};
})();
});
</script>
On your views.py you can do your computation and once done, you can return a response like below
resp_json = {
"status" : 201,
"status_icon" : "success",
"url" : "/",
"message": message
}
return HttpResponse(json.dumps(resp_json))
For more info on SWAL (Sweet Alerts), visit https://sweetalert.js.org/guides/
I have SPA multi view application in AngularJS, I have defined $interval which is started from another view Controller. When i click a btn with function called and line $interval.cancel(); in it, it does not stop.
Here are examples of my code:
MainController:
$scope.$on("startInterval", function () {
$interval(function warningsControl() {
console.log("Timer stamp!");
$.ajax({
// some web api call which works fine
})
}, 10000);
});
$scope.stop = function () {
$interval.cancel();
}
$scope.logoutButton = {
text: "Logout",
type: "normal",
visible: false,
onClick: function () {
// some working code
$scope.stop();
var logoutBtn = $("#logout-btn").dxButton("instance");
logoutBtn.option({
visible: false
});
}
}
And SecondController:
$scope.authenticateButton = {
type: "default",
text: "Log In",
onClick: function () {
$.ajax({
// some web api calling
success: (data) => {
// some working code
$rootScope.$broadcast("startInterval");
}
})
}
}
This code start interval and everithing is running OK, until the point i click Logout btn - it made everithing except stoping the interval.
Any ideas how to fix it? I would be grateful for advice.
The $interval function should return some sort of ID which you can pass into $interval.cancel(). For example:
var int_id = $interval( func, time )
//...later...
$interval.cancel(int_id)
i get a callback is not a function only when i try to add a new
parameter erreur= TypeError: callback is not a function
at services.js:72 i tried to add reference to the function when i romoved evrything works fine here's my code at service.js I hope you'll help me.
.factory('Payement', function ($http, $ionicLoading) {
return {
saveContratEtudant: function (_nb_piece1,_nb_piece2,_shortadresse,_govClt,_villeClt,_localiteClt,_voieClt,_cod_logem,_adresse_logem,_govLogem,_gelgLogem, _dateDel,_dateEffet,_dateExp,_nomAssure, _prenomAssure ,_piece2,_numDocument,_typeContrat,_natureContrat,_piece1,_dateNais,_email,_phone,_IdTrans,_reference,_numDocuemnt,_codePostal,_adresse,_typedocu,_sexeClt,_tarif,_frais ,_tva, _tcc, callback) {
$http({
method: 'POST',
url:SAVE_ETUDIANT,
timeout: 10000,
data: {
nb_piece1:_nb_piece1,
nb_piece2:_nb_piece2,
shortadresse:_shortadresse,
govClt:_govClt,
villeClt:_villeClt,
localiteClt:_localiteClt,
voieClt:_voieClt,
cod_logem:_cod_logem,
adresse_logem:_adresse_logem,
govLogem:_govLogem,
gelgLogem:_gelgLogem,
dateDelivra:_dateDel,
dateEffet:_dateEffet,
dateExp:_dateExp,
nomAssure:_nomAssure,
prenomAssure:_prenomAssure,
piece2:_piece2,
numDocument:_numDocument,
typeContrat:_typeContrat,
natureContrat:_natureContrat,
piece1:_piece1,
dateNais:_dateNais,
email:_email,
phone:_phone,
IdTrans: _IdTrans,
reference:_reference
numDocuemnt:_numDocuemnt,
codePostal:_codePostal,
adresse:_adresse,
typedocu:_typedocu,
sexeClt:_sexeClt,
//nbr_piece: ,
tarif : _tarif ,
frais : _frais,
tva :_tva,
tcc :_tcc,
//reference :_reference
},
}).then(function (response) {
callback(response);
// $ionicLoading.hide();
console.log("ajout ");
});
}
};
})
here's my code on my controller.js i tried to add a reference recently to my BD so in my controller i set a var ref and i get it the var show's in the console
sendbtn.addEventListener('click', function () {
Payement.saveContratEtudant($scope.nb_piece1,$scope.nb_piece2,$scope.shortadresse,$scope.govClt,$scope.villeClt,localiteClt,$scope.voieClt,$scope.cod_logem,$scope.adresse_logem,$scope.govLogem,$scope.gelgLogem,$scope.dateDelivra, $scope.dateEffet, $scope.dateExp, $scope.nomAssure,$scope.prenomAssure,$scope.piece2,$scope.numDocument,$scope.typeContrat,$scope.natureContrat,$scope.piece1, $scope.dateNais,$scope.email,$scope.phone, $scope.IdTrans,$scope.reference, $scope.numDocuemnt, $scope.codePostal, $scope.adresse,$scope.typedocu,$scope.sexeClt,$scope.tarif,$scope.frais,$scope.tva,$scope.tcc ,function (data) {
console.log("test saveContrat")
//console.log("date:",date)
if (data.data.state_code == 200){
$scope.local_ = data;
console.log($scope.local_.data.data);
$state.go('map')
} else {
$ionicPopup.alert({
title: "Alert",
template: data.data.message
});
}
});
this is the exact erro TypeError: callback is not a function
at services.js:72
at processQueue (ionic.bundle.js:29132)
at ionic.bundle.js:29148
at Scope.$eval (ionic.bundle.js:30400)
at Scope.$digest (ionic.bundle.js:30216)
at Scope.$apply (ionic.bundle.js:30508)
at done (ionic.bundle.js:24829)
at completeRequest (ionic.bundle.js:25027)
at XMLHttpRequest.requestLoaded (ionic.bundle.js:24968)
It simply means that in this portion of code :
.then(function (response) {
callback(response); // <- HERE
// $ionicLoading.hide();
console.log("ajout ");
});
You are calling the function named "callback". But it's not defined. Probably because nothing is passed as param in the last param of this function :
saveContratEtudant: function (_nb_piece1,_nb_piece2,_shortadresse,_govClt,_villeClt,_localiteClt,_voieClt,_cod_logem,_adresse_logem,_govLogem,_gelgLogem, _dateDel,_dateEffet,_dateExp,_nomAssure, _prenomAssure ,_piece2,_numDocument,_typeContrat,_natureContrat,_piece1,_dateNais,_email,_phone,_IdTrans,_reference,_numDocuemnt,_codePostal,_adresse,_typedocu,_sexeClt,_tarif,_frais ,_tva, _tcc, callback) {
Splitted similar line :
saveContratEtudant: function (_nb_piece1,
_nb_piece2,
_shortadresse,
_govClt,
_villeClt,
_localiteClt,
_voieClt,
_cod_logem,
_adresse_logem,
_govLogem,
_gelgLogem, _dateDel,
_dateEffet,
_dateExp,
_nomAssure,
_prenomAssure ,
_piece2,
_numDocument,
_typeContrat,
_natureContrat,
_piece1,
_dateNais,
_email,
_phone,
_IdTrans,
_reference,
_numDocuemnt,
_codePostal,
_adresse,
_typedocu,
_sexeClt,
_tarif,
_frais,
_tva,
_tcc,
callback // <- HERE
) {
You should check if it's defined before calling it. Or check if your code provided really the function.
Pro tip : you should not have that much arguments in function.
So you should try like this :
.factory('Payement', function ($http, $ionicLoading) {
return {
saveContratEtudant: function (params, callback) {
$http({
method: 'POST',
url:SAVE_ETUDIANT,
timeout: 10000,
data: params,
}).then(function (response) {
callback(response);
// $ionicLoading.hide();
console.log("ajout ");
});
}
};
})
And call it like this :
Payement.saveContratEtudant($scope, function (data) {...})
I am trying to output form validation errors when you hover over the "X" in the dropped off file in Dropzone.
What I get:
How can I make the object Object output the actual error message from the form validation? I can alert the error message but can't actually show the error message upon hovering over the x.
My js file:
Dropzone.options.fileupload = {
maxFilesize: 20,
init: function () {
thisDropzone = this;
this.on("error", function (file, responseText) {
$.each(responseText, function (index, value) {
alert( value); //this shows the alert of the error message
});
});
}
};
My controller:
$this->validate($request, [
'file' => 'max:20000',
]);
I have fixed my issue.
To anyone who might have the same issue.
I fixed it by simply putting $('.dz-error-message').text(value);
Full code:
Dropzone.options.fileupload = {
maxFilesize: 50,
init: function () {
thisDropzone = this;
this.on("error", function (file, responseText) {
$.each(responseText, function (index, value) {
$('.dz-error-message').text(value);
});
});
}
};
If you want just laravel validation errors use that.
...
init: function () {
thisDropzone = this;
this.on("error", function (file, responseText) {
$.each(responseText, function (index, value) {
if (index === 'errors'){
$('.dz-error-message').text(value.file);
}
});
});
},
...
Or if you just want dropzone.js error outputs change.
if(index === message)
I am a beginner to JQuery & Html. I am creating a widget called discussion wizard. while running, I am getting below error : Object [object Object] has no method 'discussionwidget'
Not sure, what could be reason of the same :
Please help :
widget code :
(function ($, undefined) {
$.widget('ui.discussionwidget', {
options: {
userName : 'Arti Agarwal',
title:"",
width:"",
containerClass:".ui-content-gutter"
},
_create: function () {
//Create the structure of Discussion Widget
var widgetStructure = '<div class="ui-discussion hGridPx_120 wGridPx_10"><div class="ui-discussion-header hGridPx_18 wGridPx_10"></div><div class="ui-discussion-container hGridPx_100 wGridPx_75"><div class="ui-discussion-messages hGridPx_75 wGridPx_74"> <ul id="ui-discussion"></ul></div> <div class="ui-discussion-input hGridPx_10 wGridPx_10"><label class="input hGridPx_10 wGridPx_60"><span>Add or reply to a comment...</span><textarea id="message" class="hGridPx_10 wGridPx_60"></textarea></label><div class="ui-discussion-send hGridPx_10 wGridPx_10"><span class="ui-image-addchat">Add</span> <span class="ui-image-replychat">Reply</span></div></div></div></div>';
widgetStructure.appendTo($($(this.options.containerClass));
},
widget: function () {
return this.element;
},
});
var CloseDiscussionWidget = function() {
}
})(jQuery);
I am calling it from a page :
<script>
(function ($) {
//Load discussion history fist time
$(document).ready(function () {
GetCurrentUserDetails('arti.agarwa');
Discussionwidget = $('.ui-content-gutter').discussionwidget({ containerClass: ".ui-content-gutter" });
} (jQuery));
</script>
There were few syntax errors in the code, Try
(function ($, undefined) {
$.widget('ui.discussionwidget', {
options: {
userName: 'Arti Agarwal',
title: "",
width: "",
containerClass: ".ui-content-gutter"
},
_create: function () {
// Create the structure of Discussion Widget
var widgetStructure = $('<div class="ui-discussion hGridPx_120 wGridPx_10"><div class="ui-discussion-header hGridPx_18 wGridPx_10"></div><div class="ui-discussion-container hGridPx_100 wGridPx_75"><div class="ui-discussion-messages hGridPx_75 wGridPx_74"> <ul id="ui-discussion"></ul></div> <div class="ui-discussion-input hGridPx_10 wGridPx_10"><label class="input hGridPx_10 wGridPx_60"><span>Add or reply to a comment...</span><textarea id="message" class="hGridPx_10 wGridPx_60"></textarea></label><div class="ui-discussion-send hGridPx_10 wGridPx_10"><span class="ui-image-addchat">Add</span> <span class="ui-image-replychat">Reply</span></div></div></div></div>');
//Missing ) here
widgetStructure.appendTo($($(this.options.containerClass)));
},
widget: function () {
return this.element;
},
destroy: function () {
$.Widget.prototype.destroy.call(this);
}//extra , here
});
var CloseDiscussionWidget = function () {
}
})(jQuery);
//missing }) here
(function ($) {
// Load discussion history fist time
$(document).ready(function () {
//GetCurrentUserDetails('arti.agarwa');
Discussionwidget = $('.ui-content-gutter').discussionwidget({
containerClass: ".ui-content-gutter"
});
})
}(jQuery));
Also the dom ready block can be written as below - there is no need to use the wrapper function
// Load discussion history fist time
jQuery(function ($) {
GetCurrentUserDetails('arti.agarwa');
Discussionwidget = $('.ui-content-gutter').discussionwidget({
containerClass: ".ui-content-gutter"
});
})