{% csrf_token %} printing as text from js file django

{% csrf_token %} printing as text from js file django - javascript

{% csrf_token %} printing as text from js file in Django the code is working if use it in script tag but when I try to use from an external js file it doesn't work
HTML
<div class="build">BUILD YOUR RESUME</div>
<div class="box container" id="box2">
<div class="skillbox">
<div class="workquestion">
How Many work Exprience you wanted <br> to add in your resume ?
</div>
<div class="row" id="butt">
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(1)" id="butt1">1</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(2)" id="butt2">2</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(3)" id="butt3">3</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(4)" id="butt4">4</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(5)" id="butt5">5</button>
</div>
<div class="workquestion" style="color: red;">
Maximum
</div>
</div>
<div class="row" >
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(6)" id="butt6">6</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(7)" id="butt7">7</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(8)" id="butt8">8</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(9)" id="butt9">9</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(10)" id="butt10">10</button>
</div>
<div class="workquestion" style="color: red;">
10 Skills
</div>
</div>
</div>
Script
<script src='{% static "js/skill.js" %}'>
</script>
skill.js
function updateform(n){
var temp=`<div class="heading">
<h2 class="head">Tell us about your Skills</h2>
<form method="POST" action="/skill">{% csrf_token %}`
for(var i=1;i<=n;i++){
temp=temp+`<div class="form-row">
<div class="form-group col-md-3">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Skill ${i}</label>
<input type="text" class="form-control" id="skill${i}" name="skill${i}" placeholder="Skill" required>
</div>
</div>`
}
temp=temp+`<button id='b1' type="submit" class="btn btn-primary nextbtn">Next</button>
</form>
</div>`
document.getElementById('box2').innerHTML=temp
}

Are you processing the JS file in Django, as a template?
Instead of referencing the resource directly in your script at its specified location, you will need to instead reference a Django URL that processes the file as a template and then returns the processed content (source text ...) to you.

Related

Jquery Repeater, how to make the 'create button' at the bottom?

