How can I display my data into another html after submit? I tried to store the value in local Storage and that didn't work out. How can i display the result in other page? In the below snippet i some how achieved to display data by using show and hide methods. But i'm looking to display my data in new HTML page.
var data = [
{
"username": "MADHU BABU POOJALA",
"skills": "BD",
"location": "Hyderabad",
"email": "rgw#yahoo.in",
"bscore": 856,
"ranking": 14652,
},
{
"username": "Mj",
"skills": ".net",
"location": "Hyderabad",
"email": "csaca#yahoo.in",
"bscore": 8540,
"ranking": 1452,
}
];
var result = [];
function Sort(val) {
result.sort(function (a, b) {
if (a[val] < b[val]) return -1;
if (a[val] > b[val]) return 1;
return 0;
});
searchResult(result);
}
function search(str) {
var str = str.trim().toUpperCase();
if (str !== '') {
var rslt = [];
for (var j = 0; j < result.length; j++) {
if (result[j].skills.toUpperCase().match(str)) {
rslt.push(result[j]);
}
}
searchResult(rslt);
} else {
searchResult(result);
}
}
function getResult() {
/* Read value from input fields */
var skills = $("#skills").val() || '',
email = $("#email").val() || '',
username = $("#username").val() || '',
location = $("#location").val() || '',
i;
result = []
for (i = 0; i < data.length; i++) {
if ((skills !== '' && data[i]["skills"].toUpperCase().indexOf(skills.toUpperCase()) !== -1) || (data[i]
["email"].toUpperCase() === email.toUpperCase()) || (data[i]["location"].toUpperCase() ===
location.toUpperCase()) || (
data[i]["username"].toUpperCase() === username.toUpperCase())) {
result.push(data[i]);
}
}
return result;
};
$('#submit').click(function onClick() {
$(".ip").hide();
$(".tb").show();
var output = getResult();
searchResult(output);
});
$("#back").click(function () {
$('input[type="text"]').val('').removeAttr('checked').removeAttr('selected');
$('input[type="email"]').val('').removeAttr('checked').removeAttr('selected');
$(".tb").hide();
$(".ip").show();
});
function searchResult(output) {
var html = '';
$.each(output, function (key, value) {
html += '<div style="border:1px solid #000;padding:10px;margin:10px;">';
html += '<span style="font-weight:bold;">' + value.username + '</span>' +
'<br/>';
html += '<span>' + 'Email :' + '</span>' + '<span>' + value.email + '</span>' +
'<br/>';
html += '<span>' + 'Skills :' + '</span>' + '<span>' + value.skills + '</span>' +
'<br/>';
html += '<span>' + 'Location :' + '</span>' + '<span>' + value.location + '</span>' +
'<br/>';
html += '<span>' + 'B-score :' + '</span>' + '<span>' + value.bscore + '</span>' +
'<br/>';
html += '<span>' + 'Ranking :' + '</span>' + '<span>' + value.ranking + '</span>' +
'<br/>';
html += '</div>';
});
$('#table').html(html);
}
$(document).ready(function () {
$('#submit').attr('disabled', 'disabled');
$('input[type="text"]').keyup(function () {
if ($(this).val() != '') {
$('input[type="submit"]').removeAttr('disabled');
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.results tr[visible='false'],
.no-result {
display: none;
}
.results tr[visible='true'] {
display: table-row;
}
.form-group {
position: fixed;
top: 30%;
left: 50%;
width: 1200px;
height: 200px;
background: #fff;
transform: translate(-15%, -50%);
}
</style>
</head>
<body>
<div class="ip">
<div class="form-group ">
<div class="col-4">
<label for="skills">Skills</label>
<input class="form-control" id="skills" type="text" placeholder="skills">
</div>
<div class="col-4">
<label for="email">Email</label>
<input class="form-control" id="email" type="text" placeholder="mail id">
</div>
<div class="col-4">
<label for="username">Username</label>
<input class="form-control" id="username" type="text" placeholder="username">
</div>
<div class="col-4">
<label for="location">location</label>
<input class="form-control" id="location" type="text" placeholder="location">
</div>
<br>
<div class="col-4">
<input id="submit" class="btn" type="submit" value="submit" disabled='disabled'>
</div>
</div>
</div>
<br>
<div style="display: none" class="tb">
<button class="btn" id="back">back to search</button>
<br>
<br>
<br>
<div class="container-fluid">
<div class="row">
<div class="left">
<label style="font-size: 20px;color: black;margin:0px">
Core Skills :
</label>
<input type="text" onkeyup="search(this.value)">
</div>
<div class="right">
<form>
<label style="font-size: 20px;color: black;margin:0px">
Sort By :
</label>
<select onchange="Sort(this.value)">
<option>-- select --</option>
<option value="username">A to Z</option>
<option value="bscore">B-score</option>
<option value="ranking">Ranking</option>
</select>
</form>
</div>
</div>
</div>
<div id="table">
</div>
</div>
</body>
</html>
The expected behaviour of the code above is when I click the "Add" button the issue is created and is shown beneath the button. The problem is, nothing happens instead. I've been trying to search the web to find an answer but with no luck. Any idea what's wrong?
Here are my index.html and JavaScript:
document.getElementById('issueInputForm').addEventListener('submit', saveIssue);
function saveIssue(e) {
var issueDesc = document.getElementById('issueDescInput').value;
var issueSeverity = document.getElementById('issueSeverityInput').value;
var issueAssignedTo = document.getElementById('issueAssigntedToInput').value;
var issueID = chance.guid();
var issueStatus = 'Open';
var issue = {
id: issueID,
description: issueDesc,
severity: issueSeverity,
assignedTo: issueAssignedTo,
status: issueStatus
};
if (localStorage.getItem('issues') === null) {
//var issues = [];
issues.push(issue);
localStorage.setItem('issues', JSON.stringify(issues));
} else {
var issues = JSON.parse(localStorage.getItem('issues'));
issues.push(issue);
localStorage.setItem('issues', JSON.stringify(issues));
}
document.getElementById('issueInputForm').reset();
fetchIssue();
e.preventDefault();
}
function setStatusClosed(id) {
var issues = JSON.parse(localStorage.getItem('issues'));
for (var i = 0; i < issues.length; i++)
if (issues[i].id === id)
issues[i].status = 'Closed';
localStorage.setItem('issues', JSON.stringify(issues));
fetchIssue();
}
function deleteIssue(id) {
var issues = JSON.parse(localStorage.getItem('issues'));
for (var i = 0; i < issues.length; i++)
if (issues[i].id === id)
issues.splice(i, 1);
localStorage.setItem('issues', JSON.stringify(issues));
fetchIssue();
}
function fetchIssue() {
var issues = JSON.parse(localStorage.getItem('issues'));
var issuesList = document.getElementById('issuesList');
issuesList.innerHTML = '';
for (var i = 0; i < issues.length; i++) {
var id = issues[i].id;
var desc = issues[i].description;
var severity = issues[i].severity;
var assignedTo = issues[i].assignedTo;
var status = issues[i].status;
issuesList.innerHTML += '<div class="well">' +
'<h6> Issue ID: ' + id + '</h6>' +
'<p><span class="label label-info">' + status + '</span></p>' +
'<h3>' + desc + '</h3>' +
'<p><span class="glyphicon glyphicon-time"></span>' + severity + '</p>' +
'<p><span class="glyphicon glyphicon-user"></span>' + assignedTo + '</p>' +
'Close' +
'Delete'+
'</div>';
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Issue Tracker</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body onload="fetchIssue()">
<div class="container">
<h1>JS IssueTracker</h1>
</div class="jumbotron">
<h3>Add New Issue:</h3>
<form id="issueInputForm" >
<div class="form-group">
<label for="issueDescInput">Description</label>
<input type="text" class="form-control" id="issueDescInput" placeholder="Describe the issue...">
</div>
<div class="form-group">
<label for="issueSeverityInput">Severity</label>
<select id="issueSeverityInput" class="form-control">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
<div class="form-group">
<label for="issueAssignedToInput">Assigned to</label>
<input type="text" class="form-control" id="issueAssignedToInput" placeholder="Enter responsible">
</div>
<button type="button" class="btn btn-primary">Add</button>
</form>
<div class="col-lg-12">
<div id="issuesList"></div>
</div>
<div class="footer">
<p>© Ida Djurhuus</p>
</div>
<script src="http://chancejs.com/chance.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
As #epascarello already mentioned
type="button" does not submit forms
So change the type to submit
<button type="submit" class="btn btn-primary">Add</button>
From MDN
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
in your code 2 problem
1) change type="button" to type="submit"
2) var issueAssignedTo = document.getElementById('issueAssigntedToInput').value;
chaneg this line in id
var issueAssignedTo = document.getElementById('issueAssignedToInput').value;
document.getElementById('issueInputForm').addEventListener('submit', saveIssue);
function saveIssue(e) {
debugger;
var issueDesc = document.getElementById('issueDescInput').value;
var issueSeverity = document.getElementById('issueSeverityInput').value;
var issueAssignedTo = document.getElementById('issueAssignedToInput').value;
var issueID = chance.guid();
var issueStatus = 'Open';
var issue = {
id: issueID,
description: issueDesc,
severity: issueSeverity,
assignedTo: issueAssignedTo,
status: issueStatus
};
if (localStorage.getItem('issues') === null) {
//var issues = [];
issues.push(issue);
localStorage.setItem('issues', JSON.stringify(issues));
} else {
var issues = JSON.parse(localStorage.getItem('issues'));
issues.push(issue);
localStorage.setItem('issues', JSON.stringify(issues));
}
document.getElementById('issueInputForm').reset();
fetchIssue();
e.preventDefault();
}
function setStatusClosed(id) {
var issues = JSON.parse(localStorage.getItem('issues'));
for (var i = 0; i < issues.length; i++) {
if (issues[i].id === id) {
issues[i].status = 'Closed';
}
}
localStorage.setItem('issues', JSON.stringify(issues));
fetchIssue();
}
function deleteIssue(id) {
var issues = JSON.parse(localStorage.getItem('issues'));
for (var i = 0; i < issues.length; i++) {
if (issues[i].id === id) {
issues.splice(i, 1);
}
}
localStorage.setItem('issues', JSON.stringify(issues));
fetchIssue();
}
function fetchIssue() {
var issues = JSON.parse(localStorage.getItem('issues'));
var issuesList = document.getElementById('issuesList');
issuesList.innerHTML = '';
for (var i = 0; i < issues.length; i++) {
var id = issues[i].id;
var desc = issues[i].description;
var severity = issues[i].severity;
var assignedTo = issues[i].assignedTo;
var status = issues[i].status;
issuesList.innerHTML += '<div class="well">' +
'<h6> Issue ID: ' + id + '</h6>' +
'<p><span class="label label-info">' + status + '</span></p>' +
'<h3>' + desc + '</h3>' +
'<p><span class="glyphicon glyphicon-time"></span>' + severity + '</p>' +
'<p><span class="glyphicon glyphicon-user"></span>' + assignedTo + '</p>' +
'Close' +
'Delete'+
'</div>';
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
<h1>JS IssueTracker</h1>
</div class="jumbotron">
<h3>Add New Issue:</h3>
<form id="issueInputForm" >
<div class="form-group">
<label for="issueDescInput">Description</label>
<input type="text" class="form-control" id="issueDescInput" placeholder="Describe the issue...">
</div>
<div class="form-group">
<label for="issueSeverityInput">Severity</label>
<select id="issueSeverityInput" class="form-control">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
<div class="form-group">
<label for="issueAssignedToInput">Assigned to</label>
<input type="text" class="form-control" id="issueAssignedToInput" placeholder="Enter responsible">
</div>
<button type="submit" class="btn btn-primary">Add</button>
</form>
<div class="col-lg-12">
<div id="issuesList">
</div>
</div>
<div class="footer">
<p>© Ida Djurhuus</p>
</div>
<script src="http://chancejs.com/chance.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
Have made few changes to your code:
Since element with type="button" cannot be associated with submit event, have changed the type as submit.
Added null check in fetchIssue function so that the code wont break when there are no issues.
Corrected a typo in the saveIssue function - document.getElementById('issueAssigntedToInput') to document.getElementById('issueAssignedToInput')
Declared variable "issues" in saveIssue function when the localStorage.getItem('issues') is null.
document.getElementById('issueInputForm').addEventListener('submit', saveIssue);
function saveIssue(e) {
var issueDesc = document.getElementById('issueDescInput').value;
var issueSeverity = document.getElementById('issueSeverityInput').value;
var issueAssignedTo = document.getElementById('issueAssignedToInput').value;
var issueID = chance.guid();
var issueStatus = 'Open';
var issue = {
id: issueID,
description: issueDesc,
severity: issueSeverity,
assignedTo: issueAssignedTo,
status: issueStatus
};
var issues = [];
if (localStorage.getItem('issues') !== null) {
issues = JSON.parse(localStorage.getItem('issues'));
}
issues.push(issue);
localStorage.setItem('issues', JSON.stringify(issues));
document.getElementById('issueInputForm').reset();
fetchIssue();
e.preventDefault();
}
function setStatusClosed(id) {
var issues = JSON.parse(localStorage.getItem('issues'));
for (var i = 0; i < issues.length; i++) {
if (issues[i].id === id) {
issues[i].status = 'Closed';
}
}
localStorage.setItem('issues', JSON.stringify(issues));
fetchIssue();
}
function deleteIssue(id) {
var issues = JSON.parse(localStorage.getItem('issues'));
for (var i = 0; i < issues.length; i++) {
if (issues[i].id === id) {
issues.splice(i, 1);
}
}
localStorage.setItem('issues', JSON.stringify(issues));
fetchIssue();
}
function fetchIssue() {
var issues = JSON.parse(localStorage.getItem('issues'));
if(typeof issues !== 'undefined' && issues !== null) {
var issuesList = document.getElementById('issuesList');
issuesList.innerHTML = '';
for (var i = 0; i < issues.length; i++) {
var id = issues[i].id;
var desc = issues[i].description;
var severity = issues[i].severity;
var assignedTo = issues[i].assignedTo;
var status = issues[i].status;
issuesList.innerHTML += '<div class="well">' +
'<h6> Issue ID: ' + id + '</h6>' +
'<p><span class="label label-info">' + status + '</span></p>' +
'<h3>' + desc + '</h3>' +
'<p><span class="glyphicon glyphicon-time"></span>' + severity + '</p>' +
'<p><span class="glyphicon glyphicon-user"></span>' + assignedTo + '</p>' +
'Close' +
'Delete'+
'</div>';
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Issue Tracker</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body onload="fetchIssue()">
<div class="container">
<h1>JS IssueTracker</h1>
</div>
<h3>Add New Issue:</h3>
<form id="issueInputForm" >
<div class="form-group">
<label for="issueDescInput">Description</label>
<input type="text" class="form-control" id="issueDescInput" placeholder="Describe the issue...">
</div>
<div class="form-group">
<label for="issueSeverityInput">Severity</label>
<select id="issueSeverityInput" class="form-control">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
<div class="form-group">
<label for="issueAssignedToInput">Assigned to</label>
<input type="text" class="form-control" id="issueAssignedToInput" placeholder="Enter responsible">
</div>
<button type="submit" class="btn btn-primary">Add</button>
</form>
<div class="col-lg-12">
<div id="issuesList">
</div>
</div>
<div class="footer">
<p>© Ida Djurhuus</p>
</div>
<script src="http://chancejs.com/chance.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
I have a ajax call that retreives data and its success portion looks like this:
$("table.table").append("<tr><td>ID: " + item.ID + "</td><td>Name: " + item.name +" Url:</td><td><a href='https://.......sharepoint.com/" +item.url+ "'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a>" + "</td></tr>");
My html table look like this:
<table class="table"></table>
I am trying to show elements like a table:
But instead it's shows like single sentence, like this one: ID: 002 Name: toysrus Url:(icon)
How can I solve this problem and is there any way that I can make items look little bit more modern and useful.
Any suggestion will be highly appreciated.
var uri = 'sharepointmodel.json';
function find() {
var info = $('#KUNDE').val()
$("#loader").show();
$.getJSON(uri)
.done(function (data) {
var item = data.filter(function (obj) {
return obj.name === info || obj.ID === info;
})[0];
if (typeof item ==='undefined'){
alert("Ukendt navn eller ID");
}
else if (typeof item !== 'undefined' || item !== null){
$("table.table").append("<tr><td>ID: " + item.ID + "</td><td>Name: " + item.name +" Url:</td><td><a href='https://........sharepoint.com/" +item.url+ "'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a>" + "</td></tr>");
}
})
.fail(function (jqXHR, textStatus, err) {
$('#ERROR').text('Kan ikke oprette forbindelse til serveren! '/* + err*/);}).always(function (){$("#loader").hide();
});
}
and Html part is:
<body>
<header>
<a href="index.html" id="logo">
<h1></h1>
<h2></h2>
</a>
<nav>
<ul>
<li>SearchBox</li>
<li>.com</li>
<li>Support&Aflastning</li>
</ul>
</nav>
</header>
<div class="container">
<li class="li-myLeagues">
<div style="float:left;margin-left:10px;">
<input type="text" id="KUNDE" placeholder="Search by name or ID." value="" size="60" />
<div id="loader" style="display:none;"><img src="loader.gif" /></div> </div>
<div style="float:left;margin-left:10px;">
<button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button>
</div>
</li>
</div>
<div id="loader" style="display:none;"><img src="loader.gif" /></div>
<section class="section">
<div class="liper">
<table class="table"></table>
<p id="ERROR" /> </p>
</div>
</section>
Sorry its looks very messy.
Like this?
$("table.table").append("<thead><tr><th>ID</th><th>Name</th><th>URL</th></tr></thead>");
$("table.table").append("<tr><td>1</td><td>MARC</td><td><a href='https://.......sharepoint.com'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a></td></tr>");
$("table.table").append("<tr><td>2</td><td>MICHAEL</td><td><a href='https://.......sharepoint.com'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a></td></tr>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1 class="table"></table>
$(() => {
var jsonObject = [{ id: '002', name: 'Google', Icon: 'https://t0.rbxcdn.com/98aeff8137da4af6157fb1c29836d9bc' },
{ id: '002', name: 'Fb', Icon: 'https://t0.rbxcdn.com/875e717ac7ae0df8d133278d0c52f963' },
{ id: '002', name: 'Yahoo', Icon: 'https://t0.rbxcdn.com/875e717ac7ae0df8d133278d0c52f963' }]
;
//Get the external template definition using a jQuery selector
var template = kendo.template($("#javascriptTemplate").html());
//Create some dummy data
var data = jsonObject;
var result = template(data); //Execute the template
$("table").html(result); //Append the result
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
<table></table>
<script id="javascriptTemplate" type="text/x-kendo-template">
<table>
<tr> <td><b>ID</b> </td> <td> <b>Name </b> </td> <td> <b>icon </b> </td> </tr>
# for (var i = 0; i < data.length; i++) { #
<tr> <td> #= data[i].id #</td> <td> #= data[i].name # </td> <td> <img src="#= data[i].Icon #" width="150px" height="150px"/> </td> </tr>
# } #
</table>
</script>
</body>
</html>
I would like to remove my list result when I search second element from search box.
I have tried some jquery code but I assume its not working because I am using it on wrong place or wrong content.
Any suggestion will be highly appreciated.
Here is the my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kunde</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script src="autocomplete/jquery.easy-autocomplete.min.js"></script>
<link href="autocomplete/easy-autocomplete.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="custom.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="jumbotron">
<div class="col-lg-4">
<input type="text" id="KUNDE" size="50" placeholder="Search by name." />
</div>
<div class="col-lg-2">
<input class="btn btn-default" id="buton" type="submit" value="search" onclick="find();" />
</div>
</div>
<ul id="list"></ul>
<div class="footer"><p> © Copyright 2016</p> <strong>RackPeople</strong>.</div>
</div>
<script>
$(function () {
$("#KUNDE").focus();
});
$(document).keypress(function (e) {
if (e.which == 13) {
$("#buton").click();
}
});
//$('#button').on('click', function () {
// $(root).empty();
//});
//$("li:eq(3)", $(root)).remove();
//$('ul').eq(1).toggleClass('hidden');
//$('#ul').empty();
//$("#buton").click(function () {
// $("#list").remove();
//});
//$('#buton').on('click', '.itemDelete', function () {
// $(this).closest('li').remove();
//});
var uri = 'json.json';
function find() {
var info = $('#KUNDE').val();
$.getJSON(uri)
.done(function (data) {
var item = data.filter(function (obj) {
return obj.name === info || obj.ID === info;
})[0];
if (typeof item !== 'undefined' || item !== null) {
$("ul").append("<li>" + 'ID = ' + item.ID, 'Name = ' + item.name, "<br />" + 'Phone = ' + item.phone, "<br />" + 'Contact = ' + item.contact, "<br />" + 'BalanceLCY = ' + item.balanceLCY, "<br />" + 'CreditLimitLCY = ' + item.creditLimitLCY, "</li>")
}
})
.fail(function (jqXHR, textStatus, err) {
$('#RESULTS').text('Error: ' + err);
});
}
var options = {
url: "json.json",
getValue: "name",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#KUNDE").easyAutocomplete(options);
</script>
</body>
</html>
you have
<input class="btn btn-default" id="buton" type="submit" value="search" onclick="find();" />
try
<button type="button" id="buton">Click me</button>
and
$("#buton").click(function () {
$("#list").remove();
//do more stuff
});
$client_number = $_POST['client_number'];
$client_name = $_POST['client_name'];
$service = $_POST['service'];
$size = $_POST['size'];
$volume = $_POST['volume'];
$deliver_point = $_POST['deliver_point'];
$port_orgin = $_POST['port_orgin'];
$a_port_orgin = $_POST['a_port_orgin'];
$road_freight = $_POST['road_freight'];
$terms = $_POST['terms'];
$competitor = $_POST['competitor'];
$freight_speed = $_POST['freight_speed'];
$report_comments = $_POST['report_comments'];
$company_stage = $_POST['company_stage'];
$meeting_rating = $_POST['meeting_rating'];
$client_user_name = $_POST['client_user_name'];
$client_user_status = $_POST['client_user_status'];
$client_user_kids = $_POST['client_user_kids'];
$client_user_hobbies = $_POST['client_user_hobbies'];
$client_user_comments = $_POST['client_user_comments'];
$query="INSERT INTO tobytemp.fcl_reports (client_number,client_name,service,size,volume,deliver_point,port_orgin,a_port_orgin,road_freight,terms,competitor,freight_speed,report_comments,company_stage,meeting_rating,client_user_name,client_user_status,client_user_kids,client_user_hobbies,client_user_comments)
VALUES ('".$client_number."', '".$client_name."', '".$service."', '".$size."', '".$volume."', '".$deliver_point."', '".$port_orgin."', '".$a_port_orgin."', '".$road_freight."', '".$terms."', '".$competitor."', '".$freight_speed."', '".$report_comments."', '".$company_stage."', '".$meeting_rating."', '".$client_user_name."', '".$client_user_status."', '".$client_user_kids."', '".$client_user_hobbies."', '".$client_user_comments."');";
$result = $dbLink->query($query);
<!DOCTYPE HTML>
<html>
<head>
<title>Sales App</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="images/scicon.gif"/>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(
hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href='http://fonts.googleapis.com/css?family=Kreon:300,400,700' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- start plugins -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
<!----font-Awesome----->
<link rel="stylesheet" href="fonts/css/font-awesome.min.css">
<!----font-Awesome----->
</head>
<body>
<div class="header_bg" id="home"><!-- start header -->
<div class="container">
<div class="row header text-center specials">
<div class="h_logo">
<img src="images/logo.png" alt="" class="responsive"/>
</div>
<nav class="top-nav">
<ul class="top-nav nav_list">
<li>FCL Clients</li>
<li class="page-scroll">Rates</li>
<li class="logo page-scroll"><a title="hexa" href="index.html"><img src="images/logo.png" alt="" class="responsive"/></a></li>
<li class="page-scroll">Reports</li>
<li class="page-scroll">Contact</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</div>
</div>
<div class="main_bg" id="about"><!-- start about us -->
<div class="container">
<div class="row about">
<div class="col-md-3 about_img">
<!--<img src="images/captain.png" alt="" class="responsive"/>-->
</div>
<div class="col-md-9 about_text">
</br></br><h3>Client Reports</h3>
<h4>FCL Profile Extras</h4></br>
<button class="buttons" id="showr">Show Table</button></br><button class="buttons" id="hider">Hide Table</button>
</br></br>
<script>
$( "#showr" ).click(function() {
$( "#fcl_form_data-table" ).slideDown( 100 );
});
$( "#hider" ).click(function() {
$( "#fcl_form_data-table" ).slideUp( 100 );
});
</script>
<table id="fcl_form_data-table" style="display: none">
<th>BROSWER DB ID</th>
<th>client_number</th>
<th>client_name</th>
<th>service</th>
<th>size</th>
<th>volume</th>
<th>deliver_point</th>
<th>port_orgin</th>
<th>a_port_orgin</th>
<th>road_freight</th>
<th>terms</th>
<th>competitor</th>
<th>freight_speed</th>
<th>company_stage</th>
<th>meeting_rating</th>
<th>client_user_name</th>
<th>client_user_status</th>
<th>client_user_kids</th>
<th>client_user_hobbies</th>
<th>client_user_comments</th>
<th>Upload</th>
<tr id="fcl_form_data-head">
<!-- Saved data will be put here :D -->
</tr>
</table>
</br>
<!-- start -->
<div class="footer_bg">
<div class="container">
<div class="row footer">
<div class="col-md-8 contact_left">
<form id="fcl_form_data-form" >
<div class = "qborder" style="bottom-margin:500px; width:95%;">
<h4>Client Info</h4></br>
<input type="text" name="client_number" placeholder="Client Number" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Client Number';}">
<input type="text" name="client_name" placeholder="Client Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Client Name';}">
</div>
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<div class = "qborder" style="width:15%;">
<h4>Shipping Info</h4></br>
<select name='service'>
<option value=''>Service - </option>
<option value='Inport'>Inport</option>
<option value='Export'>Export</option>
<option value='Airfreight'>Airfreight</option>
<option value='W/housing'>W/housing</option>
</select>
</br></br>
<select name='size'>
<option value=''>Size - </option>
<option value='20'>20</option>
<option value='40'>40</option>
<option value='40'>40</option>
<option value='HQ'>HQ</option>
<option value='45'>45</option>
<option value='LCL'>Exact</option>
</select>
</br></br>
<select name='volume'>
<option value=''>Volume - </option>
<option value='Daily'>Daily</option>
<option value='Weekly'>Weekly</option>
<option value='Monthly'>Monthly</option>
<option value='Yearly'>Yearly</option>
<option value='Exact'>Exact</option>
</select></br>
<input type="text" name="deliver_point" placeholder="Deliver Point">
<input type="text" name="port_orgin" placeholder="Port Origin">
<input type="text" name="a_port_orgin" placeholder="A/Port Origin">
<input type="text" name="road_freight" placeholder="Road Freight">
<!-- onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Road Freight';}" -->
<select name='terms'>
<option value=''>Terms - </option>
<option value='EXM'>EXM</option>
<option value='FOB'>FOB</option>
<option value='PrePaid'>PrePaid</option>
</select>
</br></br>
<select name='competitor'>
<option value=''>Competitor - </option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select></br>
<input type="text" name="freight_speed" placeholder="Freight Speed" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Freight Speed';}">
<textarea name="report_comments" placeholder="Comments" onfocus="if(this.value == 'Comments') this.value='';" onblur="if(this.value == '') this.value='Comments;"></textarea>
<button type="button" class="remove-field">Remove</button>
<button type="button" class="add-field">Add field</button>
</div>
</br>
</div>
</div>
</div>
<div class = "qborder" style="width:95%;">
<h4>Meeting Info</h4></br>
<select name='company_stage' >
<option value=''>Company Stage - </option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
<select name='meeting_rating'>
<option value=''>Meeting Rating - </option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
</div>
</br>
<div class = "qborder" style="width:95%;">
<h4> Personal Information </h4></br>
<input type="text" name="client_user_name" placeholder="User Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
<select name='client_user_name_status'>
<option value=''>Status - </option>
<option value='Single'>Single</option>
<option value='Married'>Married</option>
</select>
<select name='client_user_name_kids'>
<option value=''>Kids - </option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5+</option>
</select>
<input type="text" name="client_user_name_hobbies" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Hobbies';}">
<textarea name="client_user_comments" placeholder="Comments" onfocus="if(this.value == 'Comments') this.value='';" onblur="if(this.value == '') this.value='Comments;"></textarea>
</div>
</br>
<span class="pull-left">
<!-- <input type="button" id="fcl_form_data-op-discard" value="Discard" /> -->
<input type="submit" id="fcl_form_data-op-save" value="Save" />
<input type="hidden" name="id_entry" value="0" />
</span>
<div class="clear"></div>
</form>
</div>
</div>
</div>
</div>
<!-- End -->
</div>
</div>
</div>
</div>
<div class="footer_bg" id="contact"><!-- start footer -->
<div class="container">
<div class="row footer">
<div class="col-md-4 contact_right">
<!-- <p><span>About Us: </span> Established in 1998, The Cardinal Maritime Group is one of the fastest growing logistics service providers. </p> -->
<ul class="list-unstyled address">
<li><i class="fa fa-envelope"></i>sales#cardinalmaritime.com</li>
<li><i class="fa fa-phone"></i><span>England Tel: +44 (0) 161 492 1778</span></li>
<li><i class="fa fa-map-marker"></i><span>Cardinal Maritime Limited, Leestone Road, Sharston Industrial Estate, Manchester M22 4RB </span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer1_bg"><!-- start footer1 -->
<div class="container">
<div class="row footer">
<div class="copy text-center">
<p class="link"><span>© Cardinalmaritime | Cardinal Maritime</span></p>
<span id="toTopHover" style="opacity: 1;"> </span>
</div>
</div>
</div>
</div>
<script>
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
</script>
<script>
var fcl_form_data = {
index: window.localStorage.getItem("fcl_form_data:index"),
$table: document.getElementById("fcl_form_data-table"),
$form: document.getElementById("fcl_form_data-form"),
$button_save: document.getElementById("fcl_form_data-op-save"),
$button_discard: document.getElementById("fcl_form_data-op-discard"),
init:
function() {
// initialize storage index
if (!fcl_form_data.index) {
window.localStorage.setItem("fcl_form_data:index", fcl_form_data.index = 1);
}
// initialize form
fcl_form_data.$form.reset();
/*
fcl_form_data.$button_discard.addEventListener("click", function(event) {
fcl_form_data.$form.reset();
fcl_form_data.$form.id_entry.value = 0;
},
true);
*/
fcl_form_data.$form.addEventListener("submit", function(event) {
var entry = {
id: parseInt(this.id_entry.value),
client_number:this.client_number.value,
client_name:this.client_name.value,
service:this.service.value,
size:this.size.value,
volume:this.volume.value,
deliver_point:this.deliver_point.value,
port_orgin:this.port_orgin.value,
a_port_orgin:this.a_port_orgin.value,
road_freight:this.road_freight.value,
terms:this.terms.value,
competitor:this.competitor.value,
freight_speed:this.freight_speed.value,
report_comments:this.report_comments.value,
company_stage:this.company_stage.value,
client_user_name:this.client_user_name.value,
client_user_name_status:this.client_user_name_status.value,
client_user_name_kids:this.client_user_name_kids.value,
client_user_name_hobbies:this.client_user_name_hobbies.value,
client_user_comments:this.client_user_comments.value
};
if (entry.id == 0) { // add
fcl_form_data.storeAdd(entry);
// Adds data to table when pressed save - like a temp table above
fcl_form_data.tableAdd(entry);
}
else { // edit
fcl_form_data.storeEdit(entry);
fcl_form_data.tableEdit(entry);
}
this.reset();
this.id_entry.value = 0;
event.preventDefault();
},
true);
////////////////////////////////////////////////////////////////////////////////////////Load DB info into table
if (window.localStorage.length - 1) {
var data_list = [], i, key;
for (i = 0; i < window.localStorage.length; i++) {
key = window.localStorage.key(i);
if (/fcl_form_data:\d+/.test(key)) {
data_list.push(JSON.parse(window.localStorage.getItem(key)));
}
}
if (data_list.length) {
data_list
.sort(
function(a, b) {
return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);
})
.forEach(fcl_form_data.tableAdd);
}
}
/////////////////////////////////////////////////////////////////////////////////////
fcl_form_data.$table.addEventListener("click", function(event) {
var op = event.target.getAttribute("data-op");
if (/edit|remove/.test(op)) {
var entry = JSON.parse(window.localStorage.getItem("fcl_form_data:"+ event.target.getAttribute("data-id")));
if (op == "edit") {
fcl_form_data.$form.client_number.value = entry.client_number;
fcl_form_data.$form.client_name.value = entry.client_name;
fcl_form_data.$form.service.value = entry.service;
fcl_form_data.$form.size.value = entry.size;
fcl_form_data.$form.volume.value = entry.volume;
fcl_form_data.$form.deliver_point.value = entry.deliver_point;
fcl_form_data.$form.port_orgin.value = entry.port_orgin;
fcl_form_data.$form.a_port_orgin.value = entry.a_port_orgin;
fcl_form_data.$form.road_freight.value = entry.road_freight;
fcl_form_data.$form.terms.value = entry.terms;
fcl_form_data.$form.competitor.value = entry.competitor;
fcl_form_data.$form.freight_speed.value = entry.freight_speed;
fcl_form_data.$form.report_comments.value = entry.report_comments;
fcl_form_data.$form.company_stage.value = entry.company_stage;
fcl_form_data.$form.meeting_rating.value = entry.meeting_rating;
fcl_form_data.$form.client_user_name.value = entry.client_user_name;
fcl_form_data.$form.client_user_name_status.value = entry.client_user_name_status;
fcl_form_data.$form.client_user_name_kids.value = entry.client_user_name_kids;
fcl_form_data.$form.client_user_name_hobbies.value = entry.client_user_name_hobbies;
fcl_form_data.$form.client_user_comments.value = entry.client_user_comments;
fcl_form_data.$form.id_entry.value = entry.id;
}
else if (op == "remove") {
if (confirm('Are you sure you want to remove "'+ entry.client_number +' '+ entry.client_name +'" from your fcl_form_data?')) {
fcl_form_data.storeRemove(entry);
fcl_form_data.tableRemove(entry);
}
}
event.preventDefault();
}
},
true);
},
storeAdd:
function(entry) {
entry.id = fcl_form_data.index;
window.localStorage.setItem("fcl_form_data:index", ++fcl_form_data.index);
window.localStorage.setItem("fcl_form_data:"+ entry.id, JSON.stringify(entry));
},
storeEdit:
function(entry) {
window.localStorage.setItem("fcl_form_data:"+ entry.id, JSON.stringify(entry));
},
storeRemove:
function(entry) {
window.localStorage.removeItem("fcl_form_data:"+ entry.id);
},
tableAdd:
function(entry) {
var $tr = document.createElement("tr"), $td, key;
for (key in entry) {
if (entry.hasOwnProperty(key)) {
$td = document.createElement("td");
$td.appendChild(document.createTextNode(entry[key]));
$tr.appendChild($td);
}
}
$td = document.createElement("td");
$td.innerHTML ='<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
$tr.appendChild($td);
$tr.setAttribute("id", "entry-"+ entry.id);
fcl_form_data.$table.appendChild($tr);
},
tableEdit:
function(entry) {
var $tr = document.getElementById("entry-"+ entry.id), $td, key;
$tr.innerHTML ="";
for (key in entry) {
if (entry.hasOwnProperty(key)) {
$td = document.createElement("td");
$td.appendChild(document.createTextNode(entry[key]));
$tr.appendChild($td);
}
}
$td = document.createElement("td");
$td.innerHTML ='<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
$tr.appendChild($td);
},
tableRemove:
function(entry) {
fcl_form_data.$table.removeChild(document.getElementById("entry-"+ entry.id));
}
};
fcl_form_data.init();
</script>
</body>
</html>
Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script, Here is my full script,
I would recommend you to start over your code, so you would be able to design it better, but as soon as it's already too big, and I don't have enough time for that, I'll keep your style, and try to help you:
First of all, you need to know that your PHP code will only handle INSERT statements, so, you'll need to do another code for the edits (UPDATE statement), and for the removals (DELETE statement).
You already have a storeAdd function, so I've copied to create the databaseAdd one:
databaseAdd: function(entry) {
ajax('http://cmlsys/toby/fcl_form_upload.php', null, 'POST', entry);
},
And then, our ajax helper:
function ajax(url, callback, method, params) {
if (!method) method = 'GET';
var xhr = new XMLHttpRequest();
xhr.open(method, url);
if (callback) xhr.addEventListener('load', function() {
callback.call(this, xhr);
});
if (params) {
params = Object.keys(params).map(function (key) {
return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
}).join('&');
xhr.send(params);
}
else {
xhr.send();
}
}
So you'll use right below the storeAdd and tableAdd functions:
if (entry.id == 0) { // add
fcl_form_data.storeAdd(entry);
// Adds data to table when pressed save - like a temp table above
fcl_form_data.tableAdd(entry);
fcl_form_data.databaseAdd(entry);
}