Modifier appel .load JQuery

Version imprimable

Bonjour,

J'ai 3 liens dans une page qui fait afficher une autre page html dans un div en utilisant le fonction jquery load. Cependant j'aimerais modifier le code pour que la fonction "load" soit appeler à partir d'une fonction maison "doSelect" (car j'ai du code à faire avant le load). C'est quoi que je fait pas de correcte , il m'affiche pas PAGE directement au lieu de le faire dans mon "DIV"? j'ai mis le code fonctionnel et non fonctionnel.

Merci pour votre aide ou autre proposition!

CODE FONCTIONNEL

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript"><!--


$(document).ready(function () { 
  $("a.load").click(function() {
  $("#pnlMilieu").load(this.href ); 
    return false;
  });
  $("a.load").each(function(i){
    $(this)
   .href(this.href.replace("mapage", "mapage_fragment"))
  });
});
// --></script>


<div id="pnlSection1" style="position:absolute; top:105px; width:299px;">  
    <ul id="pnlMenu" class="navbar">
      <li ><a tabindex="1"	id="mn-1"  name="Ident" href="Identification.html"	class="load">Identification</a></li>
      <li ><a tabindex="2"	id="mn-2"  name="Ali"     href="Alimentation.html"       class="load">Alimentation</a></li>
      <li ><a tabindex="3"	id="mn-3"  name="Hyg"   href="Hygiene.html"  		onclick="load">Hygiène</a></li> 
    </ul>
  </div>

CODE NON FONCTIONNEL

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function MyLoad(aa)
{
  $(document).ready(function () { 
  $("#pnlMilieu").load(aa.href ); 
    return false;
  });
    $(aa)
   .href(aa.href.replace("mapage", "mapage_fragment"))  
}

function doSelect(aa)
{   
  MyLoad(aa);
}

<div id="pnlSection1" style="position:absolute; top:105px; width:299px;">  
    <ul id="pnlMenu" class="navbar">
      <li ><a tabindex="1"	id="mn-1"  name="Ident" href="Identification.html"	onclick="doSelect(this)">Identification</a></li> 
      <li ><a tabindex="2"	id="mn-2"  name="Ali"     href="Alimentation.html"       onclick="doSelect(this)">Alimentation</a></li> 
      <li ><a tabindex="3"	id="mn-3"  name="Hyg"   href="Hygiene.html"  		onclick="doSelect(this)">Hygiène</a></li> 
    </ul>
  </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="pnlSection1" style="position:absolute; top:105px; width:299px;"> 
  <ul id="pnlMenu" class="navbar">
    <li>
      <a tabindex="1"	id="mn-1" name="Ident" href="Identification.html">Identification</a>
    </li> 
    <li>
      <a tabindex="2"	id="mn-2" name="Ali" href="Alimentation.html">Alimentation</a>
    </li> 
    <li>
      <a tabindex="3"	id="mn-3" name="Hyg" href="Hygiene.html">Hygiène</a>
    </li> 
  </ul>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function MyLoad( element ){
  // debug, console, touche F12
  console.log( element.href );
 
  // $( "#pnlMilieu" ).load( element.href );
}
 
function doSelect( event ){
  event.preventDefault();
  event.stopPropagation();
 
  MyLoad( event.target );
}
 
$( function(){ // forme abrégée de $(document).ready( function( ){
 
  $( "a[id^='mn-']" ).on( "click", doSelect );
 
});

21/08/2015, 15h18
BrunetteCP

Merci beaucoup danielhagnoul mais ca marche pas vraiment, c'est pas le fonctionnement que je veux.

Moi j'ai une page principal qui contient un menu et un "div" nommé "pnlMilieu". lorsque je clique sur mon menu (soit identification, Alimentation, Hygiène) je veux loader une page extérieur dans le div de ma page principal.

Soit:

- clique sur le menu "Identification" = load la page "identification.html" dans mon div nommé "pnlMilieu" de ma page et je la remplie
- clique sur le menu "Hygiène" = load la page ""Hygiène.html" dans mon div nommé "pnlMilieu" et je la remplie
- Si je reclique sur le menu "Identification" = reload la page "identication.html" mais pas vide avec les infos déjà rempli, si c'est possible pas envie de repasser par mon serveur pour récupéré les info

Merci!