I have a search bar, by default it's loading all the data under the search bar.
I want to limit the default before searching to be only 5 results in the table.
I'm trying this but it doesn't work!
What I'm doing wrong?
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"fetch.php",
method:"post",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
$('#result').dataTable({'iDisplayLength': 5});
}
else
{
load_data();
}
});
});
</script>
And the HTML part is just this code:
<div id="result"></div>
if you are using datatbles then you have to pass pageLength: 5.
$('#example').dataTable( {
"pageLength": 5
} );
you can see in this link
Related
I'm creating a webpage(e-commerce) and I'm trying to put a search bar with autocomplete suggestions and this is my original code with jQuery:
<script>
$(document).ready(function(){
$('#products').keyup(function(){
var query = $(this).val(); var query = document.querySelectorAll(this).val();
if(query != '')
{
$.ajax({
url:"search.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#productlist').fadeIn(); //
$('#productlist').html(data);
}
});
}
});
$(document).on('click', 'li', function(){
$('#products').val($(this).text());
$('#productlist').fadeOut();
});
});
$('#products').keyup(function() {
if($('#products').val() === '') {
$('#productlist').hide();
}
});
</script>
I'm trying not to use any framework so I wanted to turn the code stated above to vanilla javascript and this is the code I currently have right now:
<script>
document.querySelector(document).ready(function(){
document.querySelectorAll(".products").keyup(function()
{
var query = document.querySelectorAll(this).value();
if(query != '')
{
fetch("search.php")
.then((response))=>response.json())
.then(data)=> console.log(data));
});
}
});
element.addEventListener("click", function (){ console.log("clicked");});
document.querySelector(document).addEventListener('click', 'li', function(){
document.querySelector('#products').val(document.querySelector(this).text());
document.querySelector('#productlist').fadeOut();
});
</script>
var getLoginpasssystem = function(getPassForgotSystem,getLoginCheckSystem){
$(document).ready(function() {
$('#login' || '#lostpasswordform').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'http://www.virtuelles-museum.com.udev/spielelogin/logsystem.php',
data: $(this).serialize(),
success: function(response) {
var data = JSON.parse(response);
if (data.success == "accepted") {
document.getElementById('inner').innerHTML = 'Herzlich Willkommen';
// location.href = 'index.php';
} else {
alert('Ungültige Email oder Password!');
}
}
});
});
})
}
The question is how to use two forms in one request with ajax. In this code I used ||, but it doesn't work. I mean the #login form works well but the #lostpasswordform doesn't work. When I click on the button it reloads the page instead of giving an alert.
The reason for this is the way you do your jQuery selection. Selecting multiple elements is done like this: $( "div, span, p.myClass" )
In other words it should work if you replace $('#login' || '#lostpasswordform') with $('#login, #lostpasswordform')
You can read more in detail about this in the jQuery docs
elector be used to select multiple elements. $("#login,#lostpasswordform").submit()
Use below code :
var getLoginpasssystem = function(getPassForgotSystem,getLoginCheckSystem){
$(document).ready(function() {
$("#login,#lostpasswordform").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'http://www.virtuelles-museum.com.udev/spielelogin/logsystem.php',
data: $(this).serialize(),
success: function(response) {
var data = JSON.parse(response);
if (data.success == "accepted") {
document.getElementById('inner').innerHTML = 'Herzlich Willkommen';
// location.href = 'index.php';
} else {
alert('Ungültige Email oder Password!');
}
}
});
});
})
}
I'm getting an issue, that when I submit the form it adds ticket number + 1 but script does not check the number which is change on page load. what is the solution that the script works without any action like KEYUP?
<script> $(document).ready(function(){
$('#ticket_no').keyup(function(){
var ticket_num = $(this).val();
if(ticket_num != '')
{
$.ajax({
url:"search.php",
method:"POST",
data:{ticket_num:ticket_num},
success:function(data)
{
$('#ticket_no').css("border-color", "green");
$('#ticket_error').html(data);
}
});
}
else{
$('#ticket_no').css("border-color", "red");
}
}); }); </script>
I have syntax error in my script.js file on line 38, here is my javascript code.
i used PHP ajax and javascript to repeat table rows.also i used html table tag to display news and i am going to make a newsletter thorugh php including mysql database.
$(document).ready(function(){
$("#save").click(function(){
ajax("save");
});
$("#add_new").click(function(){
$(".entry-form").fadeIn("fast");
});
$("#close").click(function(){
$(".entry-form").fadeOut("fast");
});
$("#cancel").click(function(){
$(".entry-form").fadeOut("fast");
});
$(".del").live("click",function(){
ajax("delete",$(this).attr("id"));
});
function ajax(action,id){
if(action =="save")
data = $("#userinfo").serialize()+"&action="+action;
else if(action == "delete"){
data = "action="+action+"&item_id="+id;
}
$.ajax({
type: "POST",
url: "ajax.php",
data : data,
dataType: "json",
success: function(response){
if(response.success == "1"){
if(action == "save"){
$(".entry-form").fadeOut("fast",function(){
$(".table-list").append(""+response.fname+""+response.lname+""+response.email+""+response.phone+"<a id="+response.row_id+" class="del" href="#">Delete</a>");
$(".table-list tr:last").effect("highlight", {
color: '#4BADF5'
}, 1000);
});
}else if(action == "delete"){
var row_id = response.item_id;
$("a[id='"+row_id+"']").closest("tr").effect("highlight", {
color: '#4BADF5'
}, 1000);
$("a[id='"+row_id+"']").closest("tr").fadeOut();
}
}
},
error: function(res){
alert("Unexpected error! Try again.");
}
});
}
});
The problem -> A mixture of "" and ''
Solution:-
$('.table-list').append(""+response.fname+""+response.lname+""+response.email+""+
response.phone+"<a id="+response.row_id+" class='del' href='#'>Delete</a>");
Notice, changed class="del" href="#" to class='del' href='#' and $(".table-list") to $('.table-list') (although that's not that important).
You can use console of developer tools in chrome and for firefox use firebug console.
Removed your errors
$(".table-list").append(""+response.fname+""+response.lname+""+response.email+""+response.phone+"<a id="+response.row_id+"class="+del+"href=#>Delete</a>");
I was wondering how to limit the search result in the Javascript file, my JS file details as following:
/* JS File */
<script>
// Start Ready
$(document).ready(function() {
// Icon Click Focus
$('div.icon').click(function(){
$('input#search').focus();
});
// Live Search
// On Search Submit and Get Results
function search() {
var query_value = $('input#search').val();
$('b#search-string').html(query_value);
if(query_value !== ''){
$.ajax({
type: "POST",
url: "search.php",
data: { query: query_value },
cache: false,
success: function(html){
$("ul#results").html(html);
}
});
}return false;
}
$("input#search").live("keyup", function(e) {
// Set Timeout
clearTimeout($.data(this, 'timer'));
// Set Search String
var search_string = $(this).val();
// Do Search
if (search_string == '') {
$("ul#results").fadeOut();
$('h4#results-text').fadeOut();
}else{
$("ul#results").fadeIn();
$('h4#results-text').fadeIn();
$(this).data('timer', setTimeout(search, 100));
};
});
});
</script
I just need to add similar to following code to be able to load a loading images before the result and limit the results into five or whatever, and if possible add load more later.
<script>
function loadSearch(query) {
document.body.style.overflow='hidden';
if (typeof xhr != "undefined") {
xhr.abort();
clearTimeout(timeout);
}
if (query.length >= 3) {
timeout = setTimeout(function () {
$('#moreResults').slideDown(300);
$('#search_results').slideDown(500).html('<br /><p align="center"><img src="http://www.tektontools.com/images/loading.gif"></p>');
xhr = $.ajax({
url: 'http://www.tektontools.com/search_results.inc.php?query='+encodeURIComponent(query),
success: function(data) {
$("#search_results").html(data);
}
});
}, 500);
} else {
unloadSearch();
}
}
function unloadSearch() {
document.body.style.overflow='';
$('#search_results').delay(100).slideUp(300);
$('#moreResults').delay(100).slideUp(300);
}
</script>
I have got the 2nd code from another template page, and I am just failing to adjust it to fit my search template (1st code), I'd appreciate it if someone could help me to adjust it, thanks a lot.
If you want to do this on the javascript side, you can use slice.
$.ajax({
type: "POST",
url: "search.php",
data: { query: query_value },
cache: false,
success: function(html){
$("ul#results").html(html.slice(0, 5);
}
});
I would personally suggest that you do the limiting of rows on the server side to minimize the amount of data you transfer between the client and the server.