JQuery Form: ajaxForm + JQuery UI: Sortable

JQuery Form: ajaxForm + JQuery UI: Sortable - HTML/CSS - Programmation

Marsh Posté le 03-08-2009 à 13:56:10    

Salut tout le mode
 
Je suis nouveau dans le monde de l'ajax. Pour l'instant j'utilise seulement les bases.
 
Avec le plugin Form de Jquery j'ai créé un ajaxForm qui m'affiche la page resultat dans la div cible
/***************************************************************************/
//CODE of assembler.jsp
<html>
<head>
</head>
<body>
<script type="text/javascript" src="/scripts/jquery.js"></script> //v1.3.2
<script type="text/javascript" src="/scripts/jquery_form.js"></script>//v2.07
<script type="text/javascript">
  $(document).ready( function() {
    $('#listFileForm').ajaxForm({
         type: 'POST',
         target: '#listFileResult',
         resetForm:true
    });
  });
</script>
 
<form:form id="listFileForm" action="assembler.do" enctype="multipart/form-data">
      <input type="file" name="theForm.file" width="25px" />      
      <input type="submit" class="button" name="assemblerAjaxSubmit" value='Add' />
</form:form>
 
<div id="listFileResult"></div>
</body>
</html>
/***************************************************************************/
 
La réponse qui va etre affiché dans la div est un fichier jsp qui crée une liste (ul li). J'ai besoin que cette liste soit Sortable (Jquery UI) mais je n'arrive pas a le faire dans cette page retournée par ajax (comprendre que j'arrive a le faire marcher dans une page simple).
 
J'ai essayé le code suivant mais ce qui se trouve dans le $(document).ready() n'a pas l'air d'etre appelé. J'ai supposé qu'il n'y avait pas de ready event au retour de la page
 
/***************************************************************************/
//CODE of ajaxReturn.jsp
<script type="text/javascript" src="/scripts/jquery-ui-1.7.2.custom.js"></script>
 
<script type="text/javascript">
// When the document is ready set up our sortable with it's inherant function(s)
    $(document).ready(function() {
      $("#test-list" ).sortable({
        update : function () {
        var order = $('#test-list').sortable('serialize');
        alert(order);
        }
      });
    });
</script>
 
<ul id="test-list">
//list items created by my jsp
</ul>
/***************************************************************************/
 
Savez vous ou j'ai faux? (partout ??? j'espere pas).
Merci d'avance pour l'aide.


---------------
Toinou87 ;-p May the force be with you!!
Reply

Marsh Posté le 03-08-2009 à 13:56:10   

Reply

Marsh Posté le 03-08-2009 à 14:15:49    

pour le code ca pas les ch'tites étoiles, c'est la balise [code], bouton http://forum-images.hardware.fr/icones/message/c.gif.
 
sinon, t'as essayé de mettre un bête alert('toto') dans ton ready pour vérifier s'il est appelée ou pas?

Reply

Marsh Posté le 03-08-2009 à 14:31:30    

pour la balise code, dsl j'ai copié collé mon post du google group de jquery et apres avoir traduit j'ai pas pensé a rajouté ca
 
pour le ready, justement il est pas appelé dans ajaxReturn.jsp
 
j'ai continué a cherché un peu et il semblerait qu'effectivement, ajax ne revoit pas d'evenement ready quand la 2e page est integrée dans le div de la premiere. En cherchant un peu plus encore, j'ai decouvert un plugin (livequery) qui a l'air de faire ce que je demande. j'ai changé mon code en ceci
 

Code :
  1. $("#test-list" ).livequery(function() {
  2.     $(this).sortable({
  3.       update : function () {
  4.       var order = $('#test-list').sortable('serialize');
  5.       alert(order);
  6.       }
  7.     });
  8.   });


 
Ca a l'air de marché sur un html test que j'ai fait, je vais l'inculre a mon projet pour verifier.
 
 
Y a t il une meilleure solution???


---------------
Toinou87 ;-p May the force be with you!!
Reply

Marsh Posté le 03-08-2009 à 15:08:00    

ce code fonctionne tres bien sur des pages html simples

