<in search.php>
<?php require_once("../includes/session.php"); ?>
<?php require_once("../includes/connection.php") ?>
<?php require_once("../includes/functions.php") ?>
<?php
$searchq = $_POST['searchq'];
$tablehead="<tr><th>Product Name</th><th>Category</th><th>Price</th><th>Discount</th><th>Edit</th></tr>";
$tabledata = "";
if(empty($searchq)) {
echo "";
} else {
//If there is text in the search field, this code is executed every time the input changes.
echo "<div id='results'-->"; //this div is used to contain the results. Mostly used for styling.
//This query searches the name field for whatever the input is.
$sql = "SELECT * FROM `tblstudent` WHERE `student_id` LIKE '%$searchq%' or `name` LIKE '%$searchq%' or `email` LIKE '%$searchq%'";
$result = mysql_query($sql);
while($row = mysql_fetch_assoc($result)) {
$id = $row['id'];
$student_id=htmlentities($row['student_id']);
$hashed_password=htmlentities($row['hashed_password']);
$name=htmlentities($row['name']);
$email=htmlentities($row['email']);
"this is the part that i add on but not work, error-free"
$tabledata.="<tr id='$id' class='edit_tr'><td class='edit_td' >
<span id='one_$id' class='text'>$student_id</span>
<input type='text' value='$student_id' class='editbox' id='one_input_$id' />
</td>
<td class='edit_td' >
<span id='two_$id' class='text'>$hashed_password</span>
<input type='text' value='$hashed_password' class='editbox' id='two_input_$id'/>
</td>
<td class='edit_td' >
<span id='three_$id' class='text'>$name $</span>
<input type='text' value='$name' class='editbox' id='three_input_$id'/>
</td>
<td class='edit_td' >
<span id='four_$id' class='text'>$email $</span>
<input type='text' value='$email' class='editbox' id='four_input_$id'/>
</td>
<td><a href='#' class='delete' id='$id'> X </a></td>
</tr>";
}
$finaldata = "<table width='100%'>". $tablehead . $tabledata . "</table>"; // Content for Data
}
echo "</div>";
?>
this is the js query plug in.
<EditDeletePage.js>
$(document).ready(function()
{
$(".delete").live('click',function()
{
var id = $(this).attr('id');
var b=$(this).parent().parent();
var dataString = 'id='+ id;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "delete_ajax.php",
data: dataString,
cache: false,
success: function(e)
{
b.hide();
e.stopImmediatePropagation();
}
});
return false;
}
});
$(".edit_tr").live('click',function()
{
var ID=$(this).attr('id');
$("#one_"+ID).hide();
$("#two_"+ID).hide();
$("#three_"+ID).hide();
$("#four_"+ID).hide();
$("#one_input_"+ID).show();
$("#two_input_"+ID).show();
$("#three_input_"+ID).show();
$("#four_input_"+ID).show();
}).live('change',function(e)
{
var ID=$(this).attr('id');
var one_val=$("#one_input_"+ID).val();
var two_val=$("#two_input_"+ID).val();
var three_val=$("#three_input_"+ID).val();
var four_val=$("#four_input_"+ID).val();
var dataString = 'id='+ ID +'&name='+one_val+'&category='+two_val+'&price='+three_val+'&discount='+four_val;
if(one_val.length>0&& two_val.length>0 && three_val.length>0 && four_val.length>0)
{
$.ajax({
type: "POST",
url: "live_edit_ajax.php",
data: dataString,
cache: false,
success: function(e)
{
$("#one_"+ID).html(one_val);
$("#two_"+ID).html(two_val);
$("#three_"+ID).html(three_val);
$("#four_"+ID).html(four_val);
e.stopImmediatePropagation();
}
});
}
else
{
alert('Enter something.');
}
});
// Edit input box click action
$(".editbox").live("mouseup",function(e)
{
e.stopImmediatePropagation();
});
// Outside click action
$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});
//Pagination
function loading_show(){
$('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function loadData(page){
loading_show();
$.ajax
({
type: "POST",
url: "load_data.php",
data: "page="+page,
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
});
I edit from the http://palavas.biz/forum/viewtopic.php?f=51&t=4143&sid=9241f1f287fc672cc32f91a06b93f4c3#.UjqVx9Jmim4 but not work... i try to change the function that already have a table display to a search function only display out. but unfortunately I can't display out the data which list inside the table when type words in the search keyword textbox.
Related
I'm very new to ajax and jquery. I have a problem when using jsp and ajax to send data.
I know how to display result (Here I use a table) in the same page using ajax.
Now I want to click a button in the first jsp (the click button uses ajax to call servlet controller so as to get data from database, and then converting the data to json format), then show the result in the second jsp, but I was stuck how to do it.
Here's the code:
test.jsp
<body>
<input type='button' value='Show' id='ShowButton' />
</body>
<script type='text/javascript'>
$(document).ready(function() {
$("#ShowButton").click(function(event) {
$.ajax({
type : "POST",
url : "controller.view",
dataType : "json",
success : function(data) {
$.each(data, function (index, element) {
var showContent = '';
showContent += '<tr><td>' + element.cpId + '</td>
<td>' + element.cpName + '</td><td>'
+ element.createDate + '</td><td>' +
element.enable + '</td></tr>';
$("#content tbody").append(showContent);
});
}
});
});
});
</script>
test2.jsp
<body>
<div >
<table id='content'>
<thead>
<tr>
<th>ID</th>
<th>Content Provider Name</th>
<th>Create Date</th>
<th>Enable</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
Thanks.
//inside button click
$.ajax({
url: 'SaveData',
method: 'POST',
data: {
fname: $('#fname').val(),
sname: $('#sname').val(),
age: $('#age').val(),
address: $('#address').val(),
email: $('#email').val(),
gender: $('.gender:checked').val(),
phone: $('#phone').val(),
password: $('#password').val()
},
success: function (data) {
data = JSON.parse(data);
if (data.responce == 1)
alert("Success");
else
alert("Error");
},
error: function (error) {
console.log(error);
}
});
Hi i am uploading a file using <input type="file"> in spring mvc. I submit form on change event of file and show uploaded process. But file content not uploaded and get null on server. If i upload on click of submit button every thing works fine. This is my code:
Html File:
<form:form method="POST" modelAttribute="book" id="saveBook"
name="saveBook" enctype="multipart/form-data">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Book :</td>
<td> </td>
<td>
<input type="file" name="file" id="file" class="edit_form" onchange="return upload('<c:url value='/bookstore/librery/uploadBook' />', 'saveBook', this);" />
<form:errors path="file" />
</td>
</tr>
</table>
</form:form>
Jquery Code:
function upload(requestUrl, formId, clickedObj) {
if (clickedObj && eval(clickedObj) && clickedObj != null && clickedObj != undefined) {
clickedObj.disabled = true;
}
var formData = new FormData(document.getElementById(formId));
$.ajax({
'url': requestUrl,
'type': 'POST',
'data': formData,
'cache': false,
'contentType': false,
'processData': false,
success: function (data) {
$("#tempLoc").val(data.tempLoc);
$("#bookPreview").attr("src", "data:image/png;base64," + data.image);
$("#image").val(data.image);
clickedObj.disabled = false;
},
error: function (xhr, status, err) {
clickedObj.disabled = false;
var tempErrorHTML = getAjaxRequestErrorMsg(xhr);
alert(tempErrorHTML);
},
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = (evt.loaded / evt.total) * 100;
//Do something with upload progress
alert('percentComplete = ' + percentComplete + '%');
}
}, false);
return xhr;
},
}, 'json');
}
If i call upload function on click of submit button every thing works fine. I think form is submitted before file uploaded but don't know how to make things correct.
I can't use submit function because I need to show upload progressbar. Please help.
Thanks In Advance.
Hi here i am using jquery to delete the records in the table but once I delete the record that record is coming back while updating. But if I do cancel with out doing updating that record is not coming.But the record is delete fine in the database.Can anyone plz solve my problem by seeing my code where I went wrong plz assist me.
Jquery code
$('button[id*="delid"]').click(function() {
var cnfrm = confirm("Do you really want to delete this");
if (cnfrm == true) {
var a = "trid" + $(this).val();
var tcopies = $("#abc").val();
// alert(a);
// var slno = $('#' + a).find('td:first').text();
// alert("alert" + $(this).val());
$.ajax({type: 'POST', url: 'deletebar.do?id=' + $(this).val(), success: function(result) {
if (result == 'success') {
$('#' + a).remove();
$("#abc").val(--tcopies);
$("#jkl").val(tcopies);
// $('#cancel').attr('disabled', true);
// $('#vehicletab tr').each(function() {
// var i = $(this).find('td:first').text();
// if (i > slno) {
// --i;
// }
// $(this).find('td:first').html(i);
// })
alert("Deleted Successfully", "Success");
} else {
alert("This vehicle is assigned to Route, You can't Delete it", "Error");
}
}
});
}
else {
return false;
}
});
Jsp Code
<c:forEach var="lib" items="${list}">
<table>
<tr id="trid${lib.slno}">
<td>
<label class="control-label" for="typeahead">Bar Code No :  </label>
<input type="text" name="barcode" value="${lib.getbarcode}" readonly="true"/>
</td>
<td>
<label class="control-label" for="typeahead">Accession No :  </label>
<input type="text" name="accessno" value="${lib.acession}"/>
</td>
<td>
<button type="button" id="delid${lib.slno}" value="${lib.slno}">Delete</button>
</td>
</tr>
</table>
</c:forEach>
</c:forEach>
I have the following front end code, I need to get the textfield(id=uid) value and parse it to the servlet and based on that value, fill the other two textfields(It's a Search Function), But following code only retrieves the values, couldn't send the "uid". How could I do that? Please help me.
<script type="text/javascript">
$(document).ready(function(){
$('#getData').click(function(){
$.ajax({
url:'JsonServlet',
type:'post',
dataType: 'json',
success: function(data) {
$('#uname').val(data.uname);
$('#uadd').val(data.uadd);
}
});
});
});
</script>
</head>
<body>
UserID:<input name="userid" type="text" id="uid"/><br/>
Name:<input type="text" id="uname"/>
Address:<input type="text" id="uadd"/>
<input type="button" id="getData" value="Get Data"/>
My servlet Code looks like this
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String userid = request.getParameter("userid");
ResultSet rs = db.selectQuery("select * from tbl_user where userid = '"+userid+"'");
JSONObject json = new JSONObject();
while (rs.next()) {
json.put("uname", rs.getString("username"));
json.put("uadd", rs.getString("useraddress"));
}
//json.put("uname", "user1");
// json.put("uadd", "address1");
out.print(json);
} catch (Exception e) {
e.printStackTrace();
}
your ajax should like this..
$.ajax({
url:'JsonServlet?userid='+document.getElementById("uid").value,
type:'post',
dataType: 'json',
success: function(data) {
$('#uname').val(data.uname);
$('#uadd').val(data.uadd);
}
});
});
the you should able to use String userid = request.getParameter("userid");
I need to add data to a table from a java script. Tha table is in the same .jsp file but no inside the script.
AJAX call
<script type="text/javascript">
function searchDetails() {
$.ajax({
type : "post",
data : {
'accountNo' : $(accNumber).val()
},
url : "/banking-internet/account-history/add",
cache : false,
success : function(data) {
var transactionList = data;
},
error : function(e) {
alert('Error: ' + e);
}
});
}
</script>
Table
<tr>
<th>Transaction Type</th>
<th>Amount</th>
<th class="hide-on-mobile">Description</th>
</tr>
<c:forEach var="transaction" items="${transactionList}">
<tr>
<td>${transaction.transactionDate}</td>
<td>${transaction.transactionType}</td>
<td>${transaction.accountNarration}</td>
</tr>
</c:forEach>
values passed to the data correctly. But I can;t seem to have getthe value outside from the script and use it.
success : function(data) {
var transactionList = data;
},
this part get the value from controller correctly.
Please Help
Add an ID for your table like:
<table id="test_table">
Then call this:
success : function(data) {
var transactionList = data;
addRow ("test_table", transactionList);
},
Finally replace cellX.innerHtml = data.whatever_member_object;
<script language="javascript">
function addRow(tableID, data) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHtml = data;
var cell2 = row.insertCell(1);
cell2.innerHTML = data;
var cell3 = row.insertCell(2);
cell3.innerHTML = data;
}
</script>
Hope it works.