I'm trying to implement ajax auto complete function to my HTML code, I want to put the result from the auto complete function into a table on my html page, the auto complete function is working and I get a drop down list but the table isn't created and I can't see any result in it.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DMC</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="page-header">
<h3 style="color:#00a2d1; font-size:30px; font-family: Impact, Charcoal, sans-serif; text-align: center;">
DMC</h3>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<div class="col-lg-offset-2">
<form>
<div class="form-group">
<div class="input-group">
<input id="txtSearch" class="form-control input-lg" type="text" placeholder="Search..." />
<div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
</div>
<table border='1' id="table_body"></table>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#txtSearch').autocomplete({
source: "post_search.php",
minLength: 1,
select: function(event, ui) {
var url = ui.item.id;
if (url != '#') {
location.href = url
}
var table = $("#table_body");
$.each(data, function(event, ui){
table.append("<tr><td>"+ui.item.value+"</td><td>"+ui.item.id+"</td>");
},
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000)
}
})
});
</script>
</body>
</html>
Try something like this hope it helps
<table border='1'>
<thead>
<tr>
<td>value</td>
<td>id</td>
</tr>
</thead>
<tbody id="table_body">
</tbody>
</table>
var data = ''; //initialize the data variable
$.each(data, function(event, ui){
data +=
"<tr>"+
"<td>"+ui.item.value+"</td>"+
"<td>"+ui.item.id+"</td>"+
"</tr>";
}
$('#table_body').html(data); //this will display your data to your body table
I used _renderMenu function and $.each function inside it and it worked like a charm.
here is the new code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DMC</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="page-header">
<h3 style="color:#00a2d1; font-size:30px; font-family: Impact, Charcoal, sans-serif; text-align: center;">
DMC</h3>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<div class="col-lg-offset-2">
<form>
<div class="form-group">
<div class="input-group">
<input id="txtSearch" class="form-control input-lg" type="text" placeholder="Search..." />
<div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
</div>
<table id="table_body" border='1'>
<thead>
<tr>
<th>City</th>
<th>Zip</th>
</tr>
</thead>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#txtSearch').autocomplete({
source: "post_search.php",
minLength: 3
}).data("ui-autocomplete")._renderMenu = function (ul, items) {
$("#table_body tbody tr").remove();
$.each( items, function( index, item ) {
console.log(item);
var table = $("#table_body");
if (item.id != '#') {
table.append("<tr><td>"+item.value+"</td><td>"+item.id+"</td>");
}
});
};
});
</script>
</body>
</html>
Related
I need help!
I need open html form from another html form by button PUTAWAY START.
At html code I have this button, but I cant understand how to write script to command for button.
I don't know where to start. Thank you for help!
<div class="row">
<div class="form-floating mb-3">
<button type="button" class="btn btn-primary" id="btn1" style="width: 100%">PUTAWAY START</button>
</div>
</div>
I know that it must be by function doGet(e) but how?
Thanks to help from Ron I add his script to my project.
Main form:
<!doctype html>
<html lang="en">
<head>
<base target="_top">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>KOP#CK-M#IN-MENU</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<script href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<?!= include("main-css"); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<link id="favicon" rel="shortcut icon" type="image/png" href="https://drive.google.com/file/d/14GrCbJYe3RExAKL_6yuF3kH1EO0L7zge/view?usp=sharing" />
<h6 style="color:blue;"><em>KOP#CK M#IN MENU:</em></h6>
<img src="https://drive.google.com/uc?export=download&id=14GDoNMZxgHlfTKMHmtamXmu93y2jaDy6" class="img-fluid" alt="...">
<form>
<hr></hr>
<div class="row">
<div class="form-floating mb-3">
<input type="button" class="btn btn-primary" value="PUT#WAY ST#RT" style="width: 100%" onclick="Link1()"/>
</div>
</div>
<div class="progress" id="PreLoaderBar">
<div class="indeterminate"></div>
</div>
<hr></hr>
<div class="row">
<div class="form-floating mb-3">
<button type="button" class="btn btn-primary" id="btn2" style="width: 100%">Insert</button>
</div>
</div>
<hr></hr>
<div class="row">
<div class="form-floating mb-3">
<button type="button" class="btn btn-primary" id="btn3" style="width: 100%">Insert</button>
</div>
</div>
<hr></hr>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?var url = ScriptApp.getService().getUrl();?><input type="hidden" value="<?= url ?>" id="url" />
<?!= include("main-js"); ?>
</body>
</html>
and script in include-main:
document.onreadystatechange = function () {
if (document.readyState === "complete") {
document.getElementById("PreLoaderBar").style.display = "none";
}
}
function Link1(){
var url = document.getElementById("url").value;
console.log(url);
var link = document.createElement('a');
console.log(link);
link.href = url + "&page=Link1";
link.id = 'linkURL';
console.log(link);
document.body.appendChild(link);
document.getElementById('linkURL').click();
}
Script in "doGet":
function doGet(e){
var params = JSON.stringify(e);
console.log(params);
console.log(e.parameter.page);
if(!e.parameter.page){
return HtmlService.createTemplateFromFile("MAIN_MENU").evaluate();
}
else if(e.parameter.page == 'Link1'){
return HtmlService.createTemplateFromFile("PUTAWAY_TO").evaluate();
}
else if(e.parameter.page == 'Main'){
return HtmlService.createTemplateFromFile("MAIN_MENU").evaluate();
}
}
You can use the doGet(e) event parameters as your condition to determine which html form you will create
Sample Code:
Code.gs
function doGet(e){
var params = JSON.stringify(e);
Logger.log(params);
Logger.log(e.parameter.page);
if(!e.parameter.page){
return HtmlService.createTemplateFromFile("Main").evaluate();
}
else if(e.parameter.page == 'Link1'){
return HtmlService.createTemplateFromFile("Form1").evaluate();
}
else if(e.parameter.page == 'Main'){
return HtmlService.createTemplateFromFile("Main").evaluate();
}
}
Main.html
<body>
<h1>Welcome to Main Form</h1>
<?var url = ScriptApp.getService().getUrl();?><input type="hidden" value="<?= url ?>" id="url" />
<br>
<input type="button" value="Link 1" onclick="link1()" />
</body>
<script>
function link1()
{
var url = document.getElementById("url").value;
var link = document.createElement('a');
link.href = url+"?page=Link1";
link.id = 'linkURL';
document.body.appendChild(link);
document.getElementById("linkURL").click();
}
</script>
Form1.html
<body>
<h1>Welcome to Form 1</h1>
<?var url = ScriptApp.getService().getUrl();?><input type="hidden" value="<?= url ?>" id="url" />
<br>
<input type="button" value="Back to Main" onclick="main()" />
</body>
<script>
function main()
{
var url = document.getElementById("url").value;
var link = document.createElement('a');
link.href = url+"?page=Main";
link.id = 'linkURL';
document.body.appendChild(link);
document.getElementById("linkURL").click();
}
</script>
What it does?
Creates a href link in your html page, the href link contains an event parameter "page". link.href = url+"?page=Link1";
When doGet(e) was called, It will check the page parameter in the event object. Then select the form you want to use based on the page parameter provided.
Additional References:
Create Views (Pages) in Web App - Google Apps Script Web App Tutorial - Part 7
Link HTML Pages using Google Apps Script Web App
I am just a beginner.
Is there a code to use two different images as buttons to disable and enable . Most examples use two separate buttons but I need to use a single button with two images: one for off and the other one for on.
$(function() {
$("#Enable").click(function(){
$(".div1 *").prop('disabled',true);
});
$("#Disable").click(function(){
$(".div1 *").prop('disabled',false);
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="css/multitoggle.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script language="javascript" type="text/javascript"></script>
</head>
<body>
<div class="div1">
Name:<input type="text" id="fullname" value="name"/><br>
<br>
<input type="button" id="button1" value="Submit "/>
<div></div>
</div>
<input type="image" src="assets/trans_off.jpg" id="Enable" value="Enable"/>
<input type="image" src="assets/trans_on.jpg"id="Disable" value="Disable"/>
</body>
</html>
Use image sprite that contains two button images. Use background-position to set what part of image to show.
$(document).ready(function() {
var isDisabled = false;
$('.toggle').click(function() {
isDisabled = !isDisabled; // invert value
$('.div1 input').prop('disabled', isDisabled);
});
});
#button1 {
background: url('http://images.sixrevisions.com/2009/05/04-31_slick_clean_30.png') no-repeat -80px -14px;
width: 246px;
height: 48px;
border: none;
}
#button1:disabled {
background-position: -80px -63px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
Name: <input type="text" id="fullname" value="name" /><br>
<br/>
<input type="button" id="button1"/>
<div></div>
</div>
<hr/>
<button class="toggle">Toggle inputs</button>
i want to make the "img/rsz_indexpage_image.jpg" picture stretchable according to the div size variation.when enlarging the width of the div picture is not enlages as expected.how to do this by bootstrap. now image size is static when enlarging.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/loginjs.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/logincss.css">
</head>
<body>
<div class="container">
<div class="row vertical-offset-100">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row-fluid user-row">
<img src="img/rsz_indexpage_image.jpg" class="img-responsive" alt="Conxole Admin"/>
</div>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form" class="form-signin">
<fieldset>
<label class="panel-login">
<div class="login_result"></div>
</label>
<input class="form-control" placeholder="Username" id="username" type="text">
<input class="form-control" placeholder="Password" id="password" type="password">
<br></br>
<input class="btn btn-lg btn-success btn-block" type="submit" id="login" value="Login »">
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
if you want to keep aspect ratio then put width:100% and height:auto
if you want to cover whole parent element then height:100% and width:100%
and its on you how you put it with .img-responsive
img-responsive
.img-responsive {
display: block;
width: 100%;
height: auto;
margin: auto;
}
window.onresize = function(event) {
updateImageSize()
};
function updateImageSize() {
$(".img-responsive").each(function(){
var ratio_cont = jQuery(this).width()/jQuery(this).height();
var $img = jQuery(this).find("img");
var ratio_img = $img.width()/$img.height();
if (ratio_cont > ratio_img)
{
$img.css({"width": "100%", "height": "auto"});
}
else if (ratio_cont < ratio_img)
{
$img.css({"width": "auto", "height": "100%"});
}
});
};
<!DOCTYPE html>
<html>
<head>
<title>Astro Tools</title>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<link rel="stylesheet" href="js/jquery.mobile-1.4.3.min.css" type="text/css"/>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.3.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Astrophoto Tools</h1>
</div>
<div data-role="content">
<p>
Welcome to Astrophoto Tools. These simple calcualting tools will help you to avoid Star Trials.
</p>
<ul data-role="listview" data-inset="true">
<li>Basic Tool</li>
<li>Advanced Tool</li>
<li>Help</li>
<li>About</li>
</ul>
</div>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
///////////////////////////////////////////////////////////////////////////////
Here is the basic.html
////////////////////////
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title>jQuery Mobile Web App</title>
<link rel="stylesheet" href="js/jquery.mobile-1.4.3.min.css" type="text/css"/>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.3.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#lens").on("keyup", function () {
var lens = $(this).val();
//var fullframe = 0; // initialize the sum to zero
var fullframe = 600 / lens;
$('#fullframe').val(fullframe.toFixed(2));
var apsccanon = 600 / (lens * 1.6);
$('#apsccanon').val(apsccanon.toFixed(2));
var apscnikon = 600 / (lens * 1.5);
$('#apscnikon').val(apscnikon.toFixed(2));
var apscolympus = 600 / (lens * 2.0);
$('#apscolympus').val(apscolympus.toFixed(2));
});
});
</script>
<style type="text/css">
body,td,th {
color: #CCC;
}
</style>
</head>
<body>
<div data-role="page" id="page" data-theme="b">
<div data-role="header">
<h3 style="color:#3CF">Astrophoto Tool</h3>
</div>
<div data-role="content">
<div align="center" style="color:#0F0">No Star Trails Exposure</div>
<p align="center" style=" color:#FFFF00">Rule 600 </p>
</div>
<div data-role="content" data-theme="b">
<form action="">Lens: Focal Length (mm)
<br>
<input type='text' id='lens' style="color:#FF6"/>
<br>Full Frame: (Time in Seconds)
<br>
<input type='text' id='fullframe' value="" style="color:#0F0" readonly>
<br>APS-C (Canon): (Time in Seconds)
<br>
<input type='text' id='apsccanon' value="" style="color:#0F0" readonly />
<br>APS - C (Nikon/Sony/Pentax): (Time in Seconds)
<br>
<input type='text' id='apscnikon' value="" style="color:#0F0" readonly />
<br>APS - C (Olympus/Panasonic): (Time in Seconds)
<input type='text' id='apscolympus' value="" style="color:#0F0" readonly />
<input name="Reset" type="reset" value="Reset">
</form>
</div>
<div data-role="footer">
<h4 style="color:#3CF">© Ranjan Mitra 2015</h4>
</div>
</div>
</div>
</body>
</html>
When I run the basic.html it works without a problem but whenever I click the link to basic.html in the index.html the calculations do not work at all. Where am I going wrong? please help.
////////////////////////////////////////////////////////////////////////
You are missing the value=""in your first <input>
<input type='text' id='lens' ???? style="color:#FF6"/>
<br>Full Frame: (Time in Seconds)
I am using an ajax script to stringify the values from a controller of an application which is spring rest web service application..problem is when the values in html in form i click a button, this script should work but doesn't get executed..can someone help me what's wrong in the script, is a load problem or something else, and what is the right way of making it executable???
Ajax Script
load$(document).ready(function () {
$("#submit").click(function () {
var url = 'http://localhost:8080/xxx/authenticate';
var jsondata = JSON.stringify({
username: $('#inputEmail').val(),
password: $('#inputPassword').val()
});
postdata(url, jsondata, 1);
});
$('#register-dev').click(function () {
var url = 'http://localhost:8080/xxx/register';
alert(url);
var jsondata = JSON.stringify({
roleTb: {
roleId: parseInt($('#role').val())
},
firstName: $('#firstname').val(),
lastName: $('#lastname').val(),
emailId: $('#email').val(),
username: $('#username').val(),
password: $('#password').val()
});
postdata(url, jsondata, 2);
});
function postdata(url, jsondata, formId) {
var request = $.ajax({
type: "POST",
url: url,
contentType: 'application/json',
data: jsondata
});
request.done(function (msg) {
if (formId == 1) {
if (msg.errorcode == 200 && msg.obj == true) {
alert("Authentication Successful");
} else {
alert("Authentication failed");
}
}
if (formId == 2) {
if (msg.errorcode == 200) {
alert("Registration Successful Your Access Id is " + msg.obj);
} else {
alert("Registration failed");
}
}
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
}
});
HTML FORM
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<!-- Title and other stuffs -->
<title>xxxxxx Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- Stylesheets -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax-handler.js"></script>
<script src="js/respond.min.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Favicon -->
</head>
<body>
<!-- Form area -->
<div class="admin-form">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Widget starts -->
<div class="widget worange">
<!-- Widget head -->
<div class="widget-head"> <i class="fa fa-lock"></i> Login</div>
<div class="widget-content">
<div class="padd">
<!-- Login form -->
<form class="form-horizontal">
<!-- Email -->
<div class="form-group">
<label class="control-label col-lg-3" for="inputEmail">Email</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<!-- Password -->
<div class="form-group">
<label class="control-label col-lg-3" for="inputPassword">Password</label>
<div class="col-lg-9">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<!-- Remember me checkbox and sign in button -->
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<div class="col-lg-9 col-lg-offset-3">
<button type="button" id="submit" class="btn btn-info btn-sm">Sign in</button>
<button type="reset" class="btn btn-default btn-sm">Reset</button>
</div>
<br />
</form>
</div>
</div>
<div class="widget-foot">Not Registred? Register here
</div>
</div>
</div>
</div>
</div>
</div>
</body>
You should prevent the default hard form submit if you wish to use asynchronous submission. Otherwise form gets refreshed
$("#submit").click(function (e) {
e.preventDefault();
check whether you really need to stringify the data. Normally, in most cases it's just enough to pass it as an object to jQuery.ajax(), unless the server really needs it as JSON string. jQuery internally does the necessary conversion. (serializes to query string) if it's an object or array.
var jsondata = {
username: $('#inputEmail').val(),
password: $('#inputPassword').val()
};