I use the following page as example:
http://isbndb.com/book/the_new_public_health_second_edition
You can see the box "Loading Prices" when you first load the page, and it will change afterwards to show relevant information on the same box as below:
I am trying to building some price comparison engine using django, and I think I need to inform user that the page is now loading, rather than letting user to wait in front of a blank screen.
Can anyone tell me know to do it?
In your HTML
<div id="lazyLoad">
<img src="\path\to\loading.gif">
</div>
On successful ajax call replace the innerHTML of #lazyLoad with the formatted result.
Related
I am learning Django and i learn on making small project for lEARNING PURPOSE.
I learned how work with input and use as variable. Now i want to use search box with the same principle.
Please see the link of input based :
https://stackoverflow.com/questions/58813945/changing-form-to-search-box
index.html is the input after inserting info and clicking ok it directs to index2.html which shows the results
What I need to change besides POST to GET to make it work as it works with input function? do i need to change form, models?
My concern also i want to inset search bar in the navigation in index2.html where user can make search from the result page. This is my index2.html page. I tried to put {{form.as_p }} inside the form function but it does not work. I want after putting infro in search box and clicking search glyphicon (which does not work) will stay on the same page index2.html
I searched the internet and read stackoverflow other examples, but they use complicated version, i need a simple one :
1. i want to have search box on index.html page so it does not show me the name in front of input box and
2. i want search box in the index2.html page keep implementing the same function as index.html so a user do not have to go the initial page to search new data.
Any help or tips would be highly appreciated.
Since you're using bootstrap4 I would recommend to use its template tags and form field customization options.
Example:
{% bootstrap_field form.login show_label=False addon_before='<span class="fa fa-user"></span>' %}
Not: this example uses Font Aweseome for icons.
Also you're not using the real power of Django Bootstrap4, see Quickstart. You can always override the version of Booststrap or the CDN used in your settings.py if needed: Settings.
I'm using django widget tweaks to render a form field that is required. It all works fine, if the field is blank, I see a cute little popover that says field is required and all that, but if I scroll the page (the form is a little big), the popover won't move with the form field. It'll stay put and that is not good.
Here's my code:
{% load widget_tweaks %}
{{form.order_number.label}}
{% render_field form.order_number required="true" %}
Also, this is happening only on Firefox, not on Chrome. I'm on Firefox 57.0. Here's a screenshot to help. In Pic1, you'll see it is supposed to be where I like it without scrolling. In Pic2, it has gone way upwards to the top of the div when I scroll up.
Could someone please explain why this is happening and how I can fix it?
This is the behaviour of the browser when an input has the required attribute, so you can't do much about it (changing the browser's behaviour itself).
What you can do is override the default's browser with some javascript validation library, which let's you customize the type and looks of the messages as you need.
For example http://www.formvalidator.net/
I'm having a weird problem on this page www.vivopositivo.it/media/foto/guarda-chi-sorride-over-18-e-famiglie/ with the like button. I'm using PrettyPhoto to include the pictures from Flickr and open them in a lightbox. Each picture has it's own like button which shows in the lightbox and uses a specific URL such as:
http://www.vivopositivo.it/media/foto/guarda-chi-sorride-over-18-e-famiglie/#prettyPhoto[pp_gal]/1/
where the number in #prettyPhoto[pp_gal]/1/ is the key for the specific image.
The like buttons are included with the following code:
iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true" /iframe
where {location_href} gets replaced with the image specific URL.
This works for most of the images, but for some of them doesn't! They seem to get the like counter of the page instead, therefore, I get about 10 images which show the same 128 like counter which is obviously wrong. This seems completely random..
Do you have any idea on how to fix this?
Cheers,
Andrea
This is because of # in URL which identifies the image.
Please refer to this post for further explanation.
I have a quite long and complicated form which has several submit buttons. When the user clicks a submit button their data is saved but then they are sent back to the top of the page, which is annoying because the user then has to scroll back down to get to the part of the form they were working on.
(The form controls the color and layout of the user's webpage, so the expectation is that the user will make many changes, submitting many times, rather than just filling out the form and submitting once.)
Is there any way to send the user to the correct part of the page (preferably without resorting to Javascript)?
Create an anchor in your page at the correct location:
<a name="section1">Section 1</a>
Then use Django's HttpResponseRedirect and with the anchor specified.
return HttpResponseRedirect('/form#section1')
Haven't tested this myself, but I'm assuming it will work because I've seen a few snippets like this one.
Hey everyone, I would appreciate a pointing in the right direction with the problem I'm having. In short, I'm working on an application that will create PDFs using TinyMCE and ColdFusion 8. I have the ability to create a PDF by just entering in text, pictures, etc. However, I want to be able to import an html template and insert it into the TinyMCE .
Basically, I have a file directory code snippet that lets me browse through my 'HTMLTemplates' folder, and am able to select an HTML document. Now, I want to be able to take all the code from that selected HTML document and insert it into my TinyMCE box. Any tips on how I might do this, maybe?
Thanks!
If I understood you correctly, you already have a TinyMCE plugin which pops up a window and allows you to browse the certain directory using existing cfm page which you render within the popup window. Right?
If not, you should start with this. Not sure how easy it is done in current version, but in the older TinyMCE I've created the custom upload plugin (needed to track the site security permissions for current user) pretty quickly.
Next, I can see two quick ways to pass the server file contents to the client-side:
Make it available via HTTP so you can make the GET request and read contents into the variable.
Output it on the page using CF (say, on form submit when file selected) and grab using JavaScript.
I'd personally tried the second option. After you grab the text into the variable you can put it into the TinyMCE using it's API.
It can be as simple as output escaped text into the hidden div with known ID and read it using DOM operations (assuming that there is cfoutput around):
<div id="myTemplate">#HTMLEditFormat(myFileContents)#</div>
Also you can output the text directly into the JavaScript variable (of cource, with accurate escaping), maybe like this.
<script type="text/javascript">
var text = '#HTMLEditFormat(myFileContents)#';
</script>
Most advanced and possibly better for performance (and definitely "cooler") way is to use the concept of script tags as data containers, like this:
<script type="text/plain">
#HTMLEditFormat(myFileContents)#
</script>
Last time I've seen this in Nadel's blog, I think. Read it, pretty interesting.
Hope this helps.