web-dev-qa-db-fra.com

Ne peut pas déclencher un AJAX fonctionner avec un bouton d'envoi dans le tableau de bord

J'écris un plugin WordPress. Mon plugin contient des formulaires qui publient des données sur d'autres pages générées par mon plugin dans le tableau de bord WordPress. J'essaie de créer une fonction AJAX qui est déclenchée lorsque le formulaire est soumis. Mon AJAX fonctionne très bien. Juste pour le tester, j'ai déclenché l'événement lorsque je clique sur l'en-tête de mon plugin, et tout fonctionne parfaitement. Cependant, si j'essaie de déclencher l'événement lorsque je clique sur un bouton d'envoi (n'importe quel type d'entrée = "submit"), cela ne fonctionne pas. JavaScript s'exécute correctement, mais la fonction PHP ne parvient pas à s'exécuter.

Voici mon JavaScript:

$('.button').on('click', function (e) {
    var url = testingajax.ajaxurl;

    var data = {
        'action': 'testing_ajax_wtf',
    }

    $.post(url, data, function (response) {
        console.log(response);
    });
});

La fonction PHP ne renvoie qu'une chaîne (à des fins de test).

Cela fonctionne très bien si je change la première ligne en:

$('.my-plugin-header').on('click', function (e) {

Mais si j'essaie de le déclencher lorsqu'un clic sur le bouton d'envoi ou lorsqu'un formulaire est soumis, le JavaScript s'exécute, mais il ne parvient pas à trouver la fonction PHP.

Une idée de ce qui se passe ici? WordPress vous empêche-t-il en quelque sorte d’exécuter AJAX lorsque vous soumettez des formulaires dans le tableau de bord?

ajaxformsdashboard
1
Morgan Kay

Supprimez simplement type="submit" de votre bouton et laissez votre appel jQuery ajax déclenché en premier. Une fois que vous avez reçu la réponse, vous pouvez également soumettre votre formulaire. Quelque chose comme ça;

function your_action_javascript() { 
?>
<script type="text/javascript" >
    jQuery(document).ready(function($) {

       $('.button').on('click', function () {

            var data = {
                'action': 'your_action'
            };

            // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
            $.post(ajaxurl, data, function(response) {

                // getting response from your ajax callback function
                alert('Got this from the server: ' + response);

                // submitting form after getting response
                $('#your_form_id').submit();
            });

        });

    });
</script> 
<?php
}
// Hook this function to admin footer
add_action( 'admin_footer', 'your_action_javascript' );
0
Mohammad Mursaleen