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.
Related
When I remove form-wizard.init.js, livewire wire:model $firstName updates well, but I when I return it, it refuses to update
<div>
<label >First name {{$firstName}}</label>
<input wire:model="firstName" placeholder="Enter Your First Name">
</div>
Here here is the scripts
<!-- form wizard init -->
<script src="assets/js/pages/form-wizard.init.js"></script>
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- App js -->
<script src="assets/js/app.js"></script>
<script src="assets/js/custom.js"></script>
#livewireScripts
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 trying to get(reflect) corresponding radio button as soon as I choose the option from dropdown menu.
I am unable to get the answer, I am new to python. could you guys please help , below is my code :
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>
Program
</title>
</head
<body>
<h3>
first program :)
</h3>
<form action="/cgi-bin/mds/dropdown.py" method="post">
<br>
<select name="dropdown" >
<option value="MCR" selected> MCR </option>
<option value="OCS" > OCS </option>
</select>
<input type="radio" name="file" value="raw"> raw <br />
<input type="radio" name="file" value="std" /> std <br/>
<input type="submit" value="Submit" />
</form>
</body>
</html>
My expectation when I select any of the OCS/MCR dropdown, the radio button should dynamically generate with raw/std name.
dropdown.py file code:
#!/usr/bin/python
import cgi
import cgitb
form = cgi.FieldStorage()
if form.getvalue('dropdown'):
menu = form.getvalue('dropdown')
else :
menu = "not entered"
print("Content-type:text/html\r\n\r\n")
print("<html>")
print("<head>")
print("<title>Hello - Second CGI Program</title>")
print("</head>")
print("<body>")
print("<h2> %s </h2>" % (menu))
print("</body>")
print("</html>")
If i well understand you need to do that using ajax (jquery) in your html file, it sends request asynchronously to your python file that handles it as what you clicked on.
maybe this link helps you
jQuery get value of select onChange
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
});