Se connecter / S'enregistrer
Votre question

Navigation ajax d'une div ?

Tags :
  • Script
  • Programmation
Dernière réponse : dans Programmation
3 Juin 2010 23:04:07

Bonjour,

Bonsoir !
Je suis en train d'essayer de mettre une navigation ajax sur mon site qui utilise un script.
Le script n'est pas énormément modifiable donc j'essaie de modifier surtout le code que j'ajoute.

Voila j'ai le code ci dessous. Il fonctionne tres bien. Le seul probleme est qu'il m'affiche toute la page (avec le header et le footer). Normal puisque les pages du script sont faites comme ça.

Seulement je voudrais qu'il ne m'affiche qu'une div du fichier. Par exemple je voudrais qu'il m'affiche la div qui porte le nom 'content'.Cela est t'il possible ?

Si oui, je suppose que c'est la ligne 5. Mais comment faire ?

  1. $(document).ready(function(){
  2.  
  3. $("#menu a").click(function(){
  4.  
  5. page=$(this).attr("href");
  6.  
  7. $.ajax({
  8.  
  9. url: page,
  10.  
  11. cache:false,
  12.  
  13. success:function(html){
  14.  
  15. afficher(html);
  16.  
  17. },
  18.  
  19. error:function(XHTMLHttpRequest,textStatus, errorThrown){
  20.  
  21. alert(textStatus);
  22.  
  23. }
  24.  
  25. })
  26.  
  27. return false;
  28.  
  29. });
  30.  
  31. });
  32.  
  33.  
  34.  
  35. function afficher(data){
  36.  
  37. $("#ajax").fadeOut(500,function(){
  38.  
  39. $("#ajax").empty();
  40.  
  41. $("#ajax").append(data);
  42.  
  43. $("#ajax").fadeIn(1000);
  44.  
  45. })
  46.  
  47. }



Merci d'avance aux personnes qui se pencheront sur mon probleme.

Autres pages sur : navigation ajax div

3 Juin 2010 23:09:46

Ben à voir le script, c'est pour appeler une page HTML, donc c'est un peu mort pour avoir qu'une div...

Mais bon, l'AJAX c'est une bibliothéque, donc c'est du c/c, faut juste trouver le bon code !

Bon courage
m
0
l
a c 232 L Programmation
4 Juin 2010 00:26:33

Salut,

C'est la ligne 41 ( $("#ajax" ).append(data); ) que tu vas devoir modifier.
Il faudrait que tu parses le contenu de la variable data afin de récupérer seulement l'élément que tu veux. Et après seulement, mettre le tout dans la div #ajax en mettant la ligne ci-dessus.

Tu peux regarder ce lien pour parser du XML en javascript:
http://www.hiteshagrawal.com/javascript/javascript-pars...
m
0
l
Contenus similaires
4 Juin 2010 07:18:36

OK merci pour vos réponses.

Mais la je vais passer pour stupide mais je ne comprends rien a tout ce qu'il est ecrit. Je n'ai pas précisé mais je suis débutant dans ces languages. Le xhtml, css, php ça va mais la je suis perdu.

Je ne sais meme pas ce que veux dire parser... coller ?

J'a bien compris ce qu'il fallait que je fasse. Mais je n'ai pas de fichier xml.

Il faut que je colle le contenu de ma variable data (qui est ma page entiere), que je trouve dessus la div qui m'interesse et que je le mette dans la div#ajax avant de l'afficher ?

Desolé...
m
0
l
a c 232 L Programmation
4 Juin 2010 09:08:18

Alors, oui, dans ta variable data, tu as ta page entière. Il va falloir que dans cette variable tu ne récupères que ce que tu veux.
Quand tu fais un alert(data); est-ce que tu as juste du contenu HTML de ta page, ou est-ce que tu as un nom d'objet ? Genre HTMLElement ?
m
0
l
5 Juin 2010 10:37:47

Merci pour vos réponses !

