I have this
<div wire:loading>
loading.....
</div>
component:
public function doMySubmit(){
//something slow
return redirect('/');
}
problem is, that loading stops once the redirect gets returned to the browser, the redirect means though that the browser just STARTS to redirect.
So on doMySubmit I show a splash screen, but once the redirect, it disappears and the form becomes editable again at least until the redirect response gets an answer and the browser starts to paint the new page.
any fix?
The mechanics of Livewire does not work like this. It only shows a loading indicator until the request is resolved. What you can do, is make the loading logic yourself, by introducing a loading-variable like this:
public $loading = false;
public function doMySubmit() {
$this->loading = true;
return redirect('/');
}
#if($loading)
<div>
loading.....
</div>
#endif
Related
I don't really get how to make a button click trigger my view function... I already googled, but nothing really helps me understand...
In my html, I have:
<a class="btn btn-large btn-info" href="{% url "device-detail" device.pk %}" name = 'rotateleft'>Rotate Left</a>
And in my views.py:
class DeviceDetail(DetailView):
....
def rotate_left(request, self):
if request.GET.get('rotateleft') == 'rotateleft':
print 'TEST!!!!'
self.image.open()
self.image.rotate(-90)
self.image.save()
If I click the button, the page seems to be reloaded as planned, but as 'TEST' is not printed (and the image is not rotated, but it might be that the code that is supposed to rotate it doesn't work yet, I wanted to call the function to see if it works), I'm guessing that this function is never called.
I am relatively new to Django and very new to the web interface side of Django, so help would be really appreciated!
You seem to be confusing a few things here. Clicking the link will "refresh" the DeviceDetail page as you noticed. Adding a name attribute on your HTML link won't however affect the request made to the server.
Based on what you are trying to accomplish it seems you should use a simple view function and perhaps read in a a GET parameter for deciding which way to rotate your image. Note that the parameters you pass to your view needs to be within the link URL, like:
href="{% url "device-detail" device.pk %}?rotate=right"
I am trying to solve an issue with modals. What I want to do is allow the user to click the browser's back button to dismiss a modal and return to the original state of the page, this is: without modal. For such purpose I thought about using HTML 5 history API.
I started trying to append a querystring parameter to the URL, such as http://...page.html?show_modal=[yes|no] but I ended leaving this approach because I couldn't handle all the stuff involving popstate event, pageshow event, etc. I couldn't make it work and it overwhelmed me.
Then I tried with a more simple approach involving a hash appended to the URL, such as http://...page.html#modal, and the hashchange event. This approach is working better for me and I almost have it.
When the user clicks the button to show the modal, he or she can click the browser's back button and it will dismiss the modal. Furthermore, after that, the user can click the browser's forward button and it will show the modal again. Very nice! The user can also navigate directly to the URL with the hash to access directly this state of the page, as well as he or she can bookmark such state of the page. It's working pretty neat and I'm rather happy with the results.
The problem is that it is not working totally perfect. When the user dismiss the modal by clicking the background, the ESC key or the X in the upper right corner, the history starts to mess up. Try it: open the modal by clicking on the button, then click the background to dismiss it (look a the URL in the address bar, first problem here is that the hash isn't removed), then click your browser back button and you will see it isn't working correctly. You will end with a duplicate in your history and you have to click the back button twice in order to go to the previous page. This is not desirable from an UX viewpoint. Does anyone know a solution to this?
I provide my code in this CodePen and at the end of this question. I suggest trying it in your own machine and NOT IN Codepen, so you can view the hash in the URL, etc. Also, it doesn't work in Codepen Full mode, I don't know why.
Thanks!!
I am using Foundation 5.2.1
HTML
<div class="row">
<div class="small-12 columns">
<h1>Reveal Modal</h1>
<h2>Manipulation of the browser history for a better UX</h2>
<a class="button radius" href="#" data-reveal-id="sampleModal" id="button">Show Modal...</a>
</div>
</div>
<!-- ############# -->
<!-- MODAL -->
<!-- ############# -->
<div id="sampleModal" class="reveal-modal medium" data-reveal>
<h2>Hi!</h2>
<p>You may think you are on a new page now, but you aren't. Try to click your browser <kbd>Back</kbd> button to dismiss this modal and return to the the page you were viewing.</p>
<a class="close-reveal-modal">×</a>
</div>
JavaScript
function setModalHash(url, present) {
var a = $('<a>', { href:url } )[0]; // http://tutorialzine.com/2013/07/quick-tip-parse-urls/
var newHash = "";
if (present === true) {
newHash = "#modal";
}
// Build the resulting URL
result = a.protocol + "//" + a.hostname + ":" + a.port + a.pathname + a.search + newHash;
return result;
}
$("#button").on('click', function() {
history.pushState(null, null, setModalHash(document.URL, true));
});
$(window).on("hashchange load",function(e) {
// Handling also the load event allows navigation directly to http://host/path/to/file#modal and bookmarking it
if (document.location.hash == "#modal") {
$("#sampleModal").foundation("reveal","open");
}
else {
$("#sampleModal").foundation("reveal","close");
}
});
I've been messing with the history api/History.js in combination with session storage to maintain modal state, and open/close based upon user navigation. I've finally achieved about 90% of my goal, but history is implemented very poorly in Safari and iOS Safari so remove the features for these browsers.
Some of the problems you may be running into with the hash approach is that when you use the # with pushstate it actually doesn't push a new object into the history state. It sometimes seems to push history onto the stack and you could use history.back() to fire a popstate, but if you were to say refresh the page with your hashurl and do some sort of check for hash on page initiation, there doesn't seem to be a new history pushed onto the stack, and therefore on backwards navigation the user will leave the site rather than closing the modal.
Here is my implementation working for all browsers except for where it falls back to normal behavior is Safari:
http://dtothefp.github.io/hosted_modal_history_sample/
https://github.com/dtothefp/html5history_express_modal_toggle
Like I said I use History.js in combination with sessionstorage because annoyingly enough, in the popstate for closing the modal the history object is removed, which is exactly when I would need it. In all a very poorly implemented API.
I don't change the URL because this project does not have a backend, so if I change the URL with no hash, on page refresh the page would not be found. An alternate implementation would be a query string, which will properly update history when used in the pushstate, but ends up being bad UX because if the user closes the modal not using the backwards navigation (i.e. hitting the cancel button or clicking off), removing the query string would result in a page refresh.
I'm trying to poll the state of checkboxes (this is done in JS every three seconds). This solution returns "None" (see code below); Both printouts (with 'args' and with 'form') return "None". I'm expecting True/False, depending on the checkbox's boolean state.
index.html:
{% extends "layout.html" %}
{% block content %}
<div id="results" class="container">{{data_load|safe}}</div>
<input id='testName' type='checkbox' value='Yes' name='testName'>
{% endblock %}
and the relevant flask app snippet:
#app.route('/', methods = ['GET', 'POST'])
def index():
return render_template('index.html', data_load=timertry())
#app.route('/_timertry', methods = ['GET', 'POST'])
def timertry():
print request.args.get('testName')
print request.form.get('testName')
return "some html going into 'results' div.."
The JavaScript polling function (adapted from here):
$(document).ready(function() {
$.ajaxSetup({cache : false});
setInterval(function() {
$('#results').load('/_timertry?' + document.location );
}, 3000); // milliseconds!
});
This should be simple enough, but none of the SO solutions I looked into (e.g., using jquery, adapting the flask/ajax example, etc.) worked.
EDIT: following mark's suggestion (including the javascript) and adding
print request.values in index.html returns (seen on the console in Aptana):
CombinedMultiDict([ImmutableMultiDict([]), ImmutableMultiDict([])])
Clearly, the request seems empty. The post request is logged (when checkbox is pressed) as:
127.0.0.1 - - [03/Oct/2013 00:11:44] "POST /index HTTP/1.1" 200 -
Any ideas here?
Your javascript does the following every three seconds...
$('#results').load('/_timertry?' + document.location);
In other words, you are using the jQuery load() function. The documentation for that function states that this will, in essence, call an HTTP get request to the URL you provide as the parameter (something like /_timertry?http://www.example.org. In other words, a GET request will be called to /timertry?http://www.example.org, which will be handled by Flask's timertry method.
When you have an HTTP form, and you click the "Submit" button, the browser does some magic to push all of the values to the server in the request. When you just do a simple AJAX request, none of that happens for you. Instead, you need to explicitly state what you want to be passed as data to the server (although there are plugins to help you with "post the values of an HTML form using AJAX").
So, because at no point did you do anything in your Javascript to retrieve the value of checkbox to include it into the AJAX request, the AJAX request has no values specifying that the checkbox was checked. You would need to have jQuery check if the box is checked...
var isChecked = $('#testName').is(':checked');
# Now do something with isChecked...
From what I can tell, however, you are sort of misusing HTTP: the load function will make a GET request, and you probably want something to happen as a request of the request. You probably want to make it do a POST request instead (see here and here). Also, you mentioned that you're looking for something to post when a value is changed. Putting this together, you can do something like this...
// Ensure that the function is called when the DOM is ready...
$(function() {
// Register an event that should be fired when the checkbox value is changed
$('#testName').change(function() {
var data = { isChecked : $(this).is(':checked') };
$.post('/', data);
});
})
In this case, we have an event that is called when a checkbox is checked, and that event causes us to make a POST request to the server.
I'm going to answer this question which was found in the comments of the question
"which becomes a question of how to submit a form without a 'submit' button.."
So it is very possible to submit a value when a user clicks on the button
{% block content %}
<form id="target" action="YourViewName">
<div id="results" class="container">{{ data_load|safe }}</div>
<input id='testName' type='checkbox' value='Yes' name='testName'>
</form>
{% endblock %}
$( "#results" ).click(function() {
$( "#target" ).submit();
});
If you want to stay on the same page, however, you're going to need to use an ajax call to pass the data back rather then use a standard submit, however This tutorial covers that topic fairly well. but a basic change to send the data back would look like
$( "#results" ).click(function() {
var request = $.ajax({
type: "POST",
url: "/YourViewName",
data: {'input_value':$('#testName').val()},
dataType: "html"
}).done(function(msg) {
// I don''t know what you want to do with a return value...
// or if you even want a return value
}
});
and the flask would look like
#app.route("/YourViewName")
def example():
list_name = request.args.get("input_value")
#if you don't want to change the web page just give a blank return
return ""
I have a view that can take several seconds to process a GET request and render the results. I'd like to put up a temporary page that says "Processing..." while the view is doing its stuff. How can I do this?
UPDATE
I don't have any control over the link to my page. It is a link to me a third party has on their page. When they click it I run some stuff and display the results. I don't want them to have to click anything on the pages I display.
Ideally, I would like the following:
A user clicks a link to my website that is on a 3rd party website
My websites displays a "processing request" message - the user doesn't have to click anything, just wait.
After a few seconds the results are displayed.
All the user had to do was click a link once and wait for the results.
Some example code would be greatly appreciated as I am quite new to things like jQuery - if that's what I need.
Use jQuery to display the message while waiting for the view to return the result.
Place a hidden div-tag in the page containing the processing message/image.
If you submit the GET request by clicking a button you put an onclick event on the button to display the div-tag. When the view is done processing, the page will be reloaded and the target page will be displayed.
If the view is called using AJAX you can place the show/hide of the div in the ajaxStart and ajaxComplete events.
EDIT: OK since the page will be called from by a 3rd party it will complicate things a bit. I would suggest that you load the page without the data and once the page is loaded you do an AJAX GET request to retrieve the data.
You could do as follows:
Add a hidden div-tag to the page with the Progress message/image.
<div id="progress">Please wait while the page is loading.</div>
Then add the ajax GET call to the page:
$(document).ready(function () {
//Attach the ajaxStart and ajaxComplete event to the div
$('#progress').ajaxStart(function() {
$(this).show();
});
$('#progress').ajaxComplete(function() {
$(this).hide();
});
//Perform the AJAX get
$.get('/your_view/', function(data) {
//Do whatever you want with the data here
});
});
The above code has not been tested but it will give you an idea.
UPDATE
I would suggest that you return a JSON object or similar from your view:
companies = Company.objects.filter(name__istartswith=companyname)
results = [{'value': company.name, 'id':company.id} for company in companies ]
json = simplejson.dumps(results)
return HttpResponse(json, mimetype='application/json')
You can also use the getJSON() method instead of get() in jQuery.
very simple example:
<script>
showProcessingMessage = function() {
$("body").append('<div id="style_me_as_message">processing request</div>');
}
$("body").on('click', "a.slow", showProcessingMessage);
</script>
<a class="slow" href="/slow-response-page/">show slow page</a>
I have a web page where the user enters some data and then clicks a submit button. I process the data and then use the same Django template to display the original data, the submit button, and the results. When I am using the Django template to display results, I would like the page to be automatically scrolled down to the part of the page where the results begin. This allows the user to scroll back up the page if she wants to change her original data and click submit again. Hopefully, there's some simple way of doing this that I can't see at the moment.
It should already work if you provide a fragment identifier in the action method of the form:
<form method="post" action="/your/url#results">
<!-- ... -->
</form>
and somewhere below the form, where you want to show the results:
<div id="results">
<!-- your results here -->
</div>
This should make the page jump to the <div> with ID results.
It is complete client site and does not involve Django, JavaScript or similar.
You need to wrap your data into something like this:
<div id="some-id">YOUR DATA TO BE DISPLAYED</div>
and if you make redirect in your view you need to redirect to url: /some-url/#some-id
if you don't make redirect you need to scroll to the bottom using javascript (but note that redirect is preffered way to use in view after saving data).