JQuery DataPicker add on the - javascript

I want to put datepicker on my Application . Can you guys please help me?. I don't have much knowledge on JQuery . Do I need add any Extra Plugin for that or Just type put only the coding??.This is the coding I using for that.
<html xmlns="http://www.w3.org/1999/xhtml">
<%#include file="header.jsp"%>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$('#example6').datetimepicker({
showSecond: true,
timeFormat: 'hh:mm:ss',
stepHour: 2,
stepMinute: 10,
stepSecond: 10
});
</script>
</head>
<div id="templatemo_content_right">
<h1>Login Form</h1>
<center>
<form action="LoginServlet" method="POST" id="theform" name="theform">
<table cellspacing="20" cellpading="10">
<tr>
<td>Department Id:</td>
<td><input type="text" name="departmentId" id="userName"/></td>
</tr>
<tr>
<td>Department Name:</td>
<td><input type="password" name="departmentName" id="password"/></td>
</tr>
<tr>
<td>Department Name:</td>
<td><input type="password" name="departmentName" id="password"/></td>
</tr>
<tr>
<td>Appointed Date:</td>
<td><input id="example6" type="text"></td>
</tr>
<tr>
<td><input type="submit" value="Login"/></td>
</tr>
</table>
</form>
</center>
<div class="cleaner_with_height"> </div>
</div> <!-- end of content right -->
<%#include file="footer.jsp" %>
</html>

You need to add the jQuery UI script:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
Add it right after the jQuery script tag.

Between the load of jQuery and your script, you need to load the plugin. Or I missed something. Also, for future reference, if you get stuck, create a jsfiddle

Related

changing model objects inside controllers to manipulate DOM objects

So I am learning how to use controllers in angularjs and I am stuck. I created a form using html and tested to see if the controller was responding to the html through the data-binded attribute "message". However "enter your details" does not appear under "Add Event" in the browser. Am I missing something in my code? Is there somewhere in the app.module folder where I should declare a constructor? Let me know your thoughts.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h3>Add Event</h3>
<div ng-app='eventForm' name='AddEventForm' ng-submit='AddEvent();' ng-controller='eventsCtrl'>
{{message}}
<table>
<tr>
<td>Event Name</td>
<td><input type="text" ng-model="event.Name" required /></td>
</tr>
<tr>
<td>Event Location</td>
<td><input type="text" ng-model="event.Location" required /></td>
</tr>
<tr>
<td>Event Description</td>
<td><input type="text" ng-model="event.Description" required /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="submit" ng-disabled="AddEventForm.$invalid"></td>
</tr>
</table>
</div>
<script>
var eventForm = angular.module('eventForm', []);
eventForm.controller('eventsCtrl', function($scope) {
$scope.message = 'Enter your details';
$scope.addEvent = function()
{
}
});
</script>
</body>
</html>
You can like this following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h3>Add Event</h3>
<form
ng-app="eventForm"
ng-controller="eventsCtrl"
name="AddEventForm"
ng-submit="AddEvent()"
>
{{ message }}
<table>
<tr>
<td>Event Name</td>
<td><input type="text" ng-model="event.Name" required /></td>
</tr>
<tr>
<td>Event Location</td>
<td><input type="text" ng-model="event.Location" required /></td>
</tr>
<tr>
<td>Event Description</td>
<td><input type="text" ng-model="event.Description" required /></td>
</tr>
<tr>
<td colspan="2">
<button type="submit" ng-disabled="AddEventForm.$invalid">
Submit
</button>
</td>
</tr>
</table>
</form>
<script>
var eventForm = angular.module("eventForm", []);
eventForm.controller("eventsCtrl", function($scope, $log) {
$scope.message = "Enter your details";
$scope.AddEvent = function() {
$log.log($scope.event);
};
});
</script>
</body>
</html>
I think you should to use form tag in this situation:
<form ng-app='eventForm' name='AddEventForm' ng-submit='AddEvent();' ng-controller='eventsCtrl'>

onClick enable form

