My team is using Recurly.js to build a payments page into our website. We've been following the docs from https://docs.recurly.com/js. According to the docs,
Build a form however you like. Use the data-recurly attribute to identify input field targets to Recurly.js. To identify where Recurly.js will inject card data fields, we recommend using simple div elements.
The problem is that the div elements don't actually show in the form. Here's a short reproducible example based off of the docs:
<!doctype html>
<html lang="en">
<head>
<!-- Recurly.js script and API key config -->
<script src="https://js.recurly.com/v4/recurly.js"></script>
<script>recurly.configure('... API Key here...');</script>
</head>
<body>
<form>
<input type="text" data-recurly="first_name">
<input type="text" data-recurly="last_name">
<div data-recurly="number"></div>
<div data-recurly="month"></div>
<div data-recurly="year"></div>
<div data-recurly="cvv"></div>
<input type="hidden" name="recurly-token" data-recurly="token">
<button>submit</button>
</form>
</body>
</html>
This is what it looks like:
As you can see, the two inputs show fine, but none of the divs show correctly.
What are we doing wrong and how do we build a Recurly.js form with div elements?
The javascript code that calls configure cannot be in the head tag and should be located in the body tag
<script>recurly.configure('... API Key here...');</script>
This example should show you how to set it up properly. Notice where they put the javascript in the body: https://github.com/recurly/recurly-js-examples/blob/master/public/minimal/index.html
<!doctype html>
<html lang="en">
<head>
<!-- Recurly.js script and API key config -->
<script src="https://js.recurly.com/v4/recurly.js"></script>
</head>
<body>
<form>
<input type="text" data-recurly="first_name">
<input type="text" data-recurly="last_name">
<div data-recurly="number"></div>
<div data-recurly="month"></div>
<div data-recurly="year"></div>
<div data-recurly="cvv"></div>
<input type="hidden" name="recurly-token" data-recurly="token">
<button>submit</button>
</form>
<script>recurly.configure('... API Key here...');</script>
</body>
</html>
The browser loads javascript in the head, which loads up recurly, and then in the body you can use recurly.
Related
I tried doing some input validation on my inputs at my ejs template using angular, but it doesn't seem to be working correctly, this is the code i used (from w3schools):
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
It's supposed to ouput something like this:
The input's valid state is: false
But instead it just returns this:
The input's valid state is: {{myForm.myInput.$valid}}
So is it in any way possible to use ejs and angular together?
You need to have a module and a controller defined, script should be loaded inside the body/head
HTML
<!DOCTYPE html>
<html ng-app="store">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="">
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
Controller
var app = angular.module('store', []);
app.controller('StoreController', function($scope) {
});
DEMO
<html ng-app="insert_app_name_here">
<body ng-controller="insert_controller_name_here">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
</body>
</html>
I would set up my angular app like the above code. Also, including the script at the end of your body tag is good practice. Moreover, removing the .min from your script tag to just angular.js instead of angular.min.js helps you debug your code better since you will be using it for development and not for production.
In setting up your app, I would include an app.js file where the code goes like this:
angular.module('insert_app_name_here', [])
In setting up your controller, I would include a controller file (i.e. mainCtrl.js) where the code goes like this:
angular.module('insert_app_name_here').controller('insert_controller_name_here, function($scope) {
});
As to linking angular with ejs, i am unfamiliar with ejs, therefore i cannot provide a solution for that.
I am trying to update the value of a hidden input field called id_0-instruction_task_one_image with the file name of a particular image file when the page is loaded using java script and <img onload="
This is the script I am using to update the hidden field:
<script type="text/javascript">
function updateInput(ish) {
document.getElementById("id_0-instruction_task_one_image").value = ish;
}
</script>
This is the file path for the image, note I am also loading the file name into the value field:
<div class="image_rating">
<img src="{% static "survey/images/instruction_task_one/" %}{{display_image}}" value={{display_image}} onload="updateInput(this.value)"/>
</div>
When I load the page the image is getting shown and the same file name is in the value field e.g. value="ITI1.jpg"
However the hidden form field does not update correctly and instead shows value="undefined" as below
<input id="id_0-instruction_task_one_image" name="0-instruction_task_one_image" type="hidden" value="undefined"/>
Can anybody tell me what I am doing wrong? I have been working on this for a while and I am convinced it should work. Thanks
I think there's a problem with the way you're accessing and setting the html element attributes. Try using getAttribute and setAttribute on the elements like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Set Attribute Value</title>
</head>
<body>
<div class="image_rating">
<img id="myImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/JosephBazalgettePortrait.jpg/100px-JosephBazalgettePortrait.jpg"
value="myValue" onload="updateInput(this)" />
</div>
<input id="id_0-instruction_task_one_image" name="0-instruction_task_one_image" type="hidden"
value="undefined" />
<script type="text/javascript">
function updateInput(ish) {
var valueAttribute = ish.getAttribute("value");
document.getElementById("id_0-instruction_task_one_image").setAttribute(
"value", valueAttribute);
}
</script>
</body>
</html>
I looking for how to access input tag in form via jquery.
I made something like below :
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test </title>
<script src="/resources/gtl_portal/js/jquery/jquery-2.1.1.min.js"></script>
<script src="/resources/gtl_portal/js/comon.js"></script>
</head>
<body>
<form id="a" action="#">
<input type="text" name="name" value=""><br/>
<input type="text" name="phone" value="numbervalidation"><br/>
<input type="hidden" name="hiddenParam" value="hidden parameters"><br/>
press<br/>
</form>
<script>
function chk(){
checkValidation('a');
}
</script>
</body>
</html>
and in common.js
function checkValidation(formName){
var form = $('#' + formName);
form.children('input').each(function(k){
var obj = $(this);
console.log(obj.val());
}
};
I can get value from input tags without hidden type. How can I get hidden type also at once. I found follow article. But if I use this, it looks have to iterate form twice which I do not want to.
Link : jQuery access input hidden value
Is there any way to access hidden and not hidden at once?
Thanks :D
P.S/ I also curious about access multiple selector. I have tried
form.children('input, textarea, select').each(function(i){//do something});
but does not work. Would you find anything wrong from here?
You can use the :input selector. It selects all <input> elements including hidden inputs
$(":input");
Simply selecting the elements by tag name like $("input"); works as well.
Getting hidden input just works, see following code below:
console.log($('input'))
function show(){
$('input').attr('type','text')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden">
<button onclick="show()" >show hidden fields</button>
I am trying to change my textbox value after click on a button using javascript and change ng-model value of angular js.
The Javascript code working fine and change the textbox value, but I also want to change my ng-model value according to the text box.
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<script>
function tryi()
{
document.getElementById('newtry').value="any value";
}
</script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" id="newtry">
<input type="button" onclick="tryi();"value="click here">
<hr>
<h1>Hello {{yourName}}!</h1><hr>
</div>
</body>
</html>
I think you have included angular-resource and not included angularjs
add this line
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
the code is working fine
Here is the plunkr link: http://plnkr.co/edit/CPX1Mhn2CkmY6wZWHvya?p=preview
I've got a strange problem where the middle section of some of the pages aren't stretching to 100% page height, wihch results in there not being the full left hand border.
Here for example (please click on the 'Brentwood' link and go to 'Login' on the top menu) https://www.inside-guides.co.uk/advertiseradmin/default.asp?.
Whereas the 'Contact' page is fine (again via the 'Brentwood' site): https://www.inside-guides.co.uk/feedback.asp.
They both use the same template using javascript and CSS, but when I look in the code inspector it gives full page height values for the #left-nav and #middle on the 'Contact'page which works.
The javascript is to make each column the same height = i.e. to the top of the footer, but it doesn't work on the Login page.
I really can't understand why so any help perhaps using a code inspector would be very much appreciated.
JS code placed in the head.css on each page:
<script type="text/javascript">
matchColumns=function(){
var divs,contDivs,maxHeight,divHeight,d;
divs=document.getElementsByTagName('div');
contDivs=[];
maxHeight=0;
for(var i=0;i<divs.length;i++){
// make collection with <div> elements with class attribute "equal"
if(/\bequal\b/.test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
maxHeight=Math.max(maxHeight,divHeight);
}
}
for(var i=0;i<contDivs.length;i++){
contDivs[i].style.height=maxHeight + "px";
}
}
window.onload=function(){
if(document.getElementsByTagName){
matchColumns();
}
}
</script>
Login page code where the 100% JS page height isn't working:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--#include virtual="/System/Startup_FranchiseClient.asp"-->
<html xmlns="http://www.w3.org/1999/xhtml">
<%
EnsurePageIsHTTPS
If IsFranchiseClientLoggedIn = True then
Response.Redirect GetAdvertiserAdminHomePage
End if
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Inside-Guides.co.uk - Advertiser Login</title>
<!--#include virtual="/Assets/Templates/Public/Franchise/HeadCSS.asp"-->
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/js/jquery.cycle.min.js"></script>
</head>
<body class="login" onload="javascript:document.getElementById('strUsername').focus();">
<!--#include virtual="/Assets/Templates/Public/Franchise/TemplateStart_https.asp"-->
<div class="content clearfix">
<div id="form" class="form">
<h1>Advertiser Login</h1>
<p>Welcome to the advertiser area. Please enter your login details below:</p>
<span class="ErrorText"><% = strSecurity_LoginError %></span>
<form id="form" name="LoginForm" method="post" action="Default.asp">
<input type="hidden" name="ValidateLogin" value="1" />
<label>Email
<span class="small">Email used to register</span>
</label>
<input type="text" id="strUsername" name="strUsername" value="" />
<br />
<label>Password
<span class="small">Password used to register</span>
</label>
<input type="password" name="strPassword" value="" />
<button type="submit">Log-in</button>
<div class="spacer"></div>
</form>
</div>
<p> * If you have forgotten your password, please click here</p>
</div>
<!--#include virtual="/Assets/Templates/Public/Franchise/TemplateEnd.asp"-->
</body>
</html>
<!--#include virtual="/System/Shutdown.asp"-->
CSS:
#middle {padding-top:7px;float:left;width:60%;border-right:1px solid #edeaec;border-left:1px solid #ede9e8;}
#middle.dir {width:78.5%;border-right:0;}
Many thanks.
JS code placed in the head.css on each page
Not sure if this is a typo or not, but if it isn't you cannot place js in a css file. Also no css file seems to be linked in the head of you html document.
However on further inspection it seems you are referring to the headCSS.asp template include in which case the above point isn't of concern.
For height 100% or any percentage based heights the parent must have a defined height, making it essentially not very useful because you need to know height values anyway. So if you can set it to a fixed height that would be my suggestion.
Answer
However I suggest a <table> to do what you're looking with a single row and multiple columns, using one will avoid a lot of hacky css and or js.