Assume the following simple HTML:
<html>
<head><title>Test</title>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<link href="css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<href="#" id="doExport">Export Now</a>
<div id="exportPopup">
<p>From: <input type="text" id="dateFrom" /></p>
<p>To: <input type="text" id="dateTo" /></p>
</div>
</body>
</html>
Now also assume that there is CSS that styles #exportPopup appropriiately and sets it to display:none initially. This brings me to two questions:
How do I make that hidden DIV (#exportPopup) show up right where the #doExport link is clicked?
How do I use the JQuery datepicker on those two input boxes?
For Question 2 I have already tried this:
$(document).ready(function (e) {
$("#dateFrom").datepicker();
$("#dateTo").datepicker();
});
and it just doesn't work when I click those boxes. I hope someone can enlighten me.
I have created a rough model at http://jsfiddle.net/santoshjoshi/32enE/1/
so basically used the jQuery dialog plugin you need to add following code open the dialog box
HTML Code
Export Now
<div id="exportPopup" style='display:none'>
<p>From: <input type="text" id="dateFrom" /></p>
<p>To: <input type="text" id="dateTo" /></p>
</div>
JavaScript Code
$(document).ready(function (e) {
$("#dateFrom").datepicker();
$("#dateTo").datepicker();
});
$( "#doExport" ).click(function() {
$( "#exportPopup" ).dialog( );
});
also please have a look at jQuery dialog documentation to customize your popup/dialog
http://api.jqueryui.com/dialog/
'UPDATE'
used following resources
http://code.jquery.com/ui/1.10.3/jquery-ui.js
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css ' Theme is smoothness'
Related
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
<input id="test" value="">
<input type="button" id="btn" value="Get">
</body>
</html>
And JS:
$('#btn').click(function(){
alert(document.documentElement.innerHTML);
});
http://jsbin.com/wuveresele/edit?html,js,output
I want to enter some value (for example, 123) into input field, click button and see "rendered" html code of the page in an alert popup.
What I see:
...
<input id="test" value="">
...
What I want to see:
...
<input id="test" value="123">
...
Is it possible using JS or JQuery?
Here's what I added to your JS
$('#btn').click(function(){
$("#test").attr("value",$("#test").val());
alert(document.documentElement.innerHTML);
});
What I'm essentially doing is using the Jquery attr() function.The first parameter refers to the attribute you want to manipulate and the second attribute is the value to be given.
Here is the working demo
Here is your solution:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var value = $("#test").val()
alert(value);
});
})
</script>
<input id="test" value="">
<input type="button" id="btn" value="Get">
I create a login form in popup box. When the username field is left blank, an error message will appear to notify the user to fill in the empty username field. As a test, I click on the login button leaving the username field, and the message appears in the popup box as expected. But the problem is the popup box is closed immediately.
So, my question is how do I keep the popup box open with the error message shown?
Here is my script:
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Modal Login Window Demo</title>
<link rel="shortcut icon" href="http://designshack.net/favicon.ico">
<link rel="icon" href="http://designshack.net/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="http://designshack.net/tutorialexamples/modal-login-jquery/style.css">
<script type="text/javascript" src="http://designshack.net/tutorialexamples/modal-login-jquery/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://designshack.net/tutorialexamples/modal-login-jquery/js/jquery.leanModal.min.js"></script>
</head>
<body>
<div id="w">
<div id="content">
<center><a href="#loginmodal" class="flatbtn" id="modaltrigger">Modal Login</a</center>
</div>
</div>
<div id="loginmodal" style="display:none;">
<?php
if($_POST["loginbtn"]){
if(!$_POST["username"]){
echo "<center><font color=red>please fill your username</font></center>";
}elseif(!$_POST["password"]){
echo "<center><font color=red>please fill your password</font></center>";
}
}
?>
<h1>User Login</h1>
<form method="post">
<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>
The closeButton option will always cause the modal to be closed when the corresponding button is clicked. And looking at the leanModal source, there doesn't seem to be any direct way to manipulate its event-handling callback.
So if all you want to do is to keep the form modal opened if the fields are not filled, and let your server-side codes perform the validation you can just do the following:
$('#loginform').submit(function(e){
if(!$('#username').val()) {
$('#loginmodal').show();
}
else
console.log("Enter your username");
return false;
});
Live demo on jsfiddle. Notice that I added an id to the form tag, and fixed some of the malformed HTML tags in the fiddle.
Haven't had a chance to test but try stopping the propagation of the click function, doing that tells the browser to not complete the default action for this event.
$('#loginbtn').click(function(e){
if(!$('#username').val()){
e.stopPropagation();
}
});
or as the other answer suggests try using jquery validation which will help in getting all this to work much more easily I like to use: http://jqueryvalidation.org/
This appears to be very similar to this question: How to force a html5 form validation without submitting it via jQuery
That answer assumes that you would be adding the required attribute to the necessary form elements, and also that you use a polyfill such as html5shiv if old browser support is a requirement.
use jquery validationEngine. It is a good one for your requirement.
See demo here
You have some missing information in the sample html, the form ID is missing therefor jQuery will not attach to it.
I handle this situation by using AJAX for the form action with a json response.
Here is an example from one of my recent apps... Notice the event.preventDefault() method to keep the form from submitting.
$(function () {
jQuery('body').on('submit', '#frmlOGIN', function (event) {
event.preventDefault();
jQuery.post("?action=ajax_signup", jQuery("#frmlOGIN").serialize(), function (data) {
if (data.status == "OK") {
jQuery("#modal_content").html(data.content);
} else {
jQuery("#error_message").html(data.response);
}
});
});
$('#modaltrigger').leanModal({
top: 110,
overlay: 0.45,
closeButton: ".hidemodal"
});
});
Here is a jsfiddle example.
http://jsfiddle.net/LqmzwwL3/
I am using jQuery 1.10.1 with migrate, jQueryUI 1.10.3, jQueryValidate 1.11.1.
Just using a simple form, it has two fields. On submit if values are not provided then a dialog box is displayed with a message.
Issue: In IE 10 When user tries to move (drag) the error message dialog box it just moves down. This only happens when vertical scroll bar is appears in the browser window.
Verified in Chrome 27 it works. Sometimes gives the same issue in Firefox 21 and Opera 12.15.
Note: It works fine with jQuery UI 1.10.2 only issue is there in 1.10.3.
Sample Source
<html>
<head>
<style type="text/css">
.label {width:100px;text-align:right;float:left;padding-right:10px;font-weight:bold;}
.label1 {width:350px; text-align:right; padding-top:300px;padding-bottom:30px; font-weight:bold; }
</style>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script> -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>
$(function() {
$("#register-form").validate({
rules: { firstname: "required", lastname: "required" },
messages: { firstname: "Need First Name", lastname: "Need Last Name" },
showErrors: function(errorMap, errorList) {
$("#diverror").dialog({ modal: true });
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<form method="post" id="register-form">
<div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
<div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
<div class="label1">Making page to scroll. Scroll down to submit</div>
<div class="label1">Making page to scroll. Scroll down to submit</div>
<div class="label1">Making page to scroll. Scroll down to submit</div>
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
</form>
<div id="diverror" title="Basic dialog"><p>This is the default DIVERROR which is useful for displaying information.</p></div>
</body>
</html>
Verified jQuery UI website, its a bug in jQuery UI.
Ticket# 9354: http://bugs.jqueryui.com/ticket/9354
Ticket# 9315: http://bugs.jqueryui.com/ticket/9315
I cant get jquery's date picker to work on my page. I have a forum post on codecall if anyone wants more details. Here's a link http://forum.codecall.net/topic/70462-copy-and-paste-date-picker-javascipt/. Here's my code that is associated with this page. When I click the text fields the datepicker doesn't show up. Why? Can anyone see the problem?
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});
<div id="dateField">
<p>
Start Date: <input type="TEXT"
name="start_date" id="startDate"
value="" />
</p>
<p>
End Date: <input type="TEXT"
name="end_date" id="endDate"
value="" />
</p>
<small>Dates Should be in the format DD/MM/YYYY</small>
</p>
</div>
Switch your Id and name tags around. An ID attribute has to be inside of the $('ID').datepicker() , not name.
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});
</script>
<div id="dateField">
<p>
Start Date: <input type="TEXT"
id="start_date" name="startDate"
value="" />
</p>
<p>
End Date: <input type="TEXT"
id="end_date" name="endDate"
value="" />
</p>
<small>Dates Should be in the format DD/MM/YYYY</small>
</p>
</div>
Wrap your jQuery UI datepicker code in a <script> tag, and mark it as javascript with the type attribute. Use a single document ready block for your two datepicker calls. Ensure you're using the correct IDs of your elements.
<script type="text/javascript">
$(document).ready(function() {
$("#startDate").datepicker();
$("#endDate").datepicker();
});
</script>
i am trying to use a date picker, but i am not sure how to pass the selected value to my textbox. I am using
http://docs.jquery.com/UI/Datepicker
Also i am using the datetime picker used here
http://plugins.jquery.com/node/2795/release?api_version%5B%5D=59
it says the CSS is attached but i dont see it and my datetime picker is not styled, here is my code
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascript/ui.datetimepicker.js"> </script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script>
$(document).ready(function() {
$("#datetimepicker").datepicker();
});
<body>
<div id="content" class="divContent">
<div id="mainContent" class="divMainContent" style="text-align: left;">
<p>Reservations and RSVP for logged users<p>
<div id="datetimepicker"></div>
<input type="text" name="date" />
</div>
</div>
</body>
Apply the datepicker to the input element, not the div
<input type="text" id="myDateTime" name="date"/>
Apply datepicker
$('#myDateTime').datepicker();
You don't have to pass the value to your textbox.
You're using datepicker in the wrong element, you should do this:
$("#InputTextIDHere").datepicker();
.datepicker(); should be applied on the input box, not on the div,
<input id="datepick" name="datepick" type="text />
jQuery( "#datepick" ).datepicker();