CODEWITHSUNDEEP
javascriptajaxjqueryprepend
Aaron Brokmeier
Aaron Brokmeier

Reputation: 41

How can I get the data from an ajax request to appear inside a div?

I am unable to get the data from my ajax request to appear inside <div class="l_p_i_c_w"></div>. What am I doing wrong? I know the function inside my_file.php works, because if I refresh the page, then the data shows up where it should.

jQuery:

$.ajax({
        type: "POST",
        url: "my_file.php",
        dataType: 'html',
        success: function(data){
            $('div#myID div.l_p_c div.l_p_i_c_w').prepend(data);
        }
});

HTML:

<div class="l_p_w" id="myID">
    <div class="l_p_c">
        <div class="l_p_i_c_w">
       <!-- stuff, or may be empty. This is where I want my ajax data placed. -->
        </div>
    </div>
</div>

CSS:

.l_p_w {
    width:740px;
    min-height:250px;
    margin:0 auto;
    position:relative;
    margin-bottom:10px;
}

.l_p_c {
    position:absolute;
    bottom:10px;
    right:10px;
    width:370px;
    top:60px;
}

.l_p_i_c_w {
    position:absolute;
    left:5px;
    top:5px;
    bottom:5px;
    right:5px;
    overflow-x:hidden;
    overflow-y:auto;
}

Upvotes: 0

Views: 222

Answers (4)

BuddhiP
BuddhiP

Reputation: 6461

Try this:

$.ajax({
        type: "POST",
        url: "my_file.php",
        dataType: 'html',
        complete: function(jqXHR, settings){
            if (jqXHR.status == 200)
               $('div#myID div.l_p_c div.l_p_i_c_w').prepend(jqXHR.responseText);
        }
});

or 

$.ajax({
        type: "POST",
        url: "my_file.php",
        dataType: 'html'
}).done(function(data) {
     $('div#myID div.l_p_c div.l_p_i_c_w').prepend(data);
});

Upvotes: 0

ethorn10
ethorn10

Reputation: 1899

What about prependTo() ?

$.ajax({
            type: "POST",
            url: "my_file.php",
            dataType: 'html',
            success: function(data){
                $(data).prependTo('#myID .l_p_c .l_p_i_c_w');
            }
    });

As @rajesh mentioned in his comment to your question, try alerting the data in the success to make sure it's coming back as expected:

$.ajax({
            type: "POST",
            url: "my_file.php",
            dataType: 'html',
            success: function(data){
                alert(data);
            }
    });

Upvotes: 0

m4nw17h4pl4n
m4nw17h4pl4n

Reputation: 149

I think if you use prepend you would need to wrap your data object in jquery tags like $(data) before appending, as prepend appends children (objects)

$.ajax({
            type: "POST",
            url: "my_file.php",
            dataType: 'html',
            success: function(data){
                $('div#myID div.l_p_c div.l_p_i_c_w').prepend($(data));
            }
    });

However, if you just want to set the html of the div with the data do this:

$.ajax({
        type: "POST",
        url: "my_file.php",
        dataType: 'html',
        success: function(data){
            $('div#myID div.l_p_c div.l_p_i_c_w').html(data);
        }
});

Third Option, try prependTo

http://api.jquery.com/prependTo/

$.ajax({
    type: "POST",
    url: "my_file.php",
    dataType: 'html',
    success: function(data){
        $(data).prependTo($('div#myID div.l_p_c div.l_p_i_c_w'));
    }
});

One last attempt:

$.ajax({
            type: "POST",
            url: "my_file.php",
            dataType: 'html',
            success: function(data){
                $('div#myID div.l_p_c div.l_p_i_c_w').html(data + $('div#myID div.l_p_c div.l_p_i_c_w').html());
            }
    });

Upvotes: 1

VibhaJ
VibhaJ

Reputation: 2256

 $('div#myID div.l_p_c div.l_p_i_c_w').prepend(data);

should be

 $('#myID .l_p_c .l_p_i_c_w').html(data);

Upvotes: 1

Related Questions