Finalement en changeant tout le code pour un plus petit ça fonctionne :

  1. $(document).ready(function(){
  2. $("#menu_vert a").click(function(){
  3. page=($(this).attr("href"));
  4. $("#content").load(page+" #content");
  5. return false;
  6. });
  7. });


Par contre maintenant j'ai d'autre problemes.

J'utilise des charts dans ma page. Il s'affiche lorsque je vais sur la page http://www.avoclix.com/index.php?view=account
Mais lorsque j'arrive sur cette page via la navigation, ils ne fonctionnent plus.

Je ne sais pas trop quoi vous montrer comme code alors je vais vous donner le .js des charts et le code qui affiche les charts.

Voici le FusionCharts.js

  1. if(typeof infosoftglobal == "undefined") var infosoftglobal = new Object();
  2. if(typeof infosoftglobal.FusionChartsUtil == "undefined") infosoftglobal.FusionChartsUtil = new Object();
  3. infosoftglobal.FusionCharts = function(swf, id, w, h, debugMode, registerWithJS, c, scaleMode, lang){
  4. if (!document.getElementById) { return; }
  5.  
  6. //Flag to see whether data has been set initially
  7. this.initialDataSet = false;
  8.  
  9. //Create container objects
  10. this.params = new Object();
  11. this.variables = new Object();
  12. this.attributes = new Array();
  13.  
  14. //Set attributes for the SWF
  15. if(swf) { this.setAttribute('swf', swf); }
  16. if(id) { this.setAttribute('id', id); }
  17. if(w) { this.setAttribute('width', w); }
  18. if(h) { this.setAttribute('height', h); }
  19.  
  20. //Set background color
  21. if(c) { this.addParam('bgcolor', c); }
  22.  
  23. //Set Quality
  24. this.addParam('quality', 'high');
  25.  
  26. //Add scripting access parameter
  27. this.addParam('allowScriptAccess', 'always');
  28.  
  29. //Pass width and height to be appended as chartWidth and chartHeight
  30. this.addVariable('chartWidth', w);
  31. this.addVariable('chartHeight', h);
  32.  
  33. //Whether in debug mode
  34. debugMode = debugMode ? debugMode : 0;
  35. this.addVariable('debugMode', debugMode);
  36. //Pass DOM ID to Chart
  37. this.addVariable('DOMId', id);
  38. //Whether to registed with JavaScript
  39. registerWithJS = registerWithJS ? registerWithJS : 0;
  40. this.addVariable('registerWithJS', registerWithJS);
  41.  
  42. //Scale Mode of chart
  43. scaleMode = scaleMode ? scaleMode : 'noScale';
  44. this.addVariable('scaleMode', scaleMode);
  45. //Application Message Language
  46. lang = lang ? lang : 'EN';
  47. this.addVariable('lang', lang);
  48. }
  49.  
  50. infosoftglobal.FusionCharts.prototype = {
  51. setAttribute: function(name, value){
  52. this.attributes = value;
  53. },
  54. getAttribute: function(name){
  55. return this.attributes ;
  56. },
  57. addParam: function(name, value){
  58. this.params = value;
  59. },
  60. getParams: function(){
  61. return this.params;
  62. },
  63. addVariable: function(name, value){
  64. this.variables = value;
  65. },
  66. getVariable: function(name){
  67. return this.variables ;
  68. },
  69. getVariables: function(){
  70. return this.variables;
  71. },
  72. getVariablePairs: function(){
  73. var variablePairs = new Array();
  74. var key;
  75. var variables = this.getVariables();
  76. for(key in variables){
  77. variablePairs.push(key +"="+ variables );
  78. }
  79. return variablePairs;
  80. },
  81. getSWFHTML: function() {
  82. var swfNode = "";
  83. if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) {
  84. // netscape plugin architecture
  85. swfNode = '<embed type="application/x-shockwave-flash" src="'+ this.getAttribute('swf') +'" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'" ';
  86. swfNode += ' id="'+ this.getAttribute('id') +'" name="'+ this.getAttribute('id') +'" ';
  87. var params = this.getParams();
  88. for(var key in params){ swfNode += +'="'+ params +'" '; }
  89. var pairs = this.getVariablePairs().join("&");
  90. if (pairs.length > 0){ swfNode += 'flashvars="'+ pairs +'"'; }
  91. swfNode += '/>';
  92. } else { // PC IE
  93. swfNode = '<object id="'+ this.getAttribute('id') +'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'">';
  94. swfNode += '<param name="movie" value="'+ this.getAttribute('swf') +'" />';
  95. var params = this.getParams();
  96. for(var key in params) {
  97. swfNode += '<param name="'+ key +'" value="'+ params +'" />';
  98. }
  99. var pairs = this.getVariablePairs().join("&");
  100. if(pairs.length > 0) {swfNode += '<param name="flashvars" value="'+ pairs +'" />';}
  101. swfNode += "</object>";
  102. }
  103. return swfNode;
  104. },
  105. setDataURL: function(strDataURL){
  106. //This method sets the data URL for the chart.
  107. //If being set initially
  108. if (this.initialDataSet==false){
  109. this.addVariable('dataURL',strDataURL);
  110. //Update flag
  111. this.initialDataSet = true;
  112. }else{
  113. //Else, we update the chart data using External Interface
  114. //Get reference to chart object
  115. var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id'));
  116. chartObj.setDataURL(strDataURL);
  117. }
  118. },
  119. setDataXML: function(strDataXML){
  120. //If being set initially
  121. if (this.initialDataSet==false){
  122. //This method sets the data XML for the chart INITIALLY.
  123. this.addVariable('dataXML',strDataXML);
  124. //Update flag
  125. this.initialDataSet = true;
  126. }else{
  127. //Else, we update the chart data using External Interface
  128. //Get reference to chart object
  129. var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id'));
  130. chartObj.setDataXML(strDataXML);
  131. }
  132. },
  133. render: function(elementId){
  134. var n = (typeof elementId == 'string') ? document.getElementById(elementId) : elementId;
  135. n.innerHTML = this.getSWFHTML();
  136. return true;
  137. }
  138. }
  139.  
  140. // ------------ Fix for Out of Memory Bug in IE in FP9 ---------------//
  141. /* Fix for video streaming bug */
  142. infosoftglobal.FusionChartsUtil.cleanupSWFs = function() {
  143. if (window.opera || !document.all) return;
  144. var objects = document.getElementsByTagName("OBJECT");
  145. for (var i=0; i < objects.length; i++) {
  146. objects.style.display = 'none';
  147. for (var x in objects[i]) {
  148. if (typeof objects[i][x] == 'function') {
  149. objects[i][x] = function(){};
  150. }
  151. }
  152. }
  153. }
  154. // Fixes bug in fp9
  155. infosoftglobal.FusionChartsUtil.prepUnload = function() {
  156. __flash_unloadHandler = function(){};
  157. __flash_savedUnloadHandler = function(){};
  158. if (typeof window.onunload == 'function') {
  159. var oldUnload = window.onunload;
  160. window.onunload = function() {
  161. infosoftglobal.FusionChartsUtil.cleanupSWFs();
  162. oldUnload();
  163. }
  164. } else {
  165. window.onunload = infosoftglobal.FusionChartsUtil.cleanupSWFs;
  166. }
  167. }
  168. if (typeof window.onbeforeunload == 'function') {
  169. var oldBeforeUnload = window.onbeforeunload;
  170. window.onbeforeunload = function() {
  171. infosoftglobal.FusionChartsUtil.prepUnload();
  172. oldBeforeUnload();
  173. }
  174. } else {
  175. window.onbeforeunload = infosoftglobal.FusionChartsUtil.prepUnload;
  176. }
  177.  
  178. /* Add Array.push if needed (ie5) */
  179. if (Array.prototype.push == null) { Array.prototype.push = function(item) { this[this.length] = item; return this.length; }}
  180.  
  181. /* Function to return Flash Object from ID */
  182. infosoftglobal.FusionChartsUtil.getChartObject = function(id)
  183. {
  184. if (window.document ) {
  185. return window.document ;
  186. }
  187. if (navigator.appName.indexOf("Microsoft Internet")==-1) {
  188. if (document.embeds && document.embeds )
  189. return document.embeds ;
  190. } else {
  191. return document.getElementById(id);
  192. }
  193. }
  194. /* Aliases for easy usage */
  195. var getChartFromId = infosoftglobal.FusionChartsUtil.getChartObject;
  196. var FusionCharts = infosoftglobal.FusionCharts;





Et voila l'appelle dans le summary.tpl



  1. <div id="chartdiv" align="center">
  2. FusionCharts. </div>
  3. <script type="text/javascript">
  4. var chart = new FusionCharts("js/Line.swf?ChartNoDataText=Please select a record above", "ChartId", "310", "144", "0", "0");
  5. chart.setDataXML("<chart bgSWF='charts/chart.png' canvasBorderColor='e0e0e0' lineColor='33373e' showShadow='1' shadowColor='bdbdbd' anchorBgColor='f1cc2b' caption='Your advertisement clicks' showLabels='0' numVDivLines='8' hoverCapBgColor='f7df39' decimalPrecision='2' formatNumberScale='0' showValues='0' divLineAlpha='20' alternateHGridAlpha='6'>{$myclicks}</chart>");
  6. chart.render("chartdiv");
  7. </script>
  8.  
  9. </div>



Je suis bien conscient que ça fait beaucoup de code et j'en suis desolé.
Mes Charts sont bien dans ma div ajax.

Je ne comprends pas trop pourquoi.
Quelqu'un a une idée ?
Ca vient peut etre du fait que la navigation ajax ne peut pas charger un .js

Merci d'avance aux courageux en tout cas !
m
0
l
a c 232 L Programmation
5 Juin 2010 10:46:36

