Discussion :

[pcouas]

Bonjour

J'utilise la fonction load de jquery pour charger une page html dans un div grace a une servlert.
A l'interieur de cette page html chargé dynamiquement j'utilise jquery pour afficher un popin depuis des positions calculée dans ma servlet.
Mais malheuresement cela ne fonctionne pas.
Dans firebug je vois bien passer le code complet de la page chargé y compris le code jquery.
Est il possible dans un div de charge une page contenant du code jquery ?
La page chargée depuis la servlet contient son propre css.
J'ai essaye live mais sans succes


Merci d'avance
Philippe

[Gruik]

Hello,

J'ai jamais essayé, mais possible en effet que le code js de l'evenement ready() ne s'execute pas quand on utilise load() (ce qui est logique puisque la page conteneuse est deja completement chargée)
Peut être mettre le js à part et l'executer avec $.getScript()

[pcouas]

Bonjour

le script de la page charge permet d'afficher un autre div contenant un popup, mais quand je click sur les liens cela ne focnctionne pas.
j'ai essayé la fonction live dans la page de depart mais sans succés
Philippe

code de la servlet

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
package jquery01;
 
//~--- JDK imports ------------------------------------------------------------
 
import java.io.IOException;
import java.io.PrintWriter;
 
import javax.servlet.*;
import javax.servlet.http.*;
 
 
public class Countp extends HttpServlet
   {
    private static final String CONTENT_TYPE = "text/html; charset=utf-8";
    int                         count        = 0;
 
    public void init(ServletConfig config) throws ServletException {
        super.init(config);
    }
 
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType(CONTENT_TYPE);
 
              PrintWriter out = response.getWriter();
                 out.println("<script type=\"text/javascript\" src=\"http://code.jquery.com/jquery-latest.js\"></script>");
                out.println("<style type=\"text/css\">");
                out.println("<!--");
                out.println("#box");
                out.println("{");
                out.println("position: absolute;");
                out.println("top:25%;");
                out.println("left:25%;");
                out.println("width:50%;");
                out.println("text-align: center;");
                out.println("display: none; ");
                out.println("}");
                out.println("#form{");
                out.println("width: 450px;");
                out.println("height: 425px;");
                out.println("margin: 0 auto;");
                out.println("}");
                out.println("-->");
                out.println("</style>");
             /*   out.println("<script type=\"text/javascript\">  ");
                out.println("   $(document).ready(function(){   ");
                out.println("       $(\"a#in\").click(function(event){   ");
                out.println("          $(\"div#box\").fadeIn(\"slow\");   ");
                out.println("     });   ");
                out.println("       $(\"div#box\").click(function(event){   ");
                out.println("          $(\"div#box\").hide();   ");
                out.println("     });   ");
                out.println(" $(\"a#show\").click(function(event){   ");
                out.println("             $(\"div#box\").fadeIn(\"slow\");   ");
                out.println("    });   ");
                out.println(" $(\"a#slide\").click(function(event){   ");
                out.println("       $(\"div#box\").slideDown(\"slow\");   ");
                out.println("   });             ");
                out.println("    });   ");
                out.println("  </script>  ");
                */
                out.println("<a href=\"#\" id=\"in\">Fade Box</a> <!-- Button to Fade the div in -->");
                out.println("<a href=\"#\" id=\"show\">Show Box</a> <!-- Button to Simply show the box with no effect -->");
                out.println("<a href=\"#\" id=\"slide\">Slide Box</a> <!-- Button to slide the box in -->");
                out.println("<div id=\"box\"> <!-- This container centers the box in your browser windo -->");
                out.println("<div id=\"form\"></div> <!-- This is the actual box.-->");
                out.println("</div><!-- end #box-->");
                out.println("</div><!-- end #form-->");
                out.println("<!-- the rest is the basic page layout-->");
                out.println("<div id=\"page\">");
                out.println("<h2>This is the page</h2>");
                out.println("Semble ne fonctionner qu'avec Firefox et pas IE");
                out.println("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam porta quam eget");
                out.println("turpis placerat aliquam. Praesent eget metus. Aliquam fermentum, massa a pulvinar");
                out.println("  <p/>");
                out.println("</div>");
                       out.close();
    }
   }

la page html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<html>
<head>
<!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$.ajaxSetup({cache: false});
 
$(document).ready(function(){
$('#selectID :selected').val();
$("#selectID").change(function(){
$('#responsecontainer').load($('#selectID').val());
});
 
$("a#in").live("click",function(){   
            $("div#box").fadeIn("slow");   
        });   
 
$("div#box").live("click",function(){   
            $("div#box").hide();   
        });   
                $("a#show").live("click",function(){ 
                $("div#box").fadeIn("slow");   
        }); 
$("a#slide").live("click",function(){           
        $("div#box").slideDown("slow");   
});             
  
});  
  
</script>
</head>
<body>
Cette chaine est dans la page HTML et celle qui est en dessous provient d'un refresh de la servlet
<p>
<select id="selectID">
   <option selected="selected">... selection</option>
      <option value="/servlet/jquery01.Countp?p=3">Avec comme parametre p=3</option>
</select>
</p>
<div id="responsecontainer">
</div>
</body>