1
votes

La fonction jquery submit () ne fonctionne pas dans la fonction de succès ajax

J'ai un formulaire que je soumets en POST en AJAX et si ce formulaire est valide je renvoie un nouveau formulaire que je souhaite soumettre automatiquement dans Jquery. J'ai l'impression que mon .submit () est totalement ignoré, je ne comprends pas ..

J'ai essayé de faire console.log () avant et après avoir appelé la fonction submit (), ils apparaissent bien, c'est très étrange. .

Ma vue principale (show.html.twig):

'method': 'POST'

La deuxième forme (klik_and_pay_form.html.twig):

XXX

Le contrôleur:

$("#paymentForm").trigger("submit");
$("#paymentForm")[0].trigger("submit");
$("#paymentForm").submit();
$("#paymentForm")[0].submit();

let submitPayment = $('button[name="submit"]');
$(submitPayment).trigger('click');

Savez-vous pourquoi la fonction jquery submit () ne fonctionne pas?

MISE À JOUR:

J'ai essayé ceci:

/**
     * @Route("/{id<\d+>?1}/{slug}", methods={"GET", "POST"}, name="show")
     * @Security("is_granted('IS_AUTHENTICATED_ANONYMOUSLY')")
     */
    public function show(Request $request, Offre $offre, $slug): Response
    {
        if ($offre->getSlug() !== $slug) {
            return $this->redirectToRoute('site_devenir_vip_show', [
                'id'   => $offre->getId(),
                'slug' => $offre->getSlug(),
            ], Response::HTTP_MOVED_PERMANENTLY);
        }

        $utilisateur = new User();

        $form = $this->createForm(UserPaiementType::class, $utilisateur);
        $form->handleRequest($request);

        $session = new Session(new NativeSessionStorage(), new AttributeBag());
        $session->set('offre', $offre->getId());

        return $this->render('site/pages/devenir_vip/show.html.twig', [
            'form'  => $form->createView(),
            'offre' => $offre,
        ]);
    }

    /**
     * @Route("/load-payment-form", name="ajax_payment_form", condition="request.isXmlHttpRequest()", methods={"GET", "POST"})
     */
    public function ajaxKlikAndPayForm(Request $request): Response
    {
        $utilisateur = new User();

        $form = $this->createForm(UserPaiementType::class, $utilisateur);
        $form->handleRequest($request);

        if ($form->isSubmitted() === true) {
            if ($form->isValid() === true) {
                if ($request->getSession() === null) {
                    return new Response('Une erreur s\'est produite pendant la récupération de l\'offre.');
                }

                $offreSession = $request->getSession()->get('offre');
                $offre        = $this->entityManager->getRepository(Offre::class)->find($offreSession);

                $klikAndPayPaiement = new KlikAndPayPaiement();
                $klikAndPayPaiement->setPrenom($utilisateur->getPrenom());
                $klikAndPayPaiement->setNom($utilisateur->getNom());
                $klikAndPayPaiement->setPays($utilisateur->getPays());
                $klikAndPayPaiement->setEmail($utilisateur->getEmail());
                $klikAndPayPaiement->setTel($utilisateur->getTel());
                $klikAndPayPaiement->setAccountId($this->getParameter('app.klik_and_pay.account_id'));
                $klikAndPayPaiement->setAbonnementId($offre->getIdKlik());

                $formKlikAndPay = $this->createForm(KlikAndPayPaiementType::class, $klikAndPayPaiement);
                $formKlikAndPay->handleRequest($request);

                $response = [
                    'template' => $this->renderView('site/layout/partials/ajax/klik_and_pay_form.html.twig', [
                        'formKlikAndPay' => $formKlikAndPay->createView(),
                    ]),
                ];

                return new JsonResponse($response, JsonResponse::HTTP_OK);
            }

            return new Response('Le formulaire comporte des erreurs.');
        }

        $offreSession = $request->getSession()->get('offre');
        $offre        = $this->entityManager->getRepository(Offre::class)->find($offreSession);

        $klikAndPayPaiement = new KlikAndPayPaiement();
        $klikAndPayPaiement->setPrenom($utilisateur->getPrenom());
        $klikAndPayPaiement->setNom($utilisateur->getNom());
        $klikAndPayPaiement->setPays($utilisateur->getPays());
        $klikAndPayPaiement->setEmail($utilisateur->getEmail());
        $klikAndPayPaiement->setTel($utilisateur->getTel());
        $klikAndPayPaiement->setAccountId($this->getParameter('app.klik_and_pay.account_id'));
        $klikAndPayPaiement->setAbonnementId($offre->getIdKlik());

        $formKlikAndPay = $this->createForm(KlikAndPayPaiementType::class, $klikAndPayPaiement);
        $formKlikAndPay->handleRequest($request);

        return $this->render('site/layout/partials/ajax/klik_and_pay_form.html.twig', [
            'formKlikAndPay' => $formKlikAndPay->createView(),
        ]);
    }

Et j'ai ajouté ceci dans le form_start:

{% form_theme formKlikAndPay 'site/form_theme/form_div_layout.html.twig' %}

{{ form_start(formKlikAndPay, {'attr': {'class': 'contact-form user-form', 'action': 'https://www.klikandpay.com/paiementtest/checkabon.pl', 'id': 'paymentForm', 'method': 'POST'}}) }}

