Im developing a code that performs multiple functions in the template and i have used scripts to check the functions using if else and for loops, but i am getting these kinds of errors, please help me know the reasons, thank you in advance
if you see at the end of the code inside the script tag the declaration of if else tag must be somewhat like the code below, but as soon as i save the code it gets unformatted and gives me errors
{% if messages %}
{% for message in messages %}
alert('{{message}}')
{% endfor %}
{% endif %}
Upload.html file
{% extends 'base.html' %} {% block content %}
<div class="form-group">
<label for="name" class="col-md-3 col-sm-3 col-xs-12 control-label">Select : </label>
<div class="col-md-8">
<select name="cars" id="cars">
<option value="">Select</option>
<option value="WithTime">AmpandFreq</option>
<option value="WithoutTime">Amplitude</option>
</select>
</div>
</div>
<div id="withtime" style="display:none">
<form action="/csvapp/upload/" method="POST" enctype="multipart/form-data" class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label for="name" class="col-md-3 col-sm-3 col-xs-12 control-label">File: </label>
<div class="col-md-8">
<input type="file" name="csv_file" id="csv_file" required="True" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-3 col-sm-3 col-xs-12 col-md-offset-3" style="margin-bottom:10px;">
<button class="btn btn-primary"> <span class="glyphicon glyphicon-upload" style="margin-right:5px;"></span>Upload </button>
</div>
</div>
</form>
</div>
<div id="withouttime" style="display:none">
<form name="form" action="/csvapp/upload_withouttime/" method="POST" enctype="multipart/form-data" class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label for="name" class="col-md-3 col-sm-3 col-xs-12 control-label">File: </label>
<div class="col-md-8">
<input type="file" name="csv_file" id="csv_file" required="True" class="form-control">
</div>
</div>
<div class="form-group">
<label for="name" class="col-md-3 col-sm-3 col-xs-12 control-label">Sampling Frequency: </label>
<div class="col-md-8">
<input type="text" name="sampfreq" id="sampfreq" required="True" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-3 col-sm-3 col-xs-12 col-md-offset-3" style="margin-bottom:10px;">
<button class="btn btn-primary"> <span class="glyphicon glyphicon-upload" style="margin-right:5px;"></span>Upload </button>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
{ %
if messages %
} { %
for message in messages %
}
alert('{{message}}') { % endfor %
} { % endif %
}
$('select').on('change', function() {
var a = $(this).val()
{ %
if a == "WithoutTime" %
} {
alert("inside")
$('#withtime').hide();
$('#withouttime').show();
} { %
else %
} {
$('#withtime').hide();
$('#withouttime').show();
}
})
</script>
{% endblock %}
After Searching and varying many internal settings I came to a simple conclusion for the errors and the requirement
In the command palette (ctrl-shift-p) select Install Extension and choose Django Template.
To get started on the extension...
Go to the Debug viewlet and select Launch Extension then hit run (F5). This will launch a second instance of Code with the extension from the first window loaded.
As you make changes, you can also reload (Ctrl+R or Cmd+R on Mac) the second Code window to load any changes.
for more information refer the link below
Django Template view[https://marketplace.visualstudio.com/items?itemName=bibhasdn.django-html]
Related
Does anyone know, How to resolve this issue of the crashed javascript script?
I am using 2 checkboxes to load some DOM.
1st checkbox is to expand textarea with the CKEditor script which is loaded with the JS but I have a wire model to send data to the controller.
Here is HTML for 1st checkbox:
<div class="form-group mt-25 d-flex flex-row">
<label class="checkbox-container form-group__label">
{{ __('Extended description') }}
<input type="checkbox" name="extended-description-checkbox" id="extended-description-checkbox" class="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="form-group mt-25 cke d-none" id="extended-description-checkbox-div">
<label class="form-group__label" for="extended-description">{{ __('Extended description') }}</label>
<textarea wire:ignore.self wire:model.debounce.250ms.defer="extendedDescription" name="extended-description" id="extended-description" cols="30" rows="10"></textarea>
</div>
2nd checkbox is also handled with the JS and has a temporary URL method since the expanded DOM element should contain uploaded images for the gallery.
Here is HTML of the 2nd checkbox:
<div class="form-group mt-25 d-flex flex-row">
<label class="checkbox-container form-group__label">
{{ __('Use default images') }}
<input type="checkbox" name="use-default-images" id="use-default-images" class="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="d-none" id="use-default-images-div">
<div class="form-group mt-25">
<label class="form-group__label">{{ __('Service images') }}</label>
<div class="form-group__uploaded-images">
#if ($additionalImages)
#foreach($additionalImages as $image)
<img src="{{ $image->temporaryUrl() }}" alt="Temporary image">
#endforeach
#endif
</div>
</div>
<div class="custom-file ml-auto">
<button type="button" class="ml-auto styled-link">{{ __('Add images') }}</button>
<div class="row mt-25">
<div class="col-4 col-md-8"></div>
<div class="col-8 col-md-4">
<input wire:ignore.self wire:model.defer="additionalImages" type="file" multiple>
#error('images.*') {{ $message }} #enderror
</div>
</div>
</div>
</div>
Here are the scripts for expanding of the both DOM elements:
const extendedCheckbox = document.querySelector('#extended-description-checkbox');
const extendedDiv = document.querySelector('#extended-description-checkbox-div');
extendedCheckbox.addEventListener('change', function() {
if(extendedCheckbox.checked) {
extendedDiv.classList.remove('d-none');
} else {
extendedDiv.classList.add('d-none');
}
});
const defaultImagesCheckbox = document.querySelector('#use-default-images');
const defaultImagesDiv = document.querySelector('#use-default-images-div');
defaultImagesCheckbox.addEventListener('change', function() {
if(defaultImagesCheckbox.checked) {
defaultImagesDiv.classList.remove('d-none');
} else {
defaultImagesDiv.classList.add('d-none');
}
});
I am making a project in Django but Im not using Django built-in forms. Rather, I am using html and bootstrap to render forms. On a page, I want to create a quiz. I am doing this via a multi-step form where I input the number of questions on the first form. Then based upon this field, when I hit next, I want to have the same number of the fields for questions and corresponding answers to appear so that I can set them. For example, if I type 5 questions and hit next, it should have 5 fields for me to enter the questions and each question field should have 4 answer fields. Is there a way to dynamically do this?
Please help :(((( This is very important.
Thank you n here is my code snippet
{% block content %}
<div class="row">
<h2 style="color: darkblue;" class="text-center">Add a Quiz</h2>
</div>
<form action="" id="add_test_form" method="POST">
<!--This form will contain the quiz information-->
{% csrf_token %}
<div class="row">
<div class="form-row">
<div class="form-group col-md-6">
<label>Name of test</label>
<input type="text" class="form-control" name="test_name" required>
</div>
</div>
</div>
<div class="row">
<div class="form-row">
<div class="form-group col-md-6">
<label>Number of questions</label>
<input type="number" id="num_qu" class="form-control" name="test_num_questions" min="1"
oninput="validity.valid||(value='')" required>
</div>
</div>
</div>
<div class="row">
<div class="form-row">
<div class="form-group col-md-6">
<label>Time( Duration) in minutes</label>
<input type="number" class="form-control" name="test_duration" min="1"
oninput="validity.valid||(value='')" required>
</div>
</div>
</div>
<div class="row">
<div class="form-row">
<div class="form-group col-md-4">
<input type="button" value="Next" id="first_next" class="btn btn-primary btn-lg mb-10">
</div>
</div>
</div>
</form>
</div>
<script>
$(document).ready(function(){
$("#first_next").click(function(e){
var num_of_qu = $("#num_qu").val();
alert(num_of_qu);
});
});
</script>
{% endblock content %}
I am currently developing an application with Laravel 5.8 version and i use JQuery UI dialog as "pop-up" with some form to add datas in list.
So i have for example this type of form-popup :
<div class="dialog" id="addTr" data-open="{{ isset($_GET['popUpTr']) ? $_GET['popUpTr'] : 'close' }}" title="Ajouter une tranche">
<form method="POST" action="{{ route('tranches.store') }}">
#csrf
<input hidden type="text" name="ID_PROJET" value="{{ isset($projet->ID_PROJET) ? $projet->ID_PROJET : null }}">
<div class="row minimized">
<div class="col-3">
<span>Type contact</span><span class="required-star">*</span>
</div>
<div class="col-8">
<select name="TYPE_CONTACT_" class="form-control form-control-sm" id="select-typeContactAddTr" required>
<option value="">Aucun</option>
<!-- si le projet est reservé uniquement aux entreprises (ouverture projet = 2) -->
#if($projet->OUVERTURE_ == 2)
<option value="1" {{ old('TYPE_CONTACT_') == 1 ? 'selected' : null }}>Entreprises</option>
#else
#foreach($typesContact as $tp)
<option {{ old('TYPE_CONTACT_') == $tp->CLECOD ? 'selected' : null }} value="{{ $tp->CLECOD }}">{{ $tp->LIBCOD }}</option>
#endforeach
#endif
</select>
</div>
</div>
<div class="row minimized">
<div class="col-3">
<span>Numéro <span class="text-9">(numérique)</span></span><span class="required-star">*</span>
</div>
<div class="col-2">
<input name="CPT_TRANCHE" id="input-cptAddTr" maxlength="2" value="{{ old('CPT_TRANCHE') }}" type="text" class="form-control form-control-sm {{ $errors->first('CPT_TRANCHE') ? 'is-invalid' : '' }}" required>
</div>
</div>
<div class="row minimized">
<div class="col-3">
<span>Libellé</span><span class="required-star">*</span>
</div>
<div class="col-8">
<input name="LIBEL_TR" id="input-libelAddTr" type="text" value="{{ old('LIBEL_TR') }}" class="form-control form-control-sm" required>
</div>
</div>
<div class="row minimized">
<div class="col-3">
<span>De</span><span class="required-star">*</span>
</div>
<div class="col-5">
<input name="MT_SOUTIEN_MINI" id="montant-min-input" type="text" value="{{ old('MT_SOUTIEN_MINI') }}" class="form-control form-control-sm budget-input" required>
<span>€</span>
</div>
<div class="col-4">
<span>à</span><span class="required-star">*</span>
<input name="MT_SOUTIEN_MAXI" id="montant-max-input" type="text" value="{{ old('MT_SOUTIEN_MAXI') }}" class="form-control form-control-sm budget-input" required>
<span>€</span>
</div>
</div>
<div class="row minimized">
<div class="col-3">
<span>Montant réel</span>
</div>
<div class="col-8">
<input name="MT_REEL" id="montant-reel-input" value="{{ old('MT_REEL') }}" type="text" class="form-control form-control-sm budget-input">
<span>€</span>
</div>
</div>
<div class="row minimized">
<button class="btn btn-info" type="submit">Enregistrer</button>
<button class="btn btn-info cancel-button" type="reset">Annuler</button>
</div>
</form>
</div>
The idea is that if the user make an error in the data typing, the datas are returning with the error thanks to the old function of Laravel : https://laravel.com/docs/5.8/requests#old-input
The problem is that these datas have to be delete when the user close the pop-up or click on the "cancel" button.
So i have create function that load pop up and manage the user action on it. Here is the JS code using JQuery UI (last stable version) :
var loadTrPopUp = function(elementID) {
$(function() {
$("#" + elementID).dialog({
autoOpen: false,
modale: false,
resizable: false,
height: 420,
width: 650,
closeText:"",
close: function() {
console.log("close an reset tranche")
$('#select-typeContactAddTr option:first').prop('selected',true);
$("#montant-min-input").attr("value","")
$("#montant-max-input").attr("value","")
$("#montant-reel-input").attr("value","")
$("#input-cptAddTr").attr("value","")
$("#input-libelAddTr").attr("value","")
}
})
})
$(function() {
$(".cancel-button").on('click', function() {
$("#" + elementID).dialog("close");
})
})
}
For the simple <input> that works great and the field are reinitialize when the user close the pop up. But for others types of field like <textarea> or <select>, the datas are not reinitialize.
I search on how i can reinitialize these types of input and i have adapted my code but that still not working so i think that the problem come from the old function. But i'm not sure so if someone have an idea or can help me that would be great!
Thanks in advance for your help.
First, I am developer for C, C++, C#, Android and Swift but I have absolutly no experience in JavaScript or PHP or Web development.
I bought some source code for my backend server. It is kind of shop where I can enter products and store them. Now, I got everthying to work (even with 0 knowdlege in web development), but there is a text input field which checks for integer values. I want to insert decimal values like a price information, e.g. 19.99. It then complains that it has to be 19 or 20. I can not find the place where to change that or which class/function is responsible for checking that entered value. There is something called Blade. It is in HTML and javaScript as it seems to me. I can not find any class or a route to a file where the entered values go and get checked. I don't even know which class/file is responsible for writing the values to the database. I mean, wtf? It can not be that complicated to find out which file is responsible to handle the entered values. It drives me crazy.
That is the input which only takes integer values.
This is the blade code:
{{-- resources/views/admin/dashboard.blade.php --}}
#extends('adminlte::page')
#section('title', 'Products')
#include('parts.header')
#section('content_header')
<div class="col-md-12">
<h2>Add new product</h2>
</div>
#stop
#section('content')
<div class="row">
<div class="col-sm-12">
<form method="post" action="{{ route('product.add') }}" enctype="multipart/form-data">
{{ csrf_field() }}
#if(!$errors->isEmpty())
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-ban"></i> Alert!</h4>
#foreach ($errors->all() as $error)
<div>{{ $error }}</div>
#endforeach
</div>
#endif
<div class="col-sm-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Details</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form role="form">
<div class="box-body">
<div class="row">
<div class="col-sm-4 form-group ">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="col-sm-4 form-group ">
<label for="name">Description</label>
<input type="text" name="description" class="form-control" id="name" placeholder="Enter description" required>
</div>
<div class="col-sm-3 form-group ">
<label for="category">Select category</label>
<select name="category_id" class="form-control" required>
<option value="" disabled selected>Select your option</option>
#foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group">
<label for="price">Price</label>
<input type="number" name="price" class="form-control" id="price" placeholder="Enter price" required>
</div>
<div class="col-sm-4 form-group">
<label for="amount">Amount</label>
<input type="number" name="amount" class="form-control" id="amount" placeholder="Enter amount" required>
</div>
<div class="col-sm-3 form-group">
<div class="row">
<div class="col-sm-6">
<img id="myImg" alt="" style="width: 100%;">
</div>
<div class="col-sm-6">
<label for="image">Image</label>
<input class="fullwidth input rqd" type="file" name="image" id="image" accept="image/*" onclick="fileClicked(event)" onchange="fileChanged(event)" required>
<div id="log"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h4>Variations</h4>
<div class="box-body table-responsive no-padding">
<table id="variationTable" class="table table-bordered table-hover dataTable" role="grid">
<thead>
<tr role="row">
<th rowspan="1" colspan="1">#</th>
<th rowspan="1" colspan="1">Owner</th>
<th rowspan="1" colspan="1">Remove</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>1</td>
<td>
<input type="text" name="owner_id[]" placeholder="Enter owner" required>
</td>
<td>
<i class="fa fa-fw fa-remove"></i>
</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-default btn-sm addrow pull-right" style="height: 34px;">
<span class="glyphicon glyphicon-plus-sign"></span> Add
</button>
<div class="clearfix"></div>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<div class="col-sm-6">
<h4>Siblings</h4>
<div class="form-group">
<select name="siblings[]" class="form-control select2" multiple>
#foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->name }} </option>
#endforeach
</select>
</div>
</div>
</div>
</div>
<!-- /.box-body -->
</form>
</div>
</div>
</form>
</div>
</div>
#stop
#section('js')
#include('parts.footer');
#stop
Can somebody tell me where to find the code which handles the input? Where to find the function which checks for integer? I really searched every file, but somehow I am too stupid for that web stuff.
There is something like a class mentioned: col-sm-4 form-group but I can not find it?!?
Thanks.
Use step attribute for your number input
Float
<input type="number" step="0.01">
Int
<input type="number">
Go to app/Http directory; then you have to check for the controller that handles that very view. Look for validator method in the controller file. It is something like this:
<php?
protected function validator(array $data)
{
return Validator::make($data, [
'price' => 'required|string|min:19|max:20'
]);
}
You can change it as you want.
Add step="0.01"(for example 0.01) property to your price input.
If it's been checked on client side you can check resources/views/parts/footer and find out which javascript files are included in your template then check that javascript files for the validation.
If it's server side, most common place for validations is app/Http/Requests. but before going for requests you should check the Controller and action which is responsible for responding to that request and check which Request class is input paramter for that action then got to app/Http/Requests and find that class and edit validation rules
So I have a create announcement form and then an edit form for each announcement and each form has its own datepicker. My function for controlling the datepicker is:
$(function() {
$( ".datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
});
});
Initially my issue was that using the datepicker in one of the edit forms would change the field in the create form since the ids were the same. I got around this by adding ids (in my forms.py) like so:
end_date = forms.DateField(label='Expires', widget=forms.TextInput(attrs={'class':'datepicker form-control', 'id':'end_date_create'}))
and
end_date = forms.DateField(label='Expires', widget=forms.TextInput(attrs={'class':'datepicker form-control', 'id':'end_date_edit'}))
to my createAnnouncement and EditAnnouncement forms. But since I have multiple edit forms per page, I still have the same issue where using the datepicker on any edit form changes the field of only the top edit form. I am using django widget tweaks to render my forms so it automatically generates HTML and ids and classes and everything. Each edit form is in a div with a unique id, but the form fields themselves are named the same thing across all the forms. Does anyone know how I could generate unique ids for my form fields with django widget tweaks? Or maybe there is some javascript or something I could add to my datepicker function that tells the datepicker to change the value of the field that is in the same div?
EDIT: My template looks like this:
{% if boardAnnouncements %}
<h3>Announcements</h3>
<div class="container" style="margin: 0px; padding: 0px;">
<ul>
{% for announcement in boardAnnouncements %}
<div class="row" style="padding-bottom: 10px;">
<li>
<div class="col-md-6">
<!-- display announcement content -->
</div>
<div class="col-md-6">
<!-- edit button calls javascript function to hide/unhide div with edit form in it -->
<i class="fa fa-pencil" aria-hidden="true"></i> Edit
</div>
</div>
<!-- each div gets unique id that corresponds to announcemt id -->
<div id="editann-{{announcement.id}}" class="hidden">
<form role="form" action="/editannouncement/{{announcement.id}}/" method="post">
<!-- display edit form with django widget tweaks -->
{% csrf_token %}
{% for field in editAnnouncement %}
{% if field.errors %}
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="id_{{ field.name }}">
{{ field.label }}</label>
<div class="col-sm-10">
{{ field }}
<span class="help-block">
{% for error in field.errors %}
{{ error }}
{% endfor %}
</span>
</div>
</div>
{% else %}
<div class="form-group">
<label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label>
<div class="col-sm-10">
{{ field }}
{% if field.help_text %}
<p class="help-block"><small>{{ field.help_text }}</small></p>
{% endif %}
</div>
</div>
{% endif %}
{% endfor %}
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="edit_announcement" class="btn btn-primary">Save</button><br><br>
</div>
</div>
</form>
</li>
</div>
{% endfor %}
</ul>
</div>
{% endif %}
<div>
And the generated HTML for the edit forms is:
<div id="editann-1" class="unhidden">
<form class="ng-pristine ng-valid" role="form" action="/editannouncement/1/" method="post">
<input name="csrfmiddlewaretoken" value="AbTEZYmK1RF9yeom1C34IFFCj3EBrOD3" type="hidden">
<div class="form-group">
<label class="col-sm-2 control-label" for="id_description">Edit Description</label>
<div class="col-sm-10">
<textarea class="form-control" cols="40" id="id_description" name="description" rows="10"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="id_end_date">Expires</label>
<div class="col-sm-10">
<input class="datepicker form-control hasDatepicker" id="end_date_edit" name="end_date" type="text">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="edit_announcement" class="btn btn-primary">Save</button><br><br>
</div>
</div>
</form>
</div>
<div id="editann-2" class="unhidden">
<form class="ng-pristine ng-valid" role="form" action="/editannouncement/2/" method="post">
<input name="csrfmiddlewaretoken" value="AbTEZYmK1RF9yeom1C34IFFCj3EBrOD3" type="hidden">
<div class="form-group">
<label class="col-sm-2 control-label" for="id_description">Edit Description</label>
<div class="col-sm-10">
<textarea class="form-control" cols="40" id="id_description" name="description" rows="10"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="id_end_date">Expires</label>
<div class="col-sm-10">
<input class="datepicker form-control hasDatepicker" id="end_date_edit" name="end_date" type="text">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="edit_announcement" class="btn btn-primary">Save</button><br><br>
</div>
</div>
</form>
</div>
So to clarify each editann-# div has an edit form in it (and each edit form has a datepicker). Right now since the all the edit form "Expire" fields have id id_end_date the datepicker changes the value of the first edit form, no matter which datepicker I am using.
I came up with a solution involving some javascript and jQuery.
function unhide_announcement(divID, ID) {
var item = document.getElementById(divID);
if (item) {
/* hide/unhide div */
item.className=(item.className=='hidden')?'unhidden':'hidden';
/* give each end_date field a unique ID */
var newID = 'id_end_date' + ID;
item.querySelector('#id_end_date').id = newID;
/* datepicker functionality */
$(function() {
$( '#'+newID ).datepicker({
changeMonth: true,
changeYear: true,
});
})
}
}
Since each edit announcement form is in a unique div, I get that div first and then within the div there is only 1 edit announcement form so I change that id from id_end_date to id_end_date1 or whichever announcement id it is associated with. And then I changed the jQuery datepicker function I had to select by id instead of by class and it worked. So when I call it in my template it looks like this:
Edit
<div id="editann-{{announcement.id}}" class="hidden">
<!-- edit announcement form -->
<form>
...
</form>
</div>
You shouldn't have two of the same id on one page. ID's must be unique. That's what is creating the error.
To add more than one form on the page, you should use Formsets which will automatically make sure your id's are unique.
By removing the id attribute from your code I was able to make the datepickers work. See this working fiddle.
Note that I had to remove hasDatepicker class from the html you pasted as that's actually inserted by the datepicker function - if you leave it in it will create a conflict and the datepicker won't show up.