Hell'o

Je cherche la méthode qui permet de réinitialiser depuis mon ajax mon caroussel.

Dans mon traitement je remplace le contenu d'une div par un autre contenu. L'idée est de pouvoir revenir à l'état initial via ajax.

Au départ j'utilise : $(document).ready(function() { et dans mon ajax $(document).click(function() { qui a tendance a dupliqué les effets.

Je cherche juste à rappeler mon php et le script caroussel correspondant.

J'ai tenté load, en vain...

Mega

Salut, cette fois je te lis à temps

Ok, merci pour tes conseils.

Je pense que je vais garder ce mode d'affichage qui fonctionne bien (règle n°2) mais j'aime bien comprendre le pourquoi du comment c'est plus fort que moi

Dans le traitement je peux récupérer facilement le vrai id de mon client donc pas de soucis

Tu n'as pas vu de choses aberrantes dans le code sinon ? car je ne suis pas un fou furieux d'Ajax ^^

Pour Arthur c'est plutôt rare, j'aime bien, ça aurait pu être lié au roi par exemple, pas l'animateur télé hein (je me serai pas permis cette comparaison)

++

Mega


Ps : "demain" enfin tout à l'heure je t'enverrai un MP, tkt pas de soucis avec moi.

Comment ferais-tu la chose toi ?

En fait je ferai en PHP un tableau javascript qui effectuerait la correspondance entre l'identifiant de ton image et son id dans le carrousel.

Maintenant ça marche

Si ça marche, on ne touche plus à rien. C'est la règle n°2 en informatique (la 1, c'est de toujours faire des sauvegardes)

Ps : @rthur, c'est ton prénom ou un hommage ?

Un hommage à qui ?
C'est vraiment mon prénom (enfin avec un A au début )

Je veux bien ton avis sur mes derniers posts puisque tu sembles mieux caler que moi...

Ton "sharing" m'importe vraiment.

Bon, apparemment l'ajax couiné car la valeur postée était un string et non un integer (Merci PHP ! surtout à moi gros beta), me trompe-je ?

J'adore PHP car globalement pas besoin de typer ses variables, mais JS c'est pas PHP, oubli par manque de... de tout en fait (pratique, fatigue...)

Maintenant ça marche, p'tite correction :

[javascript]alert(mavariable);
var initial = parseInt(mavariable);
$('.your-class').slick({
infinite:true,
vertical:true,
slidesToShow: 3,
slidesToScroll: 1,
initialSlide: initial
});
alert('Vive le roi ');[/javascript]

Mega


Ps : @rthur, c'est ton prénom ou un hommage ?

re re @rthur, (g posté au dessus mais à 2h du mat j'ai pas vérifié mes mails désolé la tête dans le slicker ^^)

Je te joins juste mon ajax, si tu peux me dire ou je faile stp :

[javascript]function jepostemavaleur(mavariable) {
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
throw new Error("Ajax is not supported by this browser");
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status == 200 && xhr.status < 300) {
document.getElementById('madiv').innerHTML = xhr.responseText;
$('.your-class').slick({
infinite:true,
vertical:true,
slidesToShow: 3,
slidesToScroll: 1,
initialSlide: mavariable
});
}
}
}
alert(mavariable);//m'affiche bien l'id de l'élément posté
xhr.open('POST', 'traitement.php');
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send();
}[/javascript]

Pour le coup le slicker s'arrête bien sur l'élément mais perd les pédales dès que je clique sur prev. Si je remplace initialSlide par une valeur en dur, pas de soucis

Merci pour ton aide.

Mega

Bonjour @rthur,

Voilà la donne imaginée j'ai une div avec un SELECT * FROM clients qui m'affiche tous mes clients ou une partie selon un affichage A.

Quand je clique sur un client je cherche à recharger cette même div avec d'un côté mon slider slick arrêté sur le bon client et de l'autre côté les infos propres à ce client.
Sachant que mon client peut avoir l'id1, puis 15, puis 27, il peut y avoir des trous, etc...

A la base je voulais poster le nom+id de mon client sauf que le slicker attend un integer donc du coup j'ai vu la chose différemment avec un $i=0; qui s'incrémente.

Comment ferais-tu la chose toi ?

