jquery modifier définitivement html

Question

Comment est-ce que j'irais ajouter définitivement une classe à un élément html en utilisant jQuery.

Je prévois la construction d'une galerie d'images qui est triée en types/catégories en utilisant le jQuery sorting plugin. Je veux ajouter une boîte déroulante en dessous de chaque image qui permet à l'utilisateur de changer le type (ajouter/supprimer une classe) qui modifie en permanence le code HTML pour le prochain chargement. Comment pourrais-je m'y prendre?

EDIT: Ok, donc ce que je peux mettre ensemble, je devrais utiliser cette approche:

1. Jquery ajouter/supprimer la classe.
2. Envoyer le code HTML complet de la source via la requête AJAX.
3. PHP écrit le HTML complet au dossier ou est-il un moyen de remplacer seulement une partie particulière d'un dossier dans PHP?

Answer 1

Vous devez d'abord savoir la distinction entre les scripts côté client et la programmation côté serveur.

Le serveur vous renvoie un ensemble de html sur chaque réponse qui est généré par le côté serveur php dans votre cas.

Si vous souhaitez modifier une classe sur un élément donné et que vous souhaitez que cette modification survive à la prochaine réponse PHP côté serveur, vous devez en quelque sorte informer le serveur de votre modification.

Il y a plusieurs options pour envoyer des données du côté client vers le côté serveur.

1. stocker la valeur dans un HiddenField
2. Faire une demande ajax et de stocker la valeur quelque part sur le serveur de sorte qu'il est au courant de ce changement à la demande.
3. Ajoutez-le à la chaîne de requête de l'URL demandée.

Answer 2

Vous pouvez utiliser la fonctionnalité jQuery's ajax pour renvoyer le code HTML modifié au serveur à stocker dans votre base de données après que l'utilisateur a apporté ses modifications.

Vous pouvez ensuite créer les parties pertinentes de votre page de votre base de données sur la charge suivante.

$('#mySelectBox').change(function(){ 
$.ajax({ 
    url: "updateHtml.php", 
    data: $('#myEditedHtmlContainer').html(), 
    success: function(){ 
    // do something on success 
    } 
}); 
}); 

Answer 3

Une solution consiste à stocker la décision de l'utilisateur dans un cookie. Le chargement de la page très, vous aurez besoin de vérifier la valeur appropriée dans le cookie et en fonction de cela, appliquer le CSS.