Django forms with slider - django

Is it possible to use a slider with Django Forms with Crispy Forms?
I am using Foundation and the example code is below.
<div class="slider" data-slider data-initial-start="50" data-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden" name="amount">
</div>

After burning a couple days playing with this, I am convinced that the jquery approach is not the best way to tackle this.
I would recommend just going with the Crispy-form template approach
Field('slider', template="custom-slider.html")
good luck.

Related

Django For While Loops and counters when returning data

I am pulling some crypto data into my web app, and placing it into bootstrap cards. My issue is with the number of cards now populating my site. So I thought, no sweat. I'll just initialize a counter at 0 and throw a while loop in there until around 9 or 10. So far no bueno, the code below is the functioning version where it just unloads unlimited crypto cards. I've tried ranges, and If anyone has an idea how I can accomplish this, it'd be greatly appreciated. I don't think it's difficult, just not making the connection. I've even found cases now where you need to register the while loop just to use it in django ? #register.tag('while') had no idea
{% for x in api.Data %}
<div class="col-sm">
<div class="card-deck">
<div class="card" style="width: 18rem">
<img class="card-img-top" src="{{ x.imageurl }}" alt="{{ x.source }}">
<div class="card-body">
<h5 class="card-title">{{ x.title }}</h5>
<p class="card-text">{{ x.body }}</p>
Learn more
</div>
</div>
</div>
<br />
</div>
{% endfor %}
This isn't the right approach. If you want less data, send less data. Don't send everything and render half of it.
This is why there is pagination:
Django provides high-level and low-level ways to help you manage paginated data – that is, data that’s split across several pages, with “Previous/Next” links.
Under the hood, all methods of pagination use the Paginator class. It does all the heavy lifting of actually splitting a QuerySet into Page objects.
And Django Rest Framework also supports it.
The key difference is, that if your database has 1 million records and you render only 10, you will still fetch 1 million from the database. But if you use pagination (even if you don't need previous/next links), you only fetch 10.

Label in cfinput is displaying to the right of the text box

When working with Coldfusion 9 and cfform with a HTML format, I place a cfinput on a page with a label, it displays the label to the right of the text box. I have tried using the tag, with and without it but no matter what I do, the label is always to the right of the box.
<cfform method="post" name="mfForm" >
<label for="campaign">Mailfile ID:</label>
<cfinput type="text" name="campaign" id="campaign">
<cfinput type="submit" name="submit" value="Submit" id="submit">
</cfform>
Don't ever remember having this problem before recently. I would just use an HTML form, but want to take advantage of cf's autosuggest.
I hate to say it, but frankly quirks like this are why many people suggest ditching the built-in ajax features and using the underlying libraries (or some jQuery alternative) directly. You will have greater control, more choices, not to mention you will not be tied to whatever version ships with ColdFusion. Most of these libraries are updated frequently, so within a year the ones bundled with CF are often out of date. ExtJS is a good example. The public version is already up to version 4.2.1, but CF9 still uses 3.1.0.
Anyway, getting back to your question ... if you do a view source you will see CF generates several div tags, one of which contains the style="float:left" directive, which could explain the behavior you are seeing.
I did a quick search and happened upon a note in the the CF8 docs which suggest a hack for datefields which may also apply here:
To correctly display label text next to the control in both Internet Explorer and Firefox, you must surround the label text in a
<div style="float:left;"> tag and put three <br> tags between each
line.
Simply adding the div seems to work for me with the sample you posted:
<cfform method="post" name="mfForm" >
<div style="float:left;">
<label for="campaign">Mailfile ID:</label>
</div>
<cfinput type="text" name="campaign" id="campaign" autosuggest="AA,BBB,CCC,DDD">
<cfinput type="submit" name="submit" value="Submit" id="submit">
</cfform>
But again, you might want to consider using the javascript libraries directly instead of relying on the built-in ajax features, so you can avoid weirdness like this.

Django templating and adding elements to template

I do a lot of re-rendering templates (adding elements, removing elements) using AJAX. Is there an easier way to do this where I could define certain elements ahead of time and pass in a Javascript associative array and it would return the HTML for me? I have heard suggestions for Handlebars, but I heard that it conflicts with Django's templating system.
An example of this is:
<div id="overlay"></div>
<div id="add-action-box" class="lightbox">
<a class="close" href="#">X</a>
<h2>Add Goal</h2>
<form class="lightbox-form" id="add-action-form">
<div class="lightbox-form-element">
<label>Goal</label>
<input type="text" />
</div>
<div class="lightbox-form-element">
<label>Deadline</label>
<input type="text" />
</div>
<div class="lightbox-form-element">
<input type="submit" value="Add Goal" />
</div>
</form>
</div>
I want to be able to define the above HTML elsewhere and allow Jquery to append the above to another element. I don't want to type in the above and delete all of the newlines, add \, put quotes around everything, etc. It makes it harder to read.
It is frustrating to edit HTML when it is on the same line like this:
$("body").append('<div id="add-action-box" class="lightbox"><a class="close" href="#">X</a><h2>Add Goal</h2>')
Have you considering using something similar to jQuery Templates. They are no longer maintained and the project has been picked up by jQuery UI. More details can be found here. I usually find them helpful in situations like yours.

Django template input button post problem

I try to post value of input buttons in Django but I couldn't
This is my template
<form id="ReviewRateForm" method="post" action="/review/post/rate/">
<input type="button" hint="V1" title="V" value="1" id="radio{{ forloop.counter }}-1" type="button" name="qid[{{forloop.counter}}]"></input>
<input type="button" hint="V1" title="V" value="2" id="radio{{ forloop.counter }}-1" type="button" name="qid[{{forloop.counter}}]"></input>
<input type="button" hint="V1" title="V" value="1" id="radio{{ forloop.counter }}-1" type="button" name="qid[{{forloop.counter}}]"></input>
</form>
However, when I debug it I couldn't reach the values of that input buttons in my view.
What is the problem or how can I overcome it?
The values can be accessed by the name of the input from request.POST. However, you're dynamically naming the inputs, which is going to make things more complicated when you go to retrieve those values.
Example without taking into consideration the dynamic naming:
quid1 = request.POST.get('quid1')
The problem might be with your browser rather than with django.
If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute.
Update: Oh, you are not using <button> elements, I read too fast. Sorry. Then this answer is not relevant.

Django Form Template Button

Django accepts and works with form button in format:
<input type="submit" value="Submit" />
How to make it to work with the following:
<button type="button">Submit</button>
Could you explain what exactly you mean by "Django accepts and works with form button in format"? As far as I know the difference in the behaviour of <input type="submit" .../> and <button type="button">... has nothing to do with Django. Django does not care how a form is submitted from the browser.
This previously posted question might be of interest.
Add the following to the button to submit the form: ("myform" is the id of your form)
onClick="javascript.document.myform.submit();"