I'm currently working on a live search using ajax
However I'm stuck on the interval part with my searchbox.
What works:
setInterval running if I am doing nothing with searchbox
setInterval stop when I am searching (input keyword) in searchbox
What does not work:
After I deleted my keyword in searchbox, setInterval not running
How could I running setInterval like the first time ?
What I have tried so far :
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('.result').html(data);
}
});
}
var jump = setInterval(load_data, 1000);
$('#searchbox').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
clearInterval(jump);
}
else
{
load_data();
}
});
});
You could easily set the interval again in the else statement after calling load_data()
Related
I building a application to fetch records database with ajax. And I'm using the keyup function to catch what I'm querying/writing. But some times when I write something like "si" and there are many records in the database and query takes more time than me writing the next letter this bug happens. (querying 'sitre' but PHP only catches 'si'):
My question is, is there a way to get around this?
My JS code:
<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);
} else {
load_data();
}
});
});
</script>
Thank you.
Fixed with delay thanks to Taron Saribekyan
<script>
var timeout = null;
$(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();
clearTimeout(timeout);
if(search != '') {
timeout = setTimeout(function () {
load_data(search);}
, 500);
} else {
load_data();
}
});
});
</script>
Set delay before ajax query.
See how to do it
My question is i want to get total time of ajax request..
I means when i click on button then make a ajax request and start timer and store time in button caption,after ajax request success stop timer...
My problem is
when i click on button call ajax request and after ajax request successfully then timer start.
What i want
I want to start timer before ajax request and stop after ajax request success
My html code
<input class="btn green start_timer" value="Sync" name="btn" type="button">
My js code
$(document).ready(function () {
var setTimer = null;
$("body").on('click', '.start_timer', function () {
var obj = $(this);
var start = 1;
setTimer = setInterval(function () {
start++;
obj.val(start);
}, 1000);
$.ajax({
type: "POST",
url: base_url + "timerstart/start/1325",
async: false,
success: function (data) {
clearInterval(setTimer);
}
});
return false
});
});
You can use jQuery Global Ajax Event Handlers
Steps:
Use ajaxSend to trigger timer.
a. Display overlay.
b. Start the timer function. Use Interval to update timer on every second.
Use ajaxComplete to stop timer.
a. You can use ClearInterval to stop timer.
Calculate the difference incase you want that value to display after overlay is closed.
Notes:
Note that above mentioned global events will work as expected when there is only one ajax call at any moment of time.
You need to use Global variables to get the values from global events and calculate the difference.
Try this, its worked for me
$(document).ready(function () {
var setTimer = null;
$("body").on('click', '.start_timer', function () {
var element = $(this);
displayTimer(element);
});
function getData(element){
$.ajax({
type: "GET",
async:true,
url: "",
success: function (data) {
clearInterval(setTimer);
element.val("Sync");
},
error: function (data) {
clearInterval(setTimer);
element.val("Sync");
}
});
}
function displayTimer(element){
var start = 1;
setTimer = setInterval(function () {
start++;
element.val(start);
}, 1000);
setTimeout(function(){
getData(element);
},2000);
}
});
try this below updated:
<script>
$(document).ready(function () {
var setTimer = null;
$("body").on('click', '.start_timer', function () {
StartDispalyingTimer($(this));
});
RunAjax = function (ele){
$.ajax({
type: "POST",
async:true,
url: "index2.php",
success: function (data) {clearInterval(setTimer);},
error: function (data) {clearInterval(setTimer);}
});
}
StartDispalyingTimer = function (ele){var start = 1;
setTimer = setInterval(function () {start++;ele.val((start-1));}, 1000);
setTimeout(function(){RunAjax(ele);},1000);
}
});
</script>
You've got async=false in the options for your ajax request. This makes your request synchronous so the execution of the script "hangs" untill the request comes back with a response. You should never use async is false.
I have the following code to search through AJAX. Now if I apply onblur event to the textbox (so that searching result disappears) and get back to the textbox again, searching facility is no more working. So the thing is, it might not be able to call onfocus event properly once onblur event is called. Any help would be appreciated.
<script type="text/javascript">
$(document).ready(function () {
$(".searchproductbrand").keyup(function () {
var kw = $(".searchproductbrand").val();
if (kw != '') {
$.ajax({
type: "POST",
url: "livesearch.php",
data: "kw=" + kw,
success: function (option) {
$("#livesearch").html(option);
document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
}
});
} else {
$("#livesearch").html("");
document.getElementById("livesearch").style.border = "0px";
}
return false;
});
});
</script>
<script>
$(document).ready(function () {
$(".searchproductbrand").blur(function () {
document.getElementById("livesearch").style.display = "none";
})
});
</script>
Livesearch is the div where I print my search results.
You should provide your markup, or a jsfiddle but i'm almost sure that everything is working but on the onblur event you set the display rule of the 'livesearch' element to none, but you never set it back to block so you made it invisible and it stayed that way because you need to set it to block or whatever visibible display rule that you want, i created a jsfiddle example based on what you posted, i took the liberty to alter your code and removed the ajax part so you can focus on the real issue, i hope this solves your problem.
http://jsfiddle.net/kFj9u/1
jQuery(document).ready(function(){
var $liveSearch = $('#liveSearch');
$(".searchProductBrand").keyup(function(){
var keyWord = $(this).val();
if(keyWord != ''){
var msg = 'You searched for ' + keyWord;
$liveSearch.css('display','block').html(msg);
}else{
$liveSearch.html('').
css('border','none');
}
}).blur(function(){
$liveSearch.css('display','none');
})
});
Probably your livesearch is still hidden, try this:
<script type="text/javascript">
$(document).ready(function () {
$(".searchproductbrand").keyup(function () {
var kw = $(".searchproductbrand").val();
if (kw != '') {
$.ajax({
type: "POST",
url: "livesearch.php",
data: "kw=" + kw,
success: function (option) {
$("#livesearch").show(); // this is
$("#livesearch").html(option);
document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
}
});
} else {
$("#livesearch").html("");
document.getElementById("livesearch").style.border = "0px";
}
return false;
});
});
</script>
<script>
$(document).ready(function () {
$(".searchproductbrand").blur(function () {
document.getElementById("livesearch").style.display = "none";
})
});
</script>
So I have a table pulling information from a database and I was wondering how I could make it refresh its information without reloading the whole page.
You'll need a getTable.php page that displays your table, and nothing else: no headers, footers, etc.
PHP (getTable.php) - this can be any server side code (asp, html, etc..)
<?php
echo '<table><tr><td>TEST</td></tr></table>';
?>
Then, in your JS, you can easily refresh the table by using the load() method:
HTML
<div id="tableHolder"></div>
JS
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('getTable.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
Use ajax, following example is in jQuery:
$(function() {
var prevAjaxReturned = true;
var xhr = null;
setInterval(function() {
if( prevAjaxReturned ) {
prevAjaxReturned = false;
} else if( xhr ) {
xhr.abort( );
}
xhr = $.ajax({
type: "GET",
data: "v1="+v1+"&v2="+v2,
url: "location/of/server/script.php",
success: function(html) {
// html is a string of all output of the server script.
$("#element").html(html);
prevAjaxReturned = true;
}
});
}, 5000);
});
The success function assumes that your server script outputs the html that you want to replace in the element with id 'element'.
You should have a page that return the information and pull data using Ajax / jQuery.
<div class="result"></div>
setInterval(function() {
$.get('table.php', function(data) {
$('#result').html(data);
});
}, 5000);
Here is another option for you to use. This solution is using an IIFE which is preferred over setInterval. You can read more about IIFE at the link above.
JAVASCRIPT:
var $results = $('#results'),
loadInterval = 5000;
(function loader() {
$.get('script.php', function(html){
$results.hide(200, function() {
$results.empty();
$results.html(html);
$results.show(200, function() {
setTimeout(loader, loadInterval);
});
});
});
})();
HTML:
<div id="results"></div>
setTimeout(function(){
jqueryFunction(Args);
},100);
will work...
100 = 100 milliseconds
The following works with JQuery Datatables 1.10
`var tableName;
//Set AJAX Refresh interval.
$(function() {
setReloadInterval(10); //Refresh every 10 seconds.
}
//Because function takes seconds we * 1000 to convert seconds to milliseconds.
function setReloadInterval(reloadTime) {
if(reloadTime > 0)
internalId = setInterval("reloadTable()", (reloadTime * 1000);
}
//Auto Refresh JQuery DataTable
function reloadTable() {
tableName.ajax.reload();
}
//Table defined...
$(document).ready(function () {
tableName = $('#tableName').DataTable({
"sAjaxSource": "/someUrl",
});`
I have looked around quite a bit and it seems absolute urls is the way to go here. I have no problem in chrome but firefox and IE IE still wants to redirect fully to the wrong page.
my states:
<script type="text/javascript">
$(function() {
$('#page_submit').click(function () {
event.preventDefault();
$('.standard span').hide();
var pw = $("input#pw").val();
if (pw == "") {
$("span#pw_err").show();
$("input#pw").focus();
return false;
}
var pw2 = $("input#pw2").val();
if (pw2 == "") {
$("span#pw2_err").show();
$("input#pw2").focus();
return false;
}
if (pw != pw2) {
$("span#match_err").show();
$("input#pw2").focus();
return false;
}
var data = 'pw=' + pw + '&pw2=' + pw2;
$('.standard input').attr('disabled','true');
$('.loading').show();
$.ajax({
url: "/members/includes/change.php",
type: "GET",
data: data,
cache: false,
success: function (html) {
//hide the form
$('#pw_form').fadeOut('slow');
//display results
$('#pw_form_result').fadeIn('slow');
$("#pw_form_result").html(html);
}
});
return false;
});
});
</script>
the structure of the file I am trying to access is:
www.site.com/members/includes/change.php
Not sure what the cause is really. I know the jquery initiator is working because i can summon alert calls to and from the function itself.
edit
after commenting out
event.preventDefault();
it seems to function right? everything I had read before said this was a necessary piece however.
This line
$('#page_submit').click(function () {
should be
$('#page_submit').click(function (event) {
so this code
event.preventDefault();
can take effect.
And the 'return false;' is unneccesarry.