I wrote a PHP page with Smarty template engine and decided to use Bootstrap UI in my project.
CSS works fine, but JavaScript doesn't work. I tried to use that without Smarty = all works excellent.
For example, hint:
index.tpl:
{config_load file="$tolangpath"}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{#HomePageTitle#}</title>
{include file='libs.tpl'}
</head>
<body class="metro" style="background:url('./templates/images/bg-index.png') no-repeat;background-size:100%;">
<div style="text-align:right;padding-right:15px;">
<a href="#"
data-hint="Title|This is a hint for Me"
data-hint-position="top">
Hover me...
</a>
</div>
<div class="example" style="margin-left:35%;margin-top:10%;width:400px;">
<form action="./include/process/login.php">
<fieldset>
<img src="./templates/images/logo.png" align="center">
<label>{#Login#}</label>
<div class="input-control text" data-role="input-control">
<input name="login" type="text" placeholder="{#LoginInput#}">
<button tabindex="-1" class="btn-clear" type="button"></button>
</div>
<label>{#Password#}</label>
<div class="input-control password" data-role="input-control">
<input name="password" type="password" placeholder="{#PasswordInput#}">
<button tabindex="-1" class="btn-reveal" type="button"></button>
</div>
<div class="input-control checkbox" data-role="input-control">
<label>
<input type="checkbox" checked="">
<span class="check"></span>
{#RememberMe#}
</label>
</div>
<br>
<input type="submit" value="{#LoginButton#}">
<a class="button primary" href="./register" data-pjax="#main">{#RegisterButton#}</a>
<a class="button default" href="./recover">{#ForgotPassword#}</a>
</fieldset>
</form>
</div>
</body>
</html>
`</code>
libs.tpl:
<link rel="stylesheet" href="./templates/css/metro-bootstrap.css">
<link rel="stylesheet" href="./templates/css/passProtect.css">
<script src="./templates/js/jquery-2.1.0.min.js"></script>
<script src="./templates/js/passProtect.js"></script>
<script src="./templates/js/jquery.widget.min.js"></script>
<script type="text/javascript" src="./templates/js/metro.min.js"></script>
<script type="text/javascript" src="./templates/js/jquery.pjax.js"></script>
Pjax (https://github.com/defunkt/jquery-pjax) doesn't work too.
Related
I need some help. I want to convert this iframe into this textarea, so I can be able to write text in it. I try the below code, but it's not working.
Here are my code
$(document).ready(function () {
$(function () {
$("#richTextField").on("load", function () {
var str = $(this).contains().find('html').prop('outerHTML')
});
});
});
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/prof.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript"></script>
<script src="script/Working.js"></script>
</head>
<body onLoad="iFrameOn();">
<div id ="addtext" class="panel">
<form action="my_parse_file.php" name="myform" id="myform" method="post">
<!-- <div id="rte" contenteditable="true" unselectable="off">Write here ....</div>-->
<div id="menu">
<input type="button" onClick="iBold()" value="B">
<input type="button" onClick="iUnderline()" value="U">
<input type="button" onClick="iItalic()" value="I">
<input type="button" onClick="iFontSize()" value="Text Size">
<input type="button" onClick="iForeColor()" value="Text Color">
<input type="button" onClick="iHorizontalRule()" value="HR">
<input type="button" onClick="iUnorderedList()" value="UL">
<input type="button" onClick="iOrderedList()" value="OL">
<input type="button" onClick="iLink()" value="Link">
<input type="button" onClick="iUnLink()" value="UnLink">
<input type="button" onClick="iImage()" value="Image">
<textarea style="display:none;" name="rte" id="rte" cols="100" rows="14"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>
<br /><input name="myBtn" type="button" value="Submit Data" onClick="javascript:submit_form();"/>
</iframe>
</div>
</div>
</body>
</html>
I was hoping that some can help me.
I am just new to Javascript and Jquery Coding and I made a form under Jquery Mbile and I want to Multiply two input values and on clicking "calculate" button I want to show the result in third box in Jquery Forms. I tried alot but can't figure out what the problem is . Following is my HTML and Javascript file, please help me in solving this problem, Thanks
<!DOCTYPE html>
<html>
<head>
<title>Nitro Motorbike</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="Calculation.js"></script>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
<div data-role="page" data-title="Nitro Motorbike">
<!-- Header-->
<div data-role="header">
<h1>Nitro Motorbike Total Cost Calculation Screen</h1>
<input type="button" value="Home" id="btnAdd" data-inline="true" data-icon="home" data-iconpos="right" onclick="window.location.href='file:///F:/programming%20business%20apps/Assignment/Nitro%20Motorbikemain%20page%20JQuery.html'">
</div>
<!-- Main-->
<div data-role="main" class="ui-content">
</div>
<form name="totalCostForm">
<div class="ui-field-contain">
<label for="txttotalProduction">Total Production (Please Enter Total Number of Bikes Produced) </label><br>
<input type="text" name="txttotalProduction" id="txttotalProduction"> <br>
<label for="txtcostPerBike"> Cost Per Bike</label><br>
<input type="text" name="txtcostPerBike" id="txtcostPerBike"><br>
<label for="txtcalculateTotalCost">Total Cost</label><br>
<input type="text" name="txtcalculateTotalCost" id="txtcalculateTotalCost" Disabled><br>
</div>
<input type="button" value="Calculate" id="btnAdd" data-inline="true" data-icon="check" data-iconpos="right" onclick="process()"> <br> <br>
<input type="button" value="Click here to Proceed" id="btnAdd" data-inline="true" data-icon="carat-r" data-iconpos="right"
onclick="window.location.href='file:///F:/programming%20business%20apps/Assignment/SydneystoreJquery.html'">
</form>
</div>
<!-- Footer -->
<div data-role="footer">
<h4>Copyright Nitro Motorbike</h4>
</div>
</div>
</body>
</html>
(Javascript Function)
function process()
{
if (!ValidateMyForm()) return;
var totalProduction= document.getElementById('txttotalProduction').value;
var costPerBike = document.getElementById('txtcostPerBike').value;
var calculateTotalCost = (totalProduction)*(costPerBike);
document.getElementById('txtcalculateTotalCost').value= calculateTotalCost;
}
I created a Plunker that works just fine when I remove the ValidateMyForm call (since you didn't include it). I'd say your issue lies in:
if (!ValidateMyForm()) return;
Below is my code for a modal window/page. When I click the submit button, however, I want to navigate to the index.html page. I am however, not able to do that although I have made a form and set the action attribute to the page. I also tried navigating to some other links but it does not work.
I am using jquery.leanModal.min.js which I found online after some searching.
How can I navigate upon clicking the submit button?
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Moi modal page</title>
<link rel="stylesheet" type="text/css" media="all" href="../css/style.css">
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/jquery.leanModal.min.js"></script>
</head>
<body>
<div id="topbar"></div>
<div id="w">
<div id="content">
<center>Login to website</center>
</div>
</div>!
<div id="loginmodal" style="display:none;">
<h1>User Login</h1>
<form id="loginform" name="loginform" method="post" action="index.html">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="txtfield" tabindex="1">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="txtfield" tabindex="2">
<div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
</form>
</div>
<script type="text/javascript">
$(function(){
$('#loginform').submit(function(e){
return false;
});
$('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});
</script>
</body>
</html>
Guys I have this html with the following code.It has 2 forms.formA and form B.I have icluded a java script also.I want to make the formB slide down,when I click the link "Internet banking" above form A and when i click on "card payment" vice versa.
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Payment Page</title>
<link rel="stylesheet" href="demo1.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.creditCardValidator.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
this is the javascript I added.
<script type="text/javascript">
$(document).ready(function(){
$("#formA").click(function(){
$("#internet").slideToggle("slow");
});
});
</script>
<div class="demo">
<form id="formA">
Card Payment
Internet banking
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form id="formB">
<div id="internet">
Card Payment
Internet banking
<h2>Internet Banking</h2>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</form>
</div>
</body>
here is the #http://jsfiddle.net/pz83w/5/ demo.Im new to java script,so this is my experiment.Couldsomeone figure how to do this?
You need to modify your function in the following way:
$(document).ready(function(){
$(".tabHeader").click(function(){
$(".form").each(function(){
if ($(this).hasClass('show')) {
$(this).slideUp(400).removeClass('show');
} else {
$(this).delay(400).addClass('show').slideDown();
}
});
});
});
Here is working fiddle - http://jsfiddle.net/pz83w/7/
Remember, since you have two buttons, it's better to use class selector than to use id, same with your forms. That you can add a blank class (like 'show' in the example) to selected item and animate it the way you want.
Fiddle is updated, check HTML section, since I added classes to your forms.
I have a form in which I am disabling all the input fields that is not hidden on jQuery(document).ready(function())
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core" lang="en" xml:lang="en" style="padding-bottom: 8px;">
<script>
jQuery(document).ready(function()
{
jQuery('div#formBuilderPreviewEnrollmentData input[type!="hidden"]').prop('disabled', true);
});
</script>
<h:form id="previewMarketingProgramForm">
<div class="modal-content">
<br /> <br /> <br />
<div>
<h4>Enrollment Form</h4>
</div>
<table cellpadding="0" cellspacing="0" border="1" width="100%" class="results-table">
<tr>
<td>
<div id="formBuilderPreviewEnrollmentData">
<h:outputText value="#{previewMarketingProgramBean.enrollmentFormBean.enrollmentFormContent}" escape="false" />
</div>
</td>
</tr>
</table>
<br /> <br /> <br />
</div>
</h:form>
</div>
Here is the Javascript error:
Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.
Please tell me what could be causing this error. I am using jQuery-1.7.2-min.js
Here is the HTML generated source for this form for your reference:
<!DOCTYPE html>
<html class="ltr" dir="ltr" lang="en-US"> <head> <title>View Article - Liferay</title>
<script src="http://xx:8001/vcc-theme/js/jquery-1.7.2.min.js"></script>
<script src="http://xx:8001/vcc-theme/js/javascript.js"></script>
<script src="http://xx:8001/vcc-theme/js/jquery.tablesorter.min.js"></script>
<script src="http://xx:8001/vcc-theme/js/jquery.tablesorter.pager.js"></script>
<script src="http://xx:8001/vcc-theme/js/jquery.autocomplete.js"></script>
<script src="http://xx:8001/vcc-theme/js/jquery.simplemodal.1.4.2.min.js"></script>
<script src="http://xx:8001/vcc-theme/js/jquery.scrollTo.js"></script>
<script src="http://xx:8001/vcc-theme/js/ui.datepicker.js"></script>
<script>
/*<![CDATA[*/jQuery(document).ready(function()
{
jQuery('div#formBuilderPreviewEnrollmentData input[type!="hidden"]').prop("disabled",true)});
/*]]>*/
</script>
<form id="_jpfcpncuivr_A0169_j_id1:previewMarketingProgramForm" name="_jpfcpncuivr_A0169_j_id1:previewMarketingProgramForm" method="post"
action="http://xxx/yyy.do">
<div class="modal-content">
<br /> <br /> <br />
<div> <h4>Enrollment Form</h4> </div>
<table cellpadding="0" cellspacing="0" border="1" width="100%" class="results-table">
<tr>
<td>
<div id="formBuilderPreviewEnrollmentData">
<p> NAME: <input class="required" name="NAME" type="text" /></p> <p> </p>
<p> AGE: <input name="AGE" type="text" /></p> <p> </p>
<p> ADDRESS:<textarea name="ADDRESS"></textarea></p>
</div>
</td>
</tr>
</table>
<br /> <br /> <br />
</div>
</form>
</html>
I am getting this JS error in IE 7 (works fine in Firefox)
try this
<script>
jQuery(document).ready(function()
{
jQuery('div#formBuilderPreviewEnrollmentData input[type!="hidden"]').attr("disabled", true)
});
</script>
Just to make sure, you want to disable the inputs that are not of type="hidden" or you want to disable the inputs thats are not visible on screen (css style display:none). There's a big difference between the two and the jquery selector would be different to.