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);
},
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'm using the jQuery plugin jeditable in my template: http://www.appelsiini.net/projects/jeditable
So, if I click on an editable element, the text changes to a form with a textfield and a submit button.
<script type="text/javascript">
$(document).ready(function() {
$('.edit').editable('{{ path('group_update', { id: group.id }) }}', {
type : 'textarea',
submit : 'OK'
});
});
</script>
And in the body I have something like that:
<div class="edit">{{ group.name }}</div>
But there is a problem. When I click on the submit-button, nothing happens. No forwarding to my action (in fact there is no reaction).
What can I do?
In case if you need to handle data received from your action, you should submit the data to function instead of URL.
Example below is taken from the documentation
$('.editable').editable(function(value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return(value);
}, {
type : 'textarea',
submit : 'OK',
});
You can pass data to your function, which will make an AJAX call to your action and process all received data in a way you need
I used resources learned on Stack Overflow to find sample script here: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library.
If I use the following, the swipe function fails on android and the user control arrows won't work on android or a pc (I don't have an iphone to test with):
<script type="text/javascript">
$(document).ready(function() {
$('#imagegallery').cycle({
fx: 'fade'
});
$("#imagegallery").touchwipe({
wipeLeft: function() {
$("#imagegallery").cycle("next");
},
wipeRight: function() {
$("#imagegallery").cycle("prev");
}
});
});
</script>
If I use this, then the user control arrows work on a pc and android, but the swipe function still won't work:
<script type="text/javascript">
$(document).ready(function() {
$('#imagegallery').cycle({
fx: 'fade',
prev: '#prev',
next: '#next',
speed: 300
});
$("#imagegallery").touchwipe({
wipeLeft: function() {
$("#imagegallery").cycle("next").alert("left");
},
wipeRight: function() {
$("#imagegallery").cycle("prev").alert("right");
}
});
});
var swipeOptions = {
swipe : swipe,
threshold : 75
}
</script>
I tried everything I could think of to do my own learning and experimenting, but at this point I could really use a push in the right direction. I am using a test page on my son's website: http://zachmcdonald.net/testgallery.php.
Your thoughts are appreciated!
Thanks,
Julie
I found it simpler to do the following
$("#imagegallery").touchwipe({
wipeLeft: function() {
$("#imagegallery .Next").click(); // selector for you 'next' btn
},
wipeRight: function() {
$("#imagegallery .Previous").click() // selector for your 'prev' btn;
}
});
I use the modal window a fair bit in joomla and just found out that it doesn't work with ajax added links. What is the code I need to have the modal window work with those links?
I'm better at jquery than moo tools ...
Thanks,
Mat
I found this code but can't get it to work.
<script type="text/javascript">
window.addEvent('domready', function() {
SqueezeBox.initialize({
ajaxOptions: {
evalScripts: true
}
});
//SqueezeBox.initialize({});
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
window.addEvent('domready', function() {
window.addEvent('load', function(){
//alert('clicked!');
SqueezeBox.fromElement($('a.modal'));
});
});
</script>
I use Rokbox (Mootools) from Rockettheme available for free here : http://www.rockettheme.com/extensions-downloads/club/1005-rokbox
A must have :)