Trying to add data to a new div every time the ajax succes function loop completes in codeigniter

Question

Hey guys i am trying to send the data from the loop to the div element so that i can show it one by one . but when i try to send the data it just shows all the values together what can i do ?

here is my code

<script type="text/javascript">
    $(document).ready(function(){
        $(window).scroll(function(){
            var lastID = $('.load-more').attr('lastID');
            if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
                jQuery.ajax({
                    type:'POST',
                    url:'<?php echo base_url("user/get_all_post"); ?>',
                    data: "id=" + lastID,
                    dataType: 'json', 
                    beforeSend:function(html){
                        $('.load-more').show();
                    },
                    success:function(data){
                        var ParsedObject = JSON.stringify(data);            
                        var json = $.parseJSON(ParsedObject);
                        $PostId=json[4]['id'];
                        for(i=0;i<5;i++ )
                        {
                            var post_status = json[i]['status'];
                            var status_image = json[i]['status_image'];
                            var multimage = json[i]['multimage'];
                            alert(post_status);
                            $("#post_status").show();
                            $("#status_data").append(post_status);
                            $("#post_status").hide();
                        }
                        $('.load-more').attr('lastID', $PostId);
                    }  
                });
            }
        });
    });
</script>

but it just append the data together let me show you

what can i do to add the div every time the value goes through in the loop.

this is the html that i want to add in every div

<div class="post_status" id="post_status" style=" margin: 20px 50px 0px 40px; "> <a href="#" ><?php echo img($user_image); ?></a><a href=""><?php echo $uname; ?></a> <div class="status_post" id="status_data"></div> </div>

Give us the HTML that needs to be added. – Taha Paksu Feb 20 '17 at 07:42 — Taha Paksu, Feb 20 '17 at 07:42

Taha Paksu · Accepted Answer · 2017-02-20T08:45:25.697

1

You need to append the whole generated html to the related container:

$('<div class="post_status" id="post_status" style=" margin: 20px 50px 0px 40px; ">' +
    '<a href="#"><img src="'+status_image+'"></a><a href="">'+user_name+'</a>' + 
    '<div class="status_post" id="status_data">'+ post_status + '</div></div>')
 .appendTo("#the-comments-container");

You need the user_name variable though.

edited Feb 20 '17 at 08:45

answered Feb 20 '17 at 07:50

Taha Paksu

15,371
2
44
78

i tried your method but it gave me error "SyntaxError: expected expression, got '<'[Learn More]" @TahaPasku – Himanshu Goyal Feb 20 '17 at 07:56
also my code is here $("#status_data").append('
'+''+ +''+''+ +''+'
'+post_status+'
' +'
'); – Himanshu Goyal Feb 20 '17 at 07:57
you need to add quotes around this only in the ajax result method : `` thats why it gives error. it should be like `...'+ "" +''...` – Taha Paksu Feb 20 '17 at 08:07
but when i try to use status_image that contain a image it only shows the image name how can i create a image path and then append that value? can you give me some hints @TahaPaksu – Himanshu Goyal Feb 20 '17 at 08:29
it seems there is a error it shows object html elemet – Himanshu Goyal Feb 20 '17 at 09:03
Maybe the image path needs to be altered? – Taha Paksu Feb 20 '17 at 09:05
i am doing this in codeigniter so i think i base_url might be able to do this. – Himanshu Goyal Feb 20 '17 at 10:49

score 0 · Answer 2 · answered Feb 20 '17 at 07:34

0

$("#status_data").append('<div>'+post_status+'</div>');

answered Feb 20 '17 at 07:34

Vikram Singh

924
1
9
23

that is correct but i need to add a div that has the image and the user name every time i append the data . – Himanshu Goyal Feb 20 '17 at 07:37
– Himanshu Goyal Feb 20 '17 at 07:37
this is my div that contains the image and username. @Vikram Singh – Himanshu Goyal Feb 20 '17 at 07:38

score 0 · Answer 3 · edited May 23 '17 at 12:00

0

If I understood correctly, You can also duplicate your existing div using this method - How can i duplicate a div onclick with javascript?

Append the new information to the duplicated div, And then insert the new div into the page.

Something like this:

var yourDiv = document.getElementById('yourDiv');
var duplicatedDiv = Duplicate(yourDiv);
duplicatedDiv.innerHTML = post_status;
$("#divContainer").append(duplicatedDiv);

edited May 23 '17 at 12:00

Community

1
1

answered Feb 20 '17 at 07:52

Shtut

1,397
2
14
28

@Himanshu Goyal yes, you'll need to define Duplicate yourself. you can see the example for it in the link I sent. – Shtut Feb 20 '17 at 08:06

Trying to add data to a new div every time the ajax succes function loop completes in codeigniter

3 Answers3