Reinitialize jQuerytools Overlay on ajax loaded element

Question

I am trying to reinitialize a Overlay on new ajax loaded elements. Here my code:

  $('input.search-files').keyup(function(event){
      if( event.keyCode == 13 ) {

          $.ajax({
          type: "GET",
          url: ...,
          dataType: "html",
          data: {...},
          beforeSend: function(){ 
              $('.tr-documento').fadeOut('fast', function(){ $(this).remove(); });
              $('.table-content').find('.table-loader').show(); 
          },
          success: function(data) {
              if( $(data).filter('tr').length == 0 ){ 
                  $('.table-loader').before( '<tr class="tr-documento"><td colspan="10">Non ci sono</td></tr>' ); 
              } else{
                  $('.table-loader').before( $(data).filter('tr') );
              }        
             $('.table-content').find('.table-loader').hide();
             $("table.table-content").tablesorter({headers: { 0: { sorter: false }, 6: { sorter: false },7: { sorter: false },8: { sorter: false },9: { sorter: false } } });
             reInitializeAjaxed();
             $(".modifica-file[rel]").overlay();
        }
      });
    }
  });

This function is triggered on "ENTER" keyup. Everything work fine, table sorter works at first hit. jQuerytools overlay event instead, is binded only at the second hit on "ENTER".

Someone knows this issue? Is there a way to "live" overlay event and not re-init each ajax call? I tried this:

$(document).delegate('.modifica-file[rel]', 'load', function(){ $(".modifica-file[rel]").overlay(); });

but is not working..

score 0 · Answer 1 · answered Aug 14 '13 at 13:11

0

I think is not opened because the overlay is only initialized without firing.

You can set the load attribute at true like:

$(".modifica-file[rel]").overlay({load: true});

or fire the overlay manually using the load method:

$(".modifica-file[rel]").data("overlay").load();

Docs: http://jquerytools.org/documentation/overlay/

Example: http://jquerytools.org/demos/overlay/trigger.html

answered Aug 14 '13 at 13:11

Irvin Dominin

30,819
9
77
111

Edward i don't need to open it at the end of AJAX, just to reinit it. Then open it at click on $('.modifica-file') – Salvatore Dibenedetto Aug 14 '13 at 13:28
Is there a way to "live" overlay event and not reinit each ajax call? – Salvatore Dibenedetto Aug 14 '13 at 13:31
Ah sorry, misread it, try to set the property load: false in the definition (maybe outside the ajax call?) – Irvin Dominin Aug 14 '13 at 13:32

score 0 · Answer 2 · answered Aug 14 '13 at 17:41

I found solution here: http://flash.flowplayer.org/forum/tools/40/21252

There are many solutions on this link, i am using the following:

$(".modifica-file[rel]").live('click', function () {
 $(this).overlay().load();
 $(this).overlay().load();
 return false;
});

I think this is quite dirty solution...$.live() method is not supported anymore on latest jQuery versions...but i am using 1.7.2 and it is working fine!

I added this snippet to end of SUCCESS AJAX callback.

Reinitialize jQuerytools Overlay on ajax loaded element

2 Answers2

Linked