Forum Rover MG Communauté Francophone
Sections libres => Informatique & Internet => Discussion démarrée par: Rover820i le 15 Février 2013, 10:20:17
-
Yop (^^)
Pour une question existentielle, je cherche quelqu'un qui taquine mieux que moi le dev web, j'ai un souci avec l'utilisation d'Ajax sous jQuery et j'ai beau me tirer les cheveux dans tous les sens, je ne trouve pas de solution.
S'il y a quelqu'un dans l'assemblée, qu'il se manifeste pour que je lui montre mon code :mrgreen:
Merki (^^)
-
Présent ! :saletetedeconquiditaurevoir:
-
Moi perso je suis plus du genre a faire sa au MR PROPRE
:bouletfils: :bag:
-
Présent ! :saletetedeconquiditaurevoir:
Merki (^^)
Voilà, je fais un copier/coller du message que j'ai mis sur developpez.net :mrgreen:
Bonjour,
J'essaie tant bien que mal de me mettre au HTML5, en m'aidant également de jQuery pour pousser les fonctions dont j'ai besoin.
Mes compétences en développement web sont plutôt bonnes, mais je suis resté cantonné au HTML4 et au javascript assez basique, assez éloigné des méthodes de programmation qu'on utilise avec jQuery.
Je maitrise correctement l'Ajax à mon niveau, mais avec jQuery le fonctionnement est quand même bien différent.
J'explique mon problème. Par souci de simplification, j'ai épuré au maximum les codes sources.
Voici mes pages :
index.php
<?php
include("header.php");
include("page2.php");
include("footer.php");
?>
header.php
<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
?><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mon site</title>
<link rel="stylesheet" href="my.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
<script>
$(document).ready(function(){
// Requried: Navigation bar drop-down
$("nav ul li").hover(function() {
$(this).addClass("active");
$(this).find("ul").show().animate({opacity: 1}, 400);
},function() {
$(this).find("ul").hide().animate({opacity: 0}, 200);
$(this).removeClass("active");
});
// Requried: Addtional styling elements
$('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
$('nav ul li:first-child').addClass('first');
$('nav ul li:last-child').addClass('last');
$('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
$("nav ul li a").click(function() {
var adr = $(this).attr('href');
$.ajax({
type: "GET",
url: adr,
success: function(resultat) {
$('#content').html(resultat);
}
});
return false;
});
$("#blabla").click(function() {
var adr = $(this).attr('href');
var donnee1 = $(this).attr('val1');
$.ajax({
url: adr,
type: "get",
data: { "val1": donnee1 },
success: function(resultat) {
$('#content').html(resultat);
}
});
return false;
});
});
</script>
<script src="my.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/navbar.css">
</head>
<body>
<!-- Home -->
<div id="page">
<header>
<nav class="dark">
<ul class="clear">
<li>
<a href="page1.php">
Page 1
</a>
</li>
<li>
<a href="page2.php">
Page 2
</a>
</li>
</ul>
</nav>
</header>
<div data-role="content" id="content">
footer.php
</div>
</div>
</body>
</html>
page1.php
Ma page 1
<?php
echo $_GET['val1'];
?>
page2.php
Ma page 2
<a id="blabla" val1="contenu de variable" href="page1.php">Test</a>
Mon problème est donc le suivant :
Lors du chargement de la page index.php, j'include la page page2.php qui contient un lien qui va être interprété par Javascript pour insérer via Ajax la cible du lien, qui est page1.php
Jusque là, ça fonctionne sans problème.
Par contre, si je clique, dans mon menu, sur l'onglet Page 2, qui va donc m'afficher à nouveau le contenu de la page 2, si je clique sur mon lien Test, ça ne chargera plus la cible du lien via Ajax, mais ça ouvrira le lien de manière classique... Et je ne sais pas du tout comment il peut être possible de gérer ça autrement. Lorsque je manipulais Ajax sans jQuery, j'avais une fonction de ce type :
function file(fichier) {
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
xhr_object.open("GET", fichier, false);
xhr_object.send(null);
if(xhr_object.readyState == 4) return(xhr_object.responseText);
else return(false);
}
Qui marchait sans problème même lorsque le lien était dans le contenu d'un fichier affiché via Ajax. Là, avec jQuery, impossible :(
En outre, je cherche aussi comment transmettre une variable via mon lien... J'ai fait un essai en créant une balise dans mon <a> mais c'est trop beau pour marcher...
Je suis complètement largué, je l'avoue. Avant, je créais mes petites fonctions comme ça :
function cliquemoi(var1, var2) {
var retour = file('mapage.php?var1='+var1+'&var2='+var2);
document.getElementById('madiv').innerhtml = retour;
}
C'était simple, basique et fonctionnel. Là, je paie ma galère :(
Merci par avance de vos conseils :)
-
Remplace
$("nav ul li a").click(function() {});
par
$("nav ul li a").on('click', function() {});
fais la même chose pour ton élément #blabla, dis-moi si ça marche et je te dirais ensuite pourquoi ça marche. :)
-
Merci :)
Mais ça ne fonctionne pas :(
Tiens j'ai une URL de test si tu veux :
http://www.cash-fetes.fr/gcv2/
-
Je pense que ce qui pose problème c'est l'événement "click" sur ton élément #blabla : tu appliques un événement dessus, puis ensuite tu le détruis dans le DOM et tu le recréé => l'association avec l'événement est perdu.
Il faut que tu appliques l'événement avec un sélecteur autre que l'ID.
Essaye de remplacer
$("#blabla").on("click", function() {});
par
$("#content").on("click", "a", function() {});
Attention, ça va fonctionner avec toutes les balises "a" qui sont contenues dans la div #content !
-
Yes c'est nickel, ça ça fonctionne, merci !
Je suis vraiment ultra débutant là dedans. Autant je gère le HTML, le PHP, le javascript à l'ancienne, que là j'avoue être un peu largué car je n'ai pas le temps d'apprendre dans les détails.
Et du coup j'ai pu modifier ta modif en l'adaptant à mes besoins :
$("#content").on("click", "a", function() { });
est devenu
$("#content").on("click", "#blabla", function() { });
Et ça fait parfaitement ce que je veux que ça fasse !
Maintenant autre question : comment je peux transmettre une variable en POST, variable définie dans ma balise <a> ? Ou alors je dois mettre des balises INPUT en hidden ? Car je ne sais pas du tout comment je peux transmettre des variables à ces fonctions, moi j'ai l'habitude des fonctions à la con de type fonction machin(val1, val2) { } :D
Merci en tout cas (^^)
-
Ah oui et du coup, pour comprendre, l'évènement on() sert à quoi ? :roll:
-
Pour les variables en POST, si tu parles toujours de l'appel de la page en AJAX, il suffit d'ajouter la propriété type: "POST" dans ta fonction.
$.ajax({
url: adr,
type: "post",
data: { "val1": donnee1 },
success: function(resultat) {
$('#content').html(resultat);
}
});
return false;
});
Ah oui et du coup, pour comprendre, l'évènement on() sert à quoi ? :roll:
L'événement on() (http://api.jquery.com/on/) permet de faire pleins de choses, dont notamment attribuer un ou des événements à des éléments présents ou futur, c'est-à-dire qu'ils soient déjà présent dans le DOM au chargement de la page, ou qu'ils soient créés par la suite.
-
Génial, ça marche nickel, exactement comme je le souhaitais !
Un grand merci (^^) Je vais m'y mettre sérieusement à comprendre tout ça, y'a un potentiel assez sympa par rapport à ce que je souhaite faire :mrgreen:
-
t'as vérifié le niveau d'huile ?
c'est bien de la 10w40 non, aceo III
eventuelement remplace le distributeur par un calculateur et essaie les denso platine :cagoule:
-
Un grand merci (^^) Je vais m'y mettre sérieusement à comprendre tout ça, y'a un potentiel assez sympa par rapport à ce que je souhaite faire :mrgreen:
N'hésite-pas à regarder du côté de jQuery UI afin de ne pas réinventer la roue, surtout si tu es parti pour faire un système en onglet... ;)
Et bien sûr si tu as d'autres questions, n'hésite-pas non plus à me contacter, c'est un peu mon métier en fait :mrgreen:
-
t'as vérifié le niveau d'huile ?
c'est bien de la 10w40 non, aceo III
eventuelement remplace le distributeur par un calculateur et essaie les denso platine :cagoule:
malheureux, 5w30 pas autre chose !
:aga:
oui j'ai vu jquery ui, et je l'exploite :)
j'ai fini l'an dernier le développement d'un logiciel de gestion commerciale pour ma boite, et j'ai découvert tout récemment jquery, j'ai développé le site mobile de la boite avec, et quand j'en ai vu la puissance, je me suis dit que je pourrais en exploiter la puissance pour perfectionner mon logiciel, créé avec du html4 et du javascript standard.
du coup je vais me former à exploiter correctement tout ça.
encore merci ! si j'ai des questions je sais vers qui me tourner :D
-
Moi je connais l'ajax cristal mais l'ajax simple non :mrgreen:
(http://img15.hostingpics.net/pics/509195herodetailsglsclnrcrystal.png) (http://www.hostingpics.net/viewer.php?id=509195herodetailsglsclnrcrystal.png)
Désolé j'ai pas pu résister :dejadehors: :bag:
Ps:par contre ça gère grave sur ce forum :wink:
-
Ps:par contre ça gère grave sur ce forum :wink:
:jap: grâce à l'aide de Djules j'ai bien avancé dans mon projet :-) et j'ai compris les bases dont j'avais besoin pour avancer :-)
-
Je vois ça :wink:,autant je suis pas con il y a des trucs que je capte vite autant là c'est du chinois :D
Bonne continuation et chapeau bas a vous deux :top: