Ajax response not updating in php while loop

Question

I am having a slight problem figuring out why this ajax response isn't updating properly. I have a php while loop which lists gallerys in text format, i am using . It is getting details from the php page but only for one result so essentially when you hover over the name a qtip tooltip box pops up so you can edit the name of the gallery. The problem is it only lists one result for all results in the loop.

PHP & HTML

    <?php
            $MemberGalleriesQuery = $bapcity->query("SELECT * FROM CroMemberRetailGalleries WHERE UserID='".$_SESSION['user_id']."' ORDER BY GalleryID DESC");
            $MemberGalleriesCount = $MemberGalleriesQuery->num_rows;

            if ( $MemberGalleriesCount ) 
            {
                $BaseHeight = 150;
                $GalleriesBoxHeight = $BaseHeight + ( 20 * $MemberGalleriesCount );
                echo '
                <div id="ManageGalleries" style="height: '.$GalleriesBoxHeight.'px" align="center">
                <div id="ManageGalleriesHeader">Manage Galleries</font></div><br><br>
                <font color="#000000"><b>Click Gallery To Edit</b></font><br><br>
                ';

                while($GalleryData = $MemberGalleriesQuery->fetch_assoc())
                {
                    echo '>> <b><a class="EditGallery" href="Crowork.Backend/Crowork.EditGallery.php?action=EditGallery&gallerykey='.$GalleryData['GalleryID'].'">'.$GalleryData['GalleryName'].'</a></b> <<<br>';
                }

                echo '<br><br></div>';
            }
            $MemberGalleriesQuery->free();
            ?>

JAVASCRIPT:

    //Edit Form When Hovering Over Gallery Name
$('.EditGallery').each(function() {


    var link = $('.EditGallery').attr('href'); //Gets link url

    $.ajax({ //Make the ajax request
        url: link,
        cache: false
    }).done(function( html ) { //On complete run tooltip code

        //Display tooltip code goes here, returned text is variable html
    $('.EditGallery').qtip({
        content: {
            text: html
        },
        hide: {
            fixed: true,
            delay: 300
        },
        style: 'wiki'
    });
    $('.EditGallery').qtip('click', true);
    $(".EditGallery").page();
    });
});

CONTENTS OF Crowork.Backend/Crowork.EditGallery.php

    if ( isset( $cleanGet['action'] ) && $cleanGet['action'] == 'EditGallery' ){

    $MemberGalleriesQuery = $bapcity->query("SELECT * FROM CroMemberRetailGalleries WHERE GalleryID='".$cleanGet['gallerykey']."' AND UserID='".$SessionUserID."' ORDER BY GalleryID DESC");

    $MemberGalleriesCount = $MemberGalleriesQuery->num_rows;

    if ( $MemberGalleriesCount )
    {       
        $GalleryData = $MemberGalleriesQuery->fetch_assoc();
    }?>

    <form action="Crowork.Backend/Crowork.EditGallery.php?action=DoEditGallery&gallerykey=<?php echo $GalleryData['GalleryID']?>" method="post">
        <input type="hidden" name="GalleryName" value="<?php echo $GalleryData['GalleryName']?>">
        <input type="hidden" name="GalleryID" value="<?php echo $GalleryData['GalleryID']?>">
        <input type="submit" name="DeleteGallery" value="Delete Gallery">
    </form>

    <form action="Crowork.Backend/Crowork.EditGallery.php?action=DoEditGallery&gallerykey=<?php echo $GalleryData['GalleryID']?>" method="post">
    <table border="0" width="100%">
    <tr>
        <td colspan="2" align="center"><font size="-1"><b>NOTE:</b> Letters & Numbers Only</font></td>
    </tr>
    <tr>
        <td>Name:</td>
        <td><input type="text" name="GalleryName" size="30" value="<?php echo $GalleryData['GalleryName']?>"></td>
    </tr>
    <tr>
        <td align="right" colspan="2">
            <input type="hidden" name="OriginalGalleryName" value="<?php echo $GalleryData['GalleryName']?>">
            <input type="hidden" name="GalleryID" value="<?php echo $GalleryData['GalleryID'] ?>">
            <input type="submit" name="EditGallery" value="Edit Gallery">
        </td>
    </tr>
    </table>
    </form>
    <?php }?>

