scroll bar should be at bootom without setInterval() - javascript

I want to keep my scroll bar each time user send or receive a new message .
<script>
$ = jQuery;
var currentID = null;
var chatTimer = null;
var scrolled;
function fetch_data() {
$.ajax({
url: "select.php",
method: "POST",
success: function(data) {
$('#live_data').html(data);
}
});
}
function fetch_chat() {
$.ajax({
url: "fetch_chat.php",
method: "POST",
data: {
id: currentID
},
dataType: "text",
success: function(data) {
$("#chatbox").show();
$('#messages').html(data);
$("div.area").show();
if(!scrolled){
$('#messages').scrollTop($('#messages')[0].scrollHeight);
scrolled=true;
}
}
});
}
$(document).ready(function() {
fetch_data();
$(document).on('click', '.first_name', function() {
scrolled=false;
currentID = $(this).data("id1");
fetch_chat();
});
$("#sub").click(function() {
var text = $("#text").val();
$.post('insert_chat.php', {
id: currentID,
msg: text
}, function(data) {
$("#messages").append(data);
$("#text").val('');
scrolled=false;
setInterval(function() {
fetch_chat();}, 500);
});
});
});
</script>
what I want is that whenever a user send or receive a new message the scroll bar should come to bottom but it should be scrollable according to user's desire. the setinterval() bring the scroll bar down whenever its scrolled up .
I want to call the fetch_chat() repeatedly but not the scroll bar ,I want it to be at bottom : at the beginning,after sending or receiving a new message and must be scrollable freely.

Basic logic of the following answer:
Compare the current chat HTML with the previous chat HTML, and if they are different, then scroll, if they are the same, then don't.
<script>
$ = jQuery;
var currentID = null,
chatTimer = null,
oldHtml = "";
function fetch_data() {
$.ajax({
url: "select.php",
method: "POST",
success: function(data) {
$('#live_data').html(data);
}
});
}
function fetch_chat() {
$.ajax({
url: "fetch_chat.php",
method: "POST",
data: {
id: currentID
},
dataType: "text",
success: function(data) {
$("#chatbox").show();
$('#messages').html(data);
$("div.area").show();
if (oldHtml !== data) {
$('#messages').scrollTop($('#messages')[0].scrollHeight);
}
oldHtml = data;
}
});
}
$(document).ready(function() {
fetch_data();
$(document).on('click', '.first_name', function() {
currentID = $(this).data("id1");
fetch_chat();
});
$("#sub").click(function() {
var text = $("#text").val();
$.post('insert_chat.php', {
id: currentID,
msg: text
}, function(data) {
$("#messages").append(data);
$("#text").val('');
setInterval(fetch_chat, 500);
});
});
});
</script>

Related

insert html using js

I try using ajax after submitting the form to get another
$(document).ready(function()
{ $("#my_form").submit(function(event)
{ event.preventDefault();
$this = $(this);
$.ajax({
type: "POST",
data: $this.serialize(),
success: function(data)
{ console.log(data);
document.getElementById("my_form").replaceWith(data.form1);
},
error: function(data)
{ console.log(data);
}
});
});
});
but on the page the html code is inserted as a string, how can this be fixed?
Its look like your are replacing your subbmitting form, you can use jQuery .html() function to replace.
$(document).ready(function()
{ $("#my_form").submit(function(event)
{ event.preventDefault();
$this = $(this);
$.ajax({
type: "POST",
data: $this.serialize(),
success: function(data)
{ console.log(data);
//document.getElementById("my_form").replaceWith(data.form1); //remove this.
//add below code
var parent=$("#my_form").parent();
parent.html(data.form1);
},
error: function(data)
{ console.log(data);
}
});
});
});

how to wait load() complete and get variable in selector

my problem to get text in td after .load(url) to variable
load code
$("#tr1").load("include/test.php?page=1");
and code for get variable in .load(include/test.php?page=1)
i can not getid
run before complete load
$(window).bind('load', function () {
var getid = $("td:first").text();
function updatenewrow(getid) {
$.ajax({
type: "POST",
url: 'test1.php',
data: {id: getid},//only input
success: function (response) {
if (response > getid) {
$("#tr1").load("include/test.php?page=1");
}
}
});
}
//setInterval(updatenewrow(getid), 4000);
});
It's not clear what you are trying to accomplish the way you have posed the question.
Maybe this is what you're looking for:
function updatenewrow(getid) {
$.ajax({
type: "POST",
url: 'test1.php',
data: { id: getid },
success: function (response) {
if (response > getid) {
$("#tr1").load("include/test.php?page=1");
}
}
});
}
$("#tr1").load("include/test.php?page=1", function(response, status, xhr){
if(xhr.status == 200){
var getid = $("td:first", this).text();
updatenewrow(getid);
}
});
Hope that helps.

keep the scroll bar at the bottom but only for once not in a loop

I have a chat app that show the previous messages by fetching the datas repeatedly using setInterval(). So as most of the chatting apps do, I also want to keep the scroll bar at the last message(i.e at the bottom). But here comes the problem ,as I am using setInterval to fetch The data repeatedly it also execute that code which keep the scroll bar at the bottom and hence it become impossible to scroll up to check the previous messages.
<script>
var currentID = null;
var chatTimer = null;
function fetch_data() {
$.ajax({
url: "select.php",
method: "POST",
success: function(data) {
$('#live_data').html(data);
//fetch_chat();
}
});
}
function fetch_chat() {
$.ajax({
url: "fetch_chat.php",
method: "POST",
data: {
id: currentID
},
dataType: "text",
success: function(data) {
$("#messages").show();
$('#messages').html(data);
$("div.area").show();
//chatTimer = setTimeout(fetch_chat, 500); //request the chat again in 2 seconds time
$("#messages").animate({ scrollTop: $(document).height() }, "fast");
}
});
}
$(document).ready(function() {
fetch_data();
$(document).on('click', '.first_name', function() {
currentID = $(this).data("id1");
//immediately fetch chat for the new ID, and clear any waiting fetch timer that might be pending
//clearTimeout(chatTimer);
fetch_chat();
});
function scrollToBottom() {
$("#messages").scrollTop(1e10); // Lazy hack
}
setInterval(function() {
fetch_chat();
}, 500);
$("#sub").click(function() {
var text = $("#text").val();
$.post('insert_chat.php', {
id: currentID,
msg: text
}, function(data) {
$("#messages").append(data);
$("#text").val('');
scrollToBottom();
});
// alert(text);
});
//this will also trigger the first fetch_chat once it completes
});
</script>
plz tell me the correct way to do this.
Keep a variable outside the setInterval method that sets if it is the first time that the data is fetched. Scroll only the first time. Then, change it and it will never scroll again.
var currentID = null;
var chatTimer = null;
var firstTime = true;
function fetch_data() {
$.ajax({
url: "select.php",
method: "POST",
success: function(data) {
$('#live_data').html(data);
//fetch_chat();
}
});
}
function fetch_chat() {
$.ajax({
url: "fetch_chat.php",
method: "POST",
data: {
id: currentID
},
dataType: "text",
success: function(data) {
$("#messages").show();
$('#messages').html(data);
$("div.area").show();
//chatTimer = setTimeout(fetch_chat, 500); //request the chat again in 2 seconds time
if (firstTime) {
firstTime = false;
$("#messages").animate({ scrollTop: $(document).height() }, "fast");
}
}
});
}

Javascript parse error

I'm using jQuery to do an AJAX POST request. Here's the code
jQuery(document).ready(function() {
jQuery('#tweets').load('/index.php?app=ccs&module=pages&section=pages&id=6');
var refreshId = setInterval(function() {
jQuery('#tweets').load('/index.php?app=ccs&module=pages&section=pages&id=6');
}, 30000);
});
jQuery(function() {
jQuery(".button").click(function() {
var dataString = 'tweet='+ tweet;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/index.php?app=ccs&module=pages&section=pages&id=7",
data: dataString,
success: function() {
$('#postsuccess').html("<b>Post Successful</b>");
}); // this is where the parse error is
}
});
return false;
});
});
Any ideas?
That's why formatting code is important
jQuery(document).ready(function() {
jQuery('#tweets').load('/index.php?app=ccs&module=pages&section=pages&id=6');
var refreshId = setInterval(function() {
jQuery('#tweets').load('/index.php?app=ccs&module=pages&section=pages&id=6');
},
30000);
});
jQuery(function() {
jQuery(".button").click(function() {
var dataString = 'tweet=' + tweet;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/index.php?app=ccs&module=pages&section=pages&id=7",
data: dataString,
success: function() {
$('#postsuccess').html("<b>Post Successful</b>");
}
});
return false; // This is also bad placed
});
});
and try to combine it all, like:
jQuery(document).ready(function() {
jQuery('#tweets').load('/index.php?app=ccs&module=pages&section=pages&id=6');
var refreshId = setInterval(function() {
jQuery('#tweets').load('/index.php?app=ccs&module=pages&section=pages&id=6');
},
30000);
jQuery(".button").click(function() {
var dataString = 'tweet=' + tweet;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/index.php?app=ccs&module=pages&section=pages&id=7",
data: dataString,
success: function() {
$('#postsuccess').html("<b>Post Successful</b>");
}
});
return false;
});
});
if you are not using any other javascript framework, you can replace all jQuery words for the $sign, like:
$(document).ready(function() {
$('#tweets').load('/index.php?app=ccs&module=pages&section=pages&id=6');
var refreshId = setInterval(function() {
$('#tweets').load('/index.php?app=ccs&module=pages&section=pages&id=6');
},
30000);
$(".button").click(function() {
var dataString = 'tweet=' + tweet;
//alert (dataString); return false;
$.ajax({
type: "POST",
url: "/index.php?app=ccs&module=pages&section=pages&id=7",
data: dataString,
success: function() {
$('#postsuccess').html("<b>Post Successful</b>");
}
});
return false;
});
});
and your $.ajax method should be
url: "/index.php",
data: { app: 'css', module: 'pages', section: 'pages', id: 7, tweets: tweet },
Try this:
jQuery(document).ready(function() {
jQuery('#tweets').load('/index.php?app=ccs&module=pages&section=pages&id=6');
var refreshId = setInterval(function() {
jQuery('#tweets').load('/index.php?app=ccs&module=pages&section=pages&id=6');
}, 30000);
});
jQuery(function() {
jQuery(".button").click(function() {
var dataString = 'tweet=' + tweet;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/index.php?app=ccs&module=pages&section=pages&id=7",
data: dataString,
success: function() {
$('#postsuccess').html("<b>Post Successful</b>");
} // this is where the parse error is
});
});
return false;
});
Sites like jsfiddle.net make indenting easy.

jQuery / Javascript - run AJAX request after X seconds

so I have this code:
$('input.myinput').each(function(){
var id = $(this).val();
var myajax = function(){
$.ajax({
url: ajax_url,
type: "GET",
data: ({
code: id
}),
beforeSend: function() { },
error: function(request){ },
success: function(data) { alert(data); }
});
setTimeout('myajax()', 10000);
}
myajax();
});
I wanted the ajax() request above to run 10 seconds after the page was loaded, so I used setTimeout, but it doesn't work :(
the ajax thingy runs right after the page loads, not 10 secs after...
what am I doing wrong?
$('input.myinput').each(function(){
var id = $(this).val();
var myajax = function() {
$.ajax({
url: ajax_url,
type: "GET",
data: ({
code: id
}),
beforeSend: function() { },
error: function(request){ },
success: function(data) { alert(data); }
});
//if you need to run again every 10 seconds
//setTimeout(myajax, 10000);
};
setTimeout(myajax, 10000);
});
I'd do a few things differently..
function myajax(id) {
$.ajax({
url: ajax_url,
type: "GET",
data: ({
code: id
}),
error: function(request){ },
success: function(data) { alert(data); }
});
setTimeout('myajax(id)', 10000); // you really want it to run AGAIN in another 10 seconds?
}
...
$(document).ready(function() {
$('input.myinput').each(function(){
var id = $(this).val();
setTimeout('myajax(' + id + ')',10000);
});
});
There's no reason to redeclare myajax as a new function for every input, when you can declare it once and pass in a new ID variable each call.

Categories