php - invoking multiple ajax call on link click

Question

I have a result page on which multiple results are present,structure of each result's div is like :

 <div class="col-md-3 photo-grid " style="float:left">
<div class="well well-sm"  target="_blank">
    <figure>
        <img class="img" alt="PDF" src="<?php echo $icon_url ;?>" >
        <figcaption id="hide"> <p> <a href="#" class="preview" data-id = "<?php echo $content_id;?>"><strong>Preview</strong></a></p>
        </figcaption>
    </figure>
    <a href="final.php?id=<?php echo $id;?>&name=<?php echo $title;?>" target="_blank">
        <h4><small><?php echo $title; ?></small></h4>
    </a>
    <br>
    <ul style="list-style: none;" class="container-fluid">
        <li class="col-md-4 col-xs-4 pull-left">
        <a href="#" class="preview btn btn-default"  id="btnFilter" data-id = "<?php echo $content_id;?>">Preview</a></li>

        <li name="id" class="col-md-6 col-xs-6"><a href="final.php?id=<?php echo $content_id;?>&name=<?php echo $title;?>" class="btn btn-primary" id="btnFilter" target="_blank">  View Full Doc</a></li>
        <li class="col-md-2 col-xs-2"><i class="fa fa-eye" aria-hidden="true" style="margin-top:10px;"> <?php echo $doc_views;?></i></li>
      </ul>
   </div>
  </div>
  <?php include 'modal.php'; ?>

ajax call

  <script>
 $('.preview').on('click', function() {
 console.log('click');
 var content_id = $(this).data();
 console.log(content_id);
 $.get('ajax/remote_modal.php', { content_id: content_id }, function(data) {
  // Populate modal
  //console.log(data);
 $("#modal_data").html(data);
 $("#myModal").modal('show');
});
});
</script>

whole code is working fine except it sends multiple numbers of ajax calls as i can see in console,suppose if 10 results are present then 10 times click got printed on console.i know there is problem with the preview class,but i already tried invoking ajax using id but it is not working.suggest ne some other method to do it successfully

try bind unbind jquery event

Nikhil Vaghela
– Nikhil Vaghela

2016-08-30 12:23:28 +00:00
Commented Aug 30, 2016 at 12:23 — Nikhil Vaghela
– Nikhil Vaghela, Commented Aug 30, 2016 at 12:23

Haresh Vidja · Accepted Answer · 2016-08-30 12:32:12Z

1

I think your code is binding same event multiple times. so it pushing same function for same event multiple time. When event is triggered so all pushed functions are executed.

Simply you can unbind all pushed function for click event and push new one.

<script>

    $(document).ready(function(){
        $('.preview').unbind('click').bind('click', function(e) {
            e.preventDefault();
            console.log('click');
            var content_id = $(this).data();
            console.log(content_id);
            $.get('ajax/remote_modal.php', { content_id: content_id }, function(data) {
                // Populate modal
                //console.log(data);
                $("#modal_data").html(data);
                $("#myModal").modal('show');
            });
            return false;
        });
    })
</script>

answered Aug 30, 2016 at 12:32

Haresh Vidja

8,4713 gold badges29 silver badges44 bronze badges

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

1 Comment

Haresh Vidja Over a year ago

Its my pleasure, don't forget mark as right and upvote :)

Collectives™ on Stack Overflow

php - invoking multiple ajax call on link click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related