I have problem when i want show form edit
<!-- this is form-->
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<% while(resultset.next()){ %>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td><%= no %></td>
<td><input id='f1' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(2)%>'></td>
<td><input id='f2' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(3)%>'></td>
<td><input id='f3'class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(4)%>'></td>
<td><input id='f4' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(5)%>'></td>
<td><input id='f5' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(6)%>'></td>
<td><input id='f6' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(7)%>'></td>
<td><a id='elementId' onclick="showDiv()"><span class='glyphicon glyphicon-pencil'></span></a> <input type='submit' id="welcomeDiv" style="display:none;"></td>
<td><span class="glyphicon glyphicon-trash"></span></td>
</tr>
</form>
</tbody>
<% no++; } %>
</table>
The form will enable when the glypicon edit click. Here is the
JAVASCRIPT :
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('#elementId').click(function(){
$('#f1').removeAttr("disabled");
$('#f2').removeAttr("disabled");
$('#f3').removeAttr("disabled");
$('#f4').removeAttr("disabled");
$('#f5').removeAttr("disabled");
$('#f6').removeAttr("disabled");
$('#f7').removeAttr("disabled");
});
</script>
when <a id='elementId' onclick="showDiv()"><span class='glyphicon glyphicon-pencil'></span></a> <input type='submit' id="welcomeDiv" style="display:none;"> click
for first row, work.
but for the second row like this
You are repeating the same id on one page. You must use only one id on a page. You can use the same class multiple times but not id.
Basically when you click on AAA then it is removing the class "aaa" from input field. You can check it with Firebug . It is not showing or popping up anything in it. But I have written a new code. It will enable and disable the input
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td>1</td>
<td><input type="text" class="aaa" value ="kool" disabled="disabled"/></td>
<td><input type="text" class="aaa" value ="fool" disabled="disabled"/></td>
<td class="abc">AAA</td>
</tr>
</form>
</tbody>
</table>
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('.abc').click(function(){
$(this).closest('tr').find('.aaa').attr('disabled',false);
});
</script>
box.
A small example to do for this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td>1</td>
<td><input type="text" class="aaa"/></td>
<td><input type="text" class="aaa"/></td>
<td class="abc">AAA</td>
</tr>
</form>
</tbody>
</table>
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('.abc').click(function(){
$(this).closest('tr').find('.aaa').removeClass('aaa');
});
</script>
In this way you are just referring to closest element of click.You can modified any content based on this. Please feel free to ask any query, if you face any problem in it. I just shared an example for execution for this.
This is applicable for any number of rows in a table.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td>1</td>
<td><input type="text" class="aaa" value ="kool" disabled="disabled"/></td>
<td><input type="text" class="aaa" value ="fool" disabled="disabled"/></td>
<td class="abc">AAA</td>
</tr>
</form>
</tbody>
</table>
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('.abc').click(function(){
$(this).closest('tr').find('.aaa').attr('disabled',false);
$(this).closest('tr td:eq(2)').find('a:eq(0)').show();
$(this).closest('tr td:eq(2)').find('a:eq(1)').hide();
// Or YOu can use
$(this).closest('tr td:eq(2)').find('a:eq(0)').css('display','block');
$(this).closest('tr td:eq(2)').find('a:eq(0)').css('display','none');
});
</script>
Please refer eq:(COlUMN of TR). It starts from zero so make adjustment accordingly. Hope you get complete answer of your query.
Add some class in tr.
<script type="text/javascript">
$('.abc').click(function(){
$('trClassName').find('.aaa').attr('disabled',true);
$(this).closest('tr').find('.aaa').attr('disabled',false);
});
</script>
Hope it will solve all your problems.
Only add class in tbody tr and also it should be with dot in jquery syntax.I have mentioned classname and it should also be with .TrClassName which you will mention in tr.

How to fix this calculate script which has "NaN" in cost box?

I have a calculate script for cost, but I have a little problem when I try to empty price box, there is "NaN" in cost box.
I do not know where is the problem. I have made following changes: digitsVal=isNaN(digitsVal)?0:digitsVal; became var digitsVal=isNaN(digitsVal)?0:digitsVal; and first this code is working, but second I try to empty in cost box, there is still "NaN" in cost box.
How to fix this calculate script ?. Are there solution about this script?
Example :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var price=$('#price'),
phone=$('#phone_number'),
digits=$('#digits'),
sum=$('#sum');
function calculateSum() {
var digitsVal=parseInt(phone.val().substr(-2));
digitsVal=isNaN(digitsVal)?0:digitsVal;
digits.val(digitsVal);
sum.val(parseFloat(price.val())+digitsVal);
};
phone.on('keyup', calculateSum);
price.on('keyup', calculateSum);
});
</script>
<table width="300px" border="1">
<tr>
<td width="40px">1</td>
<td>Price</td>
<td><input class="txt" name="price" type="text" id="price"></td>
</tr>
<tr>
<td>2</td>
<td>Phone Number</td>
<td><input name="phone_number" type="text" id="phone_number"></td>
</tr>
<tr>
<td>3</td>
<td>2 Digits</td>
<td><input class="txt" name="digits" type="text" id="digits" readonly></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Cost :</td>
<td align="center"><input type="text" name="sum" id="sum" value="0"></span></td>
</tr>
</table>
</body>
</html>
Replace:
sum.val(parseFloat(price.val())+digitsVal);
With:
isNaN(parseFloat(price.val())+digitsVal) ? sum.val(0) : sum.val(parseFloat(price.val())+digitsVal);
I think this should work for you

Jquery Modal form login with AJAX - ASP Classic on IE 9

I am having quite a bit of trouble getting a particular login form to work with Jquery using classic asp on IE 9.
On my index.asp page I have the following form:
<%#LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="Connections/LogisticsConnection.asp" -->
<%
Dim RS_User
Dim RS_User_cmd
Dim RS_User_numRows
Set RS_User_cmd = Server.CreateObject ("ADODB.Command")
RS_User_cmd.ActiveConnection = MM_LogisticsConnection_STRING
RS_User_cmd.CommandText = "SELECT UserName, Password FROM Users"
RS_User_cmd.Prepared = true
Set RS_User = RS_User_cmd.Execute
RS_User_numRows = 0
%>
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Training Prioritization</title>
</head>
<link rel="stylesheet" type="text/css" href="img/css/site.css"/>
<link rel="stylesheet" type="text/css" href="img/scripts/jquery-ui-1.11.4/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="img/scripts/chosen/chosen.css"/>
<script src="img/scripts/jquery-1.11.2.min.js"></script>
<script src="img/scripts/jquery-ui-1.11.4/jquery-ui.js"></script>
<script src="img/scripts/chosen/chosen.jquery.js"></script>
<script src="img/scripts/siteScript.js"></script>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="title">Training Prioritization</div>
<div id="login"><img src="img/loginBtn.png" id="Login-Img">Login</img></div>
</div><!--END HEADER-->
<div id="menu">
<div id = "menuItems">
<img src="img/editBtn.png" id="Menu-edit">Edit</img>
<img src="img/saveBtn.png" id="Menu-save">Save</img>
<img src="img/cancelBtn.png" id="Menu-cancel"/>Cancel</img>
</div>
</div>
<div id="body">
<div id="formBody">
<table id="formTable">
<tbody>
<tr id="Table-Heading-titleGroup">
<td>Title:</td>
<td>Project Tracker Number:</td>
<td>Status:</td>
<td>Month:</td>
</tr>
<tr>
<td><input type="text" id="Form-title"></td>
<td><input type="text" id="Form-ptNum"></td>
<td> <select id="Form-Dropdown-status"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td>
<td>
<select id="Form-Dropdown-month"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>
</td>
</tr>
<tr id="Table-Heading-requestorGroup">
<td>Requestor:</td>
<td>Curriculum/Course:</td>
<td>Duration:</td>
</tr>
<tr>
<td><input type="text" id="Form-requestor"></td>
<td><input type="text" id="Form-curriculum"></td>
<td><input type="text" id="Form-duration"></td>
</tr>
<tr id="Table-Heading-designerGroup">
<td>Designer:</td>
<td>Start Date:</td>
<td>End Date:</td>
<td>Launch Date:</td>
</tr>
<tr>
<td><input type="text" id="Form-designer"></td>
<td><input type="text" id="Form-Date-startDate"></td>
<td><input type="text" id="Form-Date-endDate"></td>
<td><input type="text" id="Form-Date-launchDate"></td>
</tr>
<tr id="Table-Heading-project">
<td>Project Description:</td>
</tr>
<tr>
<td><input type="text" id="Form-Paragraph-projectDescription"></td>
</tr>
<tr id="Table-Heading-businessGroup">
<td>Business Unit</td>
<td>Legacy Group</td>
<td>Work Group</td>
</tr>
<tr>
<td><select id="Form-Dropdown-businessUnit"><option value="test1">test1</option><option value="test2">test2</option><option value="test3">test3</option></select></td>
<td><select id="Form-Dropdown-legacyGroup"><option value="test1">test1</option><option value="test2">test2</option><option value="test3">test3</option></select></td>
<td><select id="Form-Dropdown-workGroup"><option value="test1">test1</option><option value="test2">test2</option><option value="test3">test3</option></select></td>
</tr>
<tr>
<td id="Table-Heading-location">
Location:
</td>
</tr>
<tr>
<td><img src="img/addBtn.png"/><div id="Table-Row-Child-Location">Add Location</div></td>
</tr>
<tr id="Table-Row-Parent-AddLocation">
<tr>
<tr id="Table-Heading-notes">
<td>Notes</td>
</tr>
<tr>
<td><input type="text" id="Form-Paragraph-notes"></td>
</tr>
</tbody>
</table>
</div>
<div id="test">
text here
</div>
<form id="Form-Submit" action="verify.asp" method="post">
<div id="Modal-Menu">
User Name:<input type="text" id="Modal-Menu-Input-UserName" name="UserName" value="User Name">
Password:<input type="password" id="Modal-Menu-Input-Password" name="Password" value="Password" >
</div>
</form>
</div><!--END BODY-->
<div id="footer">
<div id="footerText" align="center">
©2015 CenturyLink
</div>
</div>
</div><!--END WRAPPER-->
</body>
</html>
<%
RS_User.Close()
Set RS_User = Nothing
%>
In my siteScript.js I have the following Jquery:
//menu
$("#login").click(function(){$("#Modal-Menu").dialog("open")});
$(function(){
$("#Modal-Menu").dialog(
{autoOpen:false,
modal:true,
buttons:{
Cancel: function(){
$("#Modal-Menu").dialog("close");
},
'Submit': function(){
ajaxSubmit();
}
}
})
});
//ajax response
function ajaxSubmit(){
$.ajax({
url: 'verify.asp',
data: $("#Form-Submit").serialize(),
type: 'POST',
dataType: 'html',
success: function(data){
alert(data);
},
error: function(err){
alert("Error");
}
});
return false;
};
This particular form sends information to verify.asp which has the following code:
dim Username
dim Password
Username =Request.Form("UserName")
Password = Request.Form("Password")
Response.Write(Username)
Response.Write(Password)
My issue is that I am unable to get any information from the modal form(which sends infor via POST), and have it properly captured via Request.Form. When I alert out the data, I get the whole verify.html page, but when I look at the response.write for Username and Password, it is blank. Any help or advice is greatly appreciated thanks!
Edit: Provided full index.asp document as requested
I finally figured it out in my index.asp I have:
<form id="Form-Submit" action="verify.asp" method="post">
<div id="Modal-Menu">
User Name:<input type="text" id="Modal-Menu-Input-UserName" name="UserName" value="User Name">
Password:<input type="password" id="Modal-Menu-Input-Password" name="Password" value="Password" >
</div>
</form>
Note the two form tags that are outside of the "Modal-Menu" div. What it needs to look like is this:
<div id="Modal-Menu">
<form id="Form-Submit" action="verify.asp" method="post">
<input type="text"name="UserName" value="User Name"/>
<input type="password" id="Modal-Menu-Input-Password" name="Password" value="Password"/>
</form>
</div>
where the form tags are wrapped inside of the "Modal-Menu" div...
Idiocy 1 Hexobolic 0...