Salut,

Difficile de dire sans avoir de compte de test, tu as un compte de test que je puisse tester cette page ?
m
0
l
5 Juin 2010 20:48:11

alors je viens d'en créer un :
username : test
mdp : azerty

Merci d'avance Omar

edit : Ah tiens j'ai trouvé a cette adresse : http://www.fusioncharts.com/free/demos/ qu'il y a moyen d'utiliser ces charts avec ajax.
Je ne sais pas si ça peut aider...
m
0
l
a c 232 L Programmation
6 Juin 2010 01:14:58

En fait, il semblerait que le code javascript qui lance le Chart ne soit pas récupéré lorsque tu fais ton chargement en AJAX.
La méthode load() de JQuery que tu utilises n'a pas l'air de récupérer ton appel JavaScript ?!
Vu que tu spécifies que tu ne veux que le contenu de l'élément avec l'ID "ajax", c'est peut être la raison
m
0
l
8 Juin 2010 08:01:53

normalement load charge tout ce qui est dans la div. Et j'ai pris soin de bien mettre le .js dans celle ci.
Je vais bien finir par trouver.
Merci Omar !
m
0
l
a c 232 L Programmation
8 Juin 2010 09:44:53

Parce quand on regarde la source de la page générée, il n'y a pas le script dedans.
Maintenant, je ne connais pas assez JQuery pour t'aider plus...
m
0
l
14 Juin 2010 23:27:45

il semblerais que le probleme vienne du fait que le <script> n'est pas pris en compte dans le fichier.

Mais alors comment faire ?
m
0
l
Anonyme
8 Octobre 2010 21:07:56

Salut,

tu peux essayer de voir le plugin jquery suivant :

jxSlider

Je me suis débrouillé pour n'avoir qu'a choisir la div que tu veux transformer en navigateur et la classe des liens a faire fonctionner dans le navigateur.

Bonne utilisation
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS