CODEWITHSUNDEEP
phpjqueryajax
sajid
sajid

Reputation: 257

How to load multiple divs with ajax mysql php retrieved data

I have multiple image paths in MySQL. Through $.ajax I am retrieving the paths but it is getting displayed in one div, I want to put one image path in one div...if 25 image paths are retrieved then 25 divs may be created each filled with a single retrieved path. In short, n number of divs for n number of images.

Here is the php code after that is the jQuery code:

$family = mysql_real_escape_string($_REQUEST['send_txt'], $link);
$query = "SELECT imgurl FROM images WHERE family='$family'";


$result = mysql_query($query, $link);

echo "<table>";
if(mysql_num_rows($result) > 0){

    while($row = mysql_fetch_array($result)){
        echo "<tr><td>".$row['imgurl']."</td></tr>";
                }
}else{
    echo "<tr><td>No results matching family \"$family\"</td></tr>";
}
echo "</table>";

The jQuery code

$(document).ready(function() {
    $('ul.sub_menu a').click(function() {
        var txt = $(this).text();  
        $.ajax({
            type: 'POST',
            url: 'thegamer.php',
            data: {send_txt: txt},
            success: function( data ){

//now how to assign the data to jquery object and retrieve the images path via loop //and insert it one by one while creating a new div for each image path

 $('#sliderid').html( data );

            }               
        });
    });
});

Upvotes: 2

Views: 1495

Answers (2)

Abel
Abel

Reputation: 160

<script type="text/javascript">
$(document).ready(function() {
    $('ul.sub_menu a').click(function() {
        var txt = $(this).text();  
        $.ajax({
            type: 'POST',
            url: 'thegamer.php',
            data: {send_txt: txt},
            success: function( data ){

            var response=JSON.parse(data);

                $.each(response, function(index, item){

                $('#sliderid').append($("<div></div>").text(item));

                });
        }
    });
}); }); </script>

All you have to do is iterate on the data that you receive and create at each iteration a div containing a url that you append to the container element.

I also noticed you forgot to add echo jason_encode(array_of_data_to_be_send) in order to send the data back. (you're not sending anything back).

also make sure you send it as an array(for this code snippet).

Upvotes: 0

manny
manny

Reputation: 1948

Better use Jquery Template, it is easy to solve your problem. Get JSON data and bind to your jquery template.

Upvotes: 3

Related Questions