how to do dynamic divs - expand collapse loop

I need a function that allows my client to add more divs on the form or not, clicking on a button (+) for example, like a loop
this loop should repet divs and the button to add more divs, like bellow on the pic
does anybody has an ideia of how to do it?
is expand collapse the best way of doing it?
Thank you very much!
I am not certain what is your desire so I post both options:
If you want to expand hidden existing fields and asuming you can use JQUery:
<table>
<tr>
<th>Field1</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>Field2</th>
<td><input type="text" value="" /></td>
</tr>
<tr class="hiddenarea" style="display: none;">
<th>Field3 (Hidden)</th>
<td><input type="text" value="" /></td>
</tr>
</table>
<input id="show_hide" value="Collapse/Expand" />
<script type="text/javascript">
$("#show_hide").click(function() {
$(".hiddenarea").toggle();
});
</script>
///////////////////////////////////
The second solution to add a new line to the table is:
<table id="mytable">
<tr>
<th>Field1</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>Field2</th>
<td><input type="text" value="" /></td>
</tr>
</table>
<input id="show_hide" value="Collapse/Expand" />
<script type="text/javascript">
$("#show_hide").click(function() {
$("#mytable").append('<tr><td>New field</td><td><input type="text" value="" /></td></tr>');
});
</script>

Categories