Here is my js:
<script type="text/javascript">
$(document).ready(function() {
checkurl("google.com", "#google")
});
function setpanelToRed (panel){
$(panel+".list-group-item-success").animate({backgroundColor: "#d9534f"}, 1000);
}
function setpanelToYellow (panel){
$(panel+".list-group-item-success").animate({backgroundColor: "#d9534f"}, 1000);
}
function setpanelToGreen (panel){
$(panel+".list-group-item-success").animate({backgroundColor: "#d9534f"}, 1000);
}
function checkurl (link, panel){
var url = "/redir/"+link;
$.ajax(url,
{
statusCode: {
200: function() {
setpanelToGreen(panel);
},
404: function() {
setpanelToYellow(panel);
},
000: function() {
setpanelToRed(panel);
},
302: function() {
setpanelToGreen(panel);
}
}
});
setTimeout ( checkurl, 5000, link, panel);
}
</script>
And the item it is changing looks like this:
<div id="#google" class="list-group-item list-group-item-success" style="background-color: #5cb85c; color: #fff"><center>google</center></div>
I have changed it to remove some sensitive things, but I use this on 2 different pages, and it works perfectly in chrome, but doesn't work in firefox/ie(most of my test site doesn't work in ie, but that doesn't matter as much to me.
Related
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 am using reveal module pattern but can't call the method.
$(function () {
$(document).on("click", '.EditBill', function () {
editModule.EditBill(this);
});
});
var editModule = (function () {
function EditBill(object) {
var itemId = $(object).data('itemid');
loader.show();
$.ajax({
url: 'Bill/Edit',
data: { id: ItemId },
success: function (data) {
loader.hide();
$('#ModelPopup').empty();
$('#ModelPopup').html(data);
$(function () {
$('#editModal').modal();
});
}
});
}
return
{
EditBill: EditBill
}
}());
When I debug in Edge, I click the button ('.EditBill'), the message is
> SCRIPT5007: Unable to get property 'EditBill' of undefined or null
Thanks for Shyju, the answer is return and the first curly brace '{', should be on the same line! It works now. I don't understand why I have to follow this syntas, but it works.
I have a jQueryUI Dialog loading up a form from an external url, the form renders fine and posts ok but neither the save or cancel buttons seem to close the form yet the dialog close icon does it's job just fine.
Here is my script that spawns the dialog and should handle the buttons:
$(function () {
$('a.modal').on('click', function() {
var href = $(this).attr('href');
$("#modalAdd").html("")
.dialog({
title: $(this).attr("title"),
width: 400,
height: 300,
buttons: {
"Save": function() {
$.post(href,
$("form").serialize(),
function() {
$(this).dialog("close");
});
},
Cancel: function() {
$(this).dialog("close");
}
}
})
.load(href, function() {
$(this).dialog("open");
});
return false;
});
});
The final solution was to declare the variable outside of the scope of the dialog declaration as follows:
$(function () {
$('a.modal').on('click', function() {
var href = $(this).attr('href');
var modal = $("#modalAdd");
modal.html("")
.dialog({
title: $(this).attr("title"),
width: 400,
height: 300,
buttons: {
"Save": function() {
$.post(href,
$("form").serialize(),
function() {
modal.dialog("close");
});
},
Cancel: function() {
modal.dialog("close");
}
}
})
.load(href, function() {
**modal**.dialog("open");
});
return false;
});
});
It's because of variable scope, as soon as you start the call back function for the $.post call, this is no longer the dialog box. Try calling $("#modalAdd").dialog('close'); instead.
If you don't mind expanding your $.post() and $.load() calls, you can set the context of this to a certain element using the full $.ajax() method. See the "context" option in the docs.
this is changed in the ajax callback function, you need to cache to a local variable.
"Save": function () {
var $this = $(this);
$.post(href, $("form").serialize(), function () {
$this.dialog("close");
});
},
How do I make this script disable animation if it's already animating?
<script type="text/javascript">
$(document).ready(function() {
$("#nav").hover(
function() {
$("#header-wrapper").animate({height:140},500);
$("#dropdown").animate({height:100},500);
},
function() {
$("#header-wrapper").animate({height:40},500);
$("#dropdown").animate({height:0},500);
}
);
});
</script>
I'm really new to jQuery and what I've found through searching hasn't really helped.
Use .stop()
$("#nav").hover(
function() {
$("#header-wrapper").stop(true,false).animate({height:140},500);
$("#dropdown").stop(true,false).animate({height:100},500);
},
function() {
$("#header-wrapper").stop(true,false).animate({height:40},500);
$("#dropdown").stop(true,false).animate({height:0},500);
}
);
Use the .stop() jQuery function
$("#dropdown").stop().animate({height:0},500);
try this:
$("#nav").hover(function() {
if (!$("#header-wrapper").is(':animated')) {
$("#header-wrapper").animate({
height: 140
},
500);
$("#dropdown").animate({
height: 100
},
500);
} else {
$("#header-wrapper").stop(true, false).css('height', $("#header-wrapper").height());
$("#dropdown").stop(true, false).css('height', $('#dropdown').height());
}
},
function() {
if (!$("#header-wrapper").is(':animated')) {
$("#header-wrapper").animate({
height: 40
},
500);
$("#dropdown").animate({
height: 0
},
500);
} else {
$("#header-wrapper").stop(true, false).css('height', $("#header-wrapper").height());
$("#dropdown").stop(true, false).css('height', $("#dropdown").height());
}
});
I have a JavaScript function that I'm passing an argument to, that opens a jQueryUI Dialog. I want the dialog to have either one or two buttons, based on the value of the argument. How should I do this?
So far I've tried:
function foo(hasFile) {
$('#dialog').dialog({
buttons: {
Close: function() { $(this).dialog('close'); },
if (hasFile)
"Download": // do something
}
});
}
and
function foo(hasFile) {
$('#dialog').dialog({
buttons:
if (hasFile)
{
"Download": // do something
Close: function() { $(this).dialog('close'); }
}
else
{
Close: function() { $(this).dialog('close'); }
}
});
}
both of which have thoroughly broken my page.
buttons is a JavaScript literal object. You could do something like this:
function foo(hasFile) {
var buttons = {
Close: function() { $(this).dialog('close'); }
};
if (hasFile) {
buttons.Download = function(){
// Do something.
};
}
$('#dialog').dialog({
buttons: buttons
});
}
A general way to do that is like this:
foo.dialog({
// ...
buttons: (function() {
function CloseHandler() {
// close ...
};
function DownloadHandler() {
// download ...
};
return condition ?
{ "Download": DownloadHandler, "Close": CloseHandler } :
{ "Close": CloseHandler };
})(),
// ...
});
The idea is that you create a function where you can make decisions, and then return the result you decide upon.