i am new in Django and this things, and i need some tips or solutions to adding spinner.
Iam using spin.js, which i show it on this way:
var target = document.getElementById('spin');
var spinner = new Spinner(opts).spin(target);
spinner.stop();
function spin_stop()
{
spinner.stop();
}
function spin_start()
{
spinner.spin(target);
}
This code is copied from some example on web.
I show spinner with <div id...>
Now there is a problem.
I have an app in Django with name testScript. That app connects to different page to verify login information. This is "long" process, it takes about 10sec.
In that time, i want on my login page add a spinner.
In template i have a form:
<form class="form-signin" action="/testScript/" method="post">
and if i want to add onclick event in my button in this form, my spinner freeze.
How can i show spinner, when my testScript is processing?
Thanx
The spinner freezes because the browser has changed the page and is waiting for the new page to respond.
You could try using an animated gif as a spinner instead of spin.js, but that would probably freeze too.
If your verification process really needs to take 10+ seconds, then your best option is to submit the POST using Ajax, and then redirect or display the response once the server responds.
How you do it with Ajax depends on your workflow. The easiest way to POST by Ajax is with jQuery, if you don't mind an extra library. Once it responds show the response in a div on the page or redirect to another view.
$.ajax({
url: "/testScript/",
method: "POST",
data: { //form data
},
success: function(data) {
//Display response here
},
complete: function() {
//Hide spinner here
}
});
This is pretty barebones since I don't have enough details about your application or markup, but there are lots of similar solutions on here to help you.
Related
Basically, I'm trying to create an infinite loading page on the product listing using a load more and firing a click event on the pagination.
My issue is that I can load the next page into the HTML but it is pulling in the whole HTML file and not just the products.
I'm trying to use a HTML partial to append the next page products into the current div.
This is my JS currently.
$(".page-next a").on("click", function (e) {
e.preventDefault();
var partial = "#Html.Partial('_ProductWithHover')";
var url = $(this).data('url');
$.ajax({url: url,method: 'GET',dataType: 'html', success: function (data) {
$('#js-infinite-scroll-page').append(partial);
}
});
});
Not sure if I should include my partial the way I have, so any feedback or advice on how to get this working would be great.
Thanks in advance!
Since this is an asynchronous behaviour you probably should change your backend api to respond with the necessary json, and construct the dom on the client side. That is way easier. Also, I don't exactly see, how do you provide information to your backend service about the current state of the infinite loading.
So infinite loading is a glorified pagination, it works like this:
You render some number of elements initially, and when you scroll enough, you trigger a request to load the next n elements, and you append them to your list. For this to work, you have to let the backend know where you stand, and after that it can return the next n elements.
So i am building a search on website, and main search form is on home page where user can input information's like, interests, books, movies.
And that form should submit to another page where search will be displayed.
So it's similar like any other search, but on search page, i should keep parameters in url, so it's not going to be POST, it would be GET.
Home page is something like mywebsite.com
And when form is submitted it's posted with GET parameters so user can keep search results in his url. Submitted post should lead to something like.
mywebsite.com/search?interests=sports&books=harry+potter&movies=moviename
And because it can take some time to search and load results i would like to load the page and than do an ajax post to search function and populate search results once ajax responds.
I've built in past some ajax content loading and post and load data with ajax, but all that while keeping on same page, i never built when you submit content from one page to another in wordpress.
Any suggestions how can i do that and make ajax grab the content ?
I found the answer, and it's actually quite easy, instead triggering ajax with function, for example function with button click.
Just trigger ajax on page load, and don't enqueue script anywhere else except on that page, this would help a bit.
if ( is_page_template('template-search.php') ) {
wp_enqueue_script('ajax_search');
}
This will ensure script is loaded only on that template page, and as for script it self, just load ajax on page ready:
jQuery(document).ready(function($) {
jQuery.ajax({
dataType: 'json',
url: search_flight.ajaxurl,
data: {
action: 'search_flight',
},
beforeSend: function() {
},
success: function(data) {
console.log(data);
},
error: function() {
}
});
});
I have a button call this script, so it does the post in the background, but I need to reload the current page to display an updated php query, I realize there was probably a better way in jquery to the query part, but its crunch time, and all I want to do is get a successful page refresh.
Because the buttons were generated in php, the javascript code is at the end of the body.
I've tried location.href, window.location.reload(true);, document.write which only wrote to the page, document.location.href did nothing.
We are using jQuery/jQuery mobile, I was not on front end dev team, so I'm desperate to get this to work. to clarify, I need a page refresh after the $.post() command, within this code, which does work
<script type="text/javascript">
$('#reserveBook').click(function () {
var isbn = sessionStorage.getItem('isbn');
$.post(
"../inventory/postpage.php",
{ isbn: isbn }
);
});
</script>
There's no point in using AJAX if you need a page refresh regardless. As Dan Bracuk said in his comment, you'd be better off just doing a traditional form submission.
However, if you're set on having the page refresh, just add window.location.reload() in the success handler for your AJAX call:
$.post(
"../inventory/postpage.php",
{ isbn: isbn },
function(response) {
window.location.reload();
}
);
I have a Form like this in asp Classic ..
<form method="post" name="AddItemForm" id="AddItemForm" action="/files/includes/CartControl.asp" style="display:inline;">
// bunch of Hidden Fields.
Then a SUBMIT button.
action of the form takes all the hidden fields and then after processing them redirects user to a CART page.
now what I want to do is....I want user to click on ADD TO CART button, however I want user to stay on the product page while form submits to a new window (not a javascript new window...something like lightbox/colorbox/fancybox DIV etc).
I looked into many jQuery plugins but could not get a satisfied answer...which plugin is BEST for my case? any simple example?
basicly I want to submit to a new overlay div and within that DIV redirect user to a new page to show Product Info.
Thanks
It seems that you are looking for some functionality for asynchronous form submission. There is this jQuery AJAX Form plugin that provides AJAX functionality for forms. You will have something like:
$('#AddItemForm').submit( function() {
// Submit asynchronously
$( this ).ajaxSubmit( function() {
// Form processing is done
// Redirect to the shopping cart page
});
// Show a modal or a fancy "please wait" message
// Prevent default submission
return false;
});
You can find some info in this answer, the code from one of the answers:
$('input#submitButton').click( function() {
$.post( 'some-url', $('form#myForm').serialize(), function(data) {
... do something with response from server
},
'json' // I expect a JSON response
);
});
In "do something with response" you can take the data or url and load it into an overlay div.
If it's a URL, you can use jquery .load :
$('#result').load('ajax/test.html');
If it's html (or data which you wrap in html), just do
$('#result').html(theHTML)
the simplest way (in my view) is to add target attribute to the form which will open new window while the current page won't chage...
I have a div that contains a student's schedule, and there is a drop-down box for selecting by semester.
Once they select the semester, there is an ajax post, but when it refreshes, it displays the entire website within that div (with the appropriate schedule for that semester).
It looks like an iframe within a webpage, as seen here: http://cl.ly/Dy3b
Here is the ajax post script
<script type="text/javascript">
$(document).ready(function() {
$('#term').change(function() {
var form_data = {
term : $('#term').val(),
ajax : '1'
};
var u = $("#schedulePortletURL").attr("href");
$.ajax({
url: u,
type: 'POST',
data: form_data,
success: function(msg) {
//alert(u);
$('#view-schedule').html(msg);
}
});
return false;
});
});
</script>
If possible, could you give me some suggestions of what to investigate to correct this? Thank you
My guess is that the call to the server is returning a full HTML page, and your code then puts the full HTML page into the view-schedule div.
To resolve this, create a new HTML page that you can call that contains a html fragment - the chunk that you want to live in the view-schedule div. Then change schedulePortletURL to point to the new HTML page.
Alternately, you could get the html back (the msg) and parse it to pull out the data you are interested in, then insert the filtered data into the view-schedule div.
Does the existing website have a API at all that you can call?
Another possibility is that some kind of error checker in your server-side script is mistakenly firing and causing a redirect to some web page. That web page is then retrieved by the AJAX, then displayed in the DIV. I have had this happen before. You should check your server side script.
If you do not have full control over the webpage you are fetching the fetched page should be considered unpure and you should use iframe. Remember that with .html(blob) you will also get javascript code, flash objects etc. which can be used to compromize your users.
If you on the other hand have full control over the fetched webpage (which I assume) you should make a if-statement in your template that checks if the request is ajax-based.:
Pseudo serverside template code:
if not request.is_ajax():
import header.html
import body.html
if not request.is_ajax():
import footer.html