I am trying to use the Dojo/Dijit declarative menu with Spring ROO 1.1.4, but even if I replace the complete roo generated menue.jspx with the example (ligthly addapted) from the Dojo/Dijit hompage, it does not replace the decorated menu divs with the menu.
that is how it look
that is how should look:
My modified menu.jspx
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:menu="urn:jsptagdir:/WEB-INF/tags/menu"
xmlns:sec="http://www.springframework.org/security/tags"
version="2.0">
<jsp:directive.page contentType="text/html;charset=UTF-8" />
<jsp:output omit-xml-declaration="yes" />
<script type="text/javascript">
dojo.require("dijit.MenuBar");
dojo.require("dijit.PopupMenuBarItem");
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");
dojo.require("dijit.PopupMenuItem");
</script>
</head>
<div dojoType="dijit.MenuBar" id="navMenu">
<div dojoType="dijit.PopupMenuBarItem">
<span>
File
</span>
<div dojoType="dijit.Menu" id="fileMenu">
<div dojoType="dijit.MenuItem" onClick="alert('file 1')">
File #1
</div>
<div dojoType="dijit.MenuItem" onClick="alert('file 2')">
File #2
</div>
</div>
</div>
<div dojoType="dijit.PopupMenuBarItem">
<span>
Edit
</span>
<div dojoType="dijit.Menu" id="editMenu">
<div dojoType="dijit.MenuItem" onClick="alert('edit 1')">
Edit #1
</div>
<div dojoType="dijit.MenuItem" onClick="alert('edit 2')">
Edit #2
</div>
</div>
</div>
</div>
</jsp:root>
Can anybody give me a hint what I am doing wrong?
(I know the fallback to do the menu programmatic, but I want to do it declarative.)
The html header is looks like that:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
...
<script type="text/javascript">var djConfig = {parseOnLoad: false, isDebug: false, locale: '${fn:toLowerCase(userLocale)}'};</script>
<script src="${dojo_url}" type="text/javascript"><!-- required for FF3 and Opera --></script>
<script src="${spring_url}" type="text/javascript"><!-- /required for FF3 and Opera --></script>
<script src="${spring_dojo_url}" type="text/javascript"><!-- required for FF3 and Opera --></script>
<script language="JavaScript" type="text/javascript">dojo.require("dojo.parser");</script>
<spring:message code="application_name" var="app_name"/>
<title><spring:message code="welcome_h3" arguments="${app_name}" /></title>
</head>
I don't knows anything about Spring Roo, so maybe I'm saying something very stupid here...
Is that menu.jspx compiling into some static html? If this is the case, you can tell Dojo to parse your initial page simply by setting parseOnLoad to true on your djConfig
var djConfig = {parseOnLoad: true, ...}
(no need to require dojo.parser in this case).
On the other hand, if that template is inserted dinamicaly, you will need to call dojo.parser.parse() on the root 'navMenu' node yourself. You seem to be require-ing it, but I don't see where it is being called.
I had to use:
{
dojo.addOnLoad(function(){
dojo.parser.parse();
});
}
instead of parseOnLoad:true
Related
Non WebDev here trying to build a basic UI with primevue on vue3. Tried to run the basic demo but with some components included. Don't know if components come with their own CSS dependencies.
Bellow is my html code. I have also tried using a vue project with separate components and gottenthe same result
Basic example fails:
<html>
<head>
<meta charset="utf-8">
<title>PrimeVue Demo</title>
<link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
<link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/primevue/inputtext/inputtext.min.js"></script>
</head>
<body>
<div id="app">
<p-inputtext v-model="val"></p-inputtext>
<h6>{{val}}</h6>
</div>
<div class="p-d-flex">
<div class="p-mr-2">Item 1</div>
<div class="p-mr-2">Item 2</div>
<div>Item 3</div>
</div>
<div class="p-grid">
<div class="p-col-4">4</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
</div>
<div class="p-grid">
<div class="p-col-2">2</div>
<div class="p-col-6">6</div>
<div class="p-col-4">4</div>
</div>
<script>
const {createApp, ref} = Vue;
const App = {
setup() {
const val = ref(null);
return {
val
};
},
components: {
'p-inputtext': primevue.inputtext
}
};
createApp(App).mount("#app");
</script>
</body>
</html>
Should render 1 row for flex items and 2 rows for numbers in grid layout. instead it renders all rows with no styling. What am I missing?:
In order to use prime vue's flex and grid layout, you need to load PrimeFlex.
https://primefaces.org/primevue/showcase/#/primeflex
The documentation only has npm setup but you may be able to include the following link.
<link href="https://cdn.jsdelivr.net/npm/primeflex#2.0.0/primeflex.min.css" rel="stylesheet">
In case you do it through npm, After installing the package, don't forget to include the CSS file, in my case, I included it in my main.js just adding this line.
import 'primeflex/primeflex.css';
https://primefaces.org/primevue/showcase/#/primeflex
The CDN method works!! However I downloaded the file and placed this
<link rel="stylesheet" href="static/primevue/primeflex.min.css" />
inside the head section of my html file.
However it did not work as per the documentation. I had to remove the p- for it to work:
<div id="app" class="grid">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
In my vue-bootstrap application I would like to use hidden input file control. When I use the standard input component it works (Load 1). If i try to do the same with the reactive component form vue-bootstrap library it does not work (Load 2). I would appreciate any hints what I might be doing wrong.
app = new Vue({
el: "#app",
data: {
files: '',
}
})
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
</head>
<body>
<div id="app">
<div>
<b-button #click="$refs.fileInput1.click()"> Load 1</b-button>
<input type="file" ref="fileInput1" style="display:none;"/>
</div>
<div>
<b-button #click="$refs.fileInput2.click()"> Load 2</b-button>
<b-form-file v-model="files" style="display:none;" ref="fileInput2" />
</div>
</div>
</body>
</html>
The $refs.fileInput2 here is referring to the Vue component, not really the input element, which is actually wrapped inside a div (you could see it if you inspect the rendered element). So one thing you could do (although it's ugly and not recommended, you should at least move this to the methods section):
app = new Vue({
el: "#app",
data: {
files: '',
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div>
<b-button #click="$refs.fileInput1.click()"> Load 1</b-button>
<input type="file" ref="fileInput1" style="display:none;" />
</div>
<div>
<b-button #click="$refs.fileInput2.$el.querySelector('input[type=file]').click()"> Load 2</b-button>
<b-form-file v-model="files" style="display:none;" ref="fileInput2" />
</div>
</div>
Although I would say you should just use the native file input element since you are hiding the <b-form-file/> anyway.
It's working fine.You may check the below fiddle.
https://jsfiddle.net/tyagdvm5/
<b-form-file style="display:none;" v-model="file2" choose-label="Attachment2"></b-form-file>
Or for accurate solution please create a fiddle and upload the link.
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?
Having trouble constructing a button dynamically with jQuery Mobile. Copy and run. See notes in code.
<!DOCTYPE html>
<html>
<head>
<title>MSC Pre-Close Application</title>
<meta charset="utf-8"/>
<!-- standard Jquery/jQuery Mobile Libraries -->
<script src="jquery.mobile/jquery.js"></script>
<script src="jquery.mobile/jquery.mobile.js"></script>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile.css" />
<BR/>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline">
<h1>Main Menu</h1>
</div>
<div class="ui-body ui-body-c">
<div data-role="content">
<div class="ui-block-a"><button id="click_me" type="submit" data-theme="a" data-icon="home">Click me to change the button to my right</button></div>
<div class="ui-block-a"><button class="cl_pre_phone1" type="submit" rel="external" data-theme="a" data-icon="home">Primary Phone</button></div>
<script>
$(document).ready(function()
{
// this changes the label but not the href action.
$(".cl_pre_phone1").html("<a href='google.com'> Google</a>");
$("#click_me").click(function() {
alert("this should change the text and href of the button!");
// here I would like to change the value as well as the href action, but it does not work.
$(".cl_pre_phone1").html("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>").reload(true);
});
});
</script>
You're getting messed up by the enhancement which jQM does. Your button is getting rewritten to:
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Primary Phone</span>
<span class="ui-icon ui-icon-home ui-icon-shadow"></span></span>
<button class="cl_pre_phone1 ui-btn-hidden" type="submit" data-theme="a" data-icon="home" aria-disabled="false">Primary Phone</button>
One way round this would be to change the call inside the callback to:
$(".cl_pre_phone1").attr("href", "http://yahoo.com").parent().find(".ui-btn-text").text("Yahoo");
or you could replace the whole ui-block-a div.