php and jquery programming

Question

My problem is that this is only returning one image and there are 10.

This is my jquery code:

function mainImages() {
    $.ajax({
        url: '../includes/action.php',
        method: 'POST',
        data: {mainImages:1},
        success: function(data) {
            $('#main').html(data.mainImagesdiv);
        }
    });
}
mainImages();

and following is my php code, which is returning json data.

if(isset($_POST['mainImages'])) {
    $query = "SELECT * FROM images ORDER BY date_time DESC";
    $query_run = mysqli_query($dbc, $query);
    if(mysqli_num_rows($query_run) > 0) {
        while($rows = mysqli_fetch_array($query_run)) {
            $img_id = $rows['img_id'];
            $img_category = $rows['img_category'];
            $img_title = $rows['img_title'];
            $title_color = $rows['title_color'];
            $image = $rows['image'];
            $img_content = $rows['img_content'];
            $date_time = $rows['date_time'];
            $data = [ "mainImagesdiv" => "
            <div class='col s12 m6 l6'>
                <a href='#!'><div class='card grey'>
                    <div class='card-image'>
                        <img src='../images/".$image."' alt='Blog Picture'>
                        <span class='card-title'>
                            <h5 style='color: ".$title_color.";'>".truncate($img_title, 60)."</h5>
                            <span class='new badge' data-badge-caption='".strtoupper($img_category)."'></span>
                        </span>
                    </div>
                </div></a>
            </div>
            "];
        }
    }
}
header('Content-Type: application/json');
echo json_encode($data);
closeconnection();

On every iteration you overwrite the $data variable you return from PHP. You need to add data to it instead of overwriting it — JimL
– JimL, Commented Feb 25, 2018 at 20:40

Syscall · Accepted Answer · 2018-02-25 20:41:39Z

1

You are overriding your variable $data on each loop, so you get only the last one.

Change this line :

$data = [ "mainImagesdiv" => "<div class='col s12 m6 l6'>...</div>"] ;

By this line (append in "mainImagesdiv" string) :

$data["mainImagesdiv"] .= "<div class='col s12 m6 l6'>...</div>" ;

And before while($rows, add (to create the new string) :

$data["mainImagesDiv"] = "" ;

Finally, at the beginning add (to avoid "undefined variable" notice) :

$data=[];

Example :

$data=[] ; // data for JSON
if(isset($_POST['mainImages'])) {
    $query = "SELECT * FROM images ORDER BY date_time DESC";
    $query_run = mysqli_query($dbc, $query);
    if(mysqli_num_rows($query_run) > 0) {
        $data["mainImagesdiv"]=""; // new String in 
        while($rows = mysqli_fetch_array($query_run)) {
            $img_id = $rows['img_id'];
            $img_category = $rows['img_category'];
            $img_title = $rows['img_title'];
            $title_color = $rows['title_color'];
            $image = $rows['image'];
            $img_content = $rows['img_content'];
            $date_time = $rows['date_time'];
            // concatenate the string
            $data["mainImagesdiv"] .= "
            <div class='col s12 m6 l6'>
                <a href='#!'><div class='card grey'>
                    <div class='card-image'>
                        <img src='../images/".$image."' alt='Blog Picture'>
                        <span class='card-title'>
                            <h5 style='color: ".$title_color.";'>".truncate($img_title, 60)."</h5>
                            <span class='new badge' data-badge-caption='".strtoupper($img_category)."'></span>
                        </span>
                    </div>
                </div></a>
            </div>
            ";
        }
    }
}
header('Content-Type: application/json');
echo json_encode($data);
closeconnection();

answered Feb 25, 2018 at 20:41

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

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

4 Comments

Fortie40 Over a year ago

This did not output anything. but when i checked the console it made the request and the return was [] [].

Syscall Over a year ago

@Fortie I've updated the answer several time. Please check the last one.

Fortie40 Over a year ago

so hey. what if i want multiple divs.Like there we have moreImagesdiv.and you want to add another type of data. Say moreimg.

Syscall Over a year ago

@Fortie You have to create more key in array like this :$data["moreImagesdiv"].="<div></div>"; (don't forget to create it before the while).

Collectives™ on Stack Overflow

php and jquery programming

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related