Code :
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <script type="text/javascript" src="jquery.js"></script>
  6. <script type="text/javascript" src="jquery_form.js"></script>
  7. <script type="text/javascript">
  8.   $(document).ready( function() {
  9.     $('#listFileForm').ajaxForm({
  10.          type: 'POST',
  11.          target: '#listFileResult',
  12.          resetForm:true
  13.     });
  14.   });
  15. </script>
  17. <form id="listFileForm" action="result.htm" enctype="multipart/form-data"> 
  18.       <input type="submit" class="button" name="assemblerAjaxSubmit" value='Add' />
  19. </form>
  21. <div id="listFileResult"></div>
  22. </body>
  23. </html>


Code :
  1. <script type="text/javascript" src="jquery_ui.js"></script>
  2. <script type="text/javascript" src="jquery_livequery.js"></script>
  3. <script type="text/javascript">
  4. // When the document is ready set up our sortable with it's inherant function(s)
  5.   $("#test-list" ).livequery(function() {
  6.     $(this).sortable({
  7.       update : function () {
  8.       var order = $('#test-list').sortable('serialize');
  9.       alert(order);
  10.       }
  11.     });
  12.   });
  13. </script>
  15. <ul id="test-list">
  16. <li id="listItem_1">1</li>
  17. <li id="listItem_2">2</li>
  18. <li id="listItem_3">3</li>
  19. </ul>


 
dés que je passe dans du jsp, le seul moyen que j'ai trouvé pour que cela fonctionne, c'est de mettre tout le js dans la premiere page (pas top) comment je peux corriger ca
 

Code :
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <script type="text/javascript" src="jquery.js"></script>
  6. <script type="text/javascript" src="jquery_form.js"></script>
  7. <script type="text/javascript" src="jquery_ui.js"></script>
  8. <script type="text/javascript" src="jquery_livequery.js"></script>
  9. <script type="text/javascript">
  10.   $(document).ready( function() {
  11.     $('#listFileForm').ajaxForm({
  12.          type: 'POST',
  13.          target: '#listFileResult',
  14.          resetForm:true
  15.     });
  16.     $("#test-list" ).livequery(function() {
  17.     $(this).sortable({
  18.       update : function () {
  19.       var order = $('#test-list').sortable('serialize');
  20.       alert(order);
  21.       }
  22.     });
  23.   });
  24.   });
  25. </script>
  27. <form id="listFileForm" action="result.htm" enctype="multipart/form-data"> 
  28.       <input type="submit" class="button" name="assemblerAjaxSubmit" value='Add' />
  29. </form>
  31. <div id="listFileResult"></div>
  32. </body>
  33. </html>


Code :
  1. <ul id="test-list">
  2. <li id="listItem_1">1</li>
  3. <li id="listItem_2">2</li>
  4. <li id="listItem_3">3</li>
  5. </ul>

Message cité 1 fois

---------------
Toinou87 ;-p May the force be with you!!
Reply

Marsh Posté le 03-08-2009 à 16:44:53    

Toinou87 a écrit :

dés que je passe dans du jsp, le seul moyen que j'ai trouvé pour que cela fonctionne, c'est de mettre tout le js dans la premiere page (pas top)


 
[:clubic] non au contraire...
 
 
ta réponse ne devrait même pas avoir de balises html et body , etc, vu que tu l'inclus dans un div... c'est juste une portion de html, selon moi tu ne devrais avoir que le <ul><li>... du coup, normal que ca ne déclenche pas de ready, tu n'as pas recharger la page, ni charger de nouvelle page...
 
je dirais que la def du sortable, elle devrait être dans le ajaxform qui peut contenir une fonction appelée lorsque le résultat est ok...

Message cité 1 fois
Reply

Marsh Posté le 04-08-2009 à 10:00:27    

pataluc a écrit :


 
[:clubic] non au contraire...
 
 
ta réponse ne devrait même pas avoir de balises html et body , etc, vu que tu l'inclus dans un div... c'est juste une portion de html, selon moi tu ne devrais avoir que le <ul><li>... du coup, normal que ca ne déclenche pas de ready, tu n'as pas recharger la page, ni charger de nouvelle page...


On est d'accord sur pas de html, pas de body... (encore que c'est pas interdit)
par contre ca veut pas dire qu'il peut pas y avoir de balise <script> qui peuvent se mettre n'importe ou

pataluc a écrit :


je dirais que la def du sortable, elle devrait être dans le ajaxform qui peut contenir une fonction appelée lorsque le résultat est ok...


