I've got a question regarding using Google's Invisible Recaptcha when using an AJAX form submission using Vue components.
I've created a VueJS component which I include in the following 'recaptcha button' component in:
<template>
<div>
<div v-if="failed" style="color: red;"><strong>Sorry, the captcha validation failed. Please try again.</strong></div>
<div :id="name"></div>
<button :class="classes" type="button" #click="validate()">
<slot>Submit</slot>
</button>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: 'recaptcha',
required: false
},
classes: {
type: String,
required: false,
default: ''
},
},
data: function ()
{
return {
failed: false,
};
},
mounted: function ()
{
this.initReCaptcha();
},
methods: {
initReCaptcha: function() {
var self = this;
setTimeout(function() {
if(typeof grecaptcha === 'undefined') {
self.initReCaptcha();
}
else {
grecaptcha.render(self.name, {
sitekey: 'site-key-here',
size: 'invisible',
badge: 'inline',
callback: self.response
});
}
}, 100);
},
validate: function ()
{
grecaptcha.execute();
},
response: function (token)
{
this.$parent.fields['g-recaptcha-response'] = token;
this.$parent.submit();
}
},
}
</script>
As you can see, I'm assigning Google's Recaptcha's callback function to the current instance of the recaptcha component's 'response' function. However, when I submit one of the forms, it seems to be calling the response function of the other component on the page.. and therefore trying to call submit on a form that has no input in so far..
We thought it might be a case of the recaptcha rendering not actually creating two instances and therefore on the second one, the callback is just being overwritten, but from logging the components in the mounted function, the form that's being submitted instead of the one we're trying to submit is being instantiated first, which lead us to believe it's not a case of overwriting...
Any help on the matter would be much appreciated!
Cheers,
PM
Figured this out, did not know that the render function returned the widget ID. grecaptcha.execute() will just execute the first widget in the global list if not given an optional widget ID parameter.
To tackle this, assign the widget ID returned by the render function to a data property in the component and then within the validate function, call execute with that widget ID as the parameter.
self.widgetId = grecaptcha.render(self.name, {...});
validate: function ()
{
grecaptcha.execute(this.widgetId);
},
Related
Select2 is not working and remote validation is not firing, this is only happens when I convert the code to modal popup but if not everything is working properly. What Am I missing in my code? Any advise or help much appreciated.. Thank you
Here is my code the modal:
$('#tbProducts tbody').on('click', 'button', function () {
var data = productsTable.row($(this).parents('tr')).data();
//alert(data.id);
$.ajax({
url: '#Url.Action("Edit", "Products")',
type: 'GET',
data: { id: data.id },
success: function (result) {
$('#EditUnitModal .modal-content').html(result);
$('#EditUnitModal').modal()
}
});
});
Here is the controller edit code:
public async Task<IActionResult> Edit(int? id)
{
//code here
return PartialView("__Edit", product);
}
And here is my partial view __Edit code:
#model intPOS.Models.Master.ViewModel.ProductViewModel
//code here
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
$(function () {
$('#Unit').select2({
theme: 'bootstrap4',
dropdownParent: $('#EditUnitModal')
})
$('#Category').select2({
theme: 'bootstrap4',
dropdownParent: $('#EditUnitModal')
})
})
</script>
}
And View model code:
[Display(Name = "Product Code"), Required]
[Remote("CheckProduct", "Products", AdditionalFields = "Id", ErrorMessage = "Product already exists.")]
public string ProductCode
{
get
{
return _productcode;
}
set
{
_productcode = value.Trim();
}
}
Sample screen for not firing validation and select2 is not working:
sections aren't allowed in partial views. You can still use modals and partial views via Ajax for edit forms but there is a small modification you need to do in order for this to work:
Include all the necessary scripts in your page (this is mandatory as sections aren't allowed in partial views).
In your javascript code add these lines in order to parse the new form via jquery validation unobtrusive and your select elements via Select2.
$('#tbProducts tbody').on('click', 'button', function () {
var data = productsTable.row($(this).parents('tr')).data();
//alert(data.id);
$.ajax({
url: '#Url.Action("Edit", "Products")',
type: 'GET',
data: { id: data.id },
success: function (result) {
$('#EditUnitModal .modal-content').html(result);
//Here we parse the new form via jquery validation unobtrusive.
$.validator.unobtrusive.parse($('#EditUnitModal .modal-content form')[0]);
//Here we initialize select2 for the selected elements.
$(".yourSelect2ElementClass").select2({//options...});
//Now we launch the modal.
$('#EditUnitModal').modal()
}
});
});
Don't forget to remove the section from your partial view and include your scripts in the containing view.
I've successfully integrated dropzone.js inside an existing form. This form posts the attachments and other inputs like checkboxes, etc.
When I submit the form with attachments, all the inputs post properly. However, I want to make it possible for the user to submit the form without any attachments. Dropzone doesn't allow the form submission unless there is an attachment.
Does anybody know how I can override this default behavior and submit the dropzone.js form without any attachments? Thank you!
$( document ).ready(function () {
Dropzone.options.fileUpload = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 50,
maxFiles: 50,
addRemoveLinks: true,
clickable: "#clickable",
previewsContainer: ".dropzone-previews",
acceptedFiles: "image/*,application/pdf, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.openxmlformats-officedocument.spreadsheetml.template, application/vnd.openxmlformats-officedocument.presentationml.template, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.presentationml.slide, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.wordprocessingml.template, application/vnd.ms-excel.addin.macroEnabled.12, application/vnd.ms-excel.sheet.binary.macroEnabled.12,text/rtf,text/plain,audio/*,video/*,.csv,.doc,.xls,.ppt,application/vnd.ms-powerpoint,.pptx",
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
});
this.on("successmultiple", function(files, response) {
window.location.replace(response.redirect);
exit();
});
this.on("errormultiple", function(files, response) {
$("#notifications").before('<div class="alert alert-error" id="alert-error"><button type="button" class="close" data-dismiss="alert">×</button><i class="icon-exclamation-sign"></i> There is a problem with the files being uploaded. Please check the form below.</div>');
exit();
});
}
}
});
Use the following:
$('input[type="submit"]').on("click", function (e) {
e.preventDefault();
e.stopPropagation();
var form = $(this).closest('#dropzone-form');
if (form.valid() == true) {
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
myDropzone.uploadFiles([]); //send empty
}
}
});
Reference: https://github.com/enyo/dropzone/issues/418
You should check if there are files in the queue. If the queue is empty call directly dropzone.uploadFile(). This method requires you to pass in a file. As stated on [caniuse][1], the File constructor isn't supported on IE/Edge, so just use Blob API, as File API is based on that.
The formData.append() method used in dropzone.uploadFile() requires you to pass an object which implements the Blob interface. That's the reason why you cannot pass in a normal object.
dropzone version 5.2.0 requires the upload.chunked option
if (this.dropzone.getQueuedFiles().length === 0) {
var blob = new Blob();
blob.upload = { 'chunked': this.dropzone.defaultOptions.chunking };
this.dropzone.uploadFile(blob);
} else {
this.dropzone.processQueue();
}
Depending on your situation you could simply submit the form:
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
$("#my_form").submit();
}
The first approach is kind of too expensive for me, I would not like to dive into the source code and modify it,
If you happen to be like me , use this.
function submitMyFormWithData(url)
{
formData = new FormData();
//formData.append('nameOfInputField', $('input[name="nameOfInputField"]').val() );
$.ajax({
url: url,
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
}
});
}
And in your dropzone script
$("#submit").on("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
if (myDropzone.getQueuedFiles().length > 0)
{
myDropzone.processQueue();
} else {
submitMyFormWithData(ajaxURL);
}
});
I tried Matija Grcic's answer and I got the following error:
Uncaught TypeError: Cannot read property 'name' of undefined
And I didn't want to modify the dropzone source code, so I did the following:
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
myDropzone.uploadFiles([{name:'nofiles'}]); //send empty
}
Note: I'm passing an object inside the array to the uploadFiles function.
Then I check server-side, if name != 'nofiles' do upload stuff.
Pretty simple, you stop the propagation ONLY if you have files to be submitted via Dropzone:
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Stop the propagation ONLY if you have files to be submitted via Dropzone
if (myDropzone.getQueuedFiles().length > 0) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
}
});
I have successfully used :
submitButton.addEventListener("click", function () {
if(wrapperThis.files.length){
error = `Please select a file`;
} else {
wrapperThis.processQueue();
}
});
My answer is based on the fact that the other answers don't allow for an Ajax based solution where an actual HTML form isn't actually being used. Additionally you may want the full form contents submitted when sending the Files for upload as well.
As you'll see, my form occurs in a modal outside of any form tag. On completion, the modal is triggered to close.
(FYI getForm returns the form as an object and not directly related to the answer. Also assumes use of jQuery)
init: function() {
var dzClosure = this;
// When saving what are we doing?
$('.saveBtn').off('click').on('click',function(e){
e.preventDefault();
e.stopPropagation();
if (dzClosure.getQueuedFiles().length > 0) {
dzClosure.processQueue();
dzClosure.on('queuecomplete',function(){
$('.modal:visible').modal('hide');
})
} else {
var params = getForm();
$.post(dzClosure.options.url,params,function(){
$('.modal:visible').modal('hide');
})
}
});
dzClosure.on('sending', function (data, xhr, formData) {
var extra = getForm();
for (key in extra){
formData.append(key,extra[key]);
}
});
I am having trouble implementing the Twitter Bootstrap Typeahead feature with a JSON web Service.
I have looked at all the examples on this website and can't find anything that will work. I know my JSON web service works; I can enter the address in my browser and it returns the JSON I expect with the MIME type set to "application/json".
I have this JavaScript in the
<body>
of my HTML page:
<script>
$('#typeahead').typeahead({
source: function (query, process) {
return $.getJSON(
'http://localhost:8732/IngredientsService/search/',
{ query: query },
function (data) {
return process(data);
});
}
});
</script>
I have this code as my "input":
<input type='text' id='typeahead' class='typeahead' data-provide="typeahead" data-items="10" />
Can anyone explain why this is not working?
According to the last comment ("web service not being accessed") - have you tried the more normal / documented approach?
$('#typeahead').typeahead({
source: function (query, process) {
return $.get('http://localhost:8732/IngredientsService/search/', { query: query }, function (data) {
return process(data.options); //if JSON is [ "options" : { ...}
});
}
});
$.getJSON is not nessecary, but useful when you want to load an entire JSON and inject potion of it as a source for the typeahead
$.getJSON("http://localhost:8732/IngredientsService/search/", function(json) {
$("#typeahead").typeahead({
source : json.options //again, dont know the structure of the JSON
});
});
From what I can see from the typeahead documentation, the source key in the parameters object is not valid.
It should look more like this I think:
$('#typeahead').typeahead({
remote: 'http://localhost:8732/IngredientsService/search/q=%QUERY'
});
http://jsfiddle.net/qVjsu/
It's better to omit return when using async sources because process() will be triggered twice
$('#typeahead').typeahead({
source: function (query, process) {
$.getJSON('/search/json/'+ query), function (data) {
return process(data);
});
},
minLength: 1,
items: 8
});
I'm trying to post a form that contains an instance of tinyMCE editor to an action method using AJAX. My View:
<script src="#Url.Content("~/Scripts/tinymce/tiny_mce.js")" type="text/javascript"></script>
<div>
<fieldset>
#using (Html.BeginForm("SubmitNewTRForm", "LaboratoriesOrdersGrid", FormMethod.Post,
new {enctype = "multipart/form-data", #id = "newTrUploadForm" }))
{
<div style="overflow: hidden;width: 763px; height:312px; border: black solid thin;">
#Html.TextAreaFor(model => model.TestSummary, new {#class="TestSummaryEditor"})
</div>
}
</fieldset>
</div>
In the same view I instantiate the editor:
$(document).ready(function () {
tinyMCE.init({
directionality: "rtl",
width: "760",
height: "300",
language: 'fa',
// General options
mode: "textareas",
theme: "advanced",
plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect,|,sub,sup,|,charmap,iespell,advhr,|,print,|,fullscreen",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,cleanup,|,insertdate,inserttime,preview,|,forecolor,backcolor,|,insertlayer,moveforward,movebackward,absolute,|,blockquote,pagebreak,|,insertfile,insertimage,|,visualchars,nonbreaking,template",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,ltr,rtl,|,cite,abbr,acronym,del,ins,attribs",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
// Skin options
skin: "o2k7",
skin_variant: "silver",
add_form_submit_trigger: false,
// Example content CSS (should be your site CSS)
content_css: "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "js/template_list.js",
external_link_list_url: "js/link_list.js",
external_image_list_url: "js/image_list.js",
media_external_list_url: "js/media_list.js",
// Replace values for the template plugin
template_replace_values: {
username: "Some User",
staffid: "991234"
}
});
});
ANd my AJAX call:
$("form").live('submit', function (e) {
tinyMCE.triggerSave(true, true);
e.preventDefault();
var form = $("#newTrUploadForm");
if (form.valid()) {
$.ajax({
url: '#Url.Action("SubmitNewTRForm")',
data: form.serialize(),
type: 'POST',
error: function (xhr, textStatus, exceptionThrown) {
$("#errorDIV").html(xhr.responseText);
},
success: function (data) {
if (data.success) {
}
else {
}
}
});
}
});
And my AJAX call always returns an error whenever the tinyMCE editor is on the form, removing tinyMCE solves the problem, but why is this happening? I know this issue has been addresses on SO a couple of times already but I've tried all the proposed solutions and none seem to work for me, plus those solutions are somewhat outdated. During serialization in my AJAX call, i get this error:
[MissingMethodException: No parameterless constructor defined for this object.]
Any ideas?
The error I posted and the tinyMCE problem happen to be totally unrelated. The tinyMCE problem was fixed by saving the contents after preventing the default action of the button click, basically changing my AJAX call from:
$("form").live('submit', function (e) {
tinyMCE.triggerSave(true, true);
e.preventDefault();
to:
$("form").live('submit', function (e) {
e.preventDefault();
tinyMCE.triggerSave(true, true);
and the form serialzed properly and the conents of teh editor sent to the action flawlessly.
Totally irrelevant to this question, but that error posted was caused by setting my model property's type as SelectList and the form posting a SelectListItem.
Your error indicates that the model you are trying to bind to in your controller action needs a constructor like
public yourModel
{
public yourModel()
{
//your logic here
}
}
It also doesn't look like you have a 'form' in your view to post back in the first place. I have a feeling that there are multiple errors on top of each other and the paramterless constructor is just the first one.
I have the following code snippet:
$(document).ready(function () {
// bind 'regFormBody' and provide a simple callback function
$('#regFormBody').ajaxForm(function() {
alert("Thank you for your comment!");
});
// validate the #regFormBody form when it is submitted
$("#regFormBody").validate({
submitHandler: function(form) {
alert('form is submitted');
},
rules: {
...
},
messages: {
...
}
});
}
The problem is that after I add the
// bind 'regFormBody' and provide a simple callback function
$('#regFormBody').ajaxForm(function() {
alert("Thank you for your comment!");
});
The form validation doesn't work at all. I always see the message alert('form is submitted') even without entering any information to form.
May you tell me how to solve this problem?
Thank you
You can expand your options object for .ajaxForm(), like this:
$('#regFormBody').ajaxForm({
beforeSubmit: function() {
return $('#regFormBody').valid();
},
success: function() {
alert('Thanks for your comment!');
}
});
This will kick off validation before submitting, and if it's not .valid() it'll stop the submit from happening like you want.