Using ajax javascript to load content into a div in web page

Question

I am having a little problem using javascript-ajax here. In my page, I load in the content into one of the div with id content in an ajax manner, whenever the user clicks on links which have the class myajaxreq, and the contents are loaded into the div in a fade in manner. The javascript that I am using is this

$(document).ready(function(){
    $("#content").load($('.myajaxreq:first').attr('href'));
});


$('.myajaxreq').click(function() {
    var myhref=$(this).attr('href');
    $('#content').hide().load(myhref).fadeIn('slow');

    return false;
});

All works great on localhost, but when i put it online and then when we click on these links, then: First the same content which was initially there in the div is loaded in fade in manner. After a few seconds, the new content is loaded.

I think I am missing some sort of

if(content document is ready)
     then load in a fade in manner
         and so on..

Please somebody help me out here !!

silly · Accepted Answer · 2012-12-10 15:06:44Z

3

call fade in after success callback... try this

var jContent = $('#content').hide();
jContent.load(
        myhref,
        {},
        function(){
            jContent.fadeIn('slow');
        }
    );

here the whole code (untested)

$(document).ready(function(){
    var jContent = $("#content").load($('.myajaxreq:first').attr('href'));

    $('.myajaxreq').click(function() {
        var myhref=$(this).attr('href');
        jContent
          .hide()
          .load(
            myhref,
            {},
            function(){
                jContent.fadeIn('slow');
            }
        );

        return false;
    }); 
});

edited Dec 10, 2012 at 15:06

answered Dec 10, 2012 at 14:54

silly

7,8972 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Viktor S. Over a year ago

+1. Besides, no need to pass an empty array as a second parameter.

OneMoreError Over a year ago

I am a little new to javascript and ajax stuffs. So, plz dont mind: But whenever I paste your code into my js file, the entire css gets disoriented !! Do I need to remove the previous javascript code I have shown in the problem ??

Collectives™ on Stack Overflow

Using ajax javascript to load content into a div in web page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related