<div class="row mt-10" id="formError">
    <div class="col-12">
        {{ form_errors(formKlikAndPay) }}
    </div>
</div>

<div class="row">
    <div class="col">
        <div class="name-input">
            {{ form_widget(formKlikAndPay.nom) }}
            {{ form_errors(formKlikAndPay.nom) }}
        </div>
    </div>

    <div class="col">
        <div class="name-input">
            {{ form_widget(formKlikAndPay.prenom) }}
            {{ form_errors(formKlikAndPay.prenom) }}
        </div>
    </div>

    <div class="col">
        <div class="box-input">
            {{ form_widget(formKlikAndPay.pays) }}
            {{ form_errors(formKlikAndPay.pays) }}
        </div>
    </div>
</div>

<div class="row mt-10">
    <div class="col">
        <div class="box-input">
            {{ form_widget(formKlikAndPay.tel) }}
            {{ form_errors(formKlikAndPay.tel) }}
        </div>
    </div>

    <div class="col">
        <div class="email-input">
            {{ form_widget(formKlikAndPay.email) }}
            {{ form_errors(formKlikAndPay.email) }}
        </div>
    </div>
</div>

{{ form_row(formKlikAndPay.accountId) }}
{{ form_row(formKlikAndPay.abonnementId) }}

<div class="row mt-10">
    <div class="col">
        <p class="mt-15"><em>* Après avoir soumis ce formulaire, vous serez automatiquement redirigé sur la plateforme de paiement sécurisée Klik&Pay.</em></p>
        <div class="input-submit">
            {{ form_widget(formKlikAndPay.submit) }}
        </div>
    </div>
</div>

{{ form_end(formKlikAndPay) }}

p>


0 commentaires

3 Réponses :


1
votes

Vous avez empêché la valeur par défaut dans le gestionnaire de soumission jQuery

Vous pouvez utiliser la soumission native en remplaçant:

$("#paymentForm")[0].submit();

En

$("#paymentForm").submit();


3 commentaires

Merci pour votre réponse, cela ne fonctionne toujours pas: / J'ai mis à jour ma demande


Besoin de beaucoup plus de détails sur ce qui se passe réellement, les erreurs, etc. Ajax réussit-il réellement?


Uncaught TypeError: $ (...) [0] .submit n'est pas une fonction



0
votes

OK, essayez d'utiliser quelque chose comme ceci:

let submitPayment = $('button[name="klik_and_paypaiement_form[submit]"]'); //see in the html the good name of your button
$(submitPayment).trigger('click');


2 commentaires

Même problème: / pas d'erreur dans la console et rien ne se passe .. Le problème ne vient pas du fait que l'URL externe est dans un ajax partiel donc elle ne rafraîchit pas toute la page?


pouvez-vous nous donner le modèle de réponse?



0
votes

J'essaye ceci dans mon projet et ça marche bien:

/** In your form type add block prefix */
/**
 * {@inheritdoc}
 */
public function getBlockPrefix()
{
    return 'your_bundle_name_klik_and_pay_paiement_form';
}

<div id="userForm">
</div>

<script>

$('form[name="your_bundle_name_user_paiement_form"]').submit(function(e){
e.preventDefault();
//....
success: function (data, textStatus, xhr) {
    if (xhr.status === 200 && textStatus === 'success') 
    {
        $("#userForm")
            .html(data.template);
        console.log("here 1");
        $('form[name="your_bundle_name_klik_and_pay_paiement_form"]').submit();
        console.log("here 2");
    } else {
        console.log(data);
    }
},

})

$('form[name="your_bundle_name_klik_and_pay_paiement_form"]').submit(function(e){
e.preventDefault();
//....
success: function (data, textStatus, xhr) {
    if (xhr.status === 200 && textStatus === 'success') 
    {
        alert('form submitted');
    } else {
        console.log(data);
    }
},

})


7 commentaires

La plateforme de paiement veut que le "nom" de chaque entrée soit en majuscule comme ceci: "NOM", c'est pourquoi j'ai mis: public function getBlockPrefix ():? String {return null; }


Je ne comprends pas bien votre code, pourquoi il y a deux fonctions de succès?


dans la première fonction de réussite, vous soumettez votre formulaire de paiement. Si vous avez besoin d'une réponse lorsque ce formulaire est soumis, vous devez joindre un gestionnaire: $ ('form [name = "your_bundle_name_klik_and_pay_paiement_form"]' ‌) .submit (function (e) ‌ {}) si vous envoyez ceci forme sur ajax.


Désolé mais je ne comprends pas. faites-vous deux appels ajax?


oui pour avoir la réponse du serveur klikandpay.com si vous en avez besoin.


Je n'ai pas besoin d'une réponse de Klik & Pay, l'utilisateur doit être redirigé vers la plate-forme de paiement lors du POST à ​​l'URL de l'action (comme un simple formulaire lorsque nous mettons une URL externe dans l'action), à ce moment-là, l'utilisateur quitte mon site pour accéder à la plateforme de paiement. J'ai essayé de reproduire votre code ci-dessus mais je ne pense pas l'avoir bien copié car cela ne fonctionne pas, ma console.log 'iciiii' ne s'affiche pas: pastebin.com/H1eBwgMV


si vous ne voulez pas la réponse du serveur, supprimez le second gestionnaire.