Discussion :

[jjoire]

Bonjour,

J'ai un formulaire par exemple sur l'url https://monsite.com/mapage.

J'ai 2 select :
- Une sélect 'Marque' qui retourne la liste des marques de voitures dans lequel j'ai un script onchange="getval(this);".
- Une select 'Voiture' qui filtre les voitures selon la marque sélectionnée ci-dessus, en récupérant la variable php généré par le script js

Code :

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

1
2
3
4
5
6
7
8
9
10
<script>
    function getval(sel) {
    var selectedValue = sel.value;   
    $.post('https://monsite.com/mapage',
    {sv : selectedValue},
    function(response){
       return false;
    });
    }
</script>

Dans le select 'Voiture', ci-dessous le code php avant d'exécuter la requête SQL pour filtrer les voitures selon $selectedValue

Code php :

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

1
2
3
if($_POST){
   $selectedValue = $_POST['sv'];
}

L'appel à la fonction js fonctionne jusqu'à la ligne $.post('https://monsite.com/mapage', où ça produit une erreur du type

Unable to get property 'post' of undefined or null reference.

Etant novice en AJAX j'ignore quelle valeur mettre à la place de https://monsite.com/mapage.
J'ai essayé en vain en remplaçant https://monsite.com/mapage par https://monsite.com/script/test.php où php est vide ais ça ne change rien.

Si quelqu'un peut me dépanner en apportant une correction ou une solution alternative, ce serait chouette car je ne peux pas passer à l'étape suivante.

Merci d'avance

[mathieu]

le message d'erreur laisse penser que jQuery n'est pas bien chargé et donc "$" n'est pas défini.
comment chargez vous cette bibliothèque dans votre page ?

[jjoire]

Merci d'avoir jeté un oeil à ma demande.

De ce que j'en vois dans le head, plusieurs chargements de js gérés par le template

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
	<script src="/media/jui/js/jquery.min.js?cc384f83edc0868fd0fac277989479dd" type="text/javascript"></script>
	<script src="/media/jui/js/jquery-noconflict.js?cc384f83edc0868fd0fac277989479dd" type="text/javascript"></script>
	<script src="/media/jui/js/jquery-migrate.min.js?cc384f83edc0868fd0fac277989479dd" type="text/javascript"></script>
	<script src="/media/jui/js/bootstrap.min.js?cc384f83edc0868fd0fac277989479dd" type="text/javascript"></script>
	<script src="/media/com_rsform/js/directory.js?cc384f83edc0868fd0fac277989479dd" type="text/javascript"></script>
	<script src="/media/system/js/core.js?cc384f83edc0868fd0fac277989479dd" type="text/javascript"></script>
	<script src="/templates/rscora/js/jquery/jquery.animsition.min.js" type="text/javascript"></script>
	<script src="/templates/rscora/js/template.js" type="text/javascript"></script>
	<script src="/templates/rscora/js/jquery/jquery.mobile.custom.js" type="text/javascript"></script>
	<script src="/templates/rscora/js/device-dropdown.js" type="text/javascript"></script>
	<script src="/templates/rscora/js/jquery/jquery.slidetext.js" type="text/javascript"></script>
	<script src="/templates/rscora/js/jquery/jquery.waypoints.min.js" type="text/javascript"></script>
	<script src="/templates/rscora/js/velocity.min.js" type="text/javascript"></script>
	<script src="/templates/rscora/js/sticky-menu.js" type="text/javascript"></script>
	<script src="/templates/rscora/js/offscreen.min.js" type="text/javascript"></script>
	<script src="/media/com_rsform/js/script.js?cc384f83edc0868fd0fac277989479dd" type="text/javascript"></script>
	<script src="/media/com_rspagebuilder/js/rspagebuilder.js" type="text/javascript"></script>

Faut-il que je rajoute un appel ?

Cordialement,

[mathieu]

si vous utilisez jQuery en mode "no conflict" vous devez utiliser "jQuery.post(..."
https://api.jquery.com/jQuery.noConflict/

[StephCoul]

Salut jjoire.
Tu developpe en local ou en ligne?

[jjoire]

Merci

Je travaille directement sur le serveur, et non en local.
(Désolé de réponse si tard mais j'étais en déplacement.)

Pour que ça fonctionne j'ai remplacé $/ajax par jQuery.ajax.
Désormais mon script s'exécute mais je suis scotté sur le probléme suivant.

• J'ai une select "Brand" dans laquelle je fais une requête SQL pour récupérer les valeurs et options des différentes marques
• J'ai une select "Car" dans laquelle je fais une requête SQL pour récupérer les valeurs et options des différentes voitures, en filtrant sur la marque héritée de la select "Brand"

Au changement de la select "Brand", j'exécute le script suivant pour récupérer la valeur sélectionnée de la marque.

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
<script>
	function myFunction() {
		var country = document.getElementById('Marque').value;
		jQuery.ajax({
			type: 'GET',
			url: 'https://monsite.com/script/brand.php',
			data: {brand:brand},
			success: function( data ) {
			console.log(data);
			var myvalue = data;
			alert(myvalue)
			}
		});
	}
</script>

L'alert affiche bien la marque sélectionnée, sans que la page soit rechargée.
En revanche, je ne sais pas comme transformer en variable php myvalue et la faire passer à la select "Car".
J'ai fait $selectedBrand= $_GET['Brand']; mais ça ne donne rien, car de ce que j'en comprends la valeur est parsée au démarrage alors qu'aucune sélection de marque n'est encore faite.
J'ai également essayé avec un js contenant location.href = 'https://monsite.com/en/my-car' + '?brand=' +selectedBrand;
Ça fonctionne, car je peux récupérer la marque sélectionnée via $selectedBrand= $_GET['Brand'] que je réinjecte dans ma requête pour filtrer les voitures.
En revanche, le rechargement de la page ne conserve plus la sélection de la marque dans la select "Brand".
Dans un sens comme dans l'autre, avec ou sans rechargement de pages, ça ne fonctionne pas.

SI vous avez une solution je suis preneur.

[Invité]

Bonjour,

si vous utilisez jQuery en mode "no conflict" vous devez utiliser "jQuery.post(..."
https://api.jquery.com/jQuery.noConflict/

1- Ce que dit aussi la doc, c'est qu'on peut écrire :

Code :

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

1
2
3
4
5
<script>
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
});
</script>

Ainsi, on n'est pas obligé de remplacer tout les $ par jQuery.

Code :

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

1
2
3
4
5
6
7
8
<script>
jQuery( document ).ready(function( $ ) {
	function myFunction() {
		var country = $('#Marque').val(); // (syntaxe jQuery)
		$.ajax({
....
 
});

2- Ensuite :

Code :

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

1
2
3
		var country = $('#Marque').val();
...
			data: {brand:brand},

"country", "Marque", "brand",..... : il faudrait au minimum que tu comprennes ce que tu fais, non ?

"listes liées Ajax"

[jjoire]

Bien vu

Je vais tester en me basant sur votre retour.

Merci