J'ai deja fait cette modification (success: function(){...}) cependantje cherche une solution qui me permettrait de mettre le nouveau JS dans la nouvelle page.
 
J'ai trouvé une solution avec livequery qui marche dans mes pages html de test mais pas dans mon jsp. Cette solution aurait l'avantage qu'il n'y aurait pas de code inutile dans ma premiere page. Je m'explique: mon ajaxForm appelle un controleur, celui ci peut revoyé différentes view a insérer dans le div. Et le JS a executer pour les différents resultats n'est pas forcement le meme. D'ou le fait que je cherche a executer le JS a partir de la page resultat.
 
code de ce qui marche dans mes html mais pas dans mes JSP (est ce que ca peut etre du a mon tomcat ou bien la configuration de ma java-web app?)
/***PREMIERE PAGE***/

Code :
  1. <script type="text/javascript">
  2.   $(document).ready( function() {
  3.     $('#listFileForm').ajaxForm({
  4.          type: 'POST',
  5.          target: '#listFileResult',
  6.          resetForm:true,
  7.          success:onSuccess
  8.     });
  9.     function onSuccess(){
  10.       $(document).livequery(
  11.         function(){
  12.           init();/*en fonction du resultat cet init pourrait etre différent*/
  13.         });
  14.     }
  15.   });
  16. </script>


 
/***DEUXIEME PAGE (qui n'est pas une page mais seulement ce js et le ul li)***/

Code :
  1. <script type="text/javascript">
  2. function init() {
  3.         $('#test-list').sortable({
  4.             update: function () {
  5.                 var order = $('#test-list').sortable('serialize');
  6.                 alert(order);
  7.             }
  8.         });
  9.         }
  10. </script>


Message cité 1 fois

---------------
Toinou87 ;-p May the force be with you!!
Reply

Marsh Posté le 04-08-2009 à 10:04:34    

Toinou87 a écrit :


par contre ca veut pas dire qu'il peut pas y avoir de balise <script> qui peuvent se mettre n'importe ou


oui je sais, ce n'est pas ce que j'ai dit, je disais que pour moi, ca expliquait pourquoi l'event document ready n'était pas redéclenché.
 
 
 
sinon, tu as essayé de mettre ton code sans le mettre dans une function? du coup il devrait être exécuté dès qu'il est chargé... et si tu le mets après ton ul, il ne devrait pas y avoir de problème de chargement...

Reply

Marsh Posté le 04-08-2009 à 10:12:37    

encore une fois: ca fonctionne dans les pages html de test mais pas dans mon jsp. J'y comprends rien


---------------
Toinou87 ;-p May the force be with you!!
Reply

Marsh Posté le 04-08-2009 à 10:33:23    

j'ai dézippé viteuf un tomcat, et mis mon code de test tel quel dans un jsp, effectivement j'ai le même pb, le code qui marche en html ne fonctionne pas en jsp... je ne sais que te dire.  [:spamafote]

 

EDIT: autant pour moi, ca venait de mon ff configuré en useragent ie pour des raison de proxy...

 

ca marche bien chez moi, quand je met le code suivant dans un jsp:

 
Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="en">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
  5.         <title>your title</title>
  6.         <script type="text/javascript" src="jquery.js"></script>
  7.         <script type="text/javascript" src="jquery-ui.js"></script>
  9.     </head>
  10.     <body>
  11.         <ul id="test-list">
  12.             <li>Lorem ipsum dolor sit amet consectetuer hendrerit</li>
  13.             <li>Magna mollis dictumst ipsum ipsum congue scelerisque neque Vestiblium scelerisque.</li>
  14.             <li>interdum nibh. Pede Aenean Curabitur ante et sagittis sollicitudin.</li>
  15.             <li>lacinia eget et sapien quis justo semper orci.</li>
  16.         </ul>
  17.         <script type="text/javascript">
  18.                 $("#test-list" ).sortable();
  19.         </script>
  20.     </body>
  21. </html>
 


je vais essayé d'ajouter le formulaire en amont, pour me conformer à ton exemple.


Message édité par pataluc le 04-08-2009 à 10:43:35
Reply

Marsh Posté le 04-08-2009 à 10:43:29    

