Recaptcha not rendering until I refresh the page
I'm using Recaptcha in my angular js project for security stuff.
I just implemented the captcha with following below steps:
1. I added below link to my page (in the head tag before every styles and scripts file):
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async ></script>
2. In my form, I added captcha
<div class="g-recaptcha" data-sitekey="my_site_key"></div>
so my page is something like this
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async ></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="my_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
Apparently, everything is fine, but Recaptcha not rendering until I refresh the page. actually, it's not gonna work when the page request by ajax but after page reloading, Recaptcha will render on the page!
So how can I render Recaptcha with the first render??
I figure out how can I fix this problem.
instead of adding this script
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async ></script>
to layout page, I added it in every page that I want to render captcha so after routing to the special page, in addition, to render the page content captcha will render for us too.
for exmaple the content page template will be something like this:
contactus.html content
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async></script>
<form name="contactUsForm" novalidate>
<section class="well">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group has-feedback" ng-class="{'has-error': contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty, 'has-success': !contactUsForm.firstName.$error.required }">
<label class="control-label col-sm-4" for="firstName">Name</label>
<div class="col-sm-8 col-md-6">
<input type="text" id="firstName" name="firstName" ng-model="contactUs.firstName" class="form-control" ng-class="{'form-control-error': contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty, 'form-control-success': !contactUsForm.firstName.$error.required }" placeholder="Name" required />
<span ng-show="contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span ng-show="!contactUsForm.firstName.$error.required" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<div class="text-danger" ng-show="contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty">Name is required</div>
</div>
</div>
<div class="form-horizontal form-widgets col-sm-12 col-sm-offset-2" style="display: flex;justify-content: flex-start;margin-bottom: 2rem;">
<div class="g-recaptcha" data-sitekey="my-sitekey"></div> <!-- Server -->
<!--<div class="g-recaptcha" data-sitekey="my-sitekey"></div>--> <!-- Local -->
</div>
<div class="buttons-wrap col-sm-offset-2" style="text-align:right;padding-right:1.6rem">
<button class="btn btn-primary" ng-disabled="contactUsForm.$invalid" data-toggle="modal" data-target="#confirmModal"><i class="glyphicon glyphicon-save"></i><span>&submit</span></button>
</div>
</section>
</form>
Related
I was trying to create a login form inside a modal like shown here (https://codepen.io/skcals/pen/bxdpaN).
However when I put this same code on my own website here is how it renders :
Has some one ever met the same issue ? And knows how to solve it ?
This is my html head were materialize css is included :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type = "text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.js"></script>
And this is the code of my login form
<div id="login-modal" class="modal">
<h5 class="modal-close" style="color:black;">✕</h5>
<div class="modal-content center">
<h4>Se connecter</h4>
<br>
<form action="#">
<div class="input-field">
<i class="material-icons prefix">person</i>
<input type="text" id="name">
<label for="name">Username</label>
</div>
<br>
<div class="input-field">
<i class="material-icons prefix">lock</i>
<input type="password" id="pass">
<label for="pass">Password</label>
</div>
<br>
<div class="left" style="margin-left:20px;">
<input type="checkbox" id="check">
<label for="check">Remember Me</label>
</div>
<br>
<input type="submit" value="Login" class="btn btn-large login-btn">
</form>
</div>
</div>
I used your code in my project and it worked fine!
The only thing I can think off is using the newest version of JQuery:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
In the meantime, I've solved my own issue by moving the login div somewhere else. Previously it was inside my navbar menu and I think that is was causing the display issue.
There is just one last thing, the remember me check box doesn't show up ...
I want to call an Elementor Popup from custom code (HTML, CSS, Javascript).
Does anyone know how to do that?
Thanks in advance!
Here's how to call the popup via javascript:
$(document).ready(function(){
elementorProFrontend.modules.popup.showPopup( {id:2041}, event);
});
Make sure to replace the id with yours.
If you want to add POPUP using custom code then directly paste the bellow code in that custom code page and add conditions and then publish it.:
$(document).ready(function(){
$("#myModal").modal('show');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Auto Loading Bootstrap Modal on Page Load</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Subscribe our Newsletter</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
I am having a sign up form which is a raw HTML with stripe integration, Now i want to integrate a mail chimp into it.I have placed a code
<p>
<label>
<input type="checkbox" name="mc4wp-subscribe" value="1" />
Subscribe to our newsletter. </label>
</p>
in my html page. I am not getting the subscribers list in the admin pannel.
login to your MailChimp account then manage contacts-> group then create there a group with checkbox after then go to signup forms and embed code will show the check box edit the code under then forms tag like below
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//dada.us14.list-manage.com/subscribe/post?u=804ce11ffe4a5684c85f88d38&id=d5ab97dfc9" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="checkbox" value="1" name="group[4917][1]" id="mce-group[4917]-4917-0"><label for="mce-group[4917]-4917-0">Subscribe to our mailing list</label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_804ce11ffe4a5684c85f88d38_d5ab97dfc9" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
I'm using bootstrap 3 along with angularjs (with angular for bootstrap) for an html5 application running on google apps script.
I expected Bootstrap to be responsive by default, but for my surprise a very simple form is remaining small on my mobile device. Text, buttons and input fields are so small that they are almost unusable. I'm writting some CSS rules for mobile screens, but I'm not sure if I should. Maybe I'm doing something wrong?
Here is the form. I have removed some extra stuff to make it simple, but bootstrap makes any single form a big monster:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
<!-- BOOTSTRAP CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<base target="_top">
<?!= include('css'); ?>
</head>
<body ng-app='Gestor'>
<div class="container-fluid" ng-controller="ExampleController">
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-8 col-lg-4">
<fieldset class="form-group">
<label for="Concepto" class="col-md-4">Concepto:</label>
<div class="col-md-8 text-left"><input type="text" ng-model="data.concepto" class="form-control"></div>
</fieldset>
</div>
<div class="col-md-6 col-lg-4">
<fieldset class="form-group">
<label class="col-md-4" for="pvp" >Precio:</label>
<div class="col-md-8">
<div class="input-group">
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('pvp',-5)">-5</a>
<input type="number" ng-model="data.pvp" class="form-control">
<div class="input-group-addon">€</div>
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('pvp',5)">+5</a>
</div>
</div>
<label class="col-md-4 " for="cantidad">Cantidad:</label>
<div class="col-md-8">
<div class="input-group">
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('cantidad',-5)">-5</a>
<input type="number" ng-model="data.cantidad" class="form-control">
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('cantidad',5)">+5</a>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6 col-lg-4">
<fieldset class="form-group">
<label class="col-md-4" for="Category">Categoría:</label>
<div class="col-md-8">
<select ng-model="data.category" class="form-control form-control-lg" ng-options="option for option in formValues.availableOptions" ></select>
</div>
<label class="col-md-4" for="Fecha">Fecha:</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="data.fecha" is-open="datepicker.opened" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"> </i></button></span>
</div>
</div>
</fieldset>
</div>
<div class="col-md-12">
<fieldset class="form-group">
<button ng-click="formValues.submitStatus ===0 ? submit() : reset()" class="btn" ng-class="{'btn-primary':(formValues.submitStatus===0),'btn-success':(formValues.submitStatus===1),'btn-danger':(formValues.submitStatus<0)}" type="submit">{{formValues.submitStatus===0 ? 'Register' : 'Reset'}}</button>
</fieldset>
</div>
</div>
</form>
</div>
<!-- MAIN APP CODE -->
<?!= include('app.js'); ?>
</body>
</html>
EDIT:
Here is an image that shows what I want to achieve. As you can see, input and label elements are quite big, but that is because the custom CSS styles that I made. I expected this to be automatic on Bootstrap. If you take a look at the bottom, you can see a very small button, that is how the entire form is displayed without my custom styles.
[.. Removed image ..]
EDIT2:
Here is another screenshot added. This time is a much simpler form, which was directly taken from here:
http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=vertical-form-layout
As you can see, it looks awful
EDIT3:
I have added the tag google apps script, because it should be a problem with how google apps scripts serves the webpage on the Iframe. I have updated the plunk provided by #Satej to make it work properly with angular, but it works exactly as I expected:
http://plnkr.co/edit/Ze4DEQDxr3Hd8SVtdifZ?p=preview
I have opened the plunker on my mobile device, and it works flawlessly, no issues so far as you can see on the following screenshot:
So the question is, what does google apps script when it serves the HTML file to make it display so small?
Finally I got the solution.
The problem was the view-port meta tag. It was being removed by CAJA, or whatever sanitization is applied to IFRAME mode.
There was a bug about this, where people pointed this exact problem:
https://code.google.com/p/google-apps-script-issues/issues/detail?id=4659
And on that same thread, someone linked to a solution:
https://plus.google.com/+MarcoColomboMow/posts/GXgRCh98HTu
Finally, it was just a matter of adding the following to the html template when serving it (on the doGet function)
return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).addMetaTag('viewport', 'width=device-width, initial-scale=1');
You are doing something wrong.
You have to explicity state the styling for small and extra small screens if you want them to take a particular column size.
This is done by using the col-sm-* and col-xs-* classes.
I am trying retrieve an element "Nature News Standard Article in Nature News & Comment" which is part of below HMTL code.
I have following WebDriver code in selenium:
if ("Polopoly CM".equals(driver.getTitle())) {
System.out.println("----> Title of page <----");
driver.findElement(By.xpath("//*[starts-with(#id,'nav_') and #class='p_textOutput']"));
System.out.println("----> Xpath Selected <----");
driver.findElement(By.xpath("//*[starts-with(#id,'nav_') and #class='p_textOutput']")).click();
System.out.println("----> Xpath Clicked <----");
}
Problem is: i am unable to retrive the required element through Xpath/CSS from HTML
HTML:
<document>
<html xmlns:polopoly="http://www.polopoly.com/polopoly/cm/app/gui" xmlns="http://www.w3.org/1999/xhtml" style="cursor: default;">
<head>
<body id="nav_3" class="navFrameBody" onbeforeunload="busyCursor();" onload="onLoad(); idleCursor();">
<script type="text/javascript"> <!-- Jasmine.createFrame('nav'); //--> </script>
<form id="mainform" name="mainform" method="post" action="CM">
<input type="hidden" value="2852906396" name="owid"/>**
<input type="hidden" value="1332852912984" name="ofid"/>
<input type="hidden" value="nav" name="ofn"/>
<input type="hidden" value="true" name="ofs"/>
<input id="nav_1" type="hidden" value="0" name="nav_1"/>
<input id="nav_2" type="hidden" value="0" name="nav_2"/>
<div id="nav_13_placeHolder" class="ajax_placeHolder">
<fieldset id="nav_14" class="field"/>
<div id="nav_4" class="p-group quickCreator expanded">
<div id="nav_4_state">
<input id="nav_15" type="hidden" value="expanded" name="nav_15"/>
</div>
<div class="toggleIcon clearfix"/>
<script lang="javascript">$(document).ready(function() {p_makeExpandable('nav_4', 'nav_15')});</script>
<fieldset id="nav_16" class="contentCreator field topContentCreator">
<div class="quickCreator contentCreator container">
<div class="quickCreator header clearfix">
<h2> Create New </h2>
<a id="nav_17" class="customize" href="javascript:actionEventData({$contentId:"18.232.1319560059", $action:"edit", $target:"work", $opentab:"menu/quickCreatorLayout"})">Customize</a>
</div>
<div class="list">
<div class="quickCreator link">
<input type="hidden" value="" name="nav_18"/>
<a id="nav_18" href="javascript:submitForm(document.mainform, document.mainform.nav_18, "x")">
<img id="nav_19" class="centered" alt="" src="images/icons/transparentIcon.png"/>
<span id="nav_20" class="p_textOutput">Nature News Standard Article in Nature News & Comment</span>
</a>
</div>
</div>
</div>
</fieldset>
</div>
<div id="nav_5" class="p-group contentTree expanded">
<div id="nav_5_state">
<input id="nav_21" type="hidden" value="expanded" name="nav_21"/>
</div>
<div class="toggleIcon clearfix"/>
<script lang="javascript">$(document).ready(function() {p_makeExpandable('nav_5', 'nav_21')});</script>
<div class="field contentTree">
<div id="nav_6_placeHolder" class="ajax_placeHolder">
<div class="header">
<span class="label">Content Tree</span>
<button id="nav_9" type="button" value="Refresh tree" name="nav_9">
<img id="nav_22" class="centered" alt="" src="images/icons/refresh.png"/>
<span id="nav_23" class="p_textOutput"> Refresh tree</span>
<script type="text/javascript"> <!-- jQuery(document).ready(function() { addOnClickEvent("nav_9",null, "nav_9_placeHolder", null, new IndicatorLifecycleHook('p.std_ajaxIndicator', true, 0.8, "createImageTop('images/ajax/busy_indicator_big_green.gif')")); }); //--> </script>
</button>
</div>
<div class="tree">
<div id="nav_8_placeHolder" class="ajax_placeHolder">
<script type="text/javascript"> jQuery.require(["script/polopoly-ui.js"]); </script>
<input id="nav_8" type="hidden" value="" name="nav_8"/>
<script type="text/javascript"> jQuery.require(["script/polopoly-ui.js"]); </script>
<ul id="nav_8_tree" class="tree">
</div>
</div>
</div>
</div>
</div>
<fieldset id="nav_24" class="field clipboard">
<input id="nav_25" type="hidden" value="" name="nav_25"/>
</fieldset>
</form>
<script type="text/javascript"> <!-- jQuery(document).ready(function() { if(window.parent.SeleniumPageLoadCountnav==null) { window.parent.SeleniumPageLoadCountnav=1; window.parent.SeleniumPageLoadCountnavOld=0; } else { window.parent.SeleniumPageLoadCountnav+=1; } }); //--> </script>
</body>
</html>
</document>
I see two elements which can be selected by your xpath locator. Try to find both of them.
List<WebElement> elements = webDriver.findElements(By.xpath("your_xpath"));
for (Element element : elements) {
element.click();
}
Your HTML code is:
Nature News Standard Article in Nature News & Comment
So, You can use id or xpath to retrieve the element text as follows:
Using id:
String s = driver.findElement(By.id("nav_20")).getText();
System.out.println(s);
Using xpath:
String s1 = driver.findElement(By.xpath("//span[#id='nav_20']")).getText();
System.out.println(s1);
css=a[href*='javascript:submitForm'] > span.p_textOutput
Try the above CSS Selector. I am sure it will work out.
Please Let me know is it working or NOT.