I have an function in the custom.js file as follows :
function contactTraxio(fullname, telephone, email) {
if (typeof(fullname)==='undefined') fullname = null;
if (typeof(telephone)==='undefined') telephone = null;
if (typeof(email)==='undefined') email = null;
bootbox.dialog({
title: "Limit reached",
message: '<p class="text-main text-center">You have reached the limit of your calculations.</p>' +
'<p class="pad-btm mar-btm text-center">Upgrade your account by contacting us on +32 9 111 12 12 or filling in the form below.</p>' +
'<div class="row"> ' +
'<div class="col-md-12"> ' +
'<form class="" method="POST"> ' +
'<div class="form-group"> ' +
'<div class="col-md-6" style="padding-left: 0"> ' +
'<input id="contact-fullname" name="fullname" type="text" placeholder="Your fullname" class="form-control input-md" value="' + fullname + '"> ' +
'<span class="help-block"><small></small></span> </div> ' +
'</div> ' +
'<div class="col-md-6" style="padding-right: 0"> ' +
'<input id="contact-telephone" name="telephone" type="text" placeholder="Telephone" class="form-control input-md" value="' + telephone + '"> ' +
'<span class="help-block"><small></small></span> </div> ' +
'</div> ' +
'<div class="col-md-12 pad-no-lr-md" style="margin-top: 7.5px;"> ' +
'<input id="contact-email" name="email" type="text" placeholder="Your email address" class="form-control input-md" value="' + email + '"> ' +
'<span class="help-block"><small></small></span> </div> ' +
'</div> ' +
'</div>' +
'</form> ' +
'</div>' +
'</div>',
buttons: {
success: {
label: "Send",
className: "btn-primary",
callback: function () {
$.ajax({
type: 'POST',
url: '/master/contact_traxio/',
data: {
fullname: $('#contact-fullname').val(),
telephone: $('#contact-telephone').val(),
email: $('#contact-email').val(),
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function (data) {
debugger;
}
});
}
}
}
});
}
Thus, I have an contact form in js. And I'm trying to send the form data to the django view with ajax.
I've added csrfmiddlewaretoken: '{{ csrf_token }}' to the data, but for some reason I get an error :
Forbidden (CSRF token missing or incorrect.): /master/contact_traxio/
[03/Mar/2017 08:52:46] "POST /master/contact_traxio/ HTTP/1.1" 403 2502
The contact_traxio view is as follows :
#login_required
def contact_traxio(request):
if request.method == 'POST':
# Just test
return HttpResponse('{} / {} / {}'.format(request.POST['fullname'], request.POST['telephone'], request.POST['email']))
else:
return HttpResponseBadRequest("Sorry. Something went wrong.")
And the django template from where I call the contactTraxio function is as follows :
{% block page_content %}
<script>
$(document).ready(function () {
var fullname = '{{ user.user.first_name }} {{ user.user.last_name }}';
contactTraxio(fullname, '{{ user.telephone }}', '{{ user.user.email }}')
})
</script>
{% endblock %}
Why is the csrf token isn't sent?
Any advice?
You're using Django template syntax in an external JS file. That can't work, because Django does not parse those files.
The documentation shows exactly what you need to do to access the token from your JS; you should follow it.
Related
In order to display two input fields in a bootbox.confirm box, I've embedded an HTML form in the message field. Everything works fine, but if I enter text in the textarea, the Save button loses focus, and two clicks on the save button are required to execute save and clear the modal. The problem is exterior to the code below, though. This jsfiddle functions just fine with one click. I can't practically share the thousands of lines of codes this sits in, anyone know what might be causing this and how I can fix it?
bootbox.confirm({
title: "Save Foo",
message: '<div class="row"> ' +
'<div class="col-md-12"> ' +
'<div class="text-center">Save</div>' +
'<form class="form-horizontal"> ' +
'<div class="form-group"> ' +
'<label class="col-md-4 control-label" for="Question">Question</label> ' +
'<div class="col-md-4"> ' +
'<input id="name" name="name" type="text" value="Question" class="form-control input-md"> ' +
'<span class="help-block">You can edit your question before saving</span> </div> ' +
'</div> ' +
'<div class="form-group"> ' +
'<label class="col-md-4 control-label" for="notesbox">Notes:</label> ' +
'<div class="col-md-4"> <div class="textarea"> <label for="notesbox"> ' +
'<textarea name="notesbox" id="notesbox" rows="10" cols="30"></textarea></form></div> ' +
'</label> ' +
'</div>' +
'</div> ' +
'</div> </div>' +
'</form> </div> </div>',
buttons: {
'cancel': {
label: 'Don\'t save',
className: 'btn-danger pull-left'
},
'confirm': {
label: 'Save',
className: 'btn-success pull-right',
}
},callback: function (result) { if (result == true)
{ alert('Success')}
}
}
);
I'd start by using a script template, rather than using string concatenation to build your message - it would make it obvious that your current message has some invalid markup, which isn't doing you any favors. Here's one way of doing that:
<script type="text/template" id="form-template">
<div class="text-center">Save</div>
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label" for="Question">Question</label>
<div class="col-md-4">
<input id="name" name="name" type="text" value="Question" class="form-control input-md">
<span class="help-block">You can edit your question before saving</span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="notesbox">Notes:</label>
<div class="col-md-4">
<div class="textarea">
<textarea class="form-control" name="notesbox" id="notesbox" rows="10" cols="30"></textarea>
</div>
</div>
</div>
</form>
</script>
The type="text/template" attribute on the script tag means that your browser won't treat the contents of the tag as JavaScript to be executed. You can pretty much use just about anything there, but text/template conveys the meaning pretty well, so I stick with that.
With that template tag, you can then get the message for your dialog by doing something like this:
let message = $('#form-template').html();
With that in place, I'd update your Bootbox usage to use the bootbox.dialog helper, rather than try to use bootbox.confirm for something it wasn't intended for. Here's your code, updated:
let message = $('#form-template').html();
let msgbox = bootbox.dialog({
title: "Save Foo",
message: message,
buttons: {
'cancel': {
label: "Don't save",
className: 'btn-danger pull-left'
},
'confirm': {
label: 'Save',
className: 'btn-success pull-right',
callback: function () {
let form = msgbox.find('form');
if(form.valid()){
alert('Valid!');
msgbox.modal('hide');
}
return false;
}
}
}
});
When using the dialog helper, the global callback is no longer executed; rather, each button would have it's own callback, as shown. In this example, I have return false; as the last line, so that the modal will not close automatically. This lets me validate the form (here, I'm assuming jQuery Validate is in use) and whatever else I wanted to do (such as submit the form via AJAX, etc.). Then, we use Bootstrap's modal() function to dismiss our dialog.
my web page shows a jquery confirm prompt view. And once the user selects the input field and the keyboard shows, the keyboard pushes the jquery confirm prompt view. The problem only happens on iOS device. Is there a work around to this?
Here is my code
$.confirm({
title: 'Add Your Name Information',
content: 'Please provide the ff<br/><br/>'+
'<div class="form-row">'+
'<div class="form-group col-md-2">'+
'<input type="number" id="age" class="form-control" max="2" required>'+
'<label class="form-control-placeholder" for="age">Age</label>'+
'</div>'+
'<div class="form-group col-md-2">'+
'<input type="number" id="contact" class="form-control"required>'+
'<label class="form-control-placeholder" for="contact">Contact No</label>'+
'</div>'+
'<div class="form-group col-md-8">'+
'<input type="text" id="bldg" class="form-control" value="' + Name+ '" readonly="true">'+
'<label class="form-control-placeholder" for="bldg">Name</label>'+
'</div>'
'</div>',
buttons: {
formSubmit: {
text: 'Confirm',
btnClass: 'btn-blue',
action: function () {
params += "&age=" + age
params += "&contact=" +contact
$.post( "/name/save", values)
.done(function( data ) {
data = JSON.parse(data);
}
});
}
},
cancel: function () {
}
},
columnClass: 'medium'
});
}
I have a program which I am able to add datas without javascript. But I would like to use AJAX and I do not know why it does not work. When I click Add button it does happen nothing and I do not see the data in phpmyadmin. Can anyone help me?
index.php:
session_start();
require_once("auth.php");
require_once("control.php");
<div class="well well-sm bs-component">
<div class="form-group row add">
<form method="post" action="">
<div class="col-md-12">
<label for="content" class="control-label">Your Comment</label>
<input type="hidden" name="uid" value="<?= $id; ?>">
<input type="hidden" name="date" value="<?= date('Y-m-d H:i:s') ?>">
<textarea id="content" name="content" class="form-control" rows="3" placeholder="Enter your comment..." required></textarea>
<p class="error text-center alert alert-danger hidden"></p>
</div>
<div class="addButton col-md-12">
<button class="btn" type="submit" id="add" name="add">
<span class="glyphicon glyphicon-plus"></span> SEND
</button>
</div>
</div>
</form>
</div>
control.php:
//ADD COMMENT
if ( isset($_POST['add']) ) {
$id = $_POST['uid'];
$date = $_POST['date'];
$content = $_POST['content'];
$sql= "INSERT INTO posts (uid, content, date) VALUES ('$id', '$content', '$date')";
if (!$mysqli->query($sql)) {
header("location: error.php");
}
}
Javascript:
$("#add").click(function() {
var formData = {
'name': $('#content').val()
};
$.ajax({
type: 'post',
url: 'control.php',
data: formData,
success: function(data) {
if ((data.errors)){
$('.error').removeClass('hidden');
$('.error').text(data.errors.name);
}
else {
$('.error').addClass('hidden');
$('#table').prepend("<div class='item" + data.id + " mess'><div class='btn-group-sm'><button class='edit-modal btn btn-circle' data-id=" + data.id + " data-name=" + data.name +"><span class='glyphicon glyphicon-pencil'></span></button><button class='delete-modal btn btn-circle' data-id=" + data.id + " data-name=" + data.name +"><span class='glyphicon glyphicon-trash'></span></button></div><article class='myMessage'><p>" + data.name + "</p></article></div><div class='clear' style='clear: both;''></div>");
}
},
});
$('#content').val('');
});
You are sending only this as the $_POST data:
var formData = {
'name': $('#content').val()
};
Which should result only to $_POST['name'] => VALUE
But you are reading from $_POST['content']; and other vars.
You also check for $_POST['add'] which is not being sent by your AJAX.
Change the key, you are using to send/read the data on one side and also try to add the other keys/values to your data, e.g.
var formData = {
'add': 'yes',
'content': $('#content').val(),
'uid': SOMEVALUE,
'date': SOMEVALUE
};
The uid and the date are things you might wanna create in your control.php dynamically anyway. But then don't read them from $_POST
ADDITION: Further reading with an example that matches your use case: https://scotch.io/tutorials/submitting-ajax-forms-with-jquery
you are just passing name. you have to pass uid and date also
var formData = {
'name': $('#content').val()
};
with this.
give id to uid and date textfield
var formData = {
'name': $('#content').val(),
'uid': $('#uid').val(),
'date': $('#date').val(),
};
in control.php database connection is necessary. without it record will not inserted
I am trying to append the contents of a file selected from file input into a collapsible DIV element. For this, I need to read the contents of the selected file and append it to the DIV element. I am using Angular JS.
sweeper.html
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<form>
<div class="form-group">
<label class="control-label"> Choose a HTML File: </label> <input
id="file" type="file" file-model="sweep.file" name="file">
</div>
<div>
<button class="btn btn-primary" type="submit"
ng-click="addCollapsibleDiv();">upload</button>
</div>
<div id="fileloader">
<div class="panel-group" id="accordion" role="tablist"
aria-multiselectable="true">
</div>
</div>
</form>
</div>
controller.js
myApp
.controller(
'HTMLSweeperCtrl',
function($scope, $http, $state, DataService, $window) {
$scope.sweep = {
file : ''
};
$scope.addCollapsibleDiv = function() {
console.log("the selected file is: ");
console.log($scope.sweep.file);
if (typeof $scope.sweep.file != "undefined"
&& $scope.sweep.file != "") {
var divHtml = "<div class='panel panel-default'>"
+ "<div class='panel-heading' role='tab' id='headingOne'>"
+ "<h4 class='panel-title'>"
+ "<a role='button' data-toggle='collapse' data-parent='#accordion'"
+ "href='javascript:void(0)' aria-expanded='true' data-target='#collapseOne'"
+ "aria-controls='collapseOne'>"
+ $scope.sweep.file.name
+ "</a>"
+ "</h4>"
+ "</div>"
+ "<div id='collapseOne' class='panel-collapse collapse in'"
+ "role='tabpanel' aria-labelledby='headingOne'>"
+ "<div class='panel-body'> Collapsibel DIV added </div>"
+ "</div>" + "</div>";
var file = $('#file').files[0];
if (file) {
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(e) {
alert(e.target.result);
};
}
$('#fileloader #accordion').append(divHtml);
$scope.sweep.file = '';
}
}
});
I am getting the following error:
Cannot read property '0' of undefined
Where am I going wrong here?
I am using bootbox to make pop-up windows with forms and I have to validate them and throw error to user if something is wrong with the form fields.
But I cannot prevent bootbox window from closing after user clicks 'Send' button. I need to show error notifications to user, so errors could be corrected and the form be sent again.
return false works ok, but after it I cannot find method, to restore usual method of bootbox to close the windows.
Does somebody faced the same problem and how you get rid of this situation?
As asked, fsFiddle:
<button id="test">Bootbox</button>
Code:
$(document).ready(function() {
$("#test").on('click', function() {
bootbox.dialog({
title: "This is a form in a modal.",
message: '<div class="row"> ' +
'<div class="col-md-12"> ' +
'<form class="form-horizontal"> ' +
'<div class="form-group"> ' +
'<label class="col-md-4 control-label" for="name">Name</label> ' +
'<div class="col-md-4"> ' +
'<input id="name" name="name" type="text" placeholder="Your name" class="form-control input-md"> ' +
'<span class="help-block">Here goes your name</span> </div> ' +
'</div> ' +
'<div class="form-group"> ' +
'<label class="col-md-4 control-label" for="awesomeness">How awesome is this?</label> ' +
'<div class="col-md-4"> <div class="radio"> <label for="awesomeness-0"> ' +
'<input type="radio" name="awesomeness" id="awesomeness-0" value="Really awesome" checked="checked"> ' +
'Really awesome </label> ' +
'</div><div class="radio"> <label for="awesomeness-1"> ' +
'<input type="radio" name="awesomeness" id="awesomeness-1" value="Super awesome"> Super awesome </label> ' +
'</div> ' +
'</div> </div>' +
'</form> </div> </div>',
buttons: {
success: {
label: "Save",
className: "btn-success",
callback: function () {
var name = $('#name').val();
var answer = $("input[name='awesomeness']:checked").val()
console.log(name + " " + answer);
}
}
}
});
});
});
I am not 100% sure about what it is that you want. I understand it as: "Keep the modal open until the form is valid".
If this is what you need, you could proceed as such:
callback: function () {
var name = $('#name').val();
var answer = $("input[name='awesomeness']:checked").val()
console.log(name + " " + answer);
// proceed to your validation, if your form is not valid
// the validation should return false
var formIsValid = doFormValidation();
if(!formIsValid) {
// show error messages to the user here
showFormErrors();
// prevent the modal from closing
return false;
}
}