CODEWITHSUNDEEP
javascriptphpjqueryajax
Arturo Rosales Baez
Arturo Rosales Baez

Reputation: 159

Jquery and AJAX script to run a PHP script in the background to avoid any refreshing

I have built a follow/unfollow Twitter like system using PHP. Now I would like to run the follow-unfollow PHP script in the background using AJAX/JQUERY to avoid refreshing the page when you follow/unfollow a user. To make things simpler, I will be here just using the example of “unfollow”. As you notice, I am running an iteration to output all the members in the database. I am outputting here (as well for simplicity) just the member’s name and an unfollow button to each one.

This is the code using php.

members.php

<?php  foreach($members as $member){ ?>
 <p class="member_name"><?php echo $member->name; ?></p>
<a href="follow_actions.php?unfollow_id=<?php echo $member->id; ?>"><p class="follow_button">Unfollow</p></a> 
<?php } ?>

unfollow.php

    <?php
    if($_GET['unfollow_id']){
    $unfollow_id=$_GET['unfollow_id'];
    $unfollow=Following::unfollow($id, $unfollow_id); //Function that will make the changes in the database.
                                                    // $id argument will be gotten from a $_SESSION.

}

I am trying to achieve the same result running unfollow.php in the background to avoid any refreshing. This is what I have come up with, as you might imagine it is not working properly. I am including the Jquery script inside the iteration which I think is the only way of obtaining the $member->id property to then assign it to the Jquery variable.

members.php THE NEW ONE THAT TRYS TO RUN THE SCRIPT WITH AJAX JQUERY 

<?php  foreach($members as $member){ ?>
     <p class="member_name"><?php echo $member_name; ?></p>
     <button  type="button" class="unfollow_button" id="unfollow">Unfollow</button>

            <script type="text/javascript">
            $(document).ready(function(){
            $("#unfollow").click(function(){
                // Get value from input element on the page
                var memberId = "<?php $member->id ?>";

                // Send the input data to the server using get
                $.get("unfollow.php", {unfollow_id: memberId} , function(data){
                    // Success

                        });
                    });
                });
            </script>
        <?php } ?>

Can you provide me any help for this to work? Thanks in advance.

Upvotes: 1

Views: 1961

Answers (1)

Steven Moseley
Steven Moseley

Reputation: 16325

Remember, in HTML, id attributes have to be unique.

Because you're rendering multiple members on a single page, you should not use an id selector in jQuery, but a class selector (e.g. button.unfollow). If you use #unfollow, you'll run into ID conflicts between each of the members' buttons.

First, render all of your members with unfollow buttons without ids. I'm adding the member_id in the markup using a data attribute called data-member_id.

<?php  foreach($members as $member) { ?>
    <p class="member_name"><?=$member_name?></p>
    <button type="button" class="unfollow_button" data-member_id="<?=$member->id?>">Unfollow</button>
<?php } ?>

Then add a single click handler for all button.follow buttons, which extracts the member_id from the clicked button's data-member_id attribute and sends it to the server.

<script type="text/javascript">
$(document).ready(function() {
    $("button.unfollow_button").on('click', function() {
        // Get value from input element on the page
        var memberId = $(this).attr('data-member_id');
        // Send the input data to the server using get
        $.get("unfollow.php", {unfollow_id: memberId} , function(data) {
            // Success
        });
    });
});
</script>

On a side-note, you should probably look into building a RESTful service for this, to which you can post proper HTTP requests using http://api.jquery.com/jquery.ajax/.

See here for an intro on REST in PHP I wrote a while back:

Create a RESTful API in PHP?

Upvotes: 1

Related Questions