I'm developing a live search function in a Laravel application, but I'm having some problems because i'm getting duplicate appends, for example I type in "Andrew".
Every key I hit starting with "A" until "W", im appending the results over and over, so Andre creates 6 table rows, but I want it to be only one.
The second problem is that if I delete all the input, I'm trying to show my "initial_table", but that doesn't work.
I tried changing $('#ajax').append(row); from append to html, but then I have only one result no matter how many matches I get.
<table id="usertable">
<thead>
<tr>
<th>Name</th>
<th>Tier</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Tier</th>
</tr>
</tfoot>
<tbody id="ajax">
{{-- search results here --}}
</tbody>
<tbody id="initial_table">
#foreach ($users as $user)
<tr>
<td>{{$user->username}} </td>
<td>{{$user->tier}}</td>
</tr>
#endforeach
</tbody>
</table>
This is my Javascript
<script>
});
// })
document.getElementById("search").addEventListener("keyup", searchUsers);
document.getElementById("search").addEventListener("change", searchUsers);
function searchUsers(){
if(this.value != '') {
$.ajax({
url: '/admin/searchUsers?search=' + this.value,
method: 'GET'
}).done(function(response){
console.log(typeof response);
console.log(response);
if(response.length < 1) {
$('#ajax').append('<span class="text-center">No results found!</span>');
$('#initial_table').hide();
}
else {
$.each(response, function(index, obj){
var row = $('<tr>');
row.append('<td> <a href="/admin/user/' + obj.id + '">' + obj.username + ' AJAX' + '</td>');
row.append('<td>' + obj.tier + '</td>');
$('#ajax').append(row);
$('#initial_table').hide();
});
}
});
}
}
</script>
Tried to add some comments to explain . Hope it helps
document.getElementById("search").addEventListener("keyup", searchUsers);
document.getElementById("search").addEventListener("change", searchUsers);
function searchUsers(){
if((this.value.trim()) != '') // even for extra space it should not allow in
{
$.ajax({
url: '/admin/searchUsers?search=' + this.value,
method: 'GET'
}).done(function(response)
{
console.log(typeof response);
console.log(response);
$('#ajax').empty(); //for 1st query :-on every ajax call it will first empty "#ajax" tbody
$('#initial_table').hide();
if(response.length < 1)
{
$('#ajax').append('<span class="text-center">No results found!</span>');
}
else
{
$.each(response, function(index, obj)
{
var row = $('<tr>');
row.append('<td> <a href="/admin/user/' + obj.id + '">' + obj.username + ' AJAX' + '</td>');
row.append('<td>' + obj.tier + '</td>');
$('#ajax').append(row);
});
}
});
}else // for 2nd query :- your code missing this part to show initial tbody if search text is all blank
{
$('#initial_table').show();
$('#ajax').hide();
}
}
Related
I'm using the following function to ready and draw the grid as soon as the HTML page is clicked
$(document).ready(function () {
FillGrid();
});
And I'm using the following FillGrid function to draw and show the data from the MSSQL
function FillGrid() {
//if ($('#grid').length == 1) {
// $('#grid tr').not(':first-child').remove();
$.ajax({
//beforeSend: function () {
// $('.grid').show();
// $("#loadingProjects").show();
//},
//complete: function () {
// ShowGrid();
// $("#loadingProjects").hide();
//},
// method: 'POST',
success: function (data) {
//if (data.length == 0) {
// $('<tr><td colspan="4">No Record Found</td></tr>').appendTo($('#grid'));
//}
$.each(data, function (index, item) {
$('<tr>' +
'<td>' + item.ReservationDate + '</td>' +
'<td>' + item.Name1 + '</td>' +
'</tr>').appendTo($('#grid'));
});
},
error: function (xhr, status, error) {
console.log(error);
}
});
}
And this is my HTML code of the grid.
<table class="table table-striped" id="grid" style="display:none;">
<tr>
<th>Reservation No</th>
<th>Name</th>
</tr>
</table>
But the grid is never been drawn when its loaded.
Is this correct or am I'm doing something wrong.
Can anyone help me? This is for a school project.
I want to parse some data from server using ajax:
projects.js:
$("#Projects").click(function(){
$.ajax({
url: "http://192.168.0.49:1080/plw6.2/admin/OPX2ADMIN/192.168.0.49:9400/odata/project?%24select=name%2Cstatus",
type: "GET",
dataType: 'json',
//Success of Authorization
success: function(result){
var tr;
var str = JSON.stringify(result);
obj = JSON.parse(str);
for(var i = 0; i < obj.value.length; i++) {
tr = $('<tr/>');
tr.append("<tr><td class=\"project_title\">" + obj.value[0].name + "</td></tr>");
tr.append("<tr><td class=\"project_status\">" + obj.value[0].status + "</td></tr>");
tr.append("<tr><td class=\"project_date\">" + obj.value[0].real_start + "</td></tr>");
$('.project_info').append(tr);
}
},
//Failure of authorization
error: function(jqXHR, status, errorThrown) {
alert("error");
}
});
});
Projects.html:
<div class="project_info">
<table>
<tbody>
<tr>
<td class="project_title">Project1</td>
</tr>
<tr>
<td class="project_status">Active</td>
</tr>
<tr>
<td class="project_date">03/2017-05/2018</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="./js/projects.js"></script>
I can't get the data from the server however the path of the server is correct.How can I fix that?
What data is returned from server? Put console.log( result ) into success()
You need allow PhoneGap to access external servers using allow-intent params... see https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/
So... your HTML table isn't correct (no have table /table)
I have this JavaScript
function pickdet(Id) {
//alert(Id);
var dd = Id;
$.ajax({
cache: false,
url: "/PVSigns1/GetDetails",
data: { 'Id' : Id },
type: "GET",
dataType: "json",
success: function (data) {
//alert('i dey here')
var row = "";
var baseurl = '#Url.Action("Edit","PVSigns1")' + '?Id=';
$.each(data, function (index, item) {
var clickUrl = baseurl + item.PVSignId;
//row += "<tr><td>" + item.VitalSigns.Sign + "</td><td>" + item.SignValue + "</td><td> <input type= 'button' onclick= location.href = + '<Url.Action("Create", "PVSigns1", new { Id = item.PVSignId }) ' />" + "</td></tr>";
row += "<tr><td>" + item.VitalSigns.Sign + "</td><td>" + item.SignValue +
"</td><td> <button class='editbtn btn btn-xs btn-success' data-url = '" + clickUrl + "'> <i class='fa fa-edit fa-lg'></i> Edit</button></td></tr>";
});
$("#pvv").html(row);
},
error: function (result) {
$("#pvv").html('Nothing to show <br /> <p />' + result);
}
});
}
$(function () {
$("button.editbtn").click(function (e) {
alert("url");
e.preventDefault();
//e.defaultPrevented();
window.location.href = $(this).attr("url");
});
});
When I run it, it display perfectly on the browser, but the link created don't work, and when I view the page source, the tbody part which the code above is supposed to inject, doesn't get rendered.
This is what I get, Click on any of the green buttons
in the top table, it loads the second table. The issue is with the second table.
Note: I am using JQuery Datatables.
This the rendered output from page source
<div>
<h3> Details</h3>
<table id="Pv" class="table table-condensed">
<thead>
<tr>
<th>Sign</th>
<th> Value </th>
<th></th>
</tr>
</thead>
<tbody id="pvv">
</tbody>
</table>
Notice <tbody id="pvv"> is empty, not table elements there. What is the issue?
You need to use delegation of dom element for click event. which element generated after binding event after existing dom
$("#Pv").on('click','button.editbtn', function (e) {
alert("url");
e.preventDefault();
//e.defaultPrevented();
window.location.href = $(this).attr("url");
});
i use the below code to call results from a mysqli database and display them on a page with a live search function.. while loading the results it displays <div id='ajax_request'></div> basicaly a loading gif and on completion it hides that div and shows the div <div id='ajax_results_table'></div> to show the results
I'm curious to know if there is a better method out there for doing the same thing as I could have multiple requests on one page and I need each div to display loading while it's performing its own ajax request
so far I would copy the same code and change the id's for the divs
I'm completely new to ajax and would like to learn more so far this is what I have got.
The Html Code...
<input type='text' class='form-control' onkeyup='showResult(this.value)' placeholder='Search Results'>
<div id='ajax_request'><img src='/ajax-loader.gif' class='text-center'> Fetching Data ...</div>
<div id='ajax_error'>Something went wrong with our ajax request</div>
<table id='ajax_results_table'>
<thead>
<tr>
<th> SMS ID</th>
<th> Time Stamp</th>
<th> Mobile Number</th>
<th> Message</th>
<th> Message Status</th>
</tr>
</thead>
<tbody id='ajax_results'>
</tbody>
</table>
The Ajax Code:
<script>
function showResult(str) {
$.ajax({
url: '/getjson.php?search=' + str,
type: 'POST',
dataType: 'json',
Timeout: 3000,
beforeSend: function() {
$('#ajax_request').show();
$('#ajax_results_table').hide();
$('#ajax_error').hide();
},
success: function(response) {
var trHTML = '';
$.each(response, function(key, value) {
trHTML +=
'<tr><td>' + value.ID +
'</td><td>' + value.Timestamp +
'</td><td>' + value.Number +
'</td><td>' + value.Message +
'</td><td>' + value.Status +
'</td></tr>';
});
$('#ajax_results').html(trHTML);
$('#ajax_request').hide();
$('#ajax_results_table').show();
},
error: function() {
$('#ajax_request').hide();
$('#ajax_error').show();
}
});
}
showResult('');
</script>
i have dropdown boxes for user_id and er and once both selected i want to load all the data as rows. please advice.
below is my controller
$getShifts = Shifts::Where('user_id','=',$user_id)->Where('week_id','=',$week)->get();
how can i proceed
table
<table class="table table-hover">
<tr class="table-header">
<th>Day</th>
<th>Date</th>
<th>Start</th>
<th>End</th>
<th>Total
<br/> Hours
</th>
<th>Run
<br/> Type
</th>
<th>Edit
<br/> / Delete
</th>
</tr>
EDIT
plese check below code which i have tried
success: function(data) {
var json_obj = $.parseJSON(data);//parse JSON
var output="<tr>";
for (var i in json_obj)
{
output+=
"<td>" + json_obj[i].id + "</td>"+
"<td>" + json_obj[i].bus_no + "</td>"+
"<td>" + json_obj[i].shift_no + "</td>"
;
}
output+="</tr>";
$('#span').html(output);
}
You should call your controller function in ajax and in controller you will get the selected data, so based on that run required query.
$(document).ready(function() {
$("#combo, #user_id").change(function(){
var combo = $('#combo option:selected').val();
var user_id = $('#user_id option:selected').val();
if(combo && user_id) {
$.ajax({
url: "path to controller function",
type: "POST",
dataType: "HTML",
async: false,
data:{combo:combo.user_id:user_id},
success: function(data) {
alert(data) // here you ll see the data from controllen, you can manipulate according to your requirement.
}
});
}
});
});
in controller
echo "
<tr>
<td>$day</td>
<td>$date</td>
<td>$start</td>
<td>$end</td>
<td>$end</td>
<td>$end</td>
</tr> ";
manipulate all fields in to a tr in controller and in ajax success() append the data to table.