This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to use Twitter Bootstrap popovers for jQuery validation notifications?
Trying to use bootstrap's styles for form validation.
I'm using this javascript validator, that was customized for bootstrap:
https://github.com/ddarren/jQuery-Live-Form-Validation-For-Twitter-Bootstrap
In the head:
<link href="bootstrap.css" rel="stylesheet">
<script src="jquery.validate.js" type="text/javascript">
In the body:
<form id="Form" action="" method="post">
<div class="control-group">
<input type="text" class="span3" id="Mobile" placeholder="Mobile
Phone Number" name="Mobile">
</div>
<div class="control-group">
<button type="submit" class="btn btn-primary btn-large">Submit
</button></p>
</div>
</form>
And it doesn't highlight the fields with bootstrap's error styles. Any ideas where I'm going wrong? Thanks in advance.
I'm working on something similar so I think I might help you.
First of all, jQuery-Live-Form-Validation-For-Twitter-Bootstrap library is quite old (September of 2009).
It uses version 1.3.2 of jQuery (the newest is 1.7.1) and it doesn't use the original Bootstrap files at all!
If you downloaded jQuery-Live-Form-Validation-For-Twitter-Bootstrap (what I am sure you did) from github site you can easily check in css folder that there are two css files written by the author of that library.
Answering to your question, I downloaded that lib and I've pasted your code and... it works. Simply, you need to have in head this (and that files in folders):
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.validate.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
<script src="lib/jquery/jquery-1.3.2.js" type="text/javascript">
</script>
<script src="javascripts/jquery.validate.js" type="text/javascript">
</script>
what is originally taken from jQuery-Live-Form-Validation-For-Twitter-Bootstrap.
If you really want to have Twitter Bootstrap form validation with jQuery I would like to recommend you using combined Twitter Bootstrap and jQuery Validation Plugin.
I am working on it now and it works perfectly.
Related
I am pretty new to AEM. I am following this tutorial from the official documentation. I already did it from top to bottom, but now I am trying to do it again but using Eclipse, Maven and Sightly instead of JSP.
I've been following until the step "Using your own scripts". As I am trying to use Sightly instead of JSP I've ended up with the following files:
contentpage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<div data-sly-include="head.jsp" data-sly-unwrap></div>
<div data-sly-include="body.jsp" data-sly-unwrap></div>
</html>
body.jsp
<%#include file="/libs/foundation/global.jsp"%>
<%
%><body>
<div id="CQ">
<div class="topnav">topnav</div>
<div class="content">
<cq:include script="left.html" />
<cq:include script="center.html" />
<cq:include script="right.html" />
</div>
<div class="footer">
<div class="toolbar">toolbar</div>
</div>
</div>
</body>
left.html
<div class="left">
<div>logo</div>
<div>newslist</div>
<div>search</div>
</div>
center.html
<div class="center">
<div>trail</div>
<div>title</div>
<div>parsys</div>
</div>
right.html
<div class="right">
<div>iparsys</div>
</div>
In addition, the node apps/myproject/components/contentpage has an attribute sling:resourceSuperType="foundation/components/page" so it is inheriting from the page component provided.
Everything works as expected, but as I said before, I am trying to use only Sightly, but at the moment I've got the file body.jsp, which I think I need it to be JSP so it has the same name as /libs/foundation/components/page/body.jsp.
Is there a way to get rid of the body.jsp and use a sightly script instead? I suspect that maybe there is a components/page/body.html somewhere, but no idea where to look for it (in case it really exists).
Thanks.
As commented by rakhi4110, and as I suspected, there is a sightly version of the page component. It is located in wcm/foundation/components/page so the only thing to do is inherit from it instead of foundation/components/page.
This is a link to an article that put me on track, in case is useful for somebody else: http://scottwestover.blogspot.co.uk/2015/04/aem-tutorial-on-building-sightly-page.html
Hy There...!
I have some problems when its come to Jquery ..............
Here i am trying to use TinyMCE Text Editor... I had download its Js File and some code with it mention it in there site...
But When i see my index.HTML it is all Blank.....
Which i don't understand Please Any Help or hint will be appreciated........
Thanks in Advance ... Here Is The Code
<html>
<head>
<script type="text/javascript" src="tinymce.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
</head>
<body>
<form method="post" action="index.html">
<textarea name="content" style="width:100%" class="mceEditor"></textarea>
</form>
</body>
</html>
I believe you are not linking the tinymce.js file correctly. Make sure it's linked correctly relative to the directory of index.html file.
I used the same markup you provided and made it work in jsFiddle using the script from TinyMCE CDN.
http://jsfiddle.net/AHXXT/
I want to add default re-captcha plugin to my joomla website.
I write the following code:
//php code
JPluginHelper::importPlugin('captcha');
$dispatcher = JDispatcher::getInstance();
$dispatcher->trigger('onInit','dynamic_recaptcha_1');
//html code
<div id="dynamic_recaptcha_1"></div>
But nothing is displayed!! I tried to find a lot but couldnt get a solution. Any help will be appreciated. Thn.
Have you enabled the captcha plugin in extensions->plugins?
You will also have to fill in the private and public keys in the plugin.
You could try adding client-side validation to your form.
http://docs.joomla.org/Client-side_form_validation
e.g.
JHTML::_('behavior.formvalidation');
<form class="form-validate"> ... </form>
<field name="email" type="text" class="required validate-email" size="30" />
//For radios make sure the class is applied to the options:
<field name="ThisorThat" type="radio" label="Please say if it was full-time or the part-time equivalent?" >
<option value="This" class="required">This</option>
<option value="That" class="required">That</option>
</field>
Then as long as you have ReCaptcha selected as your default Captcha in your Global config it should show up.
Let me know if it works!
Joomla often uses MooTools library.
Try to insert again
<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/plugins/captcha/idcaptcha/idcaptcha.js" type="text/javascript"></script>
before
<div id="dynamic_recaptcha_1"></div>
Ok so I'm fairly new to dojo and I'm trying to make a really simple sample mobile app. I'm using eclipse to run the code which uses an android emulator to install/run the app. The problem I'm having is that I keep getting Uncaught Reference Errors for either "require is not defined" or "dojo is not defined", causing my app to appear as plain text instead of formatted like an android app using dojox.mobile widgets.
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
minimum-scale=1,user-scalable=no"/>
<title>PhoneGap</title>
<!-- DOJO -->
<script src="/assets/www/lib/dojo/dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad:true">
</script>
<link rel="stylesheet" href="/assets/www/lib/dojo/dojox/mobile/themes/android/android.css"
type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="/assets/www/cordova-1.6.0.js"></script>
<script>
require(["dojo"], function(dojo) {
dojo.require("dojox/mobile")
dojo.require("dojox/mobile/parser")
});
</script>
</head>
<!-- END DOJO -->
<body>
<!-- ACCIDENT TOOLKIT PAGE -->
<div data-dojo-type="dojox.mobile.View" id="accHelp" selected="true">
<h1 data-dojo-type="dojox.mobile.Heading">Accident</h1>
<div class="text">If you are in an accident, you should first move to a safe
location. Below are some additional actions you can take:</div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem"
onclick="window.location='geo:0,0?q=police';">Call the Police</li>
<li data-dojo-type="dojox.mobile.ListItem"
onclick="window.location='geo:0,0?q=towing';">Call for a Tow Truck</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
onClick="itemClicked();">Exchange Driver Info</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
onClick="itemClicked();">Record Accident Location</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
onClick="itemClicked();">Take Photos of Accident</li>
</ul>
</div>
<!-- EXCHANGE DRIVER INFO PAGE -->
<div data-dojo-type="dojox.mobile.View" id="accInfo">
<h1 data-dojo-type="dojox.mobile.Heading" back="Accident" moveTo="accHelp"
onClick="console.log('Going back');">Driver</h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Other Driver Info</h2>
</div>
<script>
function itemClicked() {
console.log("itemClicked()");
}
</script>
</body>
</html>
Does anything appear wrong with the code itself? Especially where I'm using the script scr... to point to the dojo.js and where I'm using require to call the dojo.mobile functions. I was under the impression that as long as the src pointed to the right location in the package tree, it didn't much matter where I copied the file in.
I have tried using the Google CDN to call dojo.js, but the emulator throws errors when I do so, possibly because it doesn't utilize an internet connection?
Any help would be great!
Try removing /assets/www/ from your local URLs
Your require statement looks like this:
require(["dojo"], function(dojo) {
dojo.require("dojox/mobile")
dojo.require("dojox/mobile/parser")
});
And it should look something like this:
require([
"dojo/mobile",
"dojo/mobile/parser"
],
function(mobile, parser) {
// your code here;
});
I am using jQuery 1.6.4 with jQuery Mobile 1.0.1. I am running into an issue anytime you link to a page that then tries to do a 301 redirect.
I've setup a sample page at: http://www.widgetsandburritos.com/jquery-mobile-test/
The only thing on this page is the jQuery Mobile includes and a link to another page that has a 301 redirect somewhere else.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
301 test
</body>
</html>
301test.php has the following content:
<?php
header( "HTTP/1.1 301 Moved Permanently" );
header( "Location: 301success.html" );
?>
This should just simply pass the browser to 301success.html. It works if you directly go to that URL
http://www.widgetsandburritos.com/jquery-mobile-test/301test.php
But when you click on the link from the page using jQuery Mobile, it shows "undefined" instead. Is jQuery Mobile currently incapable of handling redirects?
Any possible work arounds?
Thanks for your help.
EDIT [3/23/12 12:41AM CST]
I also posted this problem on the jQuery Mobile forums. Somebody there recommended adding rel="external" to the anchor tag. This technically works if all you are doing is making a link, but won't fix the issue if you get to the redirect via some other mechanism, such as a POST request.
To illustrate, I've setup a secondary test at http://www.widgetsandburritos.com/jquery-mobile-test/test2.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<form method="post" action="301test.php">
<input type="submit" value="test" />
</form>
</body>
</html>
Instead of arriving at the 301test.php redirect page from a link, it's now the location of a form we're submitting to. The context this would be used, would be such that if you submit a form with errors, it would stay on the same page allowing you to correct the errors. If there were no errors, it redirects you to a success page. This is done to avoid submitting the form again if a user refreshes their browser. It works brilliantly in normal web applications. But in combo with jQuery Mobile it doesn't seem to work.
Just thought I'd give some additional context to anyone else following this issue.
Figured out the answer to my own problem. In the above, I mentioned that this was causing problems using the <form> tag. After browsing through the jQuery Mobile documentation I found this page: http://jquerymobile.com/test/docs/forms/forms-sample.html
The trick here is if you're doing a form, to force it to not use AJAX. You do this by adding
data-ajax="false" to the FORM tag.
So this changes
<form method="post" action="301test.php">
to
<form method="post" action="301test.php" data-ajax="false">
And just to reiterate what was said above. If you need to do something with an anchor link, just add rel="external" to it.
So this changes
301 test
to
301 test
The issue is deeper. Take a look here or here.
It seems that XMLHttpRequest object (the one used for doing AJAX requests) handles redirects on its own and returns the final response. Which means that jQuery Mobile can't know that it should update the URL.
The solution is to use the data-url attribute on the final page. It forces jQuery Mobile to update the URL in the browser. Kind of a workaround but far from being a hack.
By the way there are more issues with jQuery Mobile, AJAX and redirects - for instance if you click the browser's back button after an AJAX-redirect, jQuery Mobile (up till 1.1) might produce a final page under the URL of the redirecting page. Therefore using data-ajax="false" is a wise choice.
EDIT:
But even data-ajax="false" is not a bullet-proof solution. Using it splits your mobile app into multiple browser pages, which brings all sorts of browser differences to the party. For instance Firefox has so called bf cache whereas Chrome doesn't. This is an unholy mess and I'm starting to think that something like Sencha Touch is much better suited for developing pages that pretend to be mobile apps.
EDIT 2:
Alternatively, one could avoid regular form submissions and use own AJAX code for that and then switch pages based on the result, but I cannot resist thinking that it's 2012 and such things should automated and work flawlessly without sweating.
I'm currently building an application but even though I am logged in, I stay on the login page, and I do not get redirected. I used the data-ajax="false"
this is the code of the form:
<section id="login">
<h2>Want to take a ride? <span>Login</span></h2>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" data-ajax="false">
<?php if(!empty($feedback_error)): ?>
<div id="feedback_error">
<p><h1><?php echo $feedback_error ?></h1></p>
</div>
<?php endif; ?>
<input id="username" type="text" name="username" placeholder="username" />
<input id="password" type="password" name="password" placeholder="password" />
<p>Not yet signed up? <a href="register.php" >Register</a></p>
<input type="submit" name="btnLogin" data-theme="b" value="Sign in">
</form>
</section>