I understand that the data-repeater-create="" must be inside the id="left_repeater", otherwise it will not function as a create button. Is there a way that the button will function outside the id="left_repeater" or id="right_repeater"?
My goal is when I click add left button, it will only create the left input and vise versa for the add right button. Both of the button is at the very bottom.
JS fiddle link to see the codes
$('#left_repeater').repeater({
show: function() {
$(this).slideDown();
},
});
$('#right_repeater').repeater({
show: function() {
$(this).slideDown();
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<div id="left_repeater">
<div data-repeater-list="left_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="left">
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
<!-- <div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add</span></span>
</div> -->
</div>
<div id="right_repeater">
<div data-repeater-list="right_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="right">
</div>
</div>
</div>
</div>
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add</span></span>
</div>
</div>
<div class="row">
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Left</span></span>
</div>
</div>
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Right</span></span>
</div>
</div>
</div>

Place the #left_repeater inside div container.
<div class="container">
<div id="left_repeater">
.....
</div>
</div>
add CSS style to this
.container {
display: flex;
}
https://jsfiddle.net/y1bpot5n//

Circles in a circular shape i.e 6 circles in a circle

Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5. I want it in exact circular shape. Friends, can you please fix it. Please try to help me I want it in responsive too. Below is my code kindly go through it. Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5.
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Product
identification</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Front ending <br> end customers</i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="" style="font-size:17px;"><b>ZRPL</b></i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Enhance product <br> visibility and deals</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Returns and ARB management</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Logistical
support</i></button>
</div>
</div>
</div>

Add this css style in your button. It will make a circular shape on you button. you can give any width and height value on your button. just make sure that height and width should have same value.
width:170px;
height:170px;
border-radius:50%

Clear file contents after uploading a file in modal popup

I am having some trouble in clearing file contents when file upload is done via Ajax.Below is my modal popup html code,
<div class="modal-header bg-blue">
<div class="desktop_view">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"id="myModalLabel">Upload Document</h4>
</div>
<div class="mobile_view">
<button type="button" class="btn btn-default btn-xs pull-right bold" data-dismiss="modal">Close</button>
<h4 class="modal-title"id="myModalLabel">Upload Document</h4>
</div>
</div>
<div class="modal-body">
<div class="upload-container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="form-group fileinput-button">
<label class="col-lg-6 col-md-6 col-sm-6 col-xs-12 control-label">Select Your Document:</label>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"><input type="file" multiple name="file[]" accept="image/*" id="files" ></div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="preview-container">
<div class="col-lg-12">
<div class="clearfix"></div>
<div id="dvPreview" class="preview-container"></div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" value="Upload" class = "btn btn-info" id= "save" />
<button type="button" class="btn btn-danger myclose" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
After submitting the form,the previous image content still exists.I have tried below methods.
$('#myModalone').find('form')[0].reset();
$(function () {
// Delegating to `document` just in case.
$(document).on("hidden.bs.modal", "#myModalone", function () {
//$('.modal-body').find('input').val('');
$(this).removeData('bs.modal');
});
});
It doesn't works.Please provide a solution.

Give an id to the form and call form reset function as:
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
Also you can use js as:
document.getElementById('formId').reset();
To reset a div:
$('#div_id input[type="text"]').val('');
$('#div_id input[type="file"]').val('');
Find the working fiddle here:
http://jsfiddle.net/Safoora/Car52/174/

Login & Register modal

I've created two form in different php files one is Login form and other is Register form, Then there is two Login and Register buttons in the menu
How can i make these buttons shows their forms in modal?

You can do it with an ajax query so I gonna give you an example that how you can do it:
The HTML and JS:
<body>
<div id="my_modal" class="modal"></div>
<button onclick="showLoginModal()">Login</button>
<button onclick="showRegisterModal()">Register</button>
</body>
<script>
function showLoginModal(){
$.ajax({
url:'php/login_content.php',
type:"GET",
cache:false,
success:function(html){
$("#my_modal").html(html);
$('#my_modal').modal();
}
});
event.preventDefault();
}
function showRegisterModal(){
$.ajax({
url:'php/register_content.php',
type:"GET",
cache:false,
success:function(html){
$("#my_modal").html(html);
$('#my_modal').modal();
}
});
event.preventDefault();
}
</script>
The login_content.php file:
<?php ?><div class="modal-content">
<form action="" method="post">
User
<input name="user_name" id="user_name" type="text"> Password
<input name="user_pass" id="user_pass" type="password">
<button type="submit" id="login">Login</button>
</form>
The register_content.php file:
<?php ?>
<div class="modal-content">
<form action="" method="post">
Username
<input name="user_name" id="user_name" type="text">
Password
<input name="user_pass" id="user_pass" type="password">
Confirm Password
<input name="user_pass" id="user_pass" type="password">
<button type="submit" id="login"> Register</button>
</form></div>
Greetings!

I'll flesh out my comment on Darwin's answer a little more so you can see what I am talking about.
Now, I warn you about having a fallback way to get the user to the login page just in case javascript doesn't work for whatever reason (and there are many reasons why it wouldn't), but that being said.
The code here is not entirely correct as it involves multiple files, for a full working demo please go to This Plunkr
// Code goes here
$(function() {
$('.modal-btn').on('click', function(e) {
e.preventDefault();
var id = this.id;
$('#login-register-modal').load(id + '_content.html', function(response, status) {
if (status == 'success')
$('#login-register-modal').modal();
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Link <span class="sr-only">(current)</span>
</a>
</li>
<li>
Link
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
<li role="separator" class="divider"></li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="btn-group">
<button id="login" class="btn btn-default modal-btn">Login</button>
<button id="register" class="btn btn-default modal-btn">Register</button>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="login-register-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Register_content.html
<div class="modal-content">
<div class="modal-header">
<h2>Register</h2>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword2" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
Login_content.html
<div class="modal-content">
<div class="modal-header">
Login
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" /> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>

Adding button next to input, horizontal form style - Bootstrap

I am trying to add a delete button next to an input.
My current code:
<form role="form" method="post" id="form">
<div class="form-group">
<div class="col-sm-9 ">
<span>Názov položky</span>
<input type="text" class="form-control">
</div>
<div class="col-sm-3 ">
<span>Cena</span>
<input type="text" class="form-control">
<button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</div>
</div>
<p></p>
<button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</form>
Generated output:
The red button isn't on the right side of the last input.

Maybe one of these will work. You can create some margin inside of a input-group so the button isn't touching the input or use the grid.
See working example Snippets.
.input-group .input-group-btn.input-space {
padding-left: 15px;
}
.input-group .input-group-btn.input-space .btn-input {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
div.input-group .form-control.input-control {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<h3 class="well">Custom Input Group</h3>
<div class="row">
<form role="form" method="post" id="form">
<div class="col-sm-9 ">
<div class="form-group">
<label>Názov položky</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-3 ">
<div class="form-group">
<label>Cena</label>
<div class="input-group">
<input type="text" class="form-control input-control"> <span class="input-group-btn input-space">
<button class="btn btn-danger btn-md btn-input"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</form>
</div>
</div>
<hr>
<div class="container">
<h3 class="well">Grid</h3>
<div class="row">
<form role="form" method="post" id="form">
<div class="col-sm-7">
<div class="form-group">
<label>Názov položky</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Cena</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-2">
<label>Odstrániť</label>
<div class="form-group">
<button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</form>
</div>
</div>

You must use the input-group as explained on the help page.
Here the relevant code
<span>Cena</span>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</div>
</div>

This might break on mobile, but it looks good in a CodePen
<form role="form" method="post" id="form">
<div class="row">
<div class="col-sm-8">
<span>Názov položky</span>
<input type="text" class="form-control">
</div>
<div class="col-sm-3">
<span>Cena</span>
<input type="text" class="form-control">
</div>
<div class="col-sm-1">
<br/>
<button class="btn btn-danger btn-md">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
</div>
<p></p>
<div>
<button class="add_field_button btn btn-success btn-md">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</form>

Develop Reference

JavaScript is the programming language of the Web.

{% csrf_token %} printing as text from js file django - javascript

Are you processing the JS file in Django, as a template? Instead of referencing the resource directly in your script at its specified location, you will need to instead reference a Django URL that processes the file as a template and then returns the processed content (source text ...) to you.

Related

Jquery Repeater, how to make the 'create button' at the bottom?

Circles in a circular shape i.e 6 circles in a circle

Clear file contents after uploading a file in modal popup

Login & Register modal

Adding button next to input, horizontal form style - Bootstrap

Categories

Resources