Fancybox on click event with ajax fires multiple ajax request

Question

I got my desired output, but it is not best way of doing bcoz ajax is duplicating on every click.

Here is my code:

<a href="/messages/schedule" class="greenbtn fancybox">Schedule</a>

$('a.fancybox').click(function() {
  $('a.fancybox').fancybox({
   width : 600,
   height : 300,
   fitToView : false,
   autoSize : false,    
   type : 'ajax',
   ajax : { data : {'receiver_id' : $('#receiver_id').val(), 'subject' :  $('#subject').val(), 'body': CKEDITOR.instances.body.getData()}}
  });
});

First click fires one ajax request, second fires two and so on. How I can solve this?

I have also tried ready function intead of click, but ready function is not giving updated parameters which i am passing in ajax data option.

you create a fancybox for every click with the same class, and every new fancybox triggers again when clicking. remove the old fancybox before you create a new one. — cari, Jan 14 '15 at 10:52
unbinding it, does not give updated parameters which i am getting in ajax data section. — Chitrank Samaiya, Jan 14 '15 at 10:53
didnt notice you used fancybox 2, only saw it in the tags just now. i edited my answer for it, try it out. — cari, Jan 14 '15 at 11:08

score 1 · Accepted Answer · answered Jan 14 '15 at 18:11

After trying various solutions finally i got it resolved. Here is my code

 $('a.fancybox').click(function() {
   $.ajax({
     type    : "POST",
     cache : false,
     url   : "/messages/schedule",
     data    : {'receiver_id' : $('#receiver_id').val(), 'subject' :  $('#subject').val(), 'body': CKEDITOR.instances.body.getData()},
     success: function(data) {
       $.fancybox(data, {
         width : 600,
         height : 300,
         fitToView : false,
         autoSize : false        
       });
     }
   });
  });

Hiroaki Machida · Answer 2 · 2015-01-14T11:02:25.297

0

try this.

<a href="/messages/schedule" class="greenbtn fancybox">Schedule</a>
$(document).ready(function() {
  var getData = function() { return { data : {'receiver_id' : $('#receiver_id').val(), 'subject' :  $('#subject').val(), 'body': CKEDITOR.instances.body.getData()}}; };
  $('a.fancybox').fancybox({
   width : 600,
   height : 300,
   fitToView : false,
   autoSize : false,    
   type : 'ajax',
   ajax : getData
});

edited Jan 14 '15 at 11:02

answered Jan 14 '15 at 10:53

Hiroaki Machida

1,060
2
12
23

this does not give me updated parameters, which I am getting in ajax:{data : ""} – Chitrank Samaiya Jan 14 '15 at 10:56
How about this. I did not test it though. – Hiroaki Machida Jan 14 '15 at 11:03
that does not pass parameters. – Chitrank Samaiya Jan 14 '15 at 11:08

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

Try this for fancybox 2:

<a href="/messages/schedule" class="greenbtn fancybox">Schedule</a>

$('a.fancybox').click(function() {
$('a.fancybox').off("click.fb-start");
  $('a.fancybox').fancybox({
   width : 600,
   height : 300,
   fitToView : false,
   autoSize : false,    
   type : 'ajax',
   live : false,
   ajax : { data : {'receiver_id' : $('#receiver_id').val(), 'subject' :  $('#subject').val(), 'body': CKEDITOR.instances.body.getData()}}
  });
});

Used this answer for it: Unbind/Destroy fancybox 2 events

edited May 23 '17 at 11:57

Community

1
1

answered Jan 14 '15 at 11:00

cari

2,251
2
18
27

did you notice the `live : false` parameter? – cari Jan 14 '15 at 11:40
including live false does not ajax. – Chitrank Samaiya Jan 14 '15 at 11:50
thats odd.. live should not change the ajax event. typo maybe? – cari Jan 14 '15 at 11:53

Fancybox on click event with ajax fires multiple ajax request

3 Answers3