We Keep Coding

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);
}
});
});
});

scroll bar should be at bootom without setInterval()

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>

Calling ajax function from ajax

The following code called when clicked a button and call the insert
_all function that is an ajax function. In success I put an alert but not working the json call liquidations_a_insert_all.jsp is working fine.
$(document).ready(function() {
$('#click1').click(function(event) {
var auditorid = $('input:hidden[id=Wauditorid]').val();
$.ajax({
type: 'GET',
url: 'groupauditors.jsp',
data: {
Woauditorid: auditorid
},
dataType: 'json',
success: function(data) {
$.each(data, function(index, element) {
var currRow = $("#tr0").clone().appendTo($('#items')).attr('id','tr' + (index + 1));
currRow.find('td:eq(0)').html(index + 1);
currRow.find('.subgroupid').html(element.subgroupid);
currRow.find('.auditorid').html(element.auditorid);
insert_all(element.auditorid, "", "");
});
}
});
});
});
that call the insert_all(element.auditorid, "", "");
function insert_all(auditorid, onSuccess, onFail) {
$.ajax({
type: 'GET',
url: 'liquidations_a_insert_all.jsp',
data: {
Wauditorid: auditorid
},
dataType: 'json',
success: function(data) {
alert("insert_all");
//$( 'table tbody tr td:last-child').html(data.inserted);
}
});
}
Any idea?

I hope Using async:false, in Both ajax Function
$(document).ready(function() {
$('#click1').click(function(event) {
var auditorid = $('input:hidden[id=Wauditorid]').val();
$.ajax({
type: 'GET',
url: 'groupauditors.jsp',
data: {
Woauditorid: auditorid
},
async:false,
dataType: 'json',
success: function(data) {
$.each(data, function(index, element) {
var currRow = $("#tr0").clone().appendTo($('#items')).attr('id','tr' + (index + 1));
currRow.find('td:eq(0)').html(index + 1);
currRow.find('.subgroupid').html(element.subgroupid);
currRow.find('.auditorid').html(element.auditorid);
insert_all(element.auditorid, "", "");
});
}
});
});
});
function insert_all(auditorid, onSuccess, onFail) {
$.ajax({
type: 'GET',
url: 'liquidations_a_insert_all.jsp',
data: {
Wauditorid: auditorid
},
async:false,
dataType: 'json',
success: function(data) {
alert("insert_all");
//$( 'table tbody tr td:last-child').html(data.inserted);
}
});
}

Ajax doesn't execute success function

My code looks like this. The problem is, PHP side does it job and returns right value. But ajax doesn't execute things inside success: function. What am I missing?
AnswerDiv.on("click", ".NotSelectedAnswer", function() {
var NotSelectedAnswerBtn = $(".NotSelectedAnswer"),
SelectedAnswerBtn = $(".SelectedAnswer"),
AnswerDiv = $("div.Answer"),
querystring="fromID="+SelectedAnswerBtn.data("id")+"&toID="+$(this).data("id")+"&op=SelectAsAnswer";
$.ajax({
url: 'processor.php',
type: "POST",
dataType: "json",
data: querystring,
success: function(data) {
if(data.status)
{
SelectedAnswerBtn.removeClass("SelectedAnswer").addClass("NotSelectedAnswer").button("enable");
$(this).removeClass(" NotSelectedAnswer").addClass("SelectedAnswer").button("disable");
$("div.Answer[data-id=" + SelectedAnswerBtn.data("id") + "]").toggleClass("SelectedDiv");
$("div.Answer[data-id=" + $(this).data("id") + "]").toggleClass("SelectedDiv");
}
}
});
return false;
});

Try to cache $(this) before ajax call
AnswerDiv.on("click", ".NotSelectedAnswer", function() {
var NotSelectedAnswerBtn = $(".NotSelectedAnswer"),
SelectedAnswerBtn = $(".SelectedAnswer"),
AnswerDiv = $("div.Answer"),
thisElem=$(this),
querystring="fromID="+SelectedAnswerBtn.data("id")+"&toID="+$(this).data("id")+"&op=SelectAsAnswer";
$.ajax({
url: 'processor.php',
type: "POST",
dataType: "json",
data: querystring,
success: function(data) {
if(data.status)
{
SelectedAnswerBtn.removeClass("SelectedAnswer").addClass("NotSelectedAnswer").button("enable");
thisElem.removeClass(" NotSelectedAnswer").addClass("SelectedAnswer").button("disable");
$("div.Answer[data-id=" + SelectedAnswerBtn.data("id") + "]").toggleClass("SelectedDiv");
$("div.Answer[data-id=" +thisElem.data("id")+ "]").toggleClass("SelectedDiv");
return false;
}
}
});
});

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.