Discussion :

[Jolt0x]

Bonsoir,

Je veux passer un paramètre a un script PHP via jQuery et je bloque. J'ai le script suivant:

Code :

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

1
2
3
4
5
6
7
8
$(document).ready(function() {
	$('.maClasse').click(function() {
		$.get('monScrip.php', {'p': $(this).text()}, function(data) {
			alert(data);
		});
		return false;
	});
});

Le lien qui active ce script est le suivant:

Code html :

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

1
2
3
<div class="maClasse">
<a href="monScript.php?param=valeur">Label Affiché sur le browser</a>
</div>

Le script PHP ne fait qu'afficher la valeur du paramètre passé en paramètre (il affiche 'valeur'). Vu le script jQuery on s'attend que le alert(data) affiche le paramètre 'valeur'. Or celui ci n'affiche pas la 'valeur' mais le Label Affiché sur le browser. C'est a dire la valeur de la balise ancre "<a href...>xxx</a>". Ce n'est pas ce qui m'intéresse: je veux la valeur du paramètre passé au script PHP: valeur. Comment faire ?

Merci.

[Jolt0x]

Vous avez surement corrigé de vous-même mais dans le script jQuery le 'p' dans {'p': $(this).text()} doit être "param" (cd. le lien web), sinon, ca ne fonctionne pas. Merci.

[danielhagnoul]

Bonsoir

Il faut récupérer le contenu de l'attribut "href". Il s'agit d'une URL, on utilise un plugin jQuery pour le "parser" et récupérer la partie "query" (voir la documentation du plugin). Exemple :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
$( ".maClasse" ).on( "click", function(){
	var url = $.url( $( this ).children( "a" ).eq( 0 ).attr( "href" ) ),
		jqXHR = $.get( "monScrip.php", url.attr( "query" ) );
 
	// debug console, touche F12
	// plugin purl : https://github.com/allmarkedup/purl
	// "http://cdnjs.cloudflare.com/ajax/libs/jquery-url-parser/2.2.1/purl.min.js"
	console.log( url, url.attr( "query" ) );
 
	jqXHR.done( function( data, textStatus, jqXHR ){
		// succès de la transaction, on doit traiter le contenu de data
		console.log( data, textStatus, jqXHR );
 
	});
 
	jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
		// échec de la transaction, gérer la catastrophe
		console.log( jqXHR, textStatus, errorThrown );
 
	});
 
	jqXHR.always( function( jqXHR, textStatus ){
		// la transaction est terminée
		console.log( jqXHR, textStatus );
	});
 
	return false;
});

[Jolt0x]

Bonsoir,

Merci, mais dans l'idéal, je ne souhaite pas du tout utiliser de plugin. Juste jQuery.

Votre solution me parait bien compliqué. D'autant que j'ai le livre "jQuery" et j'ai suivi leur instructions. Je vais relire.

Sans vouloir être désagréable, votre soluce me semble bien compliqué pour juste un résultat basic. Si quelqu'un a plus simple avec juste jQuery (sans plug-in additionnel) je suis preneur.

[Jolt0x]

Daniel,

Je viens de lire votre "CV", et je doute qu'il y a quelque chose de plus simple, compte tenu de votre maitrise du jQuery.

Je vais me rabattre sur des fichier JSON pour transférer mes données. Ca sera plus simple.

Encore merci.

[Jolt0x]

Au sujet des fichiers JSON je suis confronté au problème suivant.

J'ai une fonction jQuery qui charge un fichier JSON et qui le met dans un élément HTML (un div class="maClasse"> data json <div>) avec la fonction suivante:

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
16
17
18
19
20
$(document).ready(function() {
	$('.maClasse').click(function() {
		$.getJSON('fichier.json', function(data) {
			$('#dictionary').empty();
			$.each(data, function(entryIndex, entry) {
				var html = '<div class="entry">';
				html += '<h3 class="term">' + entry['term'] + '</h3>';
				html += '<div class="part">' + entry['part'] + '</div>';
				html += '<div class="definition">';
				html += entry['definition'];
				html += '<br>';
				html += entry['quote'];
				html += '</div>';
				html += '</div>';
				$('#dictionary').append(html);
			});
		});
		return false;
	});
});

En réalité je charge puiseurs fichiers JSON et donc je suis tenté de factoriser le code de la fonction dans une fonction auxiliaire avec comme paramètre le nom du fichier JSON a charger.

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
16
17
18
19
 
function chargeJSON(argFichier) {
	$.getJSON('argFichier', function(data) {
		$('#dictionary').empty();
		$.each(data, function(entryIndex, entry) {
			var html = '<div class="entry">';
			html += '<h3 class="term">' + entry['term'] + '</h3>';
			html += '<div class="part">' + entry['part'] + '</div>';
			html += '<div class="definition">';
			html += entry['definition'];
			html += '<br>';
			html += entry['quote'];
			html += '</div>';
			html += '</div>';
			$('#dictionary').append(html);
		});
	});
	return false;
}

Et j'appelle la fonction comme suit:

Code :

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

1
2
3
4
5
6
 
$(document).ready(function() {
	$('.letter-c').click(function() {
		chargeJSON('test3.json');
	});
});

J'appelle cette fonctionne plusieurs fois (d'où la nécessité de factoriser la partie chargeJSON).

Mais sa ne fonctionne pas. Cela semble s'afficher une premier fois mais ca s'efface juste après. Et le résultat est diffèrent selon les navigateurs (IE, FF, ...)

Une idée ?

[Jolt0x]

Sur Firefox, le résultat attendu s'affiche une fraction de seconde puis disparait. Sous Internet Explorer une fenêtre Windows de l'explorateur de ficher s'ouvre. Curieux.

[Jolt0x]

Aprés vérification, sous IE ca fonctionne mais il faut activer le JavaScript (au détail prés que ca ouvre, en plus, une fenêtre explorateur Windows). En revanche sous FF, là ca bloque toujours: ca s'affiche une fraction de seconde puis ca disparait.

[Jolt0x]

Je m'en suis sorti finanlemnt en abandonant vorte idée, Danaiel.

J'ai utilisé la fonction $.ajax et cela fonction bien.

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
16
17
18
19
 
 
$.ajax({
	url: "script.php",
	data: {	p : arg },
	statusCode: {
		404: function() {
			alert("page not found");
		}
	},
	success: function( data ) {
		// alert('testAJAX dans data success');
		$( ".snmpc-content" ).empty();
		$( ".snmpc-content" ).html( data);
	}
}).done(function() {
		// alert('testAJAX DONE');
		$(this).addClass("done");
	});