as i said in the title, i'm using an api, here is the html
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Popper -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js"
integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG"
crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js"
integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"
crossorigin="anonymous"></script>
<title>Ejemplo consumo web service con FETCH </title>
</head>
<body>
< <div class="container">
<div class="row">
<button class="btn btn-primary" id="btn-cargar">Cargar Información</button>
</div>
<div class="row">
<div id="info" class="text-center">
<h1></h1>
</div>
</div>
</div>
<script src="js/carga_1.js"></script>
</body>
</html>
and here is the code of the js
$("#btn-cargar").click(function (event) {
event.preventDefault();
var url = "https://api.punkapi.com/v2/beers/random";
fetch(url)
.then(response => response.json())
.then(data =>
{
var $nombre_cerveza = $('<h1>').text(data[0].name);
var $grados = "Grados: " + $('<p>').text(data[0].abv);
var $foto_cerveza = $("<p><img src='"+data[0].image_url+"'>");
$("#info").empty();
$('#info')
.append($nombre_cerveza)
.append($grados)
.append($foto_cerveza);
})
.catch(error => console.error(error));
});
it shows me the name as it should, but in the abv it shows "Grados: [object Object]" and i want it to show the abv in numbers, does anyone knows a way to fix this?
i'm sorry that all of it is in spanish
Related
I am working with BootstrapVue and am trying to dynamically create components after the site is rendered (I want to use asynchronous data for the generation process later) with Vue and add them to the DOM.
(I am simulating the asynchrony in the demo by creating the components with a 1 second delay after the page is loaded).
This is what happens:
Vue is creating the components and then they should be mounted to the DOM. But sadly they don't show up. Instead this comment: <!--function(e,n,r,i){return Pt(t,e,n,r,i,!0)}--> is added to them DOM (at the correct position though) in place of the actual HTML code of the component.
This is the jsfiddle with example code that demonstrates the problem: https://jsfiddle.net/0stdxorj/1
Thank you for your help :).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<title>Test</title>
<!-- Bootstrap Core CSS -->
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<!-- Bootstrap Vue CSS -->
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css"
/>
<!-- Custom CSS -->
<link href="../vrc/vrc.css" rel="stylesheet">
<!-- Using: https://bootstrap-vue.org/ -->
<!-- Load polyfills to support older browsers -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
<!-- Vue JS -->
<script src="https://unpkg.com/vue#latest/dist/vue.min.js"></script>
<!-- Bootstrap Vue JS -->
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<!-- Portal Vue JS -->
<script src="https://unpkg.com/portal-vue#latest/dist/portal-vue.umd.min.js"></script>
<!-- Popper JS -->
<script src="https://unpkg.com/#popperjs/core#2"></script>
<!-- VCalendar JS -->
<script src='https://unpkg.com/v-calendar'></script>
</head>
<body>
<div id="app">
<!-- Application root element -->
<b-container fluid="xl">
<b-row align-h="center" align-v="start" id="card-container">
<!-- Card Inline Template -->
<card inline-template id="card-template">
<b-card
v-bind:title=card.title
img-src="https://picsum.photos/600/300/?image=25"
img-alt="Image"
img-top
style="max-width: 370px; margin: 5px"
class="no-select"
>
<b-button v-b-toggle="'collapse-' + card.id">Button</b-button>
<b-collapse v-bind:id="'collapse-' + card.id" class="mt-2">
<v-calendar
is-expanded
:min-date='new Date()'
>
</v-calendar>
</b-collapse>
</b-card>
</card>
</b-row>
</b-container>
</div>
</body>
</html>
const vue = new Vue({
el: '#app'
})
const cardComponentConstructor = Vue.extend({
props: {
card: {
required: true,
default: {id: 0, title: 'Default.'}
}
},
template: '#card-template',
mounted() {
alert("mounted " + this.card.id + " " + this.card.title)
},
created() {
//alert("created " + this.card.id + " " + this.card.title)
}
});
window.addEventListener("load", function(event) {
setTimeout(function () {
createCard({propsData: {card: {id: 0, title: '0'}}})
createCard({propsData: {card: {id: 1, title: '1'}}})
}, 1000);
});
function createCard(props) {
let componentInstance = new cardComponentConstructor(props)
componentInstance.$mount()
document.getElementById("card-container").appendChild(componentInstance.$el)
}
I fixed the problem by going at it in another way. Vue re-renders v-for tags when using a key attribute (:key="card.id"). So I don't try to manually create the components anymore but make use of this feature and modify the cards data instead, which in turn then makes Vue re-render the deleted/modified/added cards:
Updated jsfiddle with my solution https://jsfiddle.net/t7k49a2n/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<title>Test</title>
<!-- Bootstrap Core CSS -->
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<!-- Bootstrap Vue CSS -->
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css"
/>
<!-- Custom CSS -->
<link href="../vrc/vrc.css" rel="stylesheet">
<!-- Using: https://bootstrap-vue.org/ -->
<!-- Load polyfills to support older browsers -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
<!-- Vue JS -->
<script src="https://unpkg.com/vue#latest/dist/vue.min.js"></script>
<!-- Bootstrap Vue JS -->
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<!-- Portal Vue JS -->
<script src="https://unpkg.com/portal-vue#latest/dist/portal-vue.umd.min.js"></script>
<!-- Popper JS -->
<script src="https://unpkg.com/#popperjs/core#2"></script>
<!-- VCalendar JS -->
<script src='https://unpkg.com/v-calendar'></script>
</head>
<body>
<div id="app">
<!-- Application root element -->
<b-container fluid="xl">
<b-row align-h="center" align-v="start">
<!-- Card Inline Template -->
<card
inline-template
v-for="card in cards"
v-bind="{card: card}"
:key="card.id"
>
<b-card
v-bind:title=card.title
img-src="https://picsum.photos/600/300/?image=25"
img-alt="Image"
img-top
style="max-width: 370px; margin: 5px"
class="no-select"
>
<b-button v-b-toggle="'collapse-' + card.id">Button</b-button>
<b-collapse v-bind:id="'collapse-' + card.id" class="mt-2">
<v-calendar
is-expanded
:min-date='new Date()'
>
</v-calendar>
</b-collapse>
</b-card>
</card>
</b-row>
</b-container>
</div>
</body>
</html>
Vue.component('card', {
props: {
card: {
required: true,
default: {id: 0, title: 'Default.'}
}
}
});
window.app = new Vue({
el: '#app',
data: {
cards: []
}
})
window.addEventListener("load", function(event) {
setTimeout(function () {
window.app.cards.push({id: 0, title: '1'})
}, 1000);
});
So I have a search box, and after I click "enter", I want to display the photo of the place I've just chose.
I don't really know how to do that, and after some searches on the internet, I've found out of getPlaceDetails API.
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>test-jest</title>
<script type="text/JavaScript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
My App.vue:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/search">Search</router-link>
</div>
<router-view/>
</div>
</template>
And finally, the superstar, my Search component:
<template>
<div id="search-wrapper">
<div>
<input id="search-input" ref="vue_google_autocomplete"
placeholder="Search"
class="search-location"
onfocus="value = ''"
type="text" />
</div>
</div>
</template>
<script>
export default {
mounted() {
this.autocomplete = new google.maps.places.Autocomplete(
(this.$refs.vue_google_autocomplete),
{types: ['geocode'],componentRestrictions: {country: "us"}}
);
this.autocomplete.addListener('place_changed', () => {
let place = this.autocomplete.getPlace();
let ac = place.address_components;
let lat = place.geometry.location.lat();
let lon = place.geometry.location.lng();
var city = ac[0]["short_name"];
var country = ac[3]["long_name"];
console.log(`You're going to ${city}, which is in ${country}`);
console.log(ac);
});
}
}
</script>
Can someone please help me to to display the photo of the place I'm looking for?
Places are defined within this API as establishments, geographic locations, or prominent points of interest. Most roads etc. do not return images.
Source: https://developers.google.com/places/web-service/intro
Check if your response has an photos[] array, the photo's should be there if it matches the above defined places.
I'm developing my application with riot.js and I want to use dropzone(http://www.dropzonejs.com/).
In my code:
index.html below,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<app></app>
<script src="dist/scripts/bundle.js"></script>
</body>
</html>
app.tag below,
var route = require('riot-route'); require("dropzone"); require('./main/home.tag'); require('./main/contents1.tag');
<app>
<main>
<contents></contents>
</main>
<script>
route(function(tagName) {
tagName = tagName || 'home'
riot.mount('contents', tagName)
})
route.start(true)
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css" />
</app>
home.tag below,
<home>
<div class="search-box"></div>
</home>
Then, I add <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form> into app.tag like this, it works right.
<contents></contents>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
but, I add it into home.tag like this,
<home>
<div class="search-box"></div>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
</home>
it doesn't work. Can anyone help me??
Try to update DropZone when mounting the tag, using on('mount', or also you can try with on('updated',
<home>
<div class="search-box"></div>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
<script>
this.on('mount', function(){
new Dropzone(".dropzone");
})
</script>
</home>
I am trying to convert a page from HTML to PDF using CFDOCUMENT.
Here is a screen shot of the original page
and here is a screen shot of the converted PDF page:
Here is the HTML of the original page:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!--[if gt IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->
<title>Big Shots Registration</title>
<meta name="description" content="PlayerSpace.Com offers state of the art league, tournament and sport event management tools combined with powerful social networking features." />
<meta name="keywords" content="league management,tournament management,sports event management,league management software,tournament management software" />
<meta name="title" content="Big Shots Registration" />
<meta name="author" content="PlayerSpace.Com">
<meta http-equiv="expires" content="Tue, 05 Nov 2013 00:00:00 E883T" />
<link rel="icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" href="/favicon.ico">
<link href="/css/stylesheets.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 8]>
<link href="/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="/css/fullcalendar.print.css" media="print" />
<script type='text/javascript' src="/js/plugins/jquery/jquery-1.10.2.min.js"></script>
<script type='text/javascript' src="/js/plugins/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<script type='text/javascript' src="/js/plugins/jquery/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="/js/plugins/cookie/jquery.cookies.2.2.0.min.js"></script>
<script type="text/javascript" src="/js/plugins/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/plugins/charts/excanvas.min.js"></script>
<script type="text/javascript" src="/js/plugins/charts/jquery.flot.js"></script>
<script type="text/javascript" src="/js/plugins/charts/jquery.flot.stack.js"></script>
<script type="text/javascript" src="/js/plugins/charts/jquery.flot.pie.js"></script>
<script type="text/javascript" src="/js/plugins/charts/jquery.flot.resize.js"></script>
<script type="text/javascript" src="/js/plugins/sparklines/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="/js/plugins/fullcalendar/fullcalendar.min.js"></script>
<script type="text/javascript" src="/js/plugins/select2/select2.min.js"></script>
<script type="text/javascript" src="/js/plugins/uniform/uniform.js"></script>
<script type="text/javascript" src="/js/plugins/maskedinput/jquery.maskedinput-1.3.min.js"></script>
<script type="text/javascript" src="/js/plugins/validation/languages/jquery.validationEngine-en.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/plugins/validation/jquery.validationEngine.js"" charset="utf-8"></script>
<script src="/js/plugins/scrollpane/jquery.jscrollpane.min.js"></script>
<script src="/js/plugins/scrollpane/mwheelIntent.js"></script>
<script src="/js/plugins/scrollpane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/js/plugins/tagsinput/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="/js/plugins/animatedprogressbar/animated_progressbar.js"></script>
<script type="text/javascript" src="/js/plugins/qtip/jquery.qtip.min.js"></script>
<script type="text/javascript" src="/js/plugins/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/plugins/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript" src="/js/plugins/dataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/plugins/dataTables/FixedColumns.js"></script>
<script type="text/javascript" src="/js/plugins/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/js/plugins/bootstrap-dialog/bootstrap-dialog.js"></script>
<script type="text/javascript" src="/js/plugins/pnotify/jquery.pnotify.min.js"></script>
<script type="text/javascript" src="/js/plugins/ibutton/jquery.ibutton.min.js"></script>
<script type="text/javascript" src="/js/plugins/scrollup/jquery.scrollUp.min.js"></script>
<script type="text/javascript" src="/js/plugins/autosuggest/bsn.AutoSuggest_2.1.3.js"></script>
<script type="text/javascript" src="/js/plugins/autoexpand/jquery.autosize-min.js"></script>
<script type="text/javascript" src="/js/plugins/stepywizard/jquery.stepy.js"></script>
<script type="text/javascript" src="/js/plugins/bootstrap-select/bootstrap-select.js"></script>
<script type="text/javascript" src="/js/plugins/plugindetect/plugindetect.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="/js/plugins/gmap/gmap3.min.js"></script>
<script type="text/javascript" src="/js/cookies.js"></script>
<script type="text/javascript" src="/js/actions.js"></script>
<script type="text/javascript" src="/js/charts.js"></script>
<script type="text/javascript" src="/js/pwdchkr.js"></script>
<script type="text/javascript" src="/js/plugins.js"></script>
<script type="text/javascript" src="/js/settings.js"></script>
<script type="text/javascript" src="/js/checkzip.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>
<script type="text/javascript" src="/js/afterajax.js"></script>
<script type="text/javascript" src="/js/aftereasytabs.js"></script>
<script type="text/javascript" src="/js/plugins/jeasyui/easyloader.js"></script>
<script type="text/javascript" src="/js/plugins/underscore/underscore-min.js"></script>
<script type="text/javascript" src="/js/plugins/easytabs/jquery.easytabs.min.js"></script>
</head>
<body id="registration_body_wrap">
<div id="registration_wizard">
<div id="registration_body">
<div class="row-fluid">
<div class="span12">
<div class="span2"></div>
<div class="span8">
<div class="content">
<div class="workplace">
<form method="post" action="/register/index_registration.cfm?wizard_action=pay_by_check&league=678&m0dal_update=registration_wizard&submethod=checkout&teamstatus=individual&requesttimeout=5000" name="dues_form" id="validation" class="reg_verify">
<div class="row-fluid">
<div class="span12">
<h4><b class="text text-error">Registration Dues Checkout</b></h4>
<h5>Please review your dues payment information and complete the checkout form below. <b class="text text-error">Red text indicates a required answer.</b></h5>
<div class="alert alert-info">
<h4 style="margin:0px;">Main Registration</h4>
</div>
<div class="row-form-reg clearfix">
<div class="pull-right tar" style="width:125px;">
<input type="hidden" name="main_p_dues_division_id5" value="2381" id="main_p_dues_division_id5">
<div class="input-prepend" style="margin-left:0px;">
<span class="add-on">$</span>
<input type="text" readonly name="sum6785" style="width:40px !important;" value="300" id="sum6785">
</div>
</div>
<div style="width:60%;">
<p style="font-size:110%;">
<b>Todd John</b> for <b class="label label-info ttRT" title="This is the selected division for this player.">BIG SHOTS Report (Non-Div 1) $300</b>
</p>
<input type="hidden" name="main_p_duesA" id="main_p_dues2141_A" value="300_2381">
</div>
</div>
<div class="dr" style="margin:10px 10px 20px 10px ;"><span></span></div>
<div class="alert alert-info">
<h4 style="margin:0px;">Select your donation amount (optional)</h4>
</div>
<div class="row-form-reg clearfix">
<div class="pull-right tar" style="width:125px;">
<input type="hidden" name="int_donation_collected" id="int_donation_collected" value="0.00">
<div class="input-prepend" style="margin-left:0px;">
<span class="add-on">$</span>
<input type="text" readonly name="sum_donation" value="0" id="sum_donation" style="width:40px !important;">
</div>
</div>
<div style="width:60%;">
<div class="pull-left tac" style="margin:0px 5px 5px 0px;">
<b class="label label-warning"><h5 style="margin:2px 3px 2px 3px;">$0</h5></b>
<div></div>
<input type="radio" checked="checked" disabled name="donation" id="donation0.00" value="0.00" class="donation_radio" OnMouseOver="calc();" OnMouseOut="calc();">
</div>
</div>
</div>
<div class="alert alert-info">
<h4 style="margin:0px;">Pay By Check</h4>
</div>
<div class="row-form-reg clearfix">
<div class="span6">
<label class="control-label">Total Due:</label>
</div>
<div class="span6 tar clearfix">
<div class="input-prepend" style="margin-left:0px;">
<span class="add-on">$</span></span>
<input type="text" name="totalSum" id="totalSum" value="300" readonly onmouseover="calc();" style="width:40px !important;">
</div>
</div>
</div>
<div class="alert alert-info">
<h4 style="margin:0px;">Alternative Payment Arrangements</h4>
</div>
<div class="well well-small" style="margin-top:-20px;">
Please contact your director for more information on how to pay by check.
</div>
</div>
</div>
</form>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$( "#main_p_dues2141_A" ).prop( "disabled", false );
$( "#donation0.00" ).prop( "disabled", false );
$.uniform.update();
calc();
$("#e_m_row").hide();
});
function calc()
{
elem1 = document.getElementById("sum6785");
elem2 = document.getElementById("sum_donation");
elem = document.getElementById("totalSum");
elem.value = parseFloat(elem1.value ) + parseFloat(elem2.value );
}
function loadwindow()
{
var myheight = $(window).height();
var mywidth = $(window).width();
window.open(
'https://bigshotsdc41213.playerspace.com//register/index_registration.cfm?wizard_action=pay_by_check&league=678&teamstatus=individual&m0dal_update=registration_wizard&submethod=record_unpaid_preference&pref=check&pay_by_check=1',
'mywindow',
status=0,
toolbar=0,
menubar=0,
resizable=1,
width=mywidth,
scrollbars=1,
height=myheight
);
pay_by_checkScript();
}
function pay_by_checkScript()
{
document.dues_form.target='mywindow';
document.dues_form.action='http://bigshotsdc41213.playerspace.com/register/index_registration.cfm?wizard_action=pay_by_check&league=678&teamstatus=individual&m0dal_update=registration_wizard&submethod=record_unpaid_preference&pref=check&pay_by_check=1';
document.dues_form.str_billing_fname.value='pay_by_check';
document.dues_form.str_billing_lname.value='pay_by_check';
document.dues_form.str_billing_address1.value='pay_by_check';
document.dues_form.city.value='pay_by_check';
document.dues_form.str_billing_phone.value='555-555-5555';
document.dues_form.str_credit_card_type.value='pay_by_check';
document.dues_form.str_credit_card_number.value='4828640590401142';
document.dues_form.str_ccv_number.value='pay_by_check' ;
document.dues_form.submit();
//window.location = "http://bigshotsdc41213.playerspace.com/register/index_registration.cfm?wizard_action=registration_complete&league=678&teamstatus=individual&m0dal_update=registration_wizard&submethod=record_unpaid_preference&pref=check"
}
$(document).on("click", "[id*=uniform-donation]", function(){
var myval = $(this).find(':radio').val();
$('#int_donation_collected').val(myval);
$('#sum_donation').val(myval);
$(this).find(':radio').prop('checked', true);
$.uniform.update();
calc();
});
$(document).on("click", ".iagree", function(){
$(this).addClass("iagreewidth");
$(this).val('');
$(this).attr("placeholder", "");
calc();
});
function showem()
{
$("#e_m_row").show();
if($("#confirmmultiple").length > 0){
$("#confirmmultiple").show();
}
$("#checkout_now").attr('value','SUBMIT FIRST INSTALLMENT PAYMENT >>');
calc();
}
function hideem()
{
$(".iagree").removeClass("iagreewidth");
$(".iagree").val('');
$(".iagree").attr('placeholder', 'Type "I AGREE" in this box to complete your order and click the "PAY THESE DUES" button.');
$("#checkout_now").attr('value','SUBMIT DUES PAYMENT >>');
calc();
$("#e_m_row").hide();
if($("#confirmmultiple").length > 0){
$("#confirmmultiple").hide();
}
}
</script>
<script>
window.onload = function() {
for(var i = 0, l = document.getElementsByTagName('input').length; i < l; i++) {
if(document.getElementsByTagName('input').item(i).type == 'text') {
document.getElementsByTagName('input').item(i).setAttribute('autocomplete', 'off');
};
};
};
</script>
<script type="text/javascript">
function disableEnterKey(e){
var key;
if(window.event){
key = window.event.keyCode;
} else {
key = e.which;
}
if(key == 13){
return false;
} else {
return true;
}
}
</script>
</div>
</div>
</div>
<div class="span2"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I can't seem to get the pdf output to match the original. Any help would be appreciated.
In my experience PDF rendering was actually easier than I expected. What I would do is create a CFM file that just outputs the core page structure you want - so lose all of those javascript files and everything and just have the regular markup that you need on it. A normal CSS sheet should work just fine, but you might need to use CFINCLUDE to include it inline rather than relying on a link meta tag in your header.
The code to create your PDF is then as follows:
<cfdocument format="pdf"
pagetype="custom"
unit="cm"
pagewidth="21"
pageheight="29.7"
margintop="0"
marginbottom="0"
marginleft="0"
marginright="0"
filename="#pdf.path_render_page#"
overwrite="true"
fontembed="yes"
>
<cfinclude template='render_page.cfm'>
</cfdocument>
So the basic output CFM file is CFINCLUDE'd inside your CFDOCUMENT tag, makes for nice compact code and is easy to separate the PDF creation from the template. Your CFM template then would have your CSS file CFINCLUDE'd inside that too. The recursive include should work fine.
If you're wanting this to be printed out on paper then it gets a bit tricky, as you start having to work in physical measurements and not pixels, so your layout will end up being a lot of trial and error - printing one out and seeing how it looks etc.
The big gotcha is with fonts. If you want a font to be embedded in your PDF then it needs to be installed on the server machine, and referenced properly. If you open the CF admin you can view a page that lists the fonts available, and it has a few columns with different references to each font. I'm never sure which one of those columns gives the right reference for your CSS to marry up with the right font - I think it might vary depending on the font and the platform your server is running on, one of them will be right though, so again just trial and error.
Looking at your document it seems to be a form, so not sure quite how that would make sense in a straight PDF version - you'd might want to amend the layout anyway to make it more like a physical form perhaps?
It's very strange, I call dijit.byId() in dojo.addOnLoad(function{...}), it return undefined. In order to check if the id exist, i call dojo.byId() at the same time, it return some object. So I guess the component is not a dijit component? this is the whole code: Please help me, thanks in advice!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<!-- Dojo/Diji definations -->
<link href='../dojoroot/dijit/themes/tundra/tundra.css' type='text/css' rel='stylesheet'/>
<link href='../dojoroot/dojo/resources/dojo.css' type='text/css' rel='stylesheet'/>
<script type="text/javascript" src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<!-- Main scripts -->
<script type="text/javascript">
dojo.addOnLoad(function()
{
// Include library
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
// add the select child event to the tab panel
alert(dijit.byId("contentTabPanel")); // return no defined
alert(dojo.byId("contentTabPanel")); // return an object
});
</script>
</head>
<body class="tundra">
<div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<!-- Content Tab Panel -->
<div id="contentTabPanel" dojoType="dijit.layout.TabContainer" region="center">
<!-- Tab UserGroup -->
<div dojoType="dijit.layout.ContentPane" title="UserGroup">
</div>
</div>
</div>
</body>
</html>
OMFG!!!!! I know the reason!!!!! I cost 5 Hours just for this STUPID error:
I MUST write the
// Include library
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
outside the dojo.addOnLoad(function() { !!!