Utiliser qTip2 avec Ruby on Rails

Question

J'ai trouvé cette infaillible tooltip appelée qTip2. Je l'aime jusqu'à présent mais je me suis mis dans un problème en l'utilisant.

J'ai été capable d'installer et de faire fonctionner qTip2 avec ma configuration Rails 3.1. Cependant, je rencontre un problème lorsque j'utilise la fonctionnalité ajax de qTip2. QTip2 La requête ajax nécessite un lien vers le script pour être exécuté avant de l'afficher dans le contenu de l'info-bulle div (généré automatiquement par qTip2). Vous pouvez regarder le code dont je parle ici.

http://www.craigsworks.com/projects/qtip2/demos/#ajax

Le problème avec c'est qu'il ne va pas très bien avec RoR. Une requête ajax déclarée en utilisant RoR est plus explicite, où je peux explicitement dire à quels rails div je voudrais mettre à jour.

Compte tenu des circonstances suivantes que je devais faire les choses suivantes:

1. le contenu de l'info-bulle doit être dynamique
2. je avais besoin d'utiliser la fonctionnalité ajax qTip2 pour que je puisse créer une mise en page personnalisée pour l'info-bulle contenu.

J'ai essayé les points suivants si:

1. Mettre le code HTML à charger à la div contenu dans le dossier public. Le contenu est chargé avec le bon format mais je ne peux pas avoir de contenu dynamique. Les fichiers html.erb ne semblaient pas fonctionner dans ce dossier. Y a-t-il une alternative à ce dossier qui fonctionnerait mais avec le contenu dynamique?

2. Essayé d'utiliser la requête qTip2 ajax avec RoR mais n'a pas réussi. Ce que j'ai fait, c'est que j'ai essayé de définir explicitement l'ID de mise à jour ajax dans le fichier .js response (en passant par le contrôleur et les vues, etc.). Mais trouver l'identifiant exact qui a été généré par le plugin qTip2 était un peu trop écrasante pour moi.

voici ce que j'ai

html

<a id="editor1" href="/deals_details.html.erb"> 

javascript

$(document).ready(function() 
{ 

    $('#editor1').each(function() 
    { 
     $(this).qtip(
     { 
     content: { 
      text: '<img class="throbber" src="/assets/throbber.gif" alt="Loading..." />', 
      ajax: { 
       /*once: false*/ 
       url: $(this).attr('href') 

      }, 
      title: { 
       text: 'qTip2 Test', 
       button: true 
      } 
     }, 
     position: { 
      at: 'center', 
      my: 'center', 
      viewport: $(window), 
     }, 
     show: { 
      event: 'click', 
      solo: true 
     }, 
     hide: 'unfocus', 
     style: { 
      classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow' 
     } 
     }) 
    }) 

    // Make sure it doesn't follow the link when we click it 
    .click(function(event) { event.preventDefault(); }); 
}); 

CSS

.ui-tooltip-wiki{ 
    max-width: 440px; 
} 

    .ui-tooltip-wiki .ui-tooltip-content{ 
     padding: 10px; 

     line-height: 12.5px; 
    } 

    .ui-tooltip-wiki h1{ 
     margin: 0 0 7px; 

     font-size: 1.5em; 
     line-height: 1em; 
    } 

    .ui-tooltip-wiki img{ padding: 0 10px 0 0; } 

    .ui-tooltip-wiki p{ margin-bottom: 9px; } 
    .ui-tooltip-wiki .note{ margin-bottom: 0; font-style: italic; color: #888; } 

S'il vous plaît aidez-moi !! :) Excuses si ce post a l'air stupide, c'est ma première question sur stackoverflow.

Answer 1

Je pense que vous le rendez trop compliqué. La fonctionnalité qTip ajax demande simplement une URL, et la valeur de retour est le contenu HTML d'une balise div. Si vous regardez la source de la démo que vous avez mentionnée, vous verrez une demande pour http://www.craigsworks.com/projects/qtip2/data/burrowingowl.php. Si vous regardez ce que cela produit, c'est simplement une balise div avec du contenu (le style est différent car il est transformé par le CSS de la page).

Donc la question devient: pouvez-vous fournir votre contenu dynamique dans un div en réponse à une URL dans Rails? Bien sûr! Peut-être que vous voulez configurer un SnippetController avec une action show et ensuite en utilisant des conventions Rails/routes assez standard votre URL peut être /snippet/show/[ID] et vous avez simplement la vue produire le contenu div requis.