Javascript sur la page ne s'exécute pas avant que l'événement AJAX onComplete soit appelé

Question

J'ai un formulaire qui fait une requête Ajax POST pour insérer un widget dans ma base de données. Dans le formulaire, j'ai une boîte de sélection où vous pouvez choisir parmi les widgets. Après l'insertion db est faite, je dois mettre à jour la boîte de sélection. En fait, je remplace juste le formulaire entier pour l'instant. Puisque la boîte de sélection a les widgets, je dois avoir une copie des objets dans javascript. J'appelle ça var widget_objects. Lorsque le formulaire est remplacé lors de l'événement de mise à jour, j'imprime la variable ruby ​​<% = @widget_objects%> et je peux voir l'objet nouvellement créé. Cependant, lorsque j'essaie d'accéder à la variable javascript var "widget_objects" dans l'événement onComplete, le nouvel objet n'existe pas. Je crée le widget_objects javascript avec cette ligne de code sur la page: widget_objects = <% = @widget_objects%>;

Il semble donc que la ligne de code ci-dessus n'est pas exécutée avant l'événement onComplete de la requête Ajax. Cependant, je pensais que l'événement onComplete se produisait après que la page ait été chargée, et je suppose que les scripts sont évalués ... des idées?

<%= submit_to_remote( 
        "save_widget", 
        "Save Widget & Generate Embed Code", 
        { 
         :url => widgets_url(:user_id => @user.id), 
         :update => "widget_form", 
         :method => :POST, 
         :html => { :id => "save_widget_button", 
            :onclick => "this.value='Saving...'; this.disabled = 'true';", 
            :style => "width: 220px;" 
           }, 
         :complete =>" 
          $('save_widget_button').disabled=''; 
          $('save_widget_button').value='Save Widget & Generate Embed Code'; 
          var last_id = $j('select#widget_id').children(':last').attr('value'); 
          alert(widget_objects[last_id]); 
          ", 
         :success => "reportMessage('success', request.headerJSON.success, 'save_widget_status'); $('band_form').reset();", 
         :failure => "reportMessage('failure', request.headerJSON.errors, 'save_widget_status');" 
        }) %> 

Answer 1

Pour résoudre ce genre de problèmes, utilisez le débogueur JS de Firefox (installez le module complémentaire Firebug), activez l'exception de suppression automatique (dans l'onglet Scripts) et rechargez la page. Si Firefox intercepte une exception (provenant par exemple de la réponse rjs), corrigez l'exception. Vous pouvez aussi simplement entourer vos rjs et: compléter le code avec un wrapper JS 'try {...} catch (e) {alert (e)}. Ensuite, utilisez le débogueur JS pour définir les points d'arrêt dans la méthode respondToReadyState de prototype.js, où vous pourrez inspecter la réponse rjs de votre application et passer par la méthode evalResponse(). Vous allez l'affiner assez rapidement.

Answer 2

La définition de EvalScripts sur true doit fonctionner.

que vous pouvez essayer de charger le script en utilisant

> <script> function window.onload(){ 
> alert('I am loaded as the page 
> completes loading') } </script> 

si cela ne fonctionne pas, alors vous pouvez appeler la fonction: le chargement dans les appels ajax alors que la réponse est reçue, la fonction sera appelée.

Answer 3

J'avais quelque chose de similaire à ce qui se passait dans mes scripts PHP, où le timing des scripts semblait désynchronisé. Il était plus sur le code qui est apparu après l'appel ajax exécuterait avant le code en cas onSuccess, et la solution était d'envelopper l'ensemble du code de réponse de l'événement à l'intérieur d'une fonction anonyme, comme ceci:

onSuccess: function(reply) 
{ 
    resp = reply.reponseText(); 
    pieces = resp.split('|'); 
    (...etc...) 
} 

Vous pourrait essayez quelque chose de similaire après votre: identifiant complet. J'espère que cela t'aides!