2016-04-28 8 views
1

Je travaille sur un magasin Magento en essayant de coder la couche javascript d'un widget à l'aide du framework Prototype js.Inline javascript se fait dépouiller de la réponse AJAX par Prototype JS Ajax. Méthode de demande

Dans mon fichier grid.js appel AJAX est configuration comme ça:

loadTabContent: function(tab, tabType){ 

     if(tab === undefined || tabType === undefined){ 
      return this; 
     } 

     entityId = tab.id.split('-')[3]; 

     request = new Ajax.Request(
      this.tabContentLoadUrl, 
      { 
       method:'get', 
       onSuccess: this.onTabContentLoad.bind(tab), 
       onFailure: this.ajaxFailure.bind(this), 
       evalJS: true, 
       parameters: { 
        id: entityId, 
        type: tabType 
       } 
      } 
     ); 
    } 

est sous le gestionnaire de succès:

onTabContentLoad: function(transport){ 

     if(transport && typeof transport.responseText !== undefined){ 
      try{ 
       response = transport.responseText; 
      }catch (e) { 
       console.log('PARSE ERROR', e); 
       response = {}; 
      } 

      entityId = this.id.split('-')[3]; 
      tabType = this.id.split('-')[1]; 

      if(response && $('tab-' + tabType + '-' + entityId + '-contents')){ 
       $('tab-' + tabType + '-' + entityId + '-contents').update(response);  
      } 
     } 
    }, 

Le contenu de la div est correctement mis à jour par obtenir l'appel AJAX mais il y a quelques JS en ligne en réponse qui ne fonctionne pas. Je ne peux pas voir même que le javascript extrait dans l'onglet Eléments (outil de développement de chrome)

Ci-dessous est le code qui gère la demande AJAX côté serveur:

public function renderTabContentAction() 
    { 
     $entityId = Mage::app()->getRequest()->getParam('id'); 
     if(! $entityId){ 

      $this->getResponse()->setHeader('HTTP/1.0', '400', true); 
      $this->getResponse()->setBody('Invalid parameters provided.'); 
     } 

     $tabType = Mage::app()->getRequest()->getParam('type'); 
     if(! $tabType){ 

      $this->getResponse()->setHeader('HTTP/1.0', '400', true); 
      $this->getResponse()->setBody('Invalid parameters provided.'); 
     } 

     Mage::register('current_entity_id', $entityId); 
     Mage::register('current_tab_type', $tabType); 

     $tabHtml = $this->_getTabsHtml($entityId, $tabType);  


     $this->getResponse()->setHeader('HTTP/1.0', '200', true); 
     $this->getResponse()->setBody($tabHtml); 
    } 

est inférieure à la réponse qui obtient passé à gestionnaire onTabContentLoad AJAX:

<div class="vertical-tabs"> 
     <div class="tabs"> 
     <div class="tab" id="tab-vertical-137-2441"> 
      <input type="radio" id="label-vertical-product-tab-137-2441" name="product-tab-group-137"> 
      <label class="tabs-label" for="label-vertical-product-tab-137-2441">PG-10ml</label> 
      <div class="content" id="tab-vertical-137-2441-contents"> 
      </div> 
     </div> 
     <div class="tab" id="tab-vertical-137-2442"> 
      <input type="radio" id="label-vertical-product-tab-137-2442" name="product-tab-group-137"> 
      <label class="tabs-label" for="label-vertical-product-tab-137-2442">PG-15ml</label> 
      <div class="content" id="tab-vertical-137-2442-contents"> 
      </div> 
     </div> 

     </div> 
    </div> 
    <script type="text/javascript"> 
    bulkOrderGrid.initVerticalTabs(); 
    bulkOrderGrid.activateTab('2441', 'VERTICAL'); 
    </script> 

Vous pouvez voir que les balises SCRIPT sont là dans la réponse. C'est juste quand le contenu est mis à jour en utilisant Element.update fonction il supprime les balises SCRIPT. C'est ce que je peux comprendre jusqu'à présent.

REMARQUE: J'ai également utilisé Ajax.Updater avec evalScripts: true et Ajax.Request avec evalJS: true.

Vous êtes bloqué ici. Toute aide serait très appréciée.

MISES À JOUR:

Depuis que je suis en utilisant la fonction Element.update pour rafraîchir la section. La source du problème est cette partie du code dans prototype.js ligne autour de pas. 2048. Je peux voir son exécution dans le débogueur js. Il évalue le code js mais supprime également les balises SCRIPT de la source. Commenter stripScripts fonctionne très bien.

else { 
    element.innerHTML = content.stripScripts(); 
    } 

    content.evalScripts.bind(content).defer(); 
+0

Vous avez corrigé ** Element.update ** remove tag de script. vous devriez utiliser ** Element.innerHTML ** –

Répondre

0

Je pense que votre problème est que la réponse Ajax est passé à travers String#evalScripts() mais le contexte n'est pas le contexte global donc au lieu de votre bloc de script faire ce

<script type="text/javascript"> 
window.bulkOrderGrid.initVerticalTabs(); 
window.bulkOrderGrid.activateTab('2441', 'VERTICAL'); 
</script> 

si cela ne marche pas fixer - que vous pouvez exécuter directement transport.responseText.evalScripts() mais vous avez toujours besoin du window. dans votre bloc de script pour résoudre la portée des variables.

+0

J'ai aussi essayé vos suggestions. Mais pas de succès. Je vais mettre à jour cette question avec quelques nouvelles découvertes. Merci d'avoir aidé! – div

0

Vous avez corrigé Element.update() remove tag de script. vous devriez utiliser Element.innerHTML