Je ne sais pas/plus à quel moment initialiser mon slider. Au moment du post de la variable ? Sur une div cachée mais comment récupérée sur ma page principale la valeur postée via ajax ?

Mega

Je comprends toujours pas où est le problème.
Tu envoies quoi en paramètre dans ton appel ajax et tu reçois quoi en réponse ?

Si c'est la liste des images qui constitue la carrousel que tu reçois en réponse et celui qui doit démarrer l'affichage, et bien tu as simplement à appeler les fonctions de création (comme dans l'exemple "Add & Remove" de Slick) et de faire un GoTo sur l'index de celui qui t'intéresse.

Re @rthur et merci pour ta patience.

Non justement mon slider est créé après, au retour de l'ajax.

Si je le fais avant, sur la première page, je poste pour le coup des id d'affichage et non les vrais id de mes images.

Mais comment re-récupérer la valeur initialSlide ? Ou faire un setAttribute sur mon slider depuis l'ajax...?

Mega

Je ne suis pas sûr de comprendre le fonctionnement de ton système.

Si ton carrousel est créé dans ta page principale et ensuite une requête Ajax (vers traitement.php?) doit indiquer quelle image afficher.
Dans ce cas, il faut que tu mettes dans un tableau javascript dans ta page principale, l'identifiant des images (img77, img41 ou 77, 41...) avec leur position dans le carrousel.
Et quand tu vas avoir ton retour ajax qui indiquera d'afficher l'image img41, tu auras juste à utiliser le tableau de correspondance pour savoir en quelle position il est dans le carrousel.

Dans mon cas c'est un plus complexe (je pense)

Je poste en ajax une valeur qui peut être img77, img41, img2...tiens ou même sans le "img" 4, 10, 50, 89...

Dans ce JS j'exécute ma page traitement.php qui va récupérer l'id passé mais aussi instancié le slicker après le if (xhr.readyState === 4) { ...

mais à ce moment là je ne connais pas encore les id à venir...

Dans ma page traitement.php, je peux instancier le slicker ?

Mega

Le numéro qu'attend Slick, c'est l'index donc le n° de page en qq sorte.

Comme c'est toi qui insère dans ton code HTML chaque image a afficher dans un certain ordre et bien tu as juste à stocker l'ordre dans lequel tu le mets dans ta page HTML pour savoir lequel appeler

Génial, merci pour ce retour d'XP !!!

Je vois qu'on peut initialiser la première diapo comme je voulais seulement pour slick il attend un numéro hors comment faire quand tes éléments ont des noms et des id qui ne se suivent pas forcément.

Tu vois la problématique @rthur ? Si j'ai :

img41
img5
img77

initialSlide ne va pas comprendre et va attendre 0 pour img41, 1 pour img5, 2 pour img77... Comment faire cette correspondance ?

Je pensais sinon récupérer l'id du parent mais là pour le coup le "slicker" n'est pas encore instancié donc je ne peux même pas (enfin je crois)

Mega

Et dernier petit point, le tout est gratuit et compatible avec MAC, tous les nav, supports, etc ? Full responsive ?

Oui, avec même la gestion du slide avec le doigt sur les tablettes pour Slik et Fotorama.

Un grand MERCI à toi @rthur pour ton coup d'oeil.

Pour le challenge je serai tenté de modifier le viewport avec le temps que ça prendra (sachant que j'en ai pas beaucoup)
mais quand je vois la foultitude d'options de ton top3, c'est que du bonheur ! (même si j'aime pas cette expression )

Et dernier petit point, le tout est gratuit et compatible avec MAC, tous les nav, supports, etc ? Full responsive ?

Mega

Effectivement, c'est le script de carrousel le + rustique que je connaisse, et ils n'ont pas prévu cela facilement.

2 possibilités :
- soit tu modifies le code javascript de ton carrousel existant pour ajouter à la fonction move() la possibilité de prendre un index en paramètre qui devra alors calculer où positionner le viewport.
- soit tu changes de script de carrousel pour en prendre un qui fait tout comme un grand :
Exemples issu du top 3 proposé par jQuery :
http://kenwheeler.github.io/slick/ => méthode slickGoTo() pour positionner le carrousel où tu veux.
http://sorgalla.com/jcarousel/ => méthode jcarouselControl(target)
http://fotorama.io/ => méthode show()