ben deja ca me rassure de pas etre le seul a avoir ce probleme.
mais c'est louche quand meme
edit je vais refaire un autre test et si ca plante je te file mon code pour voir si je suis seul


Message édité par Toinou87 le 04-08-2009 à 10:45:42

---------------
Toinou87 ;-p May the force be with you!!
Reply

Marsh Posté le 04-08-2009 à 10:43:29   

Reply

Marsh Posté le 04-08-2009 à 10:55:37    

bon j'ai fait un test simple dans mes jsp (bien que mon code d'avant ne soit pas tres compliqué)
apparement ca fonctionne donc je vais essayé de repartir de la et de voir a quel moment ca plante.
Merci pour l'aide en tout cas. Si je decouvre quel etait le probleme ou si j'en ai un autre lié je reposterai ici.


---------------
Toinou87 ;-p May the force be with you!!
Reply

Marsh Posté le 04-08-2009 à 11:00:34    

ca viendrait pas de ton form:form qui n'est pas bien interprété par tomcat? c'est pas plutot html:form? (en fonction de ta taglib ou de la manière dont tu l'as définie...)

 

en tout cas chez moi ca marche, avec la jsp index.jsp:

Code :
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <script type="text/javascript" src="jquery.js"></script>
  6. <script type="text/javascript" src="jquery.form.js"></script>
  7. <script type="text/javascript">
  8.   $(document).ready( function() {
  9.     $('#listFileForm').ajaxForm({
  10.          type: 'POST',
  11.          target: '#listFileResult',
  12.          resetForm:true
  13.          });
  14.   });
  15. </script>
  17. <form id="listFileForm" action="ajax.jsp" enctype="multipart/form-data">
  18.       <input type="file" name="theForm.file" width="25px" />
  19.       <input type="submit" class="button" name="assemblerAjaxSubmit" value='Add' />
  20. </form>
  22. <div id="listFileResult"></div>
  23. </body>
  24. </html>


qui appelle ajax.jsp:

 
Code :
  1. <ul id="test-list">
  2.             <li>Lorem ipsum dolor sit amet consectetuer hendrerit</li>
  3.             <li>Magna mollis dictumst ipsum ipsum congue scelerisque neque Vestiblium scelerisque.</li>
  4.             <li>interdum nibh. Pede Aenean Curabitur ante et sagittis sollicitudin.</li>
  5.             <li>lacinia eget et sapien quis justo semper orci.</li>
  6.         </ul>
  7.         <script type="text/javascript" src="jquery.ui.js"></script>
  8.         <script type="text/javascript">
  9.                 $("#test-list" ).sortable();
  10.         </script>
 



Message édité par pataluc le 04-08-2009 à 11:01:32
Reply

Marsh Posté le 04-08-2009 à 11:03:50    

mon form:form c'est pour Spring framework et il a pas l'air de poser de probleme.
Je reconstruis mes pages/controllers au fur et a mesure, j'espere trouver l'erreur

Message cité 1 fois

---------------
Toinou87 ;-p May the force be with you!!
Reply

Marsh Posté le 04-08-2009 à 11:07:15    

Toinou87 a écrit :

mon form:form c'est pour Spring framework et il a pas l'air de poser de probleme.
Je reconstruis mes pages/controllers au fur et a mesure, j'espere trouver l'erreur


ce que je voulais dire, c'est que dans le source généré par tomcat, tu retrouve bien la même chose que quand tu le mets en statique en html?

Reply

Marsh Posté le 04-08-2009 à 11:53:29    

j'ai a priori trouvé. Mais je comprends vraiment pas pourquoi.
 
Dans mon form: j'ai un input type file.
Plus tard ca doit etre la lists des noms de fichiers qui doit etre sortable mais a la reconstruction j'en suis pas encore la. Pour l'instant j'ai une liste fictive mais je viens de rajouter L#input type file.
 
J'ai fait 15 20 (plus en fait, j'ai reessayé avant de valider ce mesage)fois le test et apparement ca vient de la. Quand je submit sans avoir selectionner de fichier, la liste est sortable. Quand je submit en ayant selectionné un fichier, elle est pas sortable.
 
En gros ca correspondrait a la classe de ma requete: si c'est une MultipartHttpServletRequest ca plante, sinon ca marche. Mais alors le pourquoi du comment????


---------------
Toinou87 ;-p May the force be with you!!
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed