scarvello
Posts: 64
|
| Posted: 11/15/2015, 3:03 AM |
|
Hi all,
Is there any way to refresh CAPTCHA image without reloading page by using jQuery or Javascrpt?
I know that CAPTCHA control uses some JS library (located at; js/jquery/captcha/ccs-captcha.js). How to implement the image refresh?
Many Thanks in advance
|
 |
 |
Oper
Posts: 1195
|
| Posted: 11/16/2015, 4:11 AM |
|
I have not used the Internal CAPTCHA option. we customize one for ASP
but i think you only need to refresh the Object (as i do)
Do you has a Public working sample. so i could take a look to the execution? http://???
_________________
____________________________
http://www.7bz.com (Free CMS,CRM Developed in CCS)
http://www.PremiumWebTemplate.com
Affiliation Web Site Templates
Please do backup first |
|
|
|
DataDoIT
|
| Posted: 11/16/2015, 5:48 AM |
|
I agree it's not the cleanest method in the world, but I believe there
is a server-side event that takes place along with the Captcha creation
(setting of a session value for validation?). Thus you could change the
visible value of the Captcha, but it wouldn't validate against the
server-side value without a page refresh.
Look at https://my.intelesync.com/login.php?action=Reset where it's not
exactly the worst thing in the world to refresh the page with a Captcha
refresh-like button.
|
|
|
|
MichaelMcDonald
Posts: 640
|
| Posted: 11/16/2015, 11:39 AM |
|
call new captcha code using ajax post and refresh the div on success?
_________________
Central Coast, NSW, Australia.
|
|
|
|
scarvello
Posts: 64
|
| Posted: 11/16/2015, 5:18 PM |
|
Hello MichaelMcDonald,
Which URL I should call by using ajax POST?
I just have a page with embedded the CCS CAPTCHA component.
If I Call this url:
my_page.php?callbackControl=myFormCaptcha1
the result is a a long series of numbers like these:
46,66,153,47,152,27,190,38,188,38,188,41,8,15,8,33,10,52
-----------------------------------------------------------------------------------------------------------------
Hello Oper,
A working example:
Just put CAPTCHA control inside a record form. CCS adds the following lines
into script section:
$('*:ccsControl(inc_iscrizione, soggetto, Captcha1Picture)').ccsBind(function() {
this.ccsCaptcha({url: "?callbackControl=inc_iscrizionesoggettoCaptcha1", backgroundColor: "255;159;113;0", foregroundColor: "51;51;51"});
into html body:
<!-- BEGIN Captcha Captcha1 -->
<canvas id="inc_iscrizionesoggettoCaptcha1Picture" width="{Width}" height="{Height}"></canvas>
<!-- END Captcha Captcha1 --><br>
CCS also adds all server components into php generate files.
-------------------------------------------------------------------------------------------------------------------
Thanks DataDoIT,
I think it can be done without refreshing all page by calling (with ajax) this server url:
my_page.php?callbackControl=myFormCaptcha1
(it's the same url called into js section)
Maybe it's also can update the session variable for validation.
But I don't know how to process ajax response to refresh the CAPTCHA canvas
|
|
|
|
scarvello
Posts: 64
|
| Posted: 11/22/2015, 6:31 AM |
|
No more suggestions about this topic?
|
|
|
|
scarvello
Posts: 64
|
| Posted: 11/22/2015, 7:38 AM |
|
RESOLVED !!!
Just recopy 3 functions that are into js/jquery/captcha/ccs-captcha.js into the HEAD section of your HTML page.
These funcitons are:
function qPath(x1, y1, x2, y2, x3, y3) function qPaths() function drawCaptcha(canvas, url, bColor, fColor)
Then add another function like this:
function reload(){
// Get Canvas object from your HTML page
var canv = document.getElementById('inc_iscrizionesoggettoCaptcha1Picture');
// First of all clear it's contex
var context = canv.getContext('2d');
context.clearRect(0, 0, canv.width, canv.height);
// Set the ajax url that generate codes (note it's the same php page
// that generate HTML page with a callbackControl parameter equal to the
// id name of CAPTHA control
var url = "iscrizione.php?callbackControl=inc_iscrizionesoggettoCaptcha1";
// Call JS Function
drawCaptcha(canv, url, "255;159;113;0", "51;51;51");
}
Thats it.
Now into HTML page simply add a control like this to call the reload() function :
<button onclick="reload()" type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-refresh"></span>
</button>
|
|
|
|
MichaelMcDonald
Posts: 640
|
| Posted: 11/23/2015, 12:24 PM |
|
Good Work.
Maybe put in Tips & Solutions.
_________________
Central Coast, NSW, Australia.
|
|
|
|
scarvello
Posts: 64
|
| Posted: 11/23/2015, 2:10 PM |
|
Done MichaelMcDonald.
|
|
|
|
|