PREVIEW:

http://www.bigjohn863.com/mini-upload-form/uploads/ajaxproblem.png

See how all three are the same results.

Could you share what is in Crowork.Backend/Crowork.EditGallery.php? — Jia Jian Goi
– Jia Jian Goi, Commented Dec 11, 2015 at 3:35
I have updated my post with the contents of Crowork.EditGallery.php — BigJohn863
– BigJohn863, Commented Dec 11, 2015 at 3:49

madalinivascu · Accepted Answer · 2015-12-12 14:34:45Z

1

Try:

 $('.EditGallery').each(function()
{
        $(this).qtip({
        content:  {
            text: "Loading...",
            ajax: {
                url:$(this).attr('href'),
                type: "GET",
                success: function(data, status) {
                  this.set('content.text', data);
                }                
               }

            },
        hide: {
            fixed: true,
            delay: 300
        },
        style: 'wiki'
    });
    $(this).qtip('click', true);
});

http://jsfiddle.net/st0j8nLy/

edited Dec 12, 2015 at 14:34

answered Dec 11, 2015 at 5:31

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

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

4 Comments

BigJohn863 Over a year ago

I like the loading... part, however with that updated code it shows the entire page in the tool tip.

madalinivascu Over a year ago

his.set('content.text', $(data).find('body').html()); replace the "body" with your specific tag

BigJohn863 Over a year ago

Hi Madalin, i hope your day is good. I replaced that in the code and changed body to my specific tag .EditGallery but it just keeps saying loading .... in the qtip tool tip.

BigJohn863 Over a year ago

This fixed the problem ... Thank you very very much!!

Mat Taylor · Accepted Answer · 2015-12-11 04:47:22Z

1

//Edit Form When Hovering Over Gallery Name
$('.EditGallery').each(function() {

var link = $('.EditGallery').attr('href'); //Gets link url
....

everytime you are calling $('.EditGallery'). $('.EditGallery'). is an array, you need to change all references to $('.EditGallery') that is within the loop to $(this):

var link = $(this).attr('href'); //Gets link url

edited Dec 11, 2015 at 4:47

answered Dec 11, 2015 at 4:43

Mat Taylor

19110 bronze badges

3 Comments

BigJohn863 Over a year ago

Hi Mat Taylor, I replaced all instances of $('.EditGallery') to $(this) except for the one $('.EditGallery').each. However, it broke the tooltip now it doesn't show at all.

Mat Taylor Over a year ago

From what I can see, you have no elements with class EditGallery

BigJohn863 Over a year ago

Hey Mat, yes sir i have class set to EditGallery in the anchor tag. <a class="EditGallery"

Nitesh Pawar · Accepted Answer · 2015-12-11 05:07:44Z

1

You Might be need to create dynamic id so you can call proper ajax. please modify your ajax call as below

 $gid=$GalleryData['GalleryID'];              
 echo '>> <b><a onclick="editgalary($gid)" id="EditGallery_$gid" href="Crowork.Backend/Crowork.EditGallery.php?action=EditGallery&gallerykey='.$GalleryData['GalleryID'].'">'.$GalleryData['GalleryName'].'</a></b> <<<br>';

replace this code in while loop.

function editgalary(galaryid){
   var link = $('#EditGallery_'+galaryid).attr('href');
//ajax code as it is.
}

try and let me konw

answered Dec 11, 2015 at 5:07

Nitesh Pawar

4253 silver badges11 bronze badges

2 Comments

BigJohn863 Over a year ago

Nitesh, good concept! However, it breaks the tooltip so it doesn't show at all.

Nitesh Pawar Over a year ago

add title attributes in anchor tag. it will work as tooltip as u want.

Collectives™ on Stack Overflow

Ajax response not updating in php while loop

3 Answers 3

4 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related