I'm exploring using stripe and have started by using the "payments" layout w/the v3 javascript. Problem is the "zip code" is always getting cut off as it looks like the iframe height is not adjusting properly. Any suggestions as to what i may be doing wrong or how to adjust the iframe?
html:
<form action="/" method="post" id="payment-form">
<div class="form-row">
<div id="card-element"> <!-- a Stripe Element will be inserted here. --> </div>
<!-- Used to display Element errors -->
<div id="card-errors" role="alert"></div>
</div>
js (angular/ionic):
this.card = this.stripeElements.create('payment');
this.card.mount('#card-element');
screenshot
Thanks in advance.
Related
I want to integrate ACE into my flask website and grab the information from it.
<form method="POST" action="" enctype="multipart/form-data">
{{form.hidden_tag()}}
<div class="row">
<div class="col-6">
<!-- Screenshot example 1:--> <div **id="editor"** **name="code"**>{{form.example_code}}</div>
<!-- Screenshot example 2:--> <!--<textarea class="code" name="code">{{form.example_code}}</textarea>-->
</div>
<div class="col-6">
{{Output_of_rendered_code}}
</div>
</div>
<div class="row">
<div class="field-group mt-4">
{{form.submit(class='btn btn-primary')}}
</div>
</div>
</form>
The issue is, that the name-tag "code" shows in the compiled div, not in the textarea. Even more, the text is not included in the textarea, but put into multiple span-tags, to allow for the color coding. See rendered Website as example. In contrast, when I use a simple textarea, the Website works fine...
Do you have any idea on how to use ACE and still get the information easily (e.g., by using the API to add the name to the respective tags)? Or alternatively, if you know a different editor which is easier to use.
Any support is highly appreciated.
Thanks a lot!
Niko
I am working on an application that has a form on one of its pages. The form is enclosed in a bunch of nested div tags. It looks something like this:
<main id="main-body">
<div id="content-wrapper">
<div id="formContainer>
<div data-reactid=".0">
<div data-reactid=".0">
<div data-reactid=".0.0.1.$form">
<form id="myForm" data-reactid=".0.0.1.$form.1">
...
</form>
</div>
</div>
</div>
</div>
</div>
</main>
The trouble is that I can see the form on my webpage, and also through the 'View Source' function in my browser, but when I do an 'Inspect Element' to see the actual HTML being generated, I just see
<main id="main-body">
<div id="content-wrapper">
<div id="formContainer">
</div>
</div>
</main>
I can't see any of the HTML elements inside the div 'formContainer' when I do an 'Inspect Element', even though they are right there on the page. Any ideas as to why might this be? I need to get the form Id in Neoload, but Neoload just won't read it, since it's absent from the page's source.
Edit: Several of the div tags are using data-reactid=".0.0". The form element itself has data-reactid=".0.0.1.$form.1". Basically anything with react disappears. I know nothing of React. Could this be causing this issue? I have updated my code to match the original code more closely.
You are not closing the id="form-container"! A " is missing
I Forked an NBA 2K Random Team picker from another user and was tweaking it to my needs. I am stumped on something probably simple for one of you. Thanks in advance.
When the "Randomize" button is clicked, the team "name" and "logo" display. I added a "roster" url to display as well but I want that url to be clickable in to a new tab/window. I can't seem to figure it out.
https://codepen.io/nick-c/pen/dNwMaZ
Below is just the html. I couldn't manage to post all the script and css.
<div class='container'>
<div class='title'>
<img src='http://fluidesign.co.uk/wp content/uploads/2016/12/NBA_2K17_logo.png'/>
</div>
<div class='team home'>
<h3>Home</h3>
<div class='logo'></div>
<div class='name'>?</div>
<div class='roster'>Click for Rosters</div>
<div class='random'>Randomize</div>
</div>
<div class='team away'>
<h3>Away</h3>
<div class='logo'></div>
<div class='name'>?</div>
<div class='random'>Randomize</div>
</div>
<div class='vs'>vs</div>
<div class='clear'></div>
</div>
You didn't "manage to post all the script and css"? Where's the difference in pasting it into a codepen or pasting it into the code snipped tool here on StackOverflow? Anyway...
You are currently just setting the link as a text in the line:
$(".home .roster").text(teams[index].roster);
But what you want to do is add it as a link:
$(".home .roster").html('Webpage URL');
Easy, huh? ;) See a working fork of your codepen here: https://codepen.io/anon/pen/xgmEOm
i think you want this
example
This is my code in page html1,
<fieldset id="bill1">
<div style="font-size:9px" id="serviced"><b>Service :</b></div>
<div style="font-size:9px" id="tratyped"><b>Type of Transport :</b></div>
<div style="font-size:9px" id="custyped"><b>Type of Client</b></div>
<div style="font-size:9px" id="datepickerd"><b>Date :</b></div>
<div style="font-size:9px;display:none" id="timed"><b>Time :</b></div>
<div style="font-size:9px" id="departured"><b>Departure Address :</b></div>
<div style="font-size:9px" id="destinationd"><b>Arrival Address</b></div>
</fieldset>
The innerhtml values of those divs will change at runtime.
How can I send or view these information in another page html2.
I want to be able provide the fieldset contents inside the page "html2" from "html1", which is included (include 'html2') into the "php1" page.
Please help me with the coding or just give your suggestions, I will try to code it myself.
Thanks!
Edit............
Inside fare.html
<fieldset id="bill2" style="padding-top:0">
<div style="font-size:9px" id="passengerd"><b>No. of Passengers :</b></div>
<div style="font-size:9px" id="shairwelld"><b>No. of Chariwells :</b></div>
<div style="font-size:9px" id="babycd"><b>No. of Baby Chairs :</b></div>
<div style="font-size:9px" id="companiond"><b>No. of Companions :</b></div>
</fieldset>
In pay.html
<fieldset id="bill2">
</fieldset>
I used the jquery code inside head tag as
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bill2').load('/fare.html #bill2')
})
</script>
The above code works...
It loads the default content of the fieldset. But not loading the values produced during run time. Is there any way to fix this?
Thanks!
With jQuery you can use .load() method:
$(document).ready(function(){
$('#bill2').load('/html1.html #bill2')
})
Where #bill2 is the id of fieldset from html2.html in which you want to load fieldset #bill2 from html1.html
You can generate a hidden form with javascript and submit it.
When you want to use GET, you can also add those parameters to the current url with javascript and load this url.
I like your "Please help me with the coding or just give your suggestions, I will try to code it myself.
You can do it with form,
Create a form with some hidden fileds, while submitting that form get the div's inner html and make that as hidden value using javascript and submit that form.
I'm trying to add a jquery zoom plugin within a turn.js magazine flipping effect. I've got them both working separately, but can't get the zoom effect within each magazine page like I'd want. Some of the code is below. All ideas are appreciated, thanks.
<!-- Zoom script -->
<script src='jquery.zoom.js'></script>
<script>
$(document).ready(function()
{
$('#ex1').zoom();
});
</script>
<!-- Zoom html -->
<span class='zoom' id='ex1'>
<img src='pages/daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
</span>
<!-- Magazine html -->
<div id="magazine">
<div style="background-image:url(pages/01.jpg);">
</div>
<div style="background-image:url(pages/02.jpg);">
</div>
<div style="background-image:url(pages/03.jpg);">
</div>
in similar situations i used successfully anythingZoomer
it makes easy to zoom arbitrary html elements, given taht a bit of tweaking is needed in order to suit your needs