I need to implement a captcha with v3 in grails but I'm relatively new to implementing captchas has anyone ever implemented it in grails 2.5.6?
we have used google recaptcha in contact us form.
I am using grails 2.2.
In the contact us gsp.
put this in head
<script src='https://www.google.com/recaptcha/api.js'></script>
where you would like captcha to show
<div id="captcha" class="g-recaptcha" data-sitekey="${grailsApplication.config.captchaSiteKey}"></div>
put captchasitekey in config.groovy
captchaSiteKey = "234234lkjh234kjhdsf98sdflhjsdf"
captchaSecretKey = "12121234jh234kjhdsf98sdflhjsdf"
create your keys in google recaptcha admin console
https://www.google.com/recaptcha/about/
contact us submit button
<input type="button" value="Send" onClick="sendRequest()" class="button"/>
Javascript code
<g:javascript>
function sendRequest(){
var email_string = $('input[name="email"]').val();
var body_string = $('textarea[name="body"]').val();
var cap_response = $('textarea[name="g-recaptcha-response"]').val();
var replying = "${params['s']}"
var idd = "${params['i']}"
if(email_string && body_string){
$.ajax('<g:createLink controller="public" action="sendMessage"/>', {
type:"post",
dataType: 'text',
data:{body: body_string, email: email_string, reply: replying, id: idd, recap_response: cap_response},
success: function(data) {
$('#body').val("");
$('#email').val("");
alert("Thanks for contacting us! We will respond promptly.");
},
error: function(xhr){
alert('Sorry there was a problem sending message. Please try again!'); //<----when no data alert the err msg
}
});
}
else{
alert("Please make sure you enter your email and message before sending us message.")
}
}
</g:javascript>
Server side
def sendMessage(){
def res = params['recap_response']
HttpURLConnection post = (HttpURLConnection)(new URL("https://www.google.com/recaptcha/api/siteverify").openConnection());
String urlParameters = "secret=${grailsApplication.config.captchaSecretKey}&response=${res}";
byte[] postData = urlParameters.getBytes(StandardCharsets.UTF_8);
post.setRequestMethod("POST")
post.setDoOutput(true)
post.setRequestProperty("Content-Type", "application/x-www-form-urlencoded")
post.getOutputStream().write(postData);
def postRC = post.getResponseCode();
def recaptchaOK = false
if(postRC.equals(200)) {
def jsonSlurper = new JsonSlurper()
def resp = jsonSlurper.parseText(post.getInputStream().getText())
recaptchaOK = resp.success
}
if(!recaptchaOK){
render "Captcha was wrong. Please try again!"
return
}
This is the documentation i referred to implement mine.
https://developers.google.com/recaptcha/intro
hope this helps!
I have a webpage that is supposed to upload an image to the database with a name to describe the image. Think uploading a logo and the name of the companies logo.
When I select the image file and submit it uploads to the database and I can return that information to the webpage in a list. However, it is not encoded in the manner that I was expecting. I would like the image file to be uploaded as a blob so that I may convert the blob to Base64 and pass it to my web application.
This is what the blob code looks like if I manually upload the images using MySQLs gui.
"iVBORw0KGgoAAAANSUhEUgAACWAAAAnHCAYAAAAIV..." which I'm able to convert to Base64 later.
When I use my ajax web page to upload an image however, I receive
"QzpcZmFrZXBhdGhcU3ByaW5nLnBuZw==".
My question is, how can I have ajax upload it as a blob instead so that my Java application can properly call the blob and convert it to Base64?
ajax.js
$(function (){
var $skills = $('#skills');
var $logo = $('#logo');
var $techName = $('#techName');
$.ajax({
type: 'GET',
url: '/api/technologyList',
success: function(skills) {
$.each(skills, function(i, skill) {
$('#skills-list').append('<tr><td> ' + skill.logo + '</td>' + '<td>' + skill.techName + '</td></tr>')
})
}
})
$('#addSkill').on('click', function () {
var skill = {
techName: $techName.val(),
logo: $logo.val()
}
$.ajax({
type: 'POST',
url:'/api/technologyList',
data: skill,
contentType: "multipart/form-data",
processData: false,
success: function (newSkill) {
$('#skills-list').append('<tr><td> '+ newSkill.logo+ '</td>' +
'<td> '+ newSkill.techName + '</td></tr>')
console.log(skill)
}
})
})
})
addSkill.html
<table id="skills-list">
<tr>
<th>Logo</th>
<th>Technology</th>
</tr>
</table>
<form id="skillForm">
<input type="text" id="techName"/> <br>
<input type="file" enctype="multipart/form-data" id="logo"/>
<button id="addSkill">Add!</button>
</form>
HomeController
#GetMapping(value = "/technology")
public String technologyList(Model theModel) throws IOException {
try {
List<Skills> userSkillsList = skillsService.findSkillList("wmangram");
List<byte[]> logo = skillsService.findLogos();
List<String> base64List = new ArrayList<>();
boolean isBase64 = false;
for (int i = 0; i < logo.size(); i++) {
if (Base64.isBase64(logo.get(i))) {
String base64Encoded = new String((logo.get(i)), "UTF-8");
base64List.add(base64Encoded);
}
else {
byte[] encodeBase64 = Base64.encodeBase64(logo.get(i));
String base64Encoded = new String(encodeBase64, "UTF-8");
base64List.add(base64Encoded);
}
}
theModel.addAttribute("userSkills", userSkillsList);
theModel.addAttribute("userImages", base64List);
return "technology";
}
catch (NullPointerException nexc) {
return "nullexception";
}
}
You have to use a FormData object to upload multipart/form-data1 via ajax.
$('#addSkill').on('click', function () {
var skill = new FormData();
skill.append("techName", $techName.val());
skill.append("logo", $logo.prop("files")[0]);
$.ajax({
type: 'POST',
url:'/api/technologyList',
data: skill,
contentType: false, //don't set this, it will be set automatically and properly
processData: false,
success: function (newSkill) {
$('#skills-list').append('<tr><td> '+ newSkill.logo+ '</td>' +
'<td> '+ newSkill.techName + '</td></tr>')
console.log(skill)
}
})
})
Looking at the java code it doesn't look like it can handle a file upload, so this answer is only for the client side code.
This isn't strictly true but you wouldn't want to have to do it any other way.
The problem was that I wasn't handling the file in a manner that let the program read the files contents. Instead it was just receiving the fake file path with the file name.
Fixed by utilizing #RequestParam and MultipartFile then assigning to the object before passing to the DAO.
RESTController.java
#PostMapping("/technologyList")
public String uploadMultipartFile(#RequestParam("logo") MultipartFile file, #RequestParam("techName")String techName) {
User user = userService.findByUsername("wmangram");
try {
// save file to MySQL
Skills newSkill = new Skills(techName, file.getBytes(), user);
skillsService.createTechnology(newSkill);
return "File uploaded successfully! -> filename = " + file.getOriginalFilename();
} catch (Exception e) {
return "FAIL! Maybe You had uploaded the file before or the file's size > 500KB";
}
}
Am getting above error while validating the password in node.js and sending the response to android client.
Can anyone check my validation code is correct or not?
var queryData = url.parse(request.url, true).query;
var Email = queryData.email;
var Password = queryData.passwd;
ibmdb.open(dbConnection, function(err, conn) {
if (err) {
response.send("error occurred " + err.message);
}
else {
console.log('before select');
conn.query("SELECT PASSWORD FROM USER02130.USER_DETAILS123 WHERE SHORT_ID='"+Email+"'", function(err, rows, moreResultSets) {
if ( !err ) {
var valid = rows.JSON();
if (valid.PASSWORD==Password) {
response.write("Successful login");
}
else {
response.write("Invalid Password");
}
}
else {
response.write("error occurred " + err.message);
}
response.end();
});
}
})
please have a look at this below link http://pcsupport.about.com/od/findbyerrormessage/a/502error.htm
In my spring aplication, I am trying pass a array of strings from my view, through this code:
$( ".form" ).submit(function( event ) {
event.preventDefault();
var $form = $( this ), url = $form.attr( "action" );
var selecao_permissoes=[];
$('#selecao option').each(function(){
selecao_permissoes.push($(this).val());
});
var nome = $("input[name=nome]").val();
$.ajax({
type: "POST",
url: url,
data: { nome: nome, permissoes: selecao_permissoes }
}).done(function( msg ) {
$("#"+msg).show();
$(".form").each (function(){
this.reset();
});
});
});
To this method from my Service class:
public boolean cadastra(HttpServletRequest request, HttpServletResponse response) {
String nome_grupo = request.getParameter("nome");
String[] permissoes = request.getParameterValues("permissoes");
if(nome_grupo == null || permissoes == null) {
System.out.println("nome_grupo = "+nome_grupo);
System.out.println("permissoes = "+permissoes);
return false;
}
GrupoPermissao grupo = new GrupoPermissao();
grupo.setNome(nome_grupo);
List<Permissao> lista = new ArrayList<Permissao>();
for(int i=0; i<permissoes.length; i++)
lista.add(permissao.findById(Integer.valueOf(permissoes[i]).intValue()));
grupo.setPermissao(lista);
return grupo_permissao.persist(grupo);
}
The atribute 'nome' is receiving the correct value, but the atribute 'permissoes' is receiving a null value.
Anyone can tell me why this is happening? I can't figure out a motive for that.
Try with:
String[] permissoes = request.getParameterValues("permissoes[]");
I don't know why, it's just annoying and how jquery are doing if for some reason if your posting an array and want it in your java servlet.
I am working on a j2ee application. In my application I have a drop-down list(or Select element). I want to populate this drop-down list with JSON data as a Ajax response.
Below is the code what I have:
Server side Code (json_source.java) which generates a JSON response. :
package demo.model;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.*;
/**
* Servlet implementation class json_source
*/
public class json_source extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* #see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
JsonArray data_json=new JsonArray();
Statement st_loginId=null;
ResultSet rs_loginId=null;
try
{
Connection con=null;
Class.forName("oracle.jdbc.OracleDriver");
/* Connection String for "OPERWH"(exadata) Database */
con=DriverManager.getConnection("jdbc:oracle:thin:*************","*****","*****");
con.setAutoCommit(true);
st_loginId=con.createStatement();
rs_loginId=st_loginId.executeQuery("select login_id \"LOGIN ID\" from user_access");
//System.out.println("entered in frame_login_code");
int login_val=0;
JsonObject json_response=new JsonObject();
while(rs_loginId.next())
{
login_val++;
JsonObject json=new JsonObject();
json.addProperty("value", "login"+login_val);
json.addProperty("text", rs_loginId.getString(1));
data_json.add(json);
}
System.out.println(data_json);
json_response.add("aaData", data_json);
response.setContentType("application/Json");
response.getWriter().write(json_response.toString());
System.out.println(json_response);
}
catch(Exception ex)
{
System.out.println("Exception occured during retrieval of Login_Id in ComboBox :"+ex);
ex.printStackTrace();
}
}
/**
* #see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
}
and the JSON data which successfully generated through above server side code :
{
"aaData": [{
"value": "login1",
"text": "kapils"
}, {
"value": "login2",
"text": "davidn"
}, {
"value": "login3",
"text": "alanp"
}]
}
and Below is my Client side code (source1.jsp) which generate ajax request:
(Using $.ajax() ) :
<script type="text/javascript">
$(document).ready(function()
{
$('#id_trial').click(function() {
alert("entered in trial button code");
$.ajax({
type: "GET",
url:"/demo_trial_application/json_source",
dataType: "json",
success: function (data) {
$.each(data.aaData,function(i,data)
{
alert(data.value+":"+data.text);
var div_data="<option value="+data.value+">"+data.text+"</option>";
alert(div_data);
$(div_data).appendTo('#ch_user1');
});
}
});
});
});
</script>
<body>
<div id="div_source1">
<select id="ch_user1" >
<option value="select"></option>
</select>
</div>
<input type="button" id="id_trial" name="btn_trial" value="Trial Button..">
</body>
OR Using ($.getJSON()) :
$.getJSON("/demo_trial_application/json_source", function (data) {
$.each(data.aaData, function (i, data) {
var div_data = "<option value=" + data.value + ">" + data.text + "</option>";
alert(div_data);
$(div_data).appendTo('#ch_user1');
});
});
Now when I clicked on button (#id_trial), the server side code executes successfully and as a result JSON object created. but i am not getting that "JSON response" in callback function of Success parameter using jQuery's ajax call.
and apart from jQuery's ajax call I also tried with $.getJSON function to receive JSON response..but I didn't get JSON data.
So please tell me if there is any mistake in my code, and how to get JSON data using above code and populate drop-down list.
I want to populate my dropdownlist with JSON data using ajax response.
please help me to sort out this problem...its very urgent for my application.
try to change the jquery method variable, it might be causing the problem (i.e., you are using the data variable coming from the ajax callback PLUS are then trying to assign it to the item object in the jquery method - changed to obj):
$.ajax({
type: "GET",
url:"/demo_trial_application/json_source",
dataType: "json",
success: function (data) {
$.each(data.aaData,function(i,obj)
{
alert(obj.value+":"+obj.text);
var div_data="<option value="+obj.value+">"+obj.text+"</option>";
alert(div_data);
$(div_data).appendTo('#ch_user1');
});
}
});
});
I use "for"
var List;
jQuery.ajax({
url: "/demo_trial_application/json_source",
type: "POST",
dataType: "json",
async: false,
success: function (data) {
List = data.aaData
$('#ch_user1').empty();
$('#ch_user1').append('<option value="">All</option>');
for (i in List ) {
$('#ch_user1').append('<option value="' + List[i].value + '">' + List[i].text + '</option>');
}
}
});
Working with Laravel this is my solution:
$("#YOUR_DIV").on("change", function(){
var selected = $(this).val();
makeAjaxRequest(selected);
})
function makeAjaxRequest(opts){
$.ajax({
type: "GET",
url : '{{ action('YOUR_CONTROLLER#YOUR_FUNCTION') }}',
data: { opts: opts },
success: function(data) {
NEW_JS_FUNCTION(data);
}
});
}
function NEW_JS_FUNCTION(params) {
$('#YOUR_DIV').empty();
$('#YOUR_DIV').append('<option value="">ALL</option>');
params.forEach(function(entry){
$('#YOUR_DIV').append('<option value="' + entry.KEY+ '">' + entry.TEXT + '</option>');
});
}
It works. Hope this can help.
We can populate dropdown like below . it's very easy for you all i guess.
var options = $("#options");
$.getJSON("/Country/GetAll/", function(response) {
$.each(response, function() {
options.append($("<option />").val(this.Id).text(this.Name));
});
});
<div class="col-lg-4">
<%--<input type="text" class="form-control" id="txtGender" />--%>
<select class='form-control DropDown' id="txtGender"></select>
</div>
--------------------------------------------------------------------------------
$(document).ready(function () {
$.ajax({
type: "POST",
url: "AjaxCallGrid.asmx/GetDropDown",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
$('.DropDown').empty();
$('.DropDown').append("<option value='0'>---Select---</option>");
$.each(result.d, function (key, value) {
$('.DropDown').append($("<option></option>").val(value.iD).html(value.firstName));
});
}
});
});
-------------------------------------------------------------------------
[WebMethod]
public List<Students> GetDropDown()
{
DataTable dt = new DataTable();
List<Students> result = new List<Students>();
using (SqlConnection con = new SqlConnection(#"Data Source=DOS-PC\MARJI;Initial Catalog=examples;Integrated Security=True"))
{
using (SqlCommand cmd = new SqlCommand("select id,firstname from Students ", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
result.Add(new Students
{
iD = Convert.ToInt32(dt.Rows[i]["id"].ToString()),
firstName = dt.Rows[i]["firstname"].ToString()
}
);
}
}
return result;
}
}
The simplest way is to download this library https://github.com/JocaPC/jquery-view-engine/tree/master/src . This JQuery library directly loads JSON into dropdows and looks like a perfect match for your example. You just need to put the following code:
success: function (data) {
$('#ch_user1').view(data.aaData);
}
Take a look at this page https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown for more details.
Try as follows
<select id="xxx"></select>
success: function (response) {
for (var i = 0; i < response.length; i++) {
$("#xxx").append("<option value='" + response[i]["id"] + "'>" + response[i]["name"] + "</option>");
}
}
This is how you can do it:
$(".ddEvent").on('change', function(e){
const selectedEvent = $(this).val();
$("#ddExhibitor").empty();
$("#ddExhibitor").append("<option value='-1'>-- Choose Exhibitor --</option>");
$.ajax({
url: '/dashboard/get-exhibitors/'+selectedEvent,
type: 'GET',
success: function success(data) {
if(data.exhibitors.length > 0){
data.exhibitors.forEach(exhibitor => {
$("#ddExhibitor").append("<option value='" + exhibitor.id + "'>" + exhibitor.exhibitor_name + "</option>");
});
}
},
error: function error(err) {
alert(data.error);
}
});
});