I have the following page in jsp .
The code of the page is as following :
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="JavaScript">
<!--
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
function check()
{
var uname=document.scan.elements[0].value
var bError=false
if (uname.length==0)
{
window.alert("Name is required.\n")
return false
}
if (uname.indexOf("\\")>=0)
bError=true
if (inStrGrp(uname,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
return true
}
-->
</Script>
<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY onload="document.scan.name.focus();">
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p><font color="#0055FF">Enroll</font></p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<form name="scan" method="POST" action="enroll.jsp" onsubmit="return check()">
<p>Please input your name: <input type="text" name="name" size="20"> </p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2"> </p>
<p>
<input type="submit" value=" Enroll " name="btnEnroll"></p>
</form>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
</center>
</BODY>
</HTML>
When I click on Enroill button I want to show a pop-up like as following with an image source tag .
How can I do this on Jsp ? Any advice is of great help .
Here is code snippet using bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Online Demonstration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Online Demonstration</div>
<form name="scan" method="POST" action="enroll.asp">
<div class="panel-body">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<div class="row">
<div class="form-group">
<label class="col-md-5">Please input your name:</label>
<div class="col-md-5">
<input type="text" class="form-control" id="UserName"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-5">If you want to enroll 2 fingers, please check the box.</label>
<div class="col-md-5">
<input type="checkbox" name="chk2Finger" value="2">
</div>
</div>
</div>
<input class="btn btn-default" type="submit" value="Submit">
</div>
</form>
</div>
</div>
<!-- Modal code goes here-->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<div class=row>
<img src="" class="img-thumbnail col-lg-2">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- /.modal -->
<script type="text/javascript">
function inStrGrp(src,reg){
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
$(document).ready(function(){
$('input[type="submit"]').click(function (e) {
e.preventDefault();
var userName = document.getElementById('UserName').value;
var bError=false
if (userName.length==0)
{
window.alert("Name is required.\n")
return false
}
if (userName.indexOf("\\")>=0)
bError=true
if (inStrGrp(userName,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
$('#myModal').modal('show');
return true
});
});
</script>
</body>
</html>
Hope it will help.Thanks
With pure its not possible to show pop up and show image on that pop up.You can do it with jquery UI dialog .
And it will be great if you use bootstrap framework which have modal where you can insert anything you want.
Related
I am developing a simple game (similar to Blockly and Scratch) that involves drag-and-drop. After dragging the buttons to a target container, I want to be able to clear the content of that container by pressing a Reset button. I have tried to implement it (which is demonstrated in the code below) but to no avail.
Here are the relevant codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Play Maze - Zoom Zoom</title>
<script src="{{ url_for('static',filename='vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/sb-admin-2.min.js') }}"></script>
</head>
<body id="page-top">
<div id="wrapper">
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordion_sidebar">
<!-- Commands -->
<a class="sidebar-brand d-flex align-items-center justify-content-center">
<div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-laugh-wink"></i></div>
<div class="sidebar-brand-text mx-3">Commands</div>
</a>
<div class="commands">
<div class="draggable">
<input type="button" class="btn-forward" id="forward" value="Forward" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-backward" id="backward" value="Backward" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-right" id="right" value="Right" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-left" id="left" value="Left" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-repeat" id="repeat" value="Repeat" draggable="true"></button>
</div>
</div>
</ul>
<!-- Begin Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card shadow mb-4">
<div class="card-body">
<div class="row">
<div class="col">
<div class="container" id="commands"></div>
<button id="reset" class="btn btn-lg btn-primary" value="Reset"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" \
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" \
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$("#commands").empty();
});
});
</script>
</html>
You can make divs' appear or disappear using vanilla javascript only.
A simple example below:
<div id="container">This is Div's content</div>
<reset id="resetButton" value="Reset">Reset</reset>
<script>
resetButton.addEventListener('click', () => {
container.innerHTML = '';
// Or container.style.display = 'none'; if you want container to disappear without leaving space
// Or container.style.visibility = 'hidden'; if you want container to disappear leaving space
});
</script>
Changed to:
<reset id="reset" class="btn btn-lg btn-primary" value="Reset">Reset</reset>
<script type="text/javascript">
$(document).ready(function()
{
$("reset").click(function()
{
$("#commands").empty();
});
});
</script>
can you help me how to print it into pdf on the table with input value.
sorry im just a student and my supervisor need this project for my output
and i cant add my materialize js and css because for body limit
and i add a add button for new Row for the table with a input that can print it to the pdf. just help me in converting to pdf and i can handle the rest of formating in pdf
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bureau of Internal Revenue</title>
</head>
<body class="scrollspy bg">
<nav>
<div class="nav-wrapper white" >
<div class="container">
<img src="img/download.png" style="width:5%; margin-top:3px; " alt="" class="responsive-image">
<a href="" style="margin-left:1%;" class="brand-logo black-text"> Bureau of Internal Revenue
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Create</li>
</ul>
</a></div>
</div>
</nav>
<div class="showcase container">
<div class="bg-showcase">
<div class="row">
<div class="col s12 m10 offset-m1 center">
<br>
<br>
<br>
<br>
<h1 class="white-text center"><b>Welcome</b></h1>
<h1 class="center white-text"><b>to</b></h1>
<h1 class="center white-text"><b>Bureau of Internal Revenue</b></h1>
</div>
</div>
</div>
</div>
<form action="">
<div class="row">
<div class="col s12 l10 offset-l1">
<div class="card">
<div class="card-content">
<div class="">
<h3><b>Index of Success Indicators</b></h3>
<table class="striped">
<thead>
<tr>
<th>Major Final Outputs</th>
<th>Performance Measures</th>
<th>Performance Targets</th>
<th>Success Indicator
<p>(Measure + Target)</p></th>
<th>Organization Outcome Sectoral Goals</th>
</tr>
</thead>
<thead>
<tr>
<th>A. Strategic Priority</th>
</tr>
</thead>
<tbody class="line">
<tr>
<th>New Row</th>
</tr>
</tbody>
<thead>
<tr>
<th>B. Core Function</th>
</tr>
</thead>
<tbody class="line">
<tr>
<th>New Row</th>
</tr>
</tbody>
<thead>
<tr>
<th>C. Support Function</th>
</tr>
</thead>
<tbody class="line">
<tr>
<th>New Row</th>
</tr>
</tbody>
</table>
<div class="center"><input type="button" value="Create PDF" class="btn btn-black" onclick="demoFromHTML()"></div>
</div>
</div>
</div>
</div>
</div>
</form>
<footer class="page-footer grey darken-3">
<div class="container">
<div class="row">
<div class="col s12 l6">
<h4>Links</h4>
<ul>
<li>Home</li>
<li>Back to Top</li>
<li>About Developer</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright grey darken-2">
<div class="container">Bureau of Internal Revenue © 2019</div>
</div>
</footer>
</body>
<div id="create" class="modal">
<ul class="container center" style="margin-bottom: 3%;">
<h2>Create</h2>
<li>Index of Success Indicators</li>
<br><br>
<li>Performance Monitoring and Coaching</li>
<br><br> <li>CSC Individual Development Plan</li>
<br><br> <li>Individual Performance Commitment And Review</li>
</ul>
<div class="modal-footer">
close
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
$(document).ready(function () {
// Init Sidenav
$('.button-collapse').sideNav();
// Scrollspy
$('.scrollspy').scrollSpy();
$('.modal').modal({
dismissible:true,
inDuration:300,
outDuration:200,
ready:function(modal,trigger){
console.log('Modal Open',modal,trigger);
}
});
jQuery(function(){
var counter = 1;
jQuery('a.addline').click(function(event){
event.preventDefault();
var newRow =jQuery('<tr class="number">'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter + '<th><input type="text" name="" class="center" id=""/></th>' +
counter + '<th><button type="button" class="deletebtn" title="Remove row">X</button></th>');
counter ++;
jQuery('tbody.line').append(newRow);
});
});
function demoFromHTML(){
var pdf= new jsPDF('p','pt','letter');
source = $('#isi')[0];
specialElementHandlers={
'#bypassme':function(element,renderer){
return true
}
};
margins = {
top:80,
bottom:60,
left:40,
width:552
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width':margins.width,
'elementHanlders':specialElementHandlers
},
function(dispose){
pdf.save('testing.pdf');
}
,margins);
};
});
</script>
</body>
</html>
I only have notions of JQuery and again and that's why today I need help...
I am doing some kind of online editor to create my newsletters.
On this page: http://emaildesigner.fr/test/index.html and here the js: http://emaildesigner.fr/test/_scripts/newsletter-buildertest.js
The concept is classic: we click on "Add" -> header then + insert and this adds an editable block.
for the moment there is only one block but the concept is to put several and to use them once or several times each.
The blocks are constructed this way:
<div class="sim-row" data-id="1">
<div class="sim-row-header1">
<div class="sim-row-header1-nav">
<table width="700" align="center" cellpadding="0" cellspacing="0" class="hide" bordercolor="#FFFFFF" bgcolor="#fff" style="background-color:#fff; border: 10px solid #ffffff;">
<tr>
<td class="sim-row-header1-nav-logo sim-row-edit sim-row-header1-slider-left-link" data-type="image"><img src="http://static3.qcnscruise.com/images/newsletters/fr/2017-12-20-test/art/pdt01.jpg" alt="" width="700" /></td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td class="sim-row-header1-slider-left-link"><span style="color:#555759; font:bold 20px arial; margin:0; text-align:left;" class="texte1">TEXTE</span></td>
</tr>
</table>
<!--[if !mso]><!-->
<div class="ShowMobile" style="font-size:0;max-height:0;overflow:hidden;display:none; background-color:#FFF;">
<table border="0" cellspacing="0" cellpadding="0" align="center" width="100%">
<tr>
<td><img src="http://static3.qcnscruise.com/images/newsletters/fr/2017-12-20-test/art/_pdt01.jpg" width="100%" border="0" style="display:block; background-color:#ffcecb; font:bold 14px arial; color:#000000; text-align:center;" alt="" /></td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td class="sim-row-header1-slider-left-link"><span style="color:#555759; font:bold 20px arial; margin:0; text-align:left;" class="texte1">TEXTE</span></td>
</tr>
</table></div>
</div>
</div>
</div>
with the #media screen, I display either a mobile version or a PC version.
I need the publisher to update at the same time the PC code and mobile code (because the mobile code is hidden and it will do everything in duplicate ... since the resolution is too large).
in general, my blocks consist of 1 to 3 images, 1 to 6 texts and 1 to 3 links
I explain my problem to you :
currently when we click on "Add" -> header then + insert and this adds an editable block.
this block is composed of an image + link and a text + link
when I update the text (I put the code js only on the block text) it updates the part pc and the moving part but if I redo: "Add" -> header then + insert and well it me put the text of the block preceding what is logical.
$(document).on('keyup','#inputtexte1',function(){
var txt = $(this).val();
$('.texte1').text(txt);
});
So I think the solution would be to be able to identify each of the blocks and each of the parts to update in the same block and that the publisher only updates the mobile parts and pc of the block concerned (for the texts, the links, and images).
I can be found a beginning of track .... after still, it is necessary that I manage to adapt it ...
var count=1;
$("#add").click(function(){
var html="<div id='bloc"+count+"'><input type='text'></input></div>";
$("#newBloc").append(html);
count++;
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button id="add">Add Addresses</button>
<div id="newBloc"></div>
</body>
</html>
I hope to have been clear.
Can you help me?
Sorry for my bad English but I'm french
thank you in advance
#ZeroCool I was try to help you and make a Example for your solution Live link for example I hop you get the concept for this issue.
Add a Parent Id and onClick get parentId Then keyup call bay this parentId with your class name. Like ..
After set a parent id ...
// Global veritable dicelear
let userId = '';
$(document).on('click', '.edit', function() {
userId = '#'+ $(this).closest('ul').attr('id') + ' .userName'; //use #parentId
$('#edit-from').modal('show') // Open your edit from ...
});
$( "#memberNameGet" ).keyup(function(){
$(userId).text($(this).val());
});
let Id=1;
let userId = '';
$("#add").click(function(){
let userName = $('#newUserName').val()
let html='<ul id="user'+Id+'">'+
'<li><span class="userName">'+userName+'</span>'+
'Edit '+
'</ul> </li>';
$("#newBloc").append(html);
Id++;
$('#newUserName').val('')
});
$(document).on('click', '.edit_user', function() {
userId = '#'+ $(this).closest('ul').attr('id') + ' .userName';
$('#myModal').modal('show')
// console.log(userId);
});
$( "#memberNameGet" ).keyup(function(){
// alert(userId);
$(userId).text($(this).val());
});
span, a {
display: inline-block;
margin-right:15px;
}
input {
padding: 5px 15px }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</br>
<div class="col-md-6">
<input type="text" id="newUserName">
<button id="add" class="btn btn-success"> Add Member</button>
</div>
</br></br>
<div class="col-md-5">
<div id="newBloc"></div>
</div>
<!-- Add member modal -->
<div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Edit Member</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="nameValue">Member Name</label>
<input type="text" class="form-control" id="memberNameGet" placeholder="Type Member Name ">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Updated</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I have a MVC 4 application which uses jquery mobile, i also have my own .JS file where all my functionality is stored.
When i run the application and navigate to my selected view and view my page source all of the scripts files are loaded except my custom script :/ i have tried placing this script in different places within my view and im still having no success.
If i F5 the page then my custom script files are loaded and everything works as it should, how would i get my custom script to load into my page on the initial page load?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Index</title>
<link href="~/Scripts/jquery.mobile-1.4.4.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/jquery.mobile-1.4.4.min.js"></script>
<script src="~/Scripts/CustomScript/questions.js"></script>
</head>
<body>
<div data-role="page">
<form id="InspectionForm" method="post">
<input id="LoggedUserName" type="hidden" value="#Request.Cookies["UserInfo"]["UserName"]" />
<div data-role="navbar">
<ul>
<li>Back</li>
</ul>
</div>
<div id="QuestionBuilder" style="padding: 10px 5px;">
<div data-role="collapsible-set">
#foreach (var item in Model)
{
<div data-role="collapsible" data-theme="d" id="expandable-#item.QuestionID">
<h3 onclick="checkQuestion(#item.QuestionID)">#Html.DisplayFor(modelItem => item.QuestionNumber) . #Html.DisplayFor(modelItem => item.Question)</h3>
<table width="100%">
<tr>
<td>
<div class="containing-element">
<style>
.containing-element .ui-slider-switch
{
width: 8em;
}
</style>
<select name="QuestionOptional-#item.QuestionID" id="QuestionOptional-#item.QuestionID" data-role="slider" data-questionid="#item.QuestionID"
onchange="SetQuestionOptional(#item.QuestionID,#item.SectionID,#item.SubSectionID)">
<option value="off">Optional</option>
<option value="on">Mandatory</option>
</select>
</div>
</td>
<td style="text-align: right;">
<a onclick="ShowDetails(#item.QuestionID)" href="#DetailsM" data-rel="dialog" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Details</a>
<a onclick="ShowComments(#item.QuestionID)" href="#CommentsM" data-rel="dialog" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Comments</a>
<a onclick="ShowActions(#item.QuestionID)" href="#ActionsM" data-rel="dialog" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Actions</a>
</td>
</tr>
<tr>
<td colspan="2">
#if (item.QuestionTypeID == Convert.ToInt32(questionType.SingleSelect))
{
<fieldset data-role="controlgroup">
<input type="hidden" id="rBtnCheckedState" />
#foreach (var opt in item.Options)
{
<input type="radio" name="radio-choice" id="radio-choice-#opt.OptionID" value="#opt.QuestionText" data-mandatoryaction="#opt.IsMandatoryActions"
data-mandatorycomment="#opt.IsMandatoryComments" />
<label for="radio-choice-#opt.OptionID">#opt.QuestionText</label>
}
</fieldset>
}
</td>
</tr>
</table>
</div>
}
</div>
</div>
</form>
</div>
<div id="DetailsM" data-role="dialog">
</div>
<div id="ActionsM" data-role="dialog">
</div>
<div id="CommentsM" data-role="dialog">
</div>
</body>
</html>
Give your full path addresses in below references
<link href="~/Scripts/jquery.mobile-1.4.4.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/jquery.mobile-1.4.4.min.js"></script>
<script src="~/Scripts/CustomScript/questions.js"></script>
i am trying to develop bootstrap accordion and it works fine in jsfiddle
But when i tried in my web app its not working.I have attached the screenshot how it looks.As you can see in the screenshot there are no errors in the console.i am including following in my jsp page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
Even I had replaced <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> in place of <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> but no luck.Please tell me what else do i need?
Following is the full code
<%# page import="java.sql.*" %>
<%# page import="DB.*" %>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>send sms</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="tabbable" id="myTabs">
<ul class="nav nav-tabs">
<li class="active">Send Message</li>
<li>Users</li>
<li>Group Message</li>
<li>Sign Out</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="btn-group-vertical pull-right" data-toggle="buttons-radio">
<%
DataBaseConnection db=new DataBaseConnection();
Connection con=db.connet();
PreparedStatement pt=con.prepareStatement("select * from registerSmsUsers");
ResultSet rs=pt.executeQuery();int i=1;
while(rs.next())
{%>
<button type="button" class="btn btn-primary btn-block" id="<%=rs.getString("mobile")%>"><%=rs.getString("name")%></button>
<%i++;}
%></div>
<div class="container">
<div class="row">
<div class="span12">
<h3>Send SMS to Individual number</h3>
<form class="form-signin" action="#" method="post" onsubmit="return false;">
<div class="row">
<div class="span3">
Enter Number to send:
</div>
<div class="span3">
<!-- <input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+22" rel="popover"/> -->
<!--<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" data-delay='{"show":"10", "hide":"3000"}'/>-->
<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" />
</div>
<!--<div class="span6">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
Please enter 10 digit mobile number prefixed by country code eg +911234567890<hr />
</div>
</div>-->
</div>
<div class="row">
<div class="span3">
Enter Message to send:
</div>
<div class="span3"> <div id="datetimepicker" class="input-append date">
<input style="display:none" type="text" name="body" maxlength="160" placeholder="Enter message to send" class=".dtext" id="body" data-trigger="hover"/>
<input type="text" id="txt" style="display:none"/>
<textarea rows="9" cols="50" class="darea1" id="darea"></textarea><span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
<!--<div class="span6">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
The text of the message you want to send, limited to 160 characters.
</div>
</div>-->
</div>
<div class="row">
<div class="span3">
</div>
<div class="span9">
<button class="btn" type="submit" id="openAlert" >Send</button>
</div>
</div>
</form>
</div>
</div>
<div id="le-alert" class="alert alert-warn alert-block fade">
<button href="#" type="button" class="close">×</button>
<h4>Successful</h4>
<p>Message sent successfully</p>
</div>
</div>
</div>
<!-- 2nd tab strats -->
<div class="tab-pane" id="tab2">
<form class="well span9" action="insertNew" method="post">
<div class="row">
<div class="span3">
<label>Name</label>
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required>
</div>
<div class="span3">
<label>Email Address</label>
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required>
</div>
<div class="span3">
<label>Mobile</label>
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required >
</div>
</div>
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
</form>
<input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">
<!-- accordion strats-->
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
records
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table> </div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
groups here </div>
</div>
</div>
</div>
<!-- accordion ends-->
<!--<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>-->
</div>
<!-- 2nd tab ends -->
<div class="tab-pane" id="tab3">
<p>para in section 3</p>
</div>
</div>
</div>
<script>
$(function() {
$("#datetimepicker").datetimepicker({
format: "'dd/MM/yyyy hh:mm:ss'",
linkField: "#txt",
linkFormat: "yyyy-mm-dd hh:ii",
autoclose: true,
});
jQuery('#datetimepicker').datetimepicker().on('changeDate', function(ev){
$(".darea1").val($( ".darea1" ).val()+$( "#txt" ).val());
});
});
</script>
<script>
$('#tabAll').click(function(){
$('#tabAll').addClass('active');
$('.tab-pane').each(function(i,t){
$('#myTabs li').removeClass('active');
$(this).addClass('active');
});
});
$('body').on('click', '.btn', function(){
if(this.id=='openAlert')
{$('#number').val('');}else{$('#number').val(this.id);}
});
</script>
<script >
$(document).ready(function(){
$("#signout").click(function() {
window.location.replace("logout.jsp");
});
//next line
var val=0;
$(document).ready(function(){
$('#btn1').click(function(){
if($(".span4").val()!="")
{
$("#mytable").append('<tr id="mytr'+val+'"></tr>');
$("#mytr"+val).append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr'+val+'" checked ></td>');
$(".span4").each(function () {
$("#mytr"+val).append("<td >"+$(this).val()+"</td>");
});
val++;
}
else
{
alert("please fill the form completely");
}
});
$('#btn2').click(function(){
var creat_group=confirm("Do you want to creat a group??");
if(val>1){
alert(creat_group);
}
});
});
//
$('#openAlert').click(function(){
var number = $('#number').val(); // If its a text input could use .text()
var msg = $('#darea').val(); //If its a text input could use .text()
alert(msg);
$.ajax(
{
type: "POST",
url: "messageSending.jsp", //Your full URL goes here
data: { toNumber: number, body: msg},
success: function(data, textStatus, jqXHR){
alert(data);
},
error: function(jqXHR){
alert(jqXHR.responseStatus);
}
});
});
});
</script>
<script>
$(function ()
{ $("#number").popover({title: 'Enter Mobile Number',content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890"});
});
$(function ()
{ $("#body").popover({title: 'Message Body',content: "Maximum 160 characters allowed"});
});
</script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
</body>
</html>
Head
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js" type="text/javascript">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" type="text/css" rel="stylesheet">
HTML
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/fzN4K/15/
Jquery 1.9.1 : http://jsfiddle.net/fzN4K/16/