2013-06-04 2 views
0

J'essayais de créer dynamiquement la zone de texte dans Liferay comme indiqué here.Alloy.UI ne fonctionnait pas avec JQuery.html

Je peux le faire avec <input> tag mais pas avec <aui:input>, pourquoi?

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %> 
<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %> 
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %> 

<html> 

<portlet:defineObjects /> 

<script type="text/javascript"> 

$(document).ready(function(){ 

    var counter = 2; 

    $("#addButton").click(function() { 

     if(counter>10){ 
      alert("Only 10 textboxes allow"); 
      return false; 
     } 

     var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter); 

     alert(); 

     newTextBoxDiv.html('<aui:input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" />'); 

     alert(newTextBoxDiv.html); 

     newTextBoxDiv.appendTo("#TextBoxesGroup"); 

     counter++; 
    }); 

    $("#removeButton").click(function() { 
     if(counter==1){ 
      alert("No more textbox to remove"); 
      return false; 
     } 

     counter--; 

     $("#TextBoxDiv" + counter).remove(); 
    }); 

    $("#getButtonValue").click(function() { 

     var msg = ''; 

     for(i=1; i<counter; i++) { 
      msg += "\n Textbox #" + i + " : " + $('#<portlet:namespace/>textbox' + i).val(); 
     } 

     alert(msg); 
    }); 
    }); 
</script> 

<div id='TextBoxesGroup'> 
    <div id="TextBoxDiv1"> 
     <aui:input type="text" label="TextBox #1" id="textbox1" name="textbox1"></aui:input> 
    </div> 
</div> 

<input type='button' value='Add Button' id='addButton'> 
<input type='button' value='Remove Button' id='removeButton'> 
<input type='button' value='Get TextBox Value' id='getButtonValue'> 

</body> 
</html> 
+0

pas lié à votre question, mais utile: vous ne devriez jamais inclure '', '' , '', '' ... balises dans jsp de portlet puisque les portlets ne génèrent que des fragments HTML et non toute la page html. – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> </div> <div class="answer-title"> <span class="text-logo margin-top-sm">A</span> <h2 class="title h4">Répondre</h2> </div> <div class="item-description text-md markdown-body margin-bottom-40 voidso"> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">3<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p><code class="prettyprint-override"><aui:input></code> est le code jsp, pas HTML. Vous ne pouvez pas utiliser</p> <pre><code class="prettyprint-override">newTextBoxDiv.html('<aui:input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" />'); </code></pre> <p>parce que votre navigateur ne saura pas quoi en faire. Gardez à l'esprit que jQuery est purement javascript, tandis que AUI combine javascript, composants (par exemple classes DOM, CSS) et Java JSP. Le <code class="prettyprint-override"><aui:input></code> et les tags associés sont traités lorsque la page est rendue (côté serveur) et produisent leur sortie. Vous devez soit utiliser cette sortie dans votre code HTML rendu dynamiquement, soit enregistrer le contenu dans une variable temporaire, par ex. grâce à l'utilisation de l'étiquette <a href="https://www.liferay.com/web/raymond.auge/blog/-/blogs/jsp-include-buffer" rel="nofollow"><code class="prettyprint-override"><liferay-util:buffer></code></a>. Attention: Pour utiliser ce résultat de javascript, vous devrez échapper le résultat correctement</p> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/16913745">Source</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2013-06-04 09:04:30</span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div> <!-- comments --> <div class="comments"> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">D'accord, j'essaierais autrement – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/2304995/">user2304995</a></span> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="4319274062" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="clearfix"> </div> <div class="relative-box"> <div class="relative">Questions connexes</div> <ul class="relative_list"> <li> 1. <a href="http://fr.voidcc.com/question/p-zxnnzexe-gk.html" target="_blank" title="clause where ne fonctionnait pas avec AVEC"> clause where ne fonctionnait pas avec AVEC </a> </li> <li> 2. <a href="http://fr.voidcc.com/question/p-yasucwwp-kv.html" target="_blank" title="CharBuffer.put() ne fonctionnait pas"> CharBuffer.put() ne fonctionnait pas </a> </li> <li> 3. <a href="http://fr.voidcc.com/question/p-yrfcpsme-ed.html" target="_blank" title="PLCrashReporter ne fonctionnait pas"> PLCrashReporter ne fonctionnait pas </a> </li> <li> 4. <a href="http://fr.voidcc.com/question/p-pbuvtuba-cq.html" target="_blank" title="FireBug ne fonctionnait pas"> FireBug ne fonctionnait pas </a> </li> <li> 5. <a href="http://fr.voidcc.com/question/p-xicuzqic-vx.html" target="_blank" title="Meteor.wrapAsync ne fonctionnait pas"> Meteor.wrapAsync ne fonctionnait pas </a> </li> <li> 6. <a href="http://fr.voidcc.com/question/p-tozfosdt-km.html" target="_blank" title="cURL ne fonctionnait pas"> cURL ne fonctionnait pas </a> </li> <li> 7. <a href="http://fr.voidcc.com/question/p-vbftmxsl-de.html" target="_blank" title="Pyinstaller ne fonctionnait pas"> Pyinstaller ne fonctionnait pas </a> </li> <li> 8. <a href="http://fr.voidcc.com/question/p-ypkemcrh-ku.html" target="_blank" title="Websync ne fonctionnait pas"> Websync ne fonctionnait pas </a> </li> <li> 9. <a href="http://fr.voidcc.com/question/p-nktgdale-du.html" target="_blank" title="document.getelementbyid ne fonctionnait pas"> document.getelementbyid ne fonctionnait pas </a> </li> <li> 10. <a href="http://fr.voidcc.com/question/p-kefsapoh-cx.html" target="_blank" title="UINavigationController ne fonctionnait pas"> UINavigationController ne fonctionnait pas </a> </li> <li> 11. <a href="http://fr.voidcc.com/question/p-zxrgullk-cv.html" target="_blank" title="mysql_rollback() ne fonctionnait pas"> mysql_rollback() ne fonctionnait pas </a> </li> <li> 12. <a href="http://fr.voidcc.com/question/p-ezugsrjz-by.html" target="_blank" title="Lightbox ne fonctionnait pas"> Lightbox ne fonctionnait pas </a> </li> <li> 13. <a href="http://fr.voidcc.com/question/p-sxqqjwli-hv.html" target="_blank" title="htaccess ne fonctionnait pas"> htaccess ne fonctionnait pas </a> </li> <li> 14. <a href="http://fr.voidcc.com/question/p-hknwvixc-gx.html" target="_blank" title="Ajax ne fonctionnait pas avec Href (solution)"> Ajax ne fonctionnait pas avec Href (solution) </a> </li> <li> 15. <a href="http://fr.voidcc.com/question/p-xnymkxgf-kv.html" target="_blank" title="this.form.submit() ne fonctionnait pas correctement avec php"> this.form.submit() ne fonctionnait pas correctement avec php </a> </li> <li> 16. <a href="http://fr.voidcc.com/question/p-xkmvfipb-vr.html" target="_blank" title="L'écouteur de MouseClicked ne fonctionnait pas avec"> L'écouteur de MouseClicked ne fonctionnait pas avec </a> </li> <li> 17. <a href="http://fr.voidcc.com/question/p-ynkgiese-cq.html" target="_blank" title="javascript ne fonctionnait pas avec HTML5"> javascript ne fonctionnait pas avec HTML5 </a> </li> <li> 18. <a href="http://fr.voidcc.com/question/p-uvprfrlf-q.html" target="_blank" title="Jeditable ne fonctionnait pas avec Jquery triable"> Jeditable ne fonctionnait pas avec Jquery triable </a> </li> <li> 19. <a href="http://fr.voidcc.com/question/p-hlgbkash-hn.html" target="_blank" title="`$ socketstream start` ne fonctionnait pas"> `$ socketstream start` ne fonctionnait pas </a> </li> <li> 20. <a href="http://fr.voidcc.com/question/p-fwdvxuki-gw.html" target="_blank" title="Key Event ne fonctionnait pas"> Key Event ne fonctionnait pas </a> </li> <li> 21. <a href="http://fr.voidcc.com/question/p-vjpxdzxg-kq.html" target="_blank" title="Topshelf WhenContinued ne fonctionnait pas"> Topshelf WhenContinued ne fonctionnait pas </a> </li> <li> 22. <a href="http://fr.voidcc.com/question/p-eifixdqw-bb.html" target="_blank" title="Kohana auto_login ne fonctionnait pas"> Kohana auto_login ne fonctionnait pas </a> </li> <li> 23. <a href="http://fr.voidcc.com/question/p-rajsastx-eh.html" target="_blank" title="jquery parsejson ne fonctionnait pas"> jquery parsejson ne fonctionnait pas </a> </li> <li> 24. <a href="http://fr.voidcc.com/question/p-qnhwimzm-bt.html" target="_blank" title="Flex Link ne fonctionnait pas"> Flex Link ne fonctionnait pas </a> </li> <li> 25. <a href="http://fr.voidcc.com/question/p-zseuyjco-hn.html" target="_blank" title="modèle knockoutjs ne fonctionnait pas"> modèle knockoutjs ne fonctionnait pas </a> </li> <li> 26. <a href="http://fr.voidcc.com/question/p-kmrklpth-gg.html" target="_blank" title="L'annotation @XmlInverseReference ne fonctionnait pas"> L'annotation @XmlInverseReference ne fonctionnait pas </a> </li> <li> 27. <a href="http://fr.voidcc.com/question/p-xxdqhzkb-hb.html" target="_blank" title="simple_html_dom.php parser ne fonctionnait pas"> simple_html_dom.php parser ne fonctionnait pas </a> </li> <li> 28. <a href="http://fr.voidcc.com/question/p-tybksjox-gu.html" target="_blank" title="L'événement OnListItemClick ne fonctionnait pas"> L'événement OnListItemClick ne fonctionnait pas </a> </li> <li> 29. <a href="http://fr.voidcc.com/question/p-vdyyvcnm-gt.html" target="_blank" title="L'échafaudage MVCMailer ne fonctionnait pas"> L'échafaudage MVCMailer ne fonctionnait pas </a> </li> <li> 30. <a href="http://fr.voidcc.com/question/p-eepikcpx-kw.html" target="_blank" title="Android Sleep() ne fonctionnait pas"> Android Sleep() ne fonctionnait pas </a> </li> </ul> </div> <div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3534119089"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img2.voidcc.com/voidso/script/side.js?t=1652515422260"></script> <script type="text/javascript" src="http://img2.voidcc.com/voidso/plugin/highlight/highlight.pack.js"></script> <link href="http://img2.voidcc.com/voidso/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- VOIDCC问答侧边栏广告 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3862022848" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> Dernière question </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://fr.voidcc.com/question/p-qlpxzynh-bkw.html" target="_blank" title="Messenger bot undefined messaged"> Messenger bot undefined messaged </a> </li> <li class="side_article_list_item"> 2. <a href="http://fr.voidcc.com/question/p-atrhcvou-bkw.html" target="_blank" title="Pourquoi les modèles 3D ont des positions de vertex dupliquées avec différentes coeurs uv"> Pourquoi les modèles 3D ont des positions de vertex dupliquées avec différentes coeurs uv </a> </li> <li class="side_article_list_item"> 3. <a href="http://fr.voidcc.com/question/p-tangfjcq-bkv.html" target="_blank" title="php DOMDocument obtenir des informations de noeud"> php DOMDocument obtenir des informations de noeud </a> </li> <li class="side_article_list_item"> 4. <a href="http://fr.voidcc.com/question/p-fjmuewpi-bkv.html" target="_blank" title="Comment empêcher Visual Studio de déclencher des événements sur le concepteur?"> Comment empêcher Visual Studio de déclencher des événements sur le concepteur? </a> </li> <li class="side_article_list_item"> 5. <a href="http://fr.voidcc.com/question/p-eoecpxyi-bkv.html" target="_blank" title="Fonction max dans la compréhension"> Fonction max dans la compréhension </a> </li> <li class="side_article_list_item"> 6. <a href="http://fr.voidcc.com/question/p-zbidydhm-bkv.html" target="_blank" title="Retrait chaîne de l'élément dans le cadre de données"> Retrait chaîne de l'élément dans le cadre de données </a> </li> <li class="side_article_list_item"> 7. <a href="http://fr.voidcc.com/question/p-tjlbznxi-bkv.html" target="_blank" title="QT Creator Désactiver l'affichage du chemin du fichier dans le navigateur de fichiers"> QT Creator Désactiver l'affichage du chemin du fichier dans le navigateur de fichiers </a> </li> <li class="side_article_list_item"> 8. <a href="http://fr.voidcc.com/question/p-nlknexrc-bkv.html" target="_blank" title="Comment masquer 'Ajouter au panier' pour les produits variables, mais garder les variations de produits visibles"> Comment masquer 'Ajouter au panier' pour les produits variables, mais garder les variations de produits visibles </a> </li> <li class="side_article_list_item"> 9. <a href="http://fr.voidcc.com/question/p-nkdrlvcz-bkv.html" target="_blank" title="comment régler le minuteur pour le processus physique dans Castalia?"> comment régler le minuteur pour le processus physique dans Castalia? </a> </li> <li class="side_article_list_item"> 10. <a href="http://fr.voidcc.com/question/p-urlvgeda-bkv.html" target="_blank" title="La fermeture de la fenêtre PowerShell ferme également mon programme."> La fermeture de la fenêtre PowerShell ferme également mon programme. </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> Questions connexes</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://fr.voidcc.com/question/p-zxnnzexe-gk.html" target="_blank" title="clause where ne fonctionnait pas avec AVEC"> clause where ne fonctionnait pas avec AVEC </a> </li> <li class="side_article_list_item"> 2. <a href="http://fr.voidcc.com/question/p-yasucwwp-kv.html" target="_blank" title="CharBuffer.put() ne fonctionnait pas"> CharBuffer.put() ne fonctionnait pas </a> </li> <li class="side_article_list_item"> 3. <a href="http://fr.voidcc.com/question/p-yrfcpsme-ed.html" target="_blank" title="PLCrashReporter ne fonctionnait pas"> PLCrashReporter ne fonctionnait pas </a> </li> <li class="side_article_list_item"> 4. <a href="http://fr.voidcc.com/question/p-pbuvtuba-cq.html" target="_blank" title="FireBug ne fonctionnait pas"> FireBug ne fonctionnait pas </a> </li> <li class="side_article_list_item"> 5. <a href="http://fr.voidcc.com/question/p-xicuzqic-vx.html" target="_blank" title="Meteor.wrapAsync ne fonctionnait pas"> Meteor.wrapAsync ne fonctionnait pas </a> </li> <li class="side_article_list_item"> 6. <a href="http://fr.voidcc.com/question/p-tozfosdt-km.html" target="_blank" title="cURL ne fonctionnait pas"> cURL ne fonctionnait pas </a> </li> <li class="side_article_list_item"> 7. <a href="http://fr.voidcc.com/question/p-vbftmxsl-de.html" target="_blank" title="Pyinstaller ne fonctionnait pas"> Pyinstaller ne fonctionnait pas </a> </li> <li class="side_article_list_item"> 8. <a href="http://fr.voidcc.com/question/p-ypkemcrh-ku.html" target="_blank" title="Websync ne fonctionnait pas"> Websync ne fonctionnait pas </a> </li> <li class="side_article_list_item"> 9. <a href="http://fr.voidcc.com/question/p-nktgdale-du.html" target="_blank" title="document.getelementbyid ne fonctionnait pas"> document.getelementbyid ne fonctionnait pas </a> </li> <li class="side_article_list_item"> 10. <a href="http://fr.voidcc.com/question/p-kefsapoh-cx.html" target="_blank" title="UINavigationController ne fonctionnait pas"> UINavigationController ne fonctionnait pas </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div><!-- wrap end--> <!-- footer --> <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://fr.voidcc.com/contact">Nous contacter</a></li> <li>© 2020 FR.VOIDCC.COM</li> <li><a rel="nofollow" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备13005482号-13</a></li> <li><script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1280098168&web_id=1280098168"></script></li> <li><a href="http://cn.voidcc.com/" target="_blank" title="程序问答园区">简体中文</a></li> <li><a href="http://hk.voidcc.com/" target="_blank" title="程序問答園區">繁體中文</a></li> <li><a href="http://ru.voidcc.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.voidcc.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.voidcc.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.voidcc.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.voidcc.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.voidcc.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.voidcc.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.voidcc.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.voidcc.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.voidcc.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.voidcc.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer> <!-- / footer --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-77509369-5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-77509369-5'); </script> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?67d4731349f0b00136755b80364ce381"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>