I'm trying to create a MaterialiseCSS range slider which is based on noUiSilder. The documentation says:
Add a range slider for values with a wide range. This one is set to be a number between 0 and 100. We have two different types of sliders. nouiSlider is a 3rd party plugin which we've modified. To use the noUiSlider, you will have to manually link the nouislider.css and nouislider.js files located in the extras folder.
I did everyting unfortunately it is showing the defaut HTML range (like the one in the link).
My html:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link href="extras/noUiSlider/nouislider.css" rel="stylesheet">
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="extras/noUiSlider/nouislider.min.js"></script>
<script type="text/javasript" src="js/phonefinder.js"></script>
</head>
<body class="grey lighten-4">
<form>
<div class="input-field">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</div>
</form>
</body>
</html>
js/phonefinder.js:
$(function(){
var slider = document.getElementById('test5');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
step: 1,
range: {
'min': 0,
'max': 100
},
format: wNumb({
decimals: 0
})
});
});
What am I doing wrong?
The noUiSlider range isn't a a input type, it should be a div.
So:
<form>
<div class="input-field">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</div>
</form>
should be:
<form>
<div id="connect"></div>
</form>
Related
So I am trying to dynamically (using javascript) add an input field in a form by clicking the button "Add". The semantic-ui dropdown css styling to the first field since it is not added with javascript. However, after I press add, a new field created by the css styling is not applied.
Here is a link to a demo.
https://jsfiddle.net/traorefly/h83245ju/#&togetherjs=QidJs02nya
Here is my code
<!DOCTYPE html>
<html>
<head>
<title>TOPS</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<body>
<div class="ui text container" style="margin-top: 20%">
<form action="" class="ui form">
<div class="field" id="timekeyword">
<label>Segment Start Time/Keywords</label>
<div class="ui action input">
<input type="text" placeholder="Ex: 08:23" name="cut"> <select id="keywords" multiple="multiple" class="ui fluid search dropdown" name="video[keywords][]">
<option value="Absolute">Absolute</option>
<option value="Absolute Two">Absolute Two</option>
</select>
<div class="ui positive button" id="addField">Add</div>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
<script >
$('.dropdown').dropdown();
$('#addField').click(function(){
var html = "<div class=\"field\">" +
" <div class=\"ui action input\">" +
" <input type=\"text\" placeholder=\"Ex: 08:23\" name=\"cut\">" +
"<select id=\"keywords\" multiple=\"multiple\" class=\"ui fluid search dropdown\" name=\"video[keywords][]\"><option value=\"Absolute\">Absolute</option>" +
"<option value=\"Absolute Convergence\">Absolute Convergence</option>" +
"<option value=\"Absolute Maximum\">Absolute Maximum</option>" +
" </div>" +
" </div>"
$('#timekeyword').after(html)
})
</script>
</body>
</html>
fiddle: https://jsfiddle.net/8pcfz2a7/
you should call $('.dropdown').dropdown(); for new elements as well.
so add $('.dropdown').dropdown(); to end of your click handler.
you can also put this in a function called update_ui, for reuse code.
I have a problem when initiating jqxButton inside jqxWindow:
Expected: When I click Add button, the Confirm button caption will be set to "Add", otherwise when I click Edit button.
Problem: The Confirm button caption is set to proper button at the first time I clicked, but then the caption will not changed.
Note: The problem raised if i set window property autoOpen: false.
This problem raised when I use jQWidgets V5.1.0.
When I use jQWidgets v4.3.0, this problem does not happen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="" />
<title></title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnAdd').click(function () {
$('#window').jqxWindow('open');
$("#confirm").jqxButton({ value: "Add" });
});
$('#btnEdit').click(function () {
$('#window').jqxWindow('open');
$("#confirm").jqxButton({ value: "Edit" });
});
var jqxWidget = $('#jqxWidget');
var offset = jqxWidget.offset();
$('#window').jqxWindow({
autoOpen: false,
minWidth: 200,
height: 300,
width: 500,
initContent: function ()
{
$("#confirm").jqxButton();
}
});
});
</script>
</head>
<body class='default'>
<div id="jqxWidget">
<div style="float: left;">
<div>
<input type="button" value="Add" id="btnAdd" />
<input type="button" value="Edit" id="btnEdit" />
</div>
</div>
<div id="mainDemoContainer">
<div id="window">
<div id="windowContent">
<input type="button" id="confirm" />
</div>
</div>
</div>
</div>
</body>
</html>
This comes late of course, but does the change in the caption have to occur through the jqxButtons properties only? After testing your code I came to following:
$('#btnAdd').click(function () {
$('#window').jqxWindow('open');
$("#confirm").attr('value', "Add"); // Works !
//$("#confirm").jqxButton('val', "New Value"); // Does not work the first time only
//$('#confirm').jqxButton({ value: "Button" }); // uncaught exception: Invalid property: value
});
$('#btnEdit').click(function () {
$('#window').jqxWindow('open');
$("#confirm").attr('value', 'Edit');
});
May this answer help others who meet this issue.
I'm trying to use customized css on bootstrap 3, but failed. What I want is(on wide screen):
combo box located in vertical center on the left side.
The h3 Title located in center(This item is the highest).
The date mark located in bottom(This item is the shortest) on the right side.
<!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">
<title>test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" />
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" />
<![endif]-->
<style>
.vcenter {
vertical-align:middle
}
.vbottom {
vertical-align:bottom
}
</style>
</head>
<body>
<div class="container">
<form class="form-horizontal bg-info" role="form">
<div class="form-group">
<div class="col-md-4 vcenter">
<div class="input-group input-group-lg">
<select class="form-control">
<option>a</option>
<option>b</option>
</select>
</div>
</div>
<div class="col-md-6">
<h3>Title</h3>
</div>
<div class="col-md-2 vbottom">
<p class="text-right"><small>2014.09.03</small></p>
</div>
</div>
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" />
</body>
</html>
Try this:
for vertical align use display: table-cell
.vcenter {
vertical-align:middle;
display:table-cell;
}
Use inline padding-top, here is the demo
left column: height 46px, add 5 px (=(56-46)/2)
middle column: height 56px
right column: height 30px, added 26 px(=56-30)
Cons:
Should manual calculate.
This method works on wide screen. It will get extra height on mobile phone.
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?
I tried changing the script to the following and it still doesn't trigger the event.. am I missing something?
$('#page1').live('pageshow',function(event) {
$("#radioyes").click(function(){
$("p").hide();
});
});
I also tried pagebeforecreate but the result is the same.. :(
I am trying a simple jquery mobile page and testing on chrome portable. However, in the following code, the input click event isn't working where as button click works. I also tried "input#radioyes" as "div>fieldset>input#radioyes" and still doesnt work.
<!DOCTYPE html>
<html>
<head>
<title>Background check </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="images/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone4.png" />
<script type="text/javascript" src="jQuery/jquery.js"></script>
<script type="text/javascript" src="jQuery/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="jQuery/jquery.mobile.min.css" />
<!-- JQuery Date Picker components -->
<link rel="stylesheet" href="jQuery/jquery.ui.datepicker.mobile.css" />
<script src="jQuery/jQuery.ui.datepicker.js"></script>
<script src="jQuery/jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet" href="css/folo.css" />
<script type="text/javascript">
$('#page1').live('pageshow',function(event) {
$("#radioyes").click(function(){
$("p").hide();
});
});
</script>
</head>
<body >
<div data-role="page" id="page1" data-theme="a" data-title="PAGE1">
<div data-role="header">
<h1>"PAGE1"</h1>
</div><!-- /header -->
<div data-role="content" >
<p> Welcome. </p>
<div id="SSN">
<label for="basic">SSN: </label>
<input name="ssn" id="textSSN" value="" data-theme="a" />
</div>
<div id="first">
<label for="first">First Name:</label>
<input name="input_first" id="input_first" value="" data-theme="d" />
</div>
<div id="last">
<label for="last">Last Name:</label>
<input name="input_last" id="input_last" value="" data-theme="d" />
</div>
<button id="btn1">Click me</button>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-role="fieldcontain">
<legend>Have you used other last name?</legend>
<input type="radio" name="radio-choice" id="radioyes" value="yes" />
<label for="radioyes">Yes</label>
<input type="radio" name="radio-choice" id="radio-no" value="No" checked="checked" />
<label for="radio-no">No</label>
</fieldset>
<div id="otherlast">
<label for="otherlast">Other Last Name:</label>
<input name="input_otherlast" id="input_otherlast" value="" data-theme="d" />
</div>
</div>
<div id="dob">
<label for="date">Date Of Birth:</label>
<input type="date" class="datepicker" name="date" id="my_date" value="01/19/1975" text="01/19/1975" />
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
</html>
Appreciate any help.. The version of Jquery is 1.7.1 1.6.4 downloaded and the jquery mobile is the latest version.
You cannot use $(document).ready in jquery mobile here's an documentation about it
Also here's an answer to a similiar question
jQM 1.0 does not support jQuery 1.7.x please use jQuery 1.6.4 ( Source )
jQM uses pageInit(), not $(document).ready() ( Source )
Also jQM adds additional markup to your page so $("p").hide(); might be hiding as expected but the additional markup might still be visible. I would suggest using an id for the span elements
UPDATE:
Try this
$('#page1').live('pageshow',function(event) {
$("#radioyes").bind( "change", function(event, ui) {
$("p").hide();
});
});
Live Example:
http://jsfiddle.net/CZLcR/9/
Docs for Radio Events:
http://jquerymobile.com/demos/1.0/docs/forms/radiobuttons/events.html