Envoi de requête PHP impossible avec intégration ajax

Laznet
Javascript

Bonjour,

J'utlise l'ajax pour charger une partie du contenu de mes pages dans une page de base, j'ai besoin de faire une requête d'insertion en bdd, j'aimerais donc pouvoir utiliser de l'ajax pour faire cette requête.. Et c'est là que le problème se pose.
Si j'utilise un script de base PHP et que l'attribut action de mon formulaire porte sur la page courant (donc add.php) j'obtient une page non stylisé (ça reste logique jusque là..).
Si je pointe vers la page de base à savoir manage.php j'obtient également une page non stylisé et c'est également logique.
La question est donc comment faire pour exécuter un code PHP avec ce cas de figure. (Ça ne fonctionne pas non plus avec de l'ajax).

Si quelqu'un est déjà tombé sur ce cas.. je veux bien un peu d'aide ^^.

11 réponses

Defy
Réponse acceptée

ben il suffit de catcher l´event submit de ton formulaire, de le preventDefault pour eviter le refresh de la page, recuperer les infos des inputs et enssuite faire une requete ajax a destination d´un script php. ta page ne se recharge pas donc du coup pas de change'ent de style

Sparkosis
Réponse acceptée

Hello, pour appuyer les dire de @Defy:

$(document).ready(function() {

    $("form").on('submit',function(event) { //changement sur le form
        event.preventDefault();
        var id_btn = $('button').attr('id'); //Fichier a load avec un id contenant son nom.

        $.ajax({
            method: "POST",
            url: id_btn + ".php", //On utilise l'id ici
            data: {}
        }).done(function(data, textStatus, request){
            afficher(data); 
        });
        return false;

    });

    function afficher(data) {
        var content = $('.content');
        content.fadeOut('500', function() {
            content.empty();
            content.append(data);
            content.fadeIn('500');
        });
    }
});
Laznet
Auteur
Réponse acceptée

Bon j'ai trouvé la solution.. c'est pas très propre de faire ça.. mais je vais mettre le JS directement sur la page !

betaWeb

Salut,

Tu parles de requête d'insertion en BDD, quel rapport avec le style de ta page ?

Laznet
Auteur

C'est que ma page principal a un style particulier (donc tous les éléments qui y sont chargé en ajax sont infliuencé par ce style), alors que si je me rend sur les pages dont le contenu est chargé (parce que faut bien le mettre quelques part ce contenu xD), elle n'ont pas de style.
C'était juste un constat.

Laznet
Auteur

Concrétement :
J'ai un menu avec plusieurs boutons, un de ces boutons est censé me rediriger vers une page formulaire, sauf que je charge le contenu de cette page en ajax et l'affiche donc dans une div content.

Quand je clique sur le bouton pour soumettre, logiquement, dans un cas normal le script PHP ferait son taff ou alors le script JS récupérerais les valeurs des inputs pour les envoyers vers une page externe, un truc assez basique en soit.
Sauf que moi je récupère comme dis plus haut le contenu de la page formulaire (add.php) pour l'intégrer dans la page "mère" (manage.php).

C'est là où justement je n'arrive pas a exécuter de requête PHP.. parce que logiquement dans ton formulaire tu peux définir vers quelle page vont aller les informations récupéré (l'attribut action).. C'est là où j'en viens à ce que je disais tout à l'heure, je ne peux pas pointer vers ma page de traitement car sinon au moment de la soumission je suis redirigé vers cette page... et vu qu'elle n'est pas chargé "normalement" (selon la manière décrite plus haut), elle n'a pas de style et ce n'est pas correct..

Mehdikacim

Avec du code ce serait mieux !

Laznet
Auteur

Bah je ne vois pas en quoi il y aurait besoin de code.. Tout est expliqué. C'est un chargement basique de contenu.

Laznet
Auteur

Mais bon, voici le code qui me permet de load les pages.

$(document).ready(function() {

    $("button").click(function(event) {
        event.preventDefault();
        var id_btn = $(this).attr('id'); //Fichier a load avec un id contenant son nom.

        $.ajax({
            method: "POST",
            url: id_btn + ".php", //On utilise l'id ici
            data: {}
        }).done(function(data, textStatus, request){
            afficher(data); 
        });
        return false;

    });

    function afficher(data) {
        var content = $('.content');
        content.fadeOut('500', function() {
            content.empty();
            content.append(data);
            content.fadeIn('500');
        });
    }
});
Laznet
Auteur

Ok je test ça et je vous dis.

Laznet
Auteur

Ça ne fonctione pas, il y a quand même un redirection.. j'ai simplifié mon code, je lui dis d'envoyer un console.log ou un alert à la suite de l'event submit.. sauf que ça me redirige toujours. il ne prend absolument pas compte du JS (on dirait).

EDIT : je confirme il ne prend absolument pas compte du JS, j'ai essayé de faire une modification (genre de changer le background) en JS.. il ne l'a fait pas.