I am using Captcha Mvc 4.0 (Vyacheslav)
Here is my code:
#Html.Captcha("Refresh", "Enter the text shown in imag"
, 5, "Is required field.", false)
And here is the problem:
It is working smooth but refresh button is not showing, and it is due to style="display:none;"
<a href="#CaptchaImage" id="5f88fe4e11e743c6a8a8430de57cfcff"
onclick="______f9192ce4675540129ec6f99adc316d82________()"
style="display:none;">Refresh</a>
How to make it visible?
In the code he does a .show() which only works if jquery is loaded. To fix this either import jquery before calling the method or do the following which will separate out the markup and the script.
#{
var captcha = #Html.Captcha("Refresh", "Enter the text shown in imag"
, 5, "Is required field.", false)
}
#captcha.RenderMarkup()
#section scripts
{
#captcha.RenderScript()
}
JQuery file need to be loaded before that line
#Html.Captcha(....
And everything work smooth!
Related
I am new using Office UI Fabric JS, and I have just imported a SearchBox by following the steps here.
But how do I obtain the query and perform the search when the user hits enter? I have a search function already written in javascript, but I do not know where to call it. Is there some onSearch like property for the SearchBox?
Also, what exactly is happening within the <script>...</script> tags? I am not able to figure out what the following line means from the above link.
Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all SearchBox components on the page
Okay so here is what I did.
First you add an id element in the HTML for the input field.
<input class="ms-SearchBox-field" type="text" value="", id="searchText">
Then in my JS file, I added the following:
$('#searchText').on("keypress", function (e) {
if (e.which == 13) { // 13 is for enter
// call search function here
}
});
I was using JQuery already so it helped.
I need to open Google's latest reCAPTCHA widget in a popup (modal) dialog, a Dojo Dialog in my case, and I've got that working fine, but I just realized that the user cannot keyboard navigate to it.
When the reCAPTCHA widget is displayed in the main view, not a modal dialog, then of course the user can easily keyboard navigate to it.
Has anyone found a way to set focus on the reCAPTCHA widget so that the user can access it without a mouse when the reCAPTCHA is in a Dojo Dialog?
I did see that reCAPTCHA is generated within an <iframe>. Is that part of the hurdle - that keyboard navigation can't reach content within an iframe? I've even tried to call document.getElementById("recaptcha-anchor") since I saw that that's the id of the <span> that holds the "checkbox" - but that is returning null. How to reach an element within an iframe?
I have a jsfiddle example available for demonstration at
https://jsfiddle.net/gregorco/xqs8w5pm/5/
<script>
var onloadCaptchaCallback = function() {
console.log("jsfiddle: rendering captcha");
globalRecaptchaWidgetId = grecaptcha.render('captchaDiv', {
'sitekey' : '6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG',
'callback' : verifyCaptchaCallback,
'tabindex' : 2
});
grecaptcha.reset();
}
var verifyCaptchaCallback = function(g_recaptcha_response) {
console.log("Response validated. Not a robot.");
};
</script>
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCaptchaCallback&render=explicit' async defer></script>
<div id="testDiv">
<button type="dojo/form/Button" onClick="captchaPopup.show();">Open reCAPTCHA</button>
</div>
<div data-dojo-type="dijit/Dialog" data-dojo-id="captchaPopup" title="Human Verification" style="width:350px;">
Cannot keyboard navigate to the checkbox!
<table>
<tr>
<td>
<div id="captchaDiv"></div><br/>
</td>
</tr>
</table>
</div>
Give this fiddle a try. Normally Dijit dialogs don't work too well with iframes in them because it doesn't know how to parse the content inside an iframe. In this case, we can use some of Dojo's functions to work around it. One notable thing to point out is that I've disabled autofocus of the Dijit Dialog so that it won't automatically focus the closeNode inside the dialog.
After the dialog loads, tab>space will select the captcha.
This may help others facing similar issue, but with Bootstrap modal dialog. I found the following solution on GitHub. Add the following Javascript to override Bootstrap:
Bootstrap 3x
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
Bootstrap 4x
$.fn.modal.Constructor.prototype._enforceFocus = function () { };
Good Day
Hi i have developed a small log in screen in MVC whenever i press submit button it always offers me whether
do you want to save password
i want to disable that option
i can disable that setting from browser
Is it possible to do it using java script or through c#
i tried to set the text box property auto complete=off but it does not work it is still saving password
i even tired to set the property of form tag to auto complete=off
but even that does not work
#Html.TextBoxFor(model => model.UserName, new { #class = "Login_txtType", #maxlength = "50", autocomplete = "off" })
This is now part of HTML5, and according to that standard you can add autocomplete='off' to the form tag then autocomplete='off' will be applied to all fields within the form.
Example :-
<form id="form1" method="post" autocomplete="off">
I have read multiple posts on similar issue but did not work.
I have fixed footer buttons and facing issue in calling "Post" version Edit action in Project controller. Here is what I'm trying to do
Let me know if question needs further explaination.
(I tried using Ajax.ActionLink which is suggested in multiple posts too but did not work out.
Similar Question
Finally I managed to fix it by some workarounds. Posting solution here to help someone.
Like I said earlier, I tried using Ajax.ActionLink but I was not able to achieve the same. Instead I looked for Calling Form Submit action from outside of form that's what I actually need here.
Form: Name your Form something, say "editProjDetailsForm"
#using (Html.BeginForm(null, null, FormMethod.Post,
new { #class = "form-horizontal",
name = "editProjDetailsForm" }))
Footer: Call this method from the footer button.
<input type="button" onclick="document.editProjDetailsForm.submit();"
class="btn btn-primary"
value="Save Changes" />
I tried this one too in footer but it did not workout:
#Ajax.ActionLink("Save Changes", "Edit", new { id = Model.ProjectId },
new AjaxOptions { HttpMethod = "POST" })
Helpful Posts
Naming A form using Begin Form
Submit Button outside HTML.BeginForm
Submit Button outside HTML.BeginForm (another link)
ASP.net ActionLink and POST Method
Error in case you have parameterized constructor in ViewModel and
did not declare parameterless constructor
Display Issue if you are using bootstrap In footer I had one input type = button and one action link with class= button. Both nested in one btn-group but there height were appearing different as visible in following snapshot:
Fix: Found that it is a known issue and there is one suggested solution but did not work out much for me (i.e. for Internet Explorer).
input type=submit and anchor button in btn-group appear as different sizes
Solution: add .btn { line-height:normal!important; } or if you want to do only for a specific button lets say the above input button then do this:
<input type="button" onclick="document.editProjDetailsForm.submit();"
class="btn btn-primary"
value="Save Changes"
style="line-height:normal!important;" />
I hope someone can help me. I have colorbox working on a new client site, but I'm having troubles figuring out how to add code that will allow for the image that pops up to be clicked and then linked to an external site in a new tab.
This is what I have so far:
$(document).ready(function(){
$("a[rel='pop']").colorbox({transition:"fade", speed: 250});
});
<span class="h2">Baby Knits Kit</span> (2007)<br>Chronicle Books<br>
In the above, when Baby Knits Kit is clicked a pop-up opens fine with the image I created (about.babyknitskit.png). On top of the pop-up there's "Get it at Chronicle Books" and when I click it will take me to that site (in the same tab which I don't want). Instead, I would like the about.babyknitskit.png image to be clickable and opening up the link in a new window.
Any thoughts much appreciated. I hope I've given you guys enough information as I'm new to all of this and stackoverflow.
Simply use the html property of colorbox. Alternatively you could use the href property with 'inline' set to true. I have defined a custom attribute for the anchor for easier extraction, alternatively you could write a regex pattern to extract it from the title attribute.
$(document).ready(function() {
$("a[rel='pop']").colorbox({transition:"fade", speed: 250, html: function(){
var html = $('<img src="' + $(this).attr('href') + '" />');
return html;
}});
});
<span class="h2">Baby Knits Kit</span> (2007)<br>Chronicle Books<br>