I'm using the default Captcha implementation of advanced application template shipped with yii2. I tried many time to find any api property that allows me to add Refresh image link that allows user to generate new Captcha image but I could not figure out how to do that. I tried the following client-side solution depending on Jquery:
<!-- This code is placed just before the closing </body> tag at the end of
"frontend/views/layouts/main.php" -->
<script>
$("#fox").click(function(event){
event.preventDefault();
$("img[id$='-verifycode-image']").click();
})
</script>
While in the contact.php the view of contactAction I added a link with an id fox to the widget of captcha as the following:
<?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
'template' => '<div class="row"><div class="col-lg-3">{image}Refresh</div><div class="col-lg-6">{input}</div></div>',
]) ?>
The described solution above, works fine, but It make a must to add unusable code for all application's views except contactAction view or any other view that uses Captcha! because I could not insert the code before including Jquery library. i.e in the view, so I inserted it at the end of the layout.
The question here: Is there any solution directly from the yii2 api? or there is any better suggestion to make this jquery code works in the view? i.e turning it into pure JavaScript.
The below code worked for me -
form code on view file to generate captcha image -
<?= $form->field($model, 'captcha')->widget(\yii\captcha\Captcha::classname(), [
'template' => '<div class="col-lg-3">{image} Refresh</div><div class="col-lg-3">{input}</div>',
])?>
model code to validate captcha code -
public function rules()
{
return [
[['name', 'city', 'description','email'], 'required'],
[['captcha'], 'captcha']
];
}
and js code to refresh captcha image in layouts/main.php file -
<script>
$("#fox").on('click',function(e){
//#testimonials-captcha-image is my captcha image id
$("img[id$='-captcha-image']").trigger('click');
e.preventDefault();
})
</script>
This will solve the issue, we can create a central view as template for captcha and call it everywhere.
<?php
/* #var $this yii\web\View */
/* #var $form yii\bootstrap\ActiveForm */
/* #var $model \frontend\models\ContactForm */
?>
<div class="row">
<div class="col-lg-3">{image} <br /><a id="refresh_captcha" href="javascript:;">Refresh Captcha</a></div>
<div class="col-lg-6">{input}</div>
</div>
<?php
$this->registerJs('
$(document).ready(function () {
$("#refresh_captcha").click(function (event) {
event.preventDefault();
$(this).parent().children(\'img\').click();
})
});
');
?>
For Calling, you can use:
<?= $form->field($model, 'verificationCode')->widget(yii\captcha\Captcha::className(),[
'template' => $this->render("/_partials/captcha_template"),
]); ?>
this will allow you run it on all views, as names and ids can be different for each view.
$(this).parent().children(\'img\').click();
Move that to an external file and you should be fine.
Other solution would be to create a widget with the captcha, create a file with the code and when calling the widget register the javascript file.
Or just create a file with the javascript and remember to register it every time you show the captcha.
Go for the first solution, easier, you do not have to build anything, etc. On websites that do not have thousands of concurrent users it will work just fine.
Related
I want to make an email-signature page with Elementor and then generate the HTML-code like the code when you that appears when you "View Source" of a page, but code gets not exactly correct. I am using a Custom post type and a Elementor template that is not published so it works only when writing: https://mysite123123.com/a/site/?theme_template_id=1164
I have a PHP snippet plugin and this code gets the Post type HTML but not the same like when you press rightclick/View Source. (Its missing some css etc)
Can you see what Im doing wrong or if you know how to echo the correct html from a webpage like a regular visitor see it?
(Im using this code to give a user a HTML signature)
<?php
global $wp;
$vpost = get_post($post_id);
$urlcard = $vpost->post_name;
$current_url = home_url( $wp->request );
$data = file_get_contents("https://mysite123123.com/a/".$urlcard."/?theme_template_id=1164");
$html_encoded = htmlentities($data);
echo $html_encoded;
You can tell the browser how it should render your data using a Content-Type HTTP Response header.
To have your data rendered as plain text -- as the 'View source' view does -- use "text/plain" as mime-type;
header("Content-Type: text/plain");
echo $data
I have some problem with the recaptcha loading.
I trying to remake and modernize one of old my website to a singlepage one with php, javascript and ajax (no jquery!).
Everyting is fine yet, but the recaptca. I use the following method.
index.php contains the "main frame" and the target divs to the HTTPRequest function.
With AJAX I load the PHP page templates to the main target divs.
BUT when my PHP template file looks the following to show the registration last page with the captcha:
<?php
$template = '
.../ some code sits here /...
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage(\'registration_page_2.php\')">« Back</button>
<button class="button btn-reg" onclick="validatePage(\'registration_validate.php\')">Submit your registration</button>
</div>
';
echo $template;
and I load it into one of my divs, the reCaptcha has not been shown. I tried some ways and tricks, but it's not working.
There is no form and submit section at all on my page. I do it with javascript and ajax.
Why I cannot make it works?
Is that possible to bypass form->submit->post method to get reCaptcha alive?
Or is the singlepage the wrong way?
I don't quite understand you but since i can't post a comment, i will attempt to answer anyway.
You don't have to use php to echo the html code, just in-case you didn't know, you can do it like this.
<?php
//php code
?>
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage('registration_page_2.php')">« Back</button>
<button class="button btn-reg" onclick="validatePage('registration_validate.php')">Submit your registration</button>
</div>
<?php //continue code here ?>
and I load it into one of my divs, the reCaptcha has not been shown. I
tried some ways and tricks, but its not works :(
It's hard to tell from the information you have given why it is not being shown
There is no form and submit section at all on my page. I do it with
javascript and ajax.
If your registration_page_2.php and registration_validate.php does not echo the template in your current .php shown, then it certainly wouldn't appear on your page
Why I cannot make it works? Is that possible to bypass
form->submit->post method to get reCaptcha alive? Or is the singlepage
the wrong way?
I think you just did something wrong in the middle. The way you have said is 'form->submit->post' is the right way to go about this
Can you help me to get the solution please?
Using your browser, inspect or view the source code of your page. (For google chrome the hotkey is CTRL+SHIFT+I) Try to find the elements in your page to see if they are loaded, but hidden due to css or the likes. After which, you should give more details.
update your captcha block with adding id recaptcha
<div class="g-recaptcha" id="recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
add following code in your page load
<script src='https://www.google.com/recaptcha/api.js?hl=en&render=explicit&onload=onReCaptchaLoad'></script>
<script type="text/javascript">
var recaptcha;
var onReCaptchaLoad = function(){
recaptcha = grecaptcha.render('recaptcha',{
'sitekey' : 'YOUR_RECAPTCHA_PUBLIC_KEY',
'theme' : 'white'
});
};
</script>
You can do it with php request
<?php
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
$recaptcha = $_POST['g-recaptcha-response'];
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY'
$verify = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$recaptcha_secret}&response={$recaptcha}");
$captcha_success = json_decode($verify);
if($captcha_success->success){
// success
}else{
// error
}
}
?>
I have several elements within a website that are linked to separate php posts. The site also has one popup div('it's a custom modal window').
The popup div has two sections, title and content.
When the elements are clicked, the popup window will appear. I want the associated php post title and content to appear in the popup div in its proper section.
NOTE: I have tried for a week to figure this out using, php, ajax/jquery, combinations. I have scoured google and stackoverflow and can't seem to find the missing link.
Below is my code structure.
FIRST: This is the closest I've got to a working model. The php post_title and post_content is added to the popup window in the appropriate place. But adding code for the next element overrides the first elements data.
HTML
<div class="hexagon">
<p class="verticalcenter center" data-toggle="popWindow" data-target="#popUp">
<!-- ATTACH LATEST POST TITLE -->
<?php $the_query = new WP_Query( 'cat=4' ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<?php the_title(); ?>
<?php endwhile;?>
</p>
</div>
<div class="hexagon">
<p class="verticalcenter center" data-toggle="popWindow" data-target="#popUp">
<!-- ATTACH LATEST POST TITLE -->
<?php $the_query = new WP_Query( 'cat=5' ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<?php the_title(); ?>
<?php endwhile;?>
</p>
</div>
JS
Note: The 'overlay' is a background with opacity that covers the main content to help focus on the 'popUp' div.
$(document).ready(function() {
...//other code pertaining to website operation
//Click on Hexagons && Launch Modal
$('.hexagon,.hexagonz,#mapToken,.mobileNav li').on('click', function() {
$('.overlay').removeClass('hidden');
$('#popUp')
.addClass('animated fadeInUp')
.css( {
'bottom': '25%'
} )
}); //end Modal Launch
...//other code pertaining to website operation
});// end $(document).ready
The popup window(Modal) html code is located in my footer.php file along with a single.php file containing duplicate popup window code.
IDEALLY: I'd like to accomplish this without resorting to using an (a href=''). This website has a splash page that loads in front of the main page on first load. When I have tried fix this using an (a href='') link, it triggers the splash page(not what I want).
Hope the structure and end goal are clear.
You should first create a PHP script to send each popup the correct info.
Then you could attach a $.post on click, to the button that triggers the popup open, with a 'data-contents' or something similar
Then do the post like this:
$(document).on('click', '.myPopupButton', function(e) {
e.preventDefault();
data = { content : $(this).attr('data-contents') };
$.post('yourScript.php', data, function(json) {
// Handle the data that comes from your script
// i.e. :
$('.myPopup .title').text(json['title']);
$('.myPopup .body').text(json['body']);
}
});
Your PHP should be expecting a value like content => xxx
So you could get it like this:
if ($_POST['content'] == 'xxx') {
}
else if ( /*etc..*/ ) {}
Now the content of the popup should change dinamically
Situation:
I'm building a Wordpress Site. Menu becomes 'fixed' to the top of the page when scrolling down the page (http://deerfielddesigns.com.mlseo.net/). When i am logged into wordpress, the dashboard admin bar cover the menu. I wanted to create a different class for the menu when I am logged in as opposed to when I am logged out.
Code:
if ( direction === 'down' ) {
$('#main-header').addClass( 'et-fixed-header' );
} else {
$('#main-header').removeClass( 'et-fixed-header' );
}
I wanted to insert an "if ( is_user_logged_in() )" statement in there to change the class output but I don't really understand too much about javascript and if it plays nice with php. Does anyone have any insight as to what i need to do to make this work? Thanks all!
if this is not an AJAX driven login system, simply open your header.php file and perform the following
$the_class = is_user_logged_in() ? 'logged-in-class' : 'logged-out-class';
Then find your main-header and do what's required.
<header id="main-header" class="<?php echo $the_class;">
If it is an ajax driven login system, you'll need to understand how to work with wordpress' add_action, but that is an answer for an entirely different question.
Make an ajax request to the required php function whenever required. You may use ajax features of various JS libraries like jQuery, YUI etc. to do so.
PHP is a server side language (which quite likely is generating Javascript).
Javascript is in the browser.
The short answer is "You can't easily call PHP from JS".
The simple way to identify from you javascript if a user is logged in is to populate a javascript variable with their status. In your theme's header.php, add:
<script type="text/javascript">
var is_logged_in = <?php echo json_encode(is_user_logged_in()) ?>;
</script>
Then, in your javascript elsewhere, you can use:
if (is_logged_in) {
//....
}
If you write inline javascript in your php files you can do this:
<?php // some php code ?>
<script type="text/javascript">
<?php if ( is_user_logged_in() ) { ?>
// Place some javascript here
<?php } else { ?>
// Place some javascript here
<?php ?>
</script>
<?php // some php code ?>
How to add inline JavaScript to a WordPress template file?" Plus add it to every post on my page? for instance, <script type="text/javascript">alert('hello world');</script> would be...
Adding it to a template is easy; just stick it within a tag in any part of the template you want to add it to. For instance:
<script>alert('Hello world!');</script>
as an incredibly basic (and kinda messy and improper) way to demonstrate it. Any template file is just a PHP file, or in other words an HTML file with some extra PHP code thrown in.
Also, to add something to a post, you'll want to add it to the appropriate part of your Wordpress template. For instance, in the default Twentytwelve theme, that'd be the content.php file--that contains the code for a single article, and adding something to that will add it to every instance of an article on the page.
To add some javascript to every post on your page just place it inside the loop. Something like:
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
?>
<script type="text/javascript">alert('hello world');</script>
<?php
the_title();
the_excerpt();
} // end while
} // end if
?>
Would add an alert for every post on the page. That would be pretty messy to have a popup for every post but that's the gist.