For instance, I used Django to pull certain unique number data from my database.
Then I created dropdown with search using select2. And used jQuery for search functionality. With this I could select multiple unique number at a time and with output printed in textarea field.
my question is, how to insert multiple selected options in Postgrel using Django.
I need help in backend as i m newbie in django
I tried to served everywhere but I could see only php guide.
this is my frontend code
enter code here
Search Models for CId
{% csrf_token %}
{% for x in searchmodels %}
{{ x.cid }}
{% endfor %}
You can add multiple CID and click Add
-->
<br>
<div class="resultbox">
<h2>Selected CIDs</h2>
<textarea name="" id="cidresult" cols="70" rows="15"></textarea><br><br>
<input type="button" id="addcid" value="Submit" onclick="searchresult();">
</div>
</form>
</tr>
<style>
.resultbox{
position: fixed;
left: 30%;
top: 10px;
width: 550px;
background-color: antiquewhite;
padding-left: 30px;
padding-right: 10px;
}
</style>
Now here is my jQuery code
$(document).ready(function()
{
$('#selectedcid').select2({
placeholder:'Search CID...',
closeOnSelect:false
});
$('#selectedcid').on('change',function()
{
var resultdisplay=$('#selectedcid option:selected').text();
$('#cidresult').val(resultdisplay).join(',');
})
});
this is how it looks nowenter image description here
Related
Currently, when I open a SAS job via SAS Drive, I always end up in the developer view. How do I make it so that when I open a SAS job in dirve that I only have to enter the parameters and start the job.
I've seen attempts to recreate the SAS portal through a website, but I'd rather there be a way to do it through the SAS Viya interface.
I tried using the SAS Job Execution Web Application but all i got out of that are URls to the SAS Jobs that get me my desired View that looks like this.
SAS Job
You will need to build an interface using HTML or the XML-based prompt language. See these examples: Build an HTML Input Form and Prompts.
You can also read more about how to do this in the paper Modernizing Scenario Analysis with SAS Viya and Visual Analytics.
For example:
<head>
<style type="text/css">
#font-face {
font-family: AvenirNext;
src: url("/SASJobExecution/images/AvenirNextforSAS.woff") format("woff");
}
body {
font-family: AvenirNext, Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-align: center
}
.wrapper {
padding-bottom: 10px;
}
</style>
</head>
<body>
<form action="/SASJobExecution/" enctype="multipart/form-data" method="post">
<input type="hidden" name="_program" value="$PROGRAM$"/>
<input type="hidden" name="_action" value="execute,wait"/>
<input type="hidden" name="_csrf" value="$CSRF$"/>
<p><b>Enter a Pretzel Scenario</b></p>
<div class="wrapper">
<label>Price (USD) <input type="text" name="price" placeholder="2.49"/></label>
</div>
<div class="wrapper">
<label>Cost (USD) <input type="text" name="cost" placeholder="0.25"/></label>
</div>
<input type="submit" id="submit" value="Submit"/>
</form>
</body>
This creates an input form that looks like this:
I am trying to submit a form and get the result in the same page where I have created the form . But , can't get the values in the same page . But , whenever I am trying to take the value in a different page it's working.
My views.py file :
def home(request):
words = request.GET['text']
count = len(words.split())
context = {'count':count}
return render(request,'index.html',context)
My index.html file:
<div class="container">
<h3 style="display:inline-block; text-transform: capitalize; padding-top: 10px; border-bottom: 2px solid #e5e5e5;">Word counting app</h3>
<h5 style="padding-top: 40px;text-transform: capitalize;">enter your word below to count</h5>
<div class="row">
<div class="col-lg-6">
<form method="" action="">
<textarea name="text" cols="30" rows="7"></textarea>
<button type="submit" style="padding: 6px 28px; border: none; background:orange; margin-top: 10px;">Submit</button>
</form>
<p>{{count}</p>
</div>
</div>
</div>
Add form method 'GET' to your html and remove action attribute. If there are no action provided in the form element, it will be posted to same url as your page.
<form method="GET">
I wanted to know to to use the PointField widget that is automatically generated from a Django form.
I am using the generic views for this (CreateView)
This is what my model looks like.
from django.contrib.gis.db import models
class Post(models.Model):
title = models.CharField(max_length=60)
text = models.CharField(max_length=255)
location = models.PointField(geography=True, null=True, blank=True)
objects = models.GeoManager()
The form is then automatically generated for me and I just call it in my view. As such:
{{ form.as_p }}
This is the output of that piece of code.
<form method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='wVZJIf7098cyREWe3n3jiZinPdbl8nEe' />
<p><label for="id_title">Title:</label> <input id="id_title" maxlength="60" name="title" type="text" /></p>
<p><label for="id_text">Text:</label> <input id="id_text" maxlength="255" name="text" type="text" /></p>
<p><label for="id_location">Location:</label> <style type="text/css">
#id_location_map { width: 600px; height: 400px; }
#id_location_map .aligned label { float: inherit; }
#id_location_div_map { position: relative; vertical-align: top; float: left; }
#id_location { display: none; }
.olControlEditingToolbar .olControlModifyFeatureItemActive {
background-image: url("/static/admin/img/gis/move_vertex_on.png");
background-repeat: no-repeat;
}
.olControlEditingToolbar .olControlModifyFeatureItemInactive {
background-image: url("/static/admin/img/gis/move_vertex_off.png");
background-repeat: no-repeat;
}
</style>
<div id="id_location_div_map">
<div id="id_location_map"></div>
<span class="clear_features">Delete all Features</span>
<textarea id="id_location" class="vSerializedField required" cols="150" rows="10" name="location"></textarea>
<script type="text/javascript">
var map_options = {};
var options = {
geom_name: 'Point',
id: 'id_location',
map_id: 'id_location_map',
map_options: map_options,
map_srid: 4326,
name: 'location'
};
var geodjango_location = new MapWidget(options);
</script>
</div>
</p>
<input type="submit" value="Create" />
</form>
In the head tags I import an OpenLayers script from
http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js
However, the page will not show anything for the pointfield. (The other fields work just fine).
In chromedevtools it shows this error
Uncaught ReferenceError: MapWidget is not defined
For this line of code
var geodjango_location = new MapWidget(options)
Basically I want to know if there is someother javascript library I should be linking to or am I missing something else?
I've looked through the documentation on GeoDjango forms, but don't know what else to try
https://docs.djangoproject.com/en/dev/ref/contrib/gis/forms-api/
Add this to the head section:
<head>
{{ form.media }}
</head>
I have a related problem with my Admin UI. My solution is just a reference for your problem. Firefox browser was blocking the loading of mix http/https http://openlayers.org/api/2.13/OpenLayers.js because my geodjango site forces https.
One solution is to download the OpenLayer.js into my geodjango project static directory, and add the following line to my CustomGeoModelAdmin:
class MyCustomGeoModelAdmin(....):
openlayers_url = '/static/mygeodjangoproject/OpenLayers.js'
#property
def media(self):
"Injects OpenLayers JavaScript into the admin."
media = super(MyCustomGeoModelAdmin, self).media
media.add_js([self.openlayers_url])
return media
and voilà, my admin site now shows a Geographical Map for the Point Field.
I'm trying to set up a ModelForm in Django that will use the django-chosen ChosenSelect widget for one of the fields. I have installed django-chosen and this is the code I have:
class TestForm(ModelForm):
class Meta:
model = Test
widgets = {
'field': chosenwidgets.ChosenSelect(),
}
However, the specifying the widgets has no effect and the form is outputted the same regardless of whether I define it. Any suggestions?
Are you including the form media in your template?
The example template below assumes that your base template has blocks extrastyle and extrahead where you include CSS and scripts respectively, and that you have included jquery 1.4+ in your base template.
# my_template.html
{% extends "base.html" %}
{% block extrastyle %}
{{ block.super }}
{{ form.media.css }}
{% endblock %}
{% block extrahead %}
{{ block.super }}
{{ form.media.js }}
{% endblock %}
{% block content %}
<form action="." method="post">
<table>
{{ form }}
</table>
<p><input type="submit" value="Update" />
</form>
{% endblock %}
Here is my solution with using chosen.js directly. I installed it with bower and then included it in my admin class Media:
class MyModelAdmin(LockableAdmin, admin.ModelAdmin):
form = MyModelForm # has phase_id field
class Media:
js = ('components/chosen_v1.1.0/chosen.jquery.min.js', 'admin_tools/js/chosen_admin.js')
css = {'all': ('components/chosen_v1.1.0/chosen.min.css', 'admin_tools/css/chosen_admin.css')}
The additional chosen_admin.js and chosen_admin.css files contain my init script and css for making the select look more like django admin. Here are the contents:
chosen_admin.js:
/* Create own jquery namespace */
var django = {
"jQuery": django.jQuery.noConflict(true)
};
var jQuery = django.jQuery;
var $=jQuery;
$( document ).ready(function() {
$('#id_phase_id').chosen();
});
chosen_admin.css (optional):
a.chosen-single {
box-shadow: none;
border-radius: 0px;
background: white;
background-image: none;
}
a.chosen-single span{
line-height: 18px !important;
}
.vTextField{
width: 24em;
}
a.chosen-single, .chosen-container.chosen-container-single, .chosen-container-single.chosen-single{
position: absolute;
box-shadow: none !important;
border-radius: 0px !important;
background: white !important;
background-image: none !important;
font-size: 11px !important;
height: 18px !important;
padding-left: 2px !important;
}
.chosen-container-single .chosen-single div b {
background-position: 0px 0px;
}
I got some insights here and made corrections as needed. Also see chosen.js. Hope this helps :)
I am using a form which is generated for me by django. I'm using this as a comment form after a post in my blog.
Currently it renders fine but it's not nicely aligned.
This is what I have.
This is what I'd like.
Thanks
edit: This is the result when I user {{ form.as_table }}
I know it's a little late, but for everybody else you can try this
<table>
{{ form.as_table }}
</table>
It fixes the annoying formatting problem, and looks decent.
Posting my solution hoping it'll help someone else oneday.
I knew that you'd style the fields with css but wasn't sure how to assign the classes to each item. But if you take a look at the default template provided you'll notice that the error class is assigned to a field using an if statement within a foreach loop that automatically generates each field within your form.
i.e.
{% for field in form %}
< p{% if field.errors %}
class="error"
{% endif %}
{{ field.label_tag }}<'/' p>
{% endfor %}
So I added onto this functionality.
< p{% if field.errors %}
class="error"
{% endif %}
{% ifequal field.name "honeypot" %}
id="hide"
{% else %}
id="left"
{% endifequal %}>
{{ field.label_tag }}<'/' p>
my css being
#hide{
display:none;
}
#left{
width: 200px;
text-align: left;
}
#right{
width: 300px;
text-align: left;
}
Now that you can set your classes you can easily setup your classes or id within your css file. This is for the comments.
If you're using a {{ form.as_p }} or {{ form.as_table }} to generate your form then you just set a general form class within your css to style it.
i.e.
form {
width: 350px;
padding: 20px;
border: 1px solid #270644;
}
Have a look at Customizing the form template. This is one possible solution.
Maybe you can simply use CSS to style your form and render the form as you like. (i.e as_table()).
Using the default {% render_comment_form for app.model %} will generate:
<p>
<label for="id_name">Name</label>
<input id="id_name" type="text" name="name" maxlength="50">
</p>
<p>
<label for="id_email">Email address</label>
<input type="text" name="email" id="id_email">
</p>
... etc
Therefore, you can target label in your CSS stylesheet using:
label {
width: 15%;
}
There are multiple approaches as detailed in this post, however, I found that sometimes widget attributes may not work the way you wanted.
Still, the best and easy way is to use CSS:
Render your page that contains the form fields and do some inspection (right click>inspect or F12 on Chrome for example) to know what html tags your form generates when rendered. Then you can write your CSS easily.
You have input and textarea fields in your form so your CSS will be:
input, textarea{
width:350px;
}
Don't forget to call for your CSS file at the top of your html template:
<link rel="stylesheet" type="text/css" href="{% static 'styles/form.css' %}">
Here is a snapshot of what I have for my own form: