Develop Reference

Jquery to fix scroll down to bottom - Not working

I am using a setInterval() to load one part of the page for every 1 second. Everything is working fine but, I am displaying all the messages using a table. I want scroll bar always to the bottom.we have to scroll down to view new messages. So, I want my scroll bar fix to the bottom by default.
Jquery code which is loading the messages table
setInterval(function(){
if(user.trim()!=""){
$.ajax({
type : "GET",
url : "getuserconversation",
data: {username: user},
datatype: "json",
success: function(data){
if(data.success){
$(".messages").load("conversation_of_users.jsp");
var $mydiv = $("#msgs");
$mydiv.scrollTop($mydiv.height());
}
},
error: function() {
console.log("error");
}
});
}
}, 5000);
It was working but, there is a problem. It goes to bottom of the table and within 1 second it is returning to top again. I saw this while debugging. In real time we cant even see that. I dont know why it is going to top again.

I don't know why is returning to top but you can solve your problem using return false; at end of the callback.
or you can use e.preventDefault();

jQuery click event interrupts setInterval

I'm creating script where I use AJAX from jQuery. I've got a problem, as on my website I've got hidden object. Moreover I use setInterval to frequently refresh a piece of my script. Everything works well, but until I click on link to set this hidden object to be visible. When I click on link and make object visible, setInterval stops refreshing page. This is my code to AJAX:
$(document).ready(setInterval(function() {
$.ajax({
type: "POST",
url: "score.php",
success: function(html){
$("#loadplace").hide().show().html(html);
}
});
return false;}, 60000));
and this is code for link:
$('div#bar a#squad1').click(function(e) {
e.preventDefault();
$('div#s1 table.events1').hide();
$('div#s1 table.index_players1').fadeIn();
});
$('div#bar a#events1').click(function(e) {
e.preventDefault();
$('div#s1 table.index_players1').hide();
$('div#s1 table.events1').fadeIn();
});
is there any solution in jQuery for my problem ?
P.S. I hope you understand what I wrote, I know that my English is not so good as I wish it to be.

Ajax calls within nested divs not working for FireFox with MVC3

I have a cshtml page that has a link, and a div to display some content.
<a href="#" onclick="Show_New_Page('#First_Div')>My Link</a>
<div id="First_Div">
#Html.Partial("General_Page") <- This is the default page that gets displayed on load.
</div>
When you click on the link, the javascript function Show_New_Page gets called and the string '#First_Div' gets passed as a parameter. I pass the name of the div I wish for the ajax in Show_New_Page to put its success value. That function looks like this:
function Show_New_Page(div) {
$.ajax(
{
type: "POST",
url: url, //Declared above globally, unimportant
data: data, //Declared above globally, unimportant
success: function (result) {
$(div).html(result);
}
});
}
When you click on this link in Internet Explorer, the new page gets displayed fine with no issues. However, when you click on this link in FireFox, the entire page turns white and never successfully loads.
There are plenty of posts about issues with Ajax and different browsers, but I was unable to see one that helped me. Any hints or tips I can try are much appreciated. I am very unsure of why this is happening, so if I have left out any information I will certainly do my best to provide it.

There seems to be a missing closing ) when you are calling the Show_New_Page function. Also it's recommended to return false from click handlers to cancel default action:
My Link
Also you might prefer to give this anchor an id:
My Link
and then unobtrusively AJAXify it in a separate file to avoid mixing markup with javascript:
$(function() {
$('#myLink').click(function() {
$.ajax({
type: 'POST',
url: url, //Declared above globally, unimportant
data: data, //Declared above globally, unimportant
context: { id: $(this).data('id') },
success: function (result) {
$(this.id).html(result);
}
});
return false;
});
});

The issue here was the fact that my ajax views that were being passed down after clicking on a link were using document.write() statements. I have learned that this is strange to do after the page has already loaded. I've moved these statements up to the files that were not being loaded with ajax, and that fixed the problem. Thank you to everyone who commented and suggested ideas to me. It was the investigation of these ideas that lead me to the core issue!
The lesson: be careful with excessive document.write() statements in firefox!

How to open an html page in and html div?

The question might be a little misleading as I don't want to know how to open a html document in a div ,but I asked the question as I am currently facing a problem where I can't replace the html file which I have already placed in a div
I have already placed a html file in a div using ajax like this:
$.ajax({
url: 'calender.aspx',//this is html.aspx file
cache: false,
dataType: "html",
success: function (data) {
$(".mainBar").html(data);//mainBar is the div
}
});
this file gets placed on page load i.e document.ready function ,till here everything is fine.....my trouble starts when I want to replace the file,what I do is call a javascript function say replaceFile() on button click and write the same code to replace the file (changing the url of course)
like this
function replaceFile()
{
$.ajax({
url: 'Another.aspx',
cache: false,
dataType: "html",
success: function (data) {
$(".mainBar").html(data);
}
});
}
but this doesn't work,please help me out!

I guess your binding is not working when you try to click on the content you loaded via ajax . So you might want to change the binding of onclick from
$("#someButtonId").click(function(){
replaceFile();
});
to
$(document).on("click","#someButtonId",function(){
replaceFile();
});
jQuery on works with current and future elements.

with this function you will load the page into the element named result
.load( url , data, complete(responseText, textStatus, XMLHttpRequest)] )
function replaceFile(url)
{
$('#result').load(url, function() {
alert('Load was performed.');
});
}
replaceFile('htmlfile.html');

You can load this in Firebug and set a break point at $(".mainBar").html(data); to make sure it's being called. You don't have a failure handler, so it's possible that it's actually receiving an HTTP failure code, not a success code.
I'd also look at the network traffic under the Net tab to see what the request/response looks like. That's an easy way to find out what is really going on with most AJAX calls. IE9 has similar developer tools if you want to use it and not Firefox or Chrome.

Ajax fires only once,and the javascript file is loaded only once

Basically, I am trying to load the html and JavaScript file for each subpage on my website with ajax. However, the JavaScript file only loads for the first subpage that is clicked on. If I click on the next subpage, only the html document for that loads, but the javascript does not. This is from looking at the firebug console: Clicking on about first, then clicking on contact:
GET http:..../about.html?t=0.19504348425731444
GET http:..../about.js?t=0.8286968088896364
GET http:..../contact.html?t=0.8467537141462976
(!!!NO GET FOR contact.js!!!)
Anyways, I tried using live() to bind the click event but it still doesn't work.Here's the relevant snippets of my code:
$('.subpage').live('click',function(){
$('#main').css({'cursor':'crosshair'});
navsubpage = true;
subpage = $(this).attr('id');
$('.subpage').each(function(index) {
$('#'+$(this).attr('id')).fadeOut('500');
$('#'+$(this).attr('id')+'select').fadeOut('500');
});
$('#'+subpage+'h').css({'background-color':'#000','display':'block'});
$('#'+subpage+'h').animate({'width':'375px','top':'120px','left':'100px','font-size':'400%'},'500');
subtop = $('#'+subpage+'h').css('top');
subleft = $('#'+subpage+'h').css('left');
$('#pane').css({'border-left-width':'0px'});
$('#nav').css({'background':'url("images/'+$(this).attr('id')+'.jpg") no-repeat 0px 0px'});
$('#nav').animate({'left':'0px'},'4000','swing',function(){
$('#reload').show().delay(500).queue(function(){
alert("made it");
$.ajax({
url: subpage+".js?t=" + Math.random(),
dataType: 'script',
type: 'get',
});
});
});
reload(subpage);
});
$('#main').click(function(){
if(navsubpage==true){
$('#main').css({'cursor':'auto'});
$('#reload').hide();
$('#pane').css({'border-left-width':'10px'});
$('#'+subpage+'h').animate({'width':'150px','top':subtop,'left':subleft,'font-size':'200%'},'2000',function(){
$('#'+subpage+'h').css({'display':'none'})});
$('#nav').animate({'left':'415px'},'3000','swing', function(){
$('.subpage').each(function(index) {
$('#'+$(this).attr('id')).fadeIn('3000');
$('#'+$(this).attr('id')+'select').fadeIn('3000');
});});
navsubpage = false;
}
});
the reload function loads the html and is working correctly.
I am really new to ajax, javascript...etc. If any of you can help me out, that'll be great.

It's confusing that you have both the "?t=" + Math.random() combined with cache: true.
The practice of appending a timestamp to a URL is a common method to prevent caching, but then you explicitly tell it that you want it to cache. You might try removing the cache: true option, as it looks to be totally superfluous and can only cause problems (the likes of which would resemble what you're describing here).

I would reccomend trying out a jQuery ajax shortcut function $.get()
It is farly simple and might cut out a lot of uneccesary options you are setting using the full $.ajax() function

Thanks for the help guys - in the end I just decided to not mess with the queue stuff. I still don't understand why it works, but I just took out the ajax and placed it outside of $('#reload').show().delay(500).queue(function(){, eliminating the delay and queue stuff and making the ajax a separate snippet of code. now it loads correctly.