I'm designing a page that is supposed to allow users to submit possible computing science projects and at one stage the user will have to enter a duration that the project will run over. To make things easier on the user the I'm trying to fill out the from: to: fields using jQuery's datepicker method however I cannot get the script to run when the user selects the appropriate field.
So far I've got the following script:
<h:outputScript library="jquery" name="jquery-1.9.1.js"/>
<h:outputScript library="jquery" name="jquery-ui-1.10.3.custom.js"/>
<h:outputScript library="jquery" name="jquery-ui-1.10.3.custom.min.js"/>
<h:head>
<title>Add project</title>
<script type="text/javascript" id="setDate">
$(function() {
$(" #datepicker ").datepicker();
});
</script>
<!-- rest omitted for readability -->
and my h:inputText looks like this:
<h:inputText id="setDate" value="" onclick="$('#datepicker').datepicker();"/>
<p>Date: <input type="text" id="datepicker" /></p>
I did try to make it work without using any jsf tags and managed to get it up and running but I just can seem to make it work with jsf tags.
The problem is that when in a browser the jQuery datepicker widget does not display upon clicking on the field. Clicking on the field defined using the standard <input> tag works correctly.
Any help is greatly appreciated, thanks.
<script type="text/javascript">
$( document ).ready(function() {
function openDatePicker(){
$("#datepicker").datepicker();
}
});
</script>
<h:inputText id="setDate" value="" onclick="openDatePicker();"/>
<p>Date: <input type="text" id="datepicker" /></p>
Hope this will work for you (havent tried it out).
I managed to solve my problem in the following way:
Changed my script to:
<script type="text/javascript">
$(document).ready(function() {
$(".datepicker").datepicker({
});
});
</script>
and my jsf tag to:
<h:inputText styleClass="datepicker"/>
Now the datepicker widget will display when I select the field. Thanks to DannyThunder for putting me on the right track.
This was the answer for me:
<script>
jQuery(document).ready(function($) {
$('#signup-form\\:email').checkEmailFormat();
});
</script>
And for Primefaces:
<script>
jQuery(document).ready(function($) {
$(PrimeFaces.escapeClientId('signup-form:emil')).checkEmailFormat();
});
</script>
I got the information from mkyong.com
Best regards
Related
I am trying to use XD DateTimePicker to show up a calendar, using a code as a reference at the link DateTimePicker jQuery plugin select date and time . The title is "Inline DateTimePicker Example ". But, although each buttons appeared, the calendar didn't work.
Here is the code I use of Javascript:
$(function() {
$('.datetimepicker3').datetimepicker({
inline:true
} ;
})
HTML:
<input type="text" class="datetimepicker3">
Here is a picture of current result of mine:
I will appreciate if you could tell me how to manage it.
You are using a class instead of a ID to select the calenedar. It should be
$('#datetimepicker3').datetimepicker({ inline:true });
An you need that ID included in your HTML markup, example:
<html>
<body>
<div id="datetimepicker3"></div>
</body>
</html>
Do not forget to include JQuery before the datetimepicker library
does it make any difference when you put it in a doc ready? Example:
$(document).ready(function()
{
$('.datetimepicker3').datetimepicker({
inline:true
} ;
});
I feel like youre trying to run code before it's ready, meaning it won't work correctly.
As others stated, a proper code preview would help too.
I'm so sorry to bug you guys. I ended up expressing my current situation in codepen. Here is the thing.
HTML:
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.datetimepicker.full.min.js"></script>
<input type="text" id="datetimepicker3">
<script type="text/javascript" src="xd.js"></script>
Javascript:
jQuery('#datetimepicker3').datetimepicker({
format:'d.m.Y H:i',
inline:true
});
Can't I put a link of codepen in this textarea? I was trying , but it couldn't. So, I wrote down my code directory.
This question has been asked a lot it seems on Stack Overflow but none of the solutions seem to be working. I am developing a web application where I have to fill in data in data fields on page load. Here is my code:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<input type="text" id="datetime" value="" />
<script type="text/javascript">
$(document).on("pageload",function(){
//for fill field
document.getElementById("datetime").value = "here is value";
});
</script>
</body>
</html>
For some reason, when I load the page, no data gets filled in, does anyone see the reason for it?
You don't need jQuery. Try this:
<!DOCTYPE html>
<html>
<body>
<input type="text" id="datetime" value="" />
<script>
window.onload = function() {
document.getElementById('datetime').value = 'here is value';
};
</script>
</body>
</html>
What version of jquery are you using? Looks like pageload might deprecated and you should use pagecontainerload
Or better yet use the $(document).ready or .load methods?
In Jquery it's called document ready event... So use the below syntax.
$(document).ready(function(){
//for fill field
$("#datetime").val( "here is value");
});
Note the inner line of code has been changed.. This is the Jquery way of doing the same thing...
You can also use this Shorthand to $(document).ready(function(){
That is $(function(){
i am trying to get a value in input box automatically by clicking button "get name", from database. how can i implement it...?
my so far work is below...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var n = $("#div2").load("getTotal.html #p1").val();
$("#div2").val(n);
});
});
</script>
</head>
<body>
<input type="text" id="div2" value=""/>
<button>Get Name</button>
</body>
</html>
and getTotal.html page contents...
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">John D. Feller</p>
in doing so.... i am getting an error "[object, Object]".
Help me out....with this error and advice me how can i take values from database.
Issues in the code:
1) $("#div2").load(...) doesn't make much sense because it's telling jQuery to pull the content of the URL as HTML content of #div2. Here #div2 is an input which is not supposed to have HTML content. http://api.jquery.com/load/
2) You may want to load only the content of #p1 by using getTotal.html #p1, but this syntax won't work as you expected. jQuery can only pull the full content of getTotal.html, then you need to extract content of #p1 from it.
Assuming getTotal.html page is in same directory as your main page, the JS code can be modified to:
$(document).ready(function(){
$("button").click(function(){
$.get("getTotal.html", null, function(text) {
$("#div2").val($(text).filter("#p1").html());
});
});
});
I went through almost every question in this feed( I like to think so). But my jquery datepicker is not working. I dont know its been a while since im trying to make it happen and so i went through maximum tutorials and everything seems just fine with my code. Heres my code
<input type="text" id="datepicker" class="datePicker" readonly="true">
and my jquery:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "#datepicker" ).datepicker();
});
</script>
Do i need to include other script sources too?? This is all i have done and i dont know what went wrong. Somebodys gotta help me..
add the jquery-ui css in your link.
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css
And you should the delete readonly="true" of input.
<input type="text" id="datepicker" class="datePicker">
I create this tiny JS so i can control the form submit with jQuery
$('#submit').click(function() {
$('#addForm').submit();
});
Can I use a simple href link for it?
Something like
link
I tried
link
but it didn't work (it by pass the other jQuery in the page)
If you want the JS that you created to control the submit, don't have a href value in your link:
<a id="submit">link</a>
You cannot submit your form that way with a link and some javaScript, even jQuery. You have to use an XHR call to submit your query AND not refresh the page. (you can submit your form with a link as presented by Dan, but I understand that you want to do more than just that from your questions)
The reason being that the "return false" statement will impact the link action, and not the form submission itself.
In any case, I would advise you to not use a link to submit your form at all.
You can easily submit a form with the normal submit button and a bit of jQuery. That way, you provide a nice fallback to your users that have not enabled javaScript.
You can even submit the form with some client side validation, using the following HTML / javaScript:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#addForm').submit(function(){
validate();
ajax_submit_function_taking_form_data_as_argument($(this).serialize());
return false;
});
});
function validate(){
//Do some client side validation if required
}
function ajax_submit_function_taking_form_data_as_argument(theData){
$.ajax({
type: 'GET',
url: "http://search.google.com/",
data: theData,
error: function(e){
alert('error...');
},
success: function(data){
alert('success!');
}
});
}
</script>
<style type="text/css"></style>
</head>
<body>
<form id="addForm">
<input type="text" name="field1" value="" />
<input type="submit" value="submit" />
</form>
</body>
</html>
A last solution, albeit maybe too heavy weight for your use, would be to use the excellent jQuery form plugin from http://jquery.malsup.com/form/
I hope that helps!
You can attach to the click event with jquery. It's also cleaner not to put any javascript in your html.
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#aSubmit').click(function(){
$('#form1').submit();
return false;
});
});
</script>
<style type="text/css"></style>
</head>
<body>
<form id="form1" action="http://www.google.com/search" name=f>
<input name="q" />
</form>
submit
</body>
</html>
Never ever put JavaScript in the href attribute. If you must put in the HTML, use the onclick attribute, and remember to add return false. Also, never ever prefix script with javascript:.
Your first script block should do the job just as fine as well, though.
(And what does "it by pass the other jQuery in the page" mean?)