I would like to set an icon in front of the selectable items in a multiple choice field I'm rendering with django-select2.
Per the documentation, it looks like I'll need to use templateResult, but not sure how in my case.
My HTML (simplified below) is rendered with django-crispy-forms and django-select2 as follows:
<form class="form-horizontal" method="post" >
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" type="text/css" media="screen" rel="stylesheet" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script type="text/javascript" src="/static/django_select2/django_select2.js"></script>
<label for="id_recipients" class="control-label col-lg-2 requiredField">Recipient(s)<span class="asteriskField">*</span> </label>
<select multiple="multiple" class="select2multiplewidget form-control django-select2" data-allow-clear="false" data-minimum-input-length="0" data-placeholder="Select one or more recipients" id="id_recipients" name="recipients">
<optgroup label="Groups">
<option value="group_6">Group 6</option>
<option value="group_2">Group 2</option>
<option value="group_8">Group 8</option>
</optgroup>
</select>
</form>
I thought I'd be able to use JS like on the Example page, with the below, but the function is never called.
$(".select2multiplewidget").select2({
templateResult: formatState
});
Related
I have a Django app, with new template where datetimepicker works well. I created an edit template but the widget do not load automatically, so I added them. But for some reason, i do not know how to bring the datetimepicker, I can only get the datepicker.
Does anybody knows please ?
The precise line in the edit template looks like:
<div>
<input id="Restriction_Start_Date_id" type="text" name="Restriction_Start_Date" value="{{ restricted_name_obj.Restriction_Start_Date|date:'n/j/Y G:i' }}" class="form form-control datepicker" >
</div>
While on the new template I have :
<div>{{ form.Restriction_Start_Date.label_tag }}</div>
<div>
{{ form.Restriction_Start_Date.errors }}
{{ form.Restriction_Start_Date }}
</div>
Solution found, I used the CDN and the following :
<link href="https://cdn.jsdelivr.net/npm/flatpickr#4.5.2/dist/flatpickr.min.css"type="text/css" media="all" rel="stylesheet">
<div>
<input type="hidden" name="Restriction_Start_Date" required="" id="Restriction_Start_Date" fp_config="{"id": "fp_14", "picker_type": "DATETIME", "linked_to": "fp_13", "options": {"mode": "single", "dateFormat": "Y-m-d H:i:S", "altInput": true, "enableTime": true}}"class="flatpickr-input" value="{{ restricted_name_obj.Restriction_Start_Date|date:'n/j/Y G:i' }}">
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/flatpickr#4.5.2/dist/flatpickr.min.js"></script>
<script type="text/javascript"src="https://cdn.jsdelivr.net/gh/monim67/django-flatpickr#1.0.0/static/js/django-flatpickr.js"></script>
(Not beautiful but it will do the job for now.
When you click the "client login" link at the top of this page, the reveal modal should appear. The HTML for it is correct for sure, so a script must be wrong.
In the head of my page, I have these scripts/link:
<!-- jQuery in case needed for Foundation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Foundation CDN Links -->
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites#6.5.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
<!-- Compressed JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites#6.5.3/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>
The compressed CSS and JavaScript are what Foundation says to use.
I created the project with foundation-cli originally but am unable to deploy, so I copied all the static files/minified CSS into this new GitHub repo and published with GitHub Pages without issue: https://github.com/nataliecardot/zeus-hosting
If I can't simply use CDN links for the reveal modal to work, maybe I could copy the needed files from the original project's repo (created by running foundation new).
Here's the HTML of the reveal modal, although I know it's correct:
<div class="reveal login-modal" id="loginModal" data-reveal>
<h1 class="h3">Client Login</h1>
<form>
<label><input type="text" placeholder="Username"></label>
<label><input type="password" placeholder="Password"></label>
<div class="login-bottom-group">
<button class="button" type="submit">Login</button>
<div class="login-couple">
<span>Remember Me</span>
<div class="switch">
<input class="switch-input" id="rememberSwitch" type="checkbox" name="rememberSwitch">
<label class="switch-paddle" for="rememberSwitch">
<span class="show-for-sr">Remember Me</span>
</label>
</div>
</div>
</div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</form>
</div>
Scripts have to be and should always be at the end of <body>, right before </body>.
I am switching from Django Crispy Forms to Floppy Forms, but my desired Bootstrap styling appears to be lost; now it just looks like a plain unstyled form.
Crispy
Here is what I had with Crispy Forms's Bootstrap template pack:
Here was the generated source:
<div id="div_id_sent_amount" class="form-group has-error">
<label for="id_sent_amount" class="control-label requiredField">How much would you like to give?
<span class="asteriskField">*</span>
</label>
<div class="controls ">
<select class="select form-control" id="id_sent_amount" name="sent_amount"><option value="" selected="selected">---------</option><option value="0.00">$0.00</option><option value="0.05">$0.05</option><option value="0.10">$0.10</option></select>
<span id="error_1_id_sent_amount" class="help-block"><strong>This field is required.</strong></span></div>
</div>
Floppy
Here is what I get with Floppy using the Bootstrap layout here.
Here is the generated source:
<div class="form-group error">
<label class="col-sm-4 control-label" for="id_sent_amount">Sent amount <span class="required">*</span>:</label>
<div class="controls col-sm-8 field-sent_amount">
<select id="id_sent_amount" name="sent_amount">
<option value="" selected="selected">---------</option>
<option value="0.00">$0.00</option>
<option value="0.05">$0.05</option>
<option value="0.10">$0.10</option>
</select>
<ul class="errorlist"><li>This field is required.</li></ul>
</div><!--- .controls -->
Any ideas on what I am missing?
floppyforms just provides easier layout and widget control, it does not automatically enable bootstrap styling.
For that, you have to do a bit of work as detailed in the documentation.
In summary, you have to create these templates:
floppyforms/templates/floppyforms/layouts/bootstrap.html
floppyforms/templates/floppyforms/rows/bootstrap.html
floppyforms/templates/floppyforms/layouts/default.html
floppyforms/templates/floppyforms/errors.html
Fill them with bootstrap-specific styling (examples are provided in the documentation).
Keep in mind the examples are for an older version of bootstrap; you might want to update the templates with the current version of bootstrap.
You can edit the templates by hand to bring them up to date, or use django-floppyforms-bootstrap3 which does exactly what it says - updates the templates for bootstrap3 compatibility.
I am trying to access a web service that I created in Eclipse Indigo. I have all the files, the classes and and the Wsdl file all created. Below is my index.jsp and what happens here is that I return a law company depending on the case and court selected. But What I have failed to find is how to connect to them through a dynamic page i.e. a JSP page. Any advice is highly appreciated
<%# page language="java" contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO- 8859-1"%>
<%# page import="java.net.URL,javax.xml.namespace.QName,java.net.URL,,javax.xml.ws.Service,org.lao.ws.Findlawyers;"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Law Courts Home Page</title>
</head>
<body>
<form action="index.jsp" method="get">
<select name="selectcourt" id="selectcourt">
<option value="concourt">Constitutional Court</option>
<option value="highcourt">High Court</option>
<option value="magcourt">Magistrates Court</option>
<option value="supremecourt">Supreme Court</option>
</select>
<input type="radio" name="Case Type" value="casecivil" id="CaseType_0" />
Civil</label>
<br />
<label>
<input type="radio" name="Case Type" value="casecriminal" id="CaseType_1" />
Criminal</label>
<%
String casetype = "";
String selcourt = "";
String lawyers = "";
%>
<%=lawyers %></th>
</form>
</body>
</html>
You can do it 2 ways,either by sending the form (except for the jsp tags content) to the servlet and dislay the lawyers on a new page or else pass the selected parameters using ajax to the servlet and display the results on the same page.
Also since you seem to be new to this,its better you try with my first option.Passing a simple form something like this
<form action="index.jsp" method="get">
<select name="selectcourt" id="selectcourt">
<option value="concourt">Constitutional Court</option>
<option value="highcourt">High Court</option>
<option value="magcourt">Magistrates Court</option>
<option value="supremecourt">Supreme Court</option>
</select>
<input type="radio" name="Case Type" value="casecivil" id="CaseType_0" />
Civil</label>
<br />
<label>
<input type="radio" name="Case Type" value="casecriminal" id="CaseType_1" />
Criminal</label>
</form>
Then in your servlet retrieve the paramters like this
String casetype = request.getParamter("Case Type");
String selcourt = request.getParamter("selectCourt");
Then use this to find data from database
Then query use these paramters in a query and get the desired results..
Hey, any ideas why this wont work, when i click on the input fields, nothing happens. Here is the code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/ui.datepicker.js"></script>
<script type="text/javascript" charset="utf-8">
$(function()
{
$('.date-pick').datePicker();
});
</script>
This my form:
<form id="form1" name="form1" method="post" action="chart.php">
<ul id="add_form">
<li><label>Date from</label>
<input type="text" name="date1" class="date-pick" /></li>
<li><label>Date to</label>
<input type="text" name="date2" class="date-pick" value="<?php echo date("Y-m-d") ?>" /></li>
<li><label>Display</label>
<select name="type">
<option value="1">User Joins</option>
<option value="2">Messages sent</option>
<option value="3">Optin/outs</option>
</select>
</li>
</ul>
<br clear="all" /><br />
<input type="image" src="images/show.jpg" border="0" alt="Submit Form" class="login" />
</form>
I think you want a lowercase p.
$('.date-pick').datepicker();
To me it seems that you want...
$('.date-pick').datepick();
But I'm looking at the 3.7.4 version of Datepicker (freshly downloaded from the jQuery site). Based on your element that imports the Datepicker plugin, I'm not sure we're looking at the same version.
My example works for me using your markup.
Are you including jQuery.ui.core js file?
Are you including the DatePicker CSS files (ui.core.css and ui.datepicker.css)? Sometimes it works but you can't see it the way it should look because there are no styles in place.