web-dev-qa-db-fra.com

Exécutez document.ready après le post ajax

J'ai un fichier custom.js dans lequel j'ai plusieurs éléments qui ont un clic et d'autres méthodes qui leur sont liées. Le fichier entier est encapsulé dans document.ready () et tout fonctionne. Cependant, lorsque je fais une publication AJAX, évidemment, document.ready () n'est jamais renvoyé pour la page en cours. Existe-t-il de toute façon un moyen de demander à document.ready () de se déclencher à nouveau ou dois-je tout avoir dans les fonctions nommées les appeler sous mon create.js.erb?

jqueryajaxruby-on-rails-3postdocument-ready
26
Jason Yost

Vous pouvez toujours simplement mettre tout dans une fonction (nommée loadfunction ou quelque chose) et appeler cette fonction lors du chargement du document, puis à nouveau lorsque le fichier ajax est chargé. Bien que ce soit une solution regroupée, cela devrait fonctionner assez bien.

Alors, prenez tout ce qui est entre $(document).onready(function () { et son extrémité } Et mettez-le dans function OnloadFunction () { se terminant par }. Ensuite, mettez $document.onready(OnloadFunction);

Exemple: Vous avez

$(document).ready(function () {alert("test");});

Cela deviendrait:

function OnloadFunction ()
{
    alert("test");
}
$(document).ready(OnloadFunction);

Ensuite, vous pouvez appeler OnloadFunction quand vous le souhaitez.

33
Ben

Il y a un événement qui se déclenche après chaque appel ajax. Cela s'appelle ajaxComplete .

$( document ).ajaxComplete(function() {
    $( ".log" ).text( "Triggered ajaxComplete handler." );
});
17
fotanus

En combinant les réponses de Ben et fotanus, j'ai créé le motif suivant:

$(document).ready(function () {
    AjaxInit()
});

$(document).ajaxComplete(function () {
    AjaxInit()
});

function AjaxInit() {
    alert("test");
}

17
Ken Mc

J'ai utilisé avec succès un motif comme celui-ci:

Tout d'abord, nous devons définir un plugin .query ().

// jQuery.fn.query() emulates the behavior of .querySelectorAll() 
// by allowing a full/complex selector to be matched against
//a small slice of the dom. 
$.fn.query = function ( selector ) {
    var scopeElms = this,
        scopeIsDoc = scopeElms.length === 1  &&  scopeElms.is('html') ,
        // check for obviously simple selectors.... (needs more elegance)
        isComplexSelector = /\s/.test( selector.replace(/\s*([|~*$\^!]?=|,)\s*/g, '$1') ),
        elms;
    if ( scopeIsDoc  ||  isComplexSelector )
    {
      elms = $(selector);
      if ( scopeElms[0] )
      {
        elms = elms.filter(function(){
            var i = scopeElms.length;
            while (i--) {
              if ( scopeElms[i] === this || $.contains(scopeElms[i], this) )
              {
                return true;
              }
            }
            return false;
          });
      }
    }
    else
    {
      elms =  scopeElms.filter( selector )
                  .add( scopeElms.find(selector) );
    }
    return $(elms);
  };

Nous écrivons ensuite notre fonction init et la lions à l'événement "ready", ainsi qu'à notre événement "domupdated" personnalisé. Dans la fonction init, nous utilisons .query() pour rechercher des éléments dans l'ensemble du document ou uniquement dans le fragment mis à jour ...

// Here we define our DOM initializations
$(document).bind('ready domupdated', function (e, updatedFragment) {
    var root = $( updatedFragment || 'html' );

    // Begin imaginary initialization routines
    root.query('form').validate();
    root.query('.sidebar .searchform input#search').autocomplete();
    // etc...

  });

Ensuite, chaque fois que nous injectons des blocs de nouveaux éléments dans le DOM (comme lorsqu'une requête Ajax est terminée), nous déclenchons ensuite l'événement domupdated et transmettons le fragment DOM mis à jour en tant que paramètre - comme suit:

...
var ajaxedDom = $(xhr.resultText).find('#message');
ajaxedDom.appendTo( '#modal' );

$(document).trigger('domupdated', [ajaxedDom]);

Pour moi, cette configuration simplifie l’initiation du DOM. Cela me permet de maintenir un seul ensemble de routines d'initialisation et de me concentrer sur les choses amusantes.

2
Már Örlygsson

J'ai utilisé un truc. ;) Tout le code est dans la partie chargée du fichier (ajax) . Je n'utilise pas de fonction 'success', 'done' ou etc.

Nous devons d’abord construire n’importe quelle fonction . Par exemple: _autostart ();

function _autostart() {

  ... all code here ....

}

Sur le corps, nous allons coller tout le code js que nous devons exécuter à la fin du chargement ajax. 

Ensuite, nous n'exécutons cette fonction que par le temps. ;)

setTimeout("_autostart();",0000);

Et c'est tout. Terminé. :)

Bien sûr, nous pouvons utiliser la fonction de code js sur tout événement en code HTML après ajax. Par exemple: 'onchange', 'onclick', etc. :)

0
Brudka