Codes js non trouvés

Version imprimable

23/10/2022, 17h46
Philcmoi

Codes js non trouvés

Pourquoi des scripts js et css présents dans le répertoire ne sont pas trouvés.

Citation:

Failed to load resource: the server responded with a status of 404 (Not Found)

Le code fonctionne en php sans wordpress mais pas avec cette derniere.
Merci.
23/10/2022, 19h06
laurentSc

Bonjour,
ça peut peut-être t'aider : https://woofrance.fr/comment-ajouter...son-wordpress/
24/10/2022, 06h38
Philcmoi

Comment faire pour un lien

Citation:

https://maxcdn.bootstrapcdn.com/boot...tstrap.min.css
24/10/2022, 16h20
laurentSc

J'ai lu vite fait https://wpformation.com/ajouter-code...ipt-wordpress/. Ca a l'air de répondre à ton besoin. Notamment le plugin https://wordpress.org/plugins/simple-embed-code/
Et c'est moins imbuvable que le code que tu montres ;)

Comment utiliser l'appel ajax en sachant que j'ai une page enregistreritineraire sur wordpress

Code:

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
29
30
 
$.ajax({
				  type: "POST",
				  url: "enregistreritineraire",  <- page php exixtante et appelée enregistreritineraire dans wordpresse.
				  cache : false,
				  data: {
					depart: villedepart,
				  	arrive: villearrive,
				  	participation : participation,
				  	datedepart : datedepart,
		  			datearrive : datearrive,
		  			latDepart : departMarkerlatlng.lat(),
  					longDepart : departMarkerlatlng.lng(),
  					latArrive : arriveMarkerlatlng.lat(),
  					longArrive : arriveMarkerlatlng.lng()
				  		},
				  dataType: "text",
				    "success": function (data, textStatus, jqXHR) {
				        console.log("L'appel Ajax est une réussite.");
// 				        alert("longArrive " + longArrive);
				        $("#resultat").html("<p>L ajout a ete effectuer avec succes ! </p><br><p>Vous allez etre rediriger sur la liste des activite");
				        setTimeout(function() {$('#resultat').fadeOut(2000,traitement_callback("hello world"));document.location.href = 'indexdate'}, 3000);
 
// 		     		    $('#resultat').fadeOut(2000,traitement_callback("hello world"));
				    },
				    "error": function (jqXHR, textStatus, errorThrown) {
				        console.log("L'appel Ajax est un échec.");
				        $("#resultat").html("<p>Erreur lors de la connexion...</p>");
				    }
				});

Le resultat est toujour alors qu'en php normal en appelant enregistreritineraire.php cela fonctionne ???:)

Citation:

$("#resultat").html("<p>Erreur lors de la connexion...</p>");

25/10/2022, 11h59
laurentSc

J'ai pris le temps de lire mais Google me donne https://capitainewp.io/formations/de...ordpress-ajax/

Merci pour le lien mais je n'envois pas de formulaire, j'ai juste

Code:

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
29
30
 
$.ajax({
				  method: "POST",
				  url: adminAjax,   <====> que mettre là ?
				  cache : false,
				  data: {
					depart: villedepart,
				  	arrive: villearrive,
				  	participation : participation,
				  	datedepart : datedepart,
		  			datearrive : datearrive,
		  			latDepart : departMarkerlatlng.lat(),
  					longDepart : departMarkerlatlng.lng(),
  					latArrive : arriveMarkerlatlng.lat(),
  					longArrive : arriveMarkerlatlng.lng()
				  		},
				  dataType: "text",
				    "success": function (data, textStatus, jqXHR) {
				        console.log("L'appel Ajax est une réussite.");
// 				        alert("longArrive " + longArrive);
				        $("#resultat").html("<p>L ajout a ete effectuer avec succes ! </p><br><p>Vous allez etre rediriger sur la liste des activite");
				        setTimeout(function() {$('#resultat').fadeOut(2000,traitement_callback("hello world"));document.location.href = 'indexdate'}, 3000);
 
// 		     		    $('#resultat').fadeOut(2000,traitement_callback("hello world"));
				    },
				    "error": function (jqXHR, textStatus, errorThrown) {
				        console.log("L'appel Ajax est un échec.");
				        $("#resultat").html("<p>Erreur lors de la connexion...</p>");
				    }
				});

D'apres https://stackoverflow.com/questions/...th-in-ajax-url
il faut dans functions

Code:

1
2
3
4
5
6
7
 
add_action('wp_ajax_enregistreritineraire', 'enregistreritineraire');
add_action('wp_ajax_nopriv_enregistreritineraire', 'enregistreritineraire');
 
function enregistreritineraire(){
// code à executé
}

Code:

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
29
30
31
 
$.ajax({
				  url: myAjax.ajaxurl,				  
				  method: "POST",
				  cache : false,
				  data: {
					action: 'enregistreritineraire',
					depart: villedepart,
				  	arrive: villearrive,
				  	participation : participation,
				  	datedepart : datedepart,
		  			datearrive : datearrive,
		  			latDepart : departMarkerlatlng.lat(),
  					longDepart : departMarkerlatlng.lng(),
  					latArrive : arriveMarkerlatlng.lat(),
  					longArrive : arriveMarkerlatlng.lng()
				  		},
				  dataType: "text",
				    "success": function (data, textStatus, jqXHR) {
				        console.log("L'appel Ajax est une réussite.");
// 				        alert("longArrive " + longArrive);
				        $("#resultat").html("<p>L ajout a ete effectuer avec succes ! </p><br><p>Vous allez etre rediriger sur la liste des activite");
				        setTimeout(function() {$('#resultat').fadeOut(2000,traitement_callback("hello world"));document.location.href = 'indexdate'}, 3000);
 
// 		     		    $('#resultat').fadeOut(2000,traitement_callback("hello world"));
				    },
				    "error": function (jqXHR, textStatus, errorThrown) {
				        console.log("L'appel Ajax est un échec.");
				        $("#resultat").html("<p>Erreur lors de la connexion...</p>");
				    }
				});

Là il n'y a pas de success ni fail

J'ai un peu modifier le code

Code:

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
29
30
31
32
33
34
35
36
37
38
39
40
 
if (villedepart&&villearrive&&participation&&datedepart&&datearrive) {
				var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
			$.ajax({
				  url: ajaxurl,				  
				  method: "POST",
				  cache : false,
				  data: {
					action: 'enregistreritineraire',
					depart: villedepart,
				  	arrive: villearrive,
				  	participation : participation,
				  	datedepart : datedepart,
		  			datearrive : datearrive,
		  			latDepart : departMarkerlatlng.lat(),
  					longDepart : departMarkerlatlng.lng(),
  					latArrive : arriveMarkerlatlng.lat(),
  					longArrive : arriveMarkerlatlng.lng()
				  		},
				  dataType: "text",
				    "success": function (data, textStatus, jqXHR) {
				        console.log("L'appel Ajax est une réussite.");
// 				        alert("longArrive " + longArrive);
				        $("#resultat").html("<p>L ajout a ete effectuer avec succes ! </p><br><p>Vous allez etre rediriger sur la liste des activite");
				        setTimeout(function() {$('#resultat').fadeOut(2000,traitement_callback("hello world"));document.location.href = 'indexdate'}, 3000);
 
// 		     		    $('#resultat').fadeOut(2000,traitement_callback("hello world"));
				    },
				    "error": function (jqXHR, textStatus, errorThrown) {
				        console.log("L'appel Ajax est un échec.");
				        $("#resultat").html("<p>Erreur lors de la connexion...</p>");
				    }
				});
 
 
 
		    }
 
			else {alert("Veuilliez saisir tout les champs");}
		}

Et l'appel du fichier dans functions.php

Code:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
add_action('wp_ajax_enregistreritineraire', 'enregistreritineraire');
add_action('wp_ajax_nopriv_enregistreritineraire', 'enregistreritineraire');
 
function enregistreritineraire(){
//     echo "fail";
    if(isset($_POST["depart"], $_POST["arrive"],$_POST["participation"],$_POST["datedepart"], $_POST["datearrive"], $_POST["latDepart"], $_POST["longDepart"] , $_POST["latDepart"], $_POST["longArrive"]))
    {
 
        $lieuDepart = $_POST["depart"];
        $lieuArrive = $_POST['arrive'];
        $participation = $_POST['participation'];
        //     $lieuDepart = "Paris";
        //     $lieuArrive = "Bordeaux";
        //     $participation = "50.0";
        $datedepart = $_POST['datedepart'];
        $datearrive = $_POST['datearrive'];
        $latDepart = $_POST["latDepart"];
        $longDepart = $_POST["longDepart"];
        $latArrive = $_POST["latArrive"];
        $longArrive = $_POST["longArrive"];
 
        try {
 
            $PDO = new PDO('mysql:host=localhost;dbname=philippe','root','');
            $PDO->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_WARNING);
            $PDO->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE,PDO::FETCH_OBJ);
 
            $sql = "INSERT INTO trajet (depart, arrive, latDepart, longDepart, latArrive, longArrive) VALUES (:depart,:arrive,:latDepart, :longDepart, :latArrive, :longArrive)";
 
            //     $sql = "INSERT INTO trajet (depart, arrive) VALUES (:depart,:arrive)";
 
 
            $req = $PDO->prepare($sql);
 
            $req->execute(array(
 
 
                "depart" => $lieuDepart,
 
                "arrive" => $lieuArrive,
 
                "latDepart" => $latDepart,
 
                "longDepart" => $longDepart,
 
                "latArrive" => $latArrive,
 
                "longArrive" => $longArrive
 
 
            ));
 
            $PDO = new PDO('mysql:host=localhost;dbname=philippe','root','');
            $PDO->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_WARNING);
            $PDO->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE,PDO::FETCH_OBJ);
 
            $sql = "INSERT INTO orders (conducteur, lieudepart, lieuarrive, participation, datedepart, datearrive) VALUES (:conducteur,:lieudepart,:lieuarrive,:participation,:datedepart,:datearrive)";
 
            // $sql = "INSERT INTO orders (conducteur, lieudepart, lieuarrive, participation) VALUES (:conducteur,:lieudepart,:lieuarrive,:participation)";
 
            $req = $PDO->prepare($sql);
 
 
            $req->execute(array(
 
                "conducteur" => "anatta",
 
                "lieudepart" => $lieuDepart,
 
                "lieuarrive" => $lieuArrive,
 
                "participation" => $participation,
 
                "datedepart" => $datedepart,
 
                "datearrive" => $datearrive
 
            ));
 
        }
        catch(PDOException $e){
            die("Erreur d'insertion :".$e->getMessage());
        }
    }
    else {throw new Exception('Erreur ');
    echo "ERREUR";}
}

Bonjour. J'ai l'arborescence suivant
javascripts/
jquery.js

J'essail de charger jquery de cette maniere.
Code:

1 2 <script type="text/javascript" src="javascripts/jquery.js"></script>
MAIS LA CONSOLE indique

Citation:

Failed to load resource: the server responded with a status of 404 (Not Found)

Avez vous une idée ? Merci
Code:

1 2 wp_register_script('bootstrap',THEME_ROOT.'/contact-form-fr/javascripts/jquery.js');
ou bien*
Code:

1 2 <script type="text/javascript" src="get_template_directory_uri() ./javascripts/jquery.js"></script>
ou dans functions
Code:

1 2 wp_register_script('bootstrap',get_template_directory_uri() ./javascripts/jquery.js');

30/10/2022, 11h26
laurentSc

Avec un plugin, peut-être (pas testé) : https://wordpress.org/plugins/custom-css-js/
30/10/2022, 13h07
Philcmoi

Sans plugin svp8O
31/10/2022, 11h31
laurentSc

Sur mon site de test, le thème est OceanWP qui embarque jQuery (c'est rare pour un thème)
01/11/2022, 08h39
Philcmoi

Merci c'est sympa. :lol:
01/11/2022, 08h57
NJNDEV

JQUERY fait partie de manière native de WORDPRESS

JQUERY fait partie de manière native de WORDPRESS, depuis fort longtemps.
Il y a parfois un décalage de version avec la dernière version de JQUERY.
Son utilisation est "assez simple" pour les habitués de JS...
Un article anglais explique assez bien les procédures d'appel en particulier avec le raccourci "$".
https://wpengine.com/resources/jquery-wordpress/

Citation:

Envoyé par NJNDEV

JQUERY fait partie de manière native de WORDPRESS, depuis fort longtemps.

Tu me l'apprends ;)

Sur mon site de test, j'ai un thème enfant.
J'ai essayé de suivre les instructions de ton tuto en anglais.

Je te dis ce que j'ai fait, et merci de me dire si c'est correct.

1- Dans le répertoire du thème enfant (oceanwp-child), j'ai créé un sous-répertoire js.
2- Dans le répertoire js, j'ai mis un fichier script.js :
Code:

1 2 3 4 5 6 $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery is still working!"); }); });
3- Dans functions.php, j'ai ajouté
Code:

1 2 3 4 5 6 /* Enter Compatibility Mode */ function my_theme_scripts() { wp_enqueue_script( 'my-great-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Voici mon code ajax.

Code:

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
29
30
31
 
$.ajax({
				  url: ajaxurl,				  
				  method: "POST",
				  cache : false,
				  data: {
					action: 'enregistreritineraire',
					depart: villedepart,
				  	arrive: villearrive,
				  	participation : participation,
				  	datedepart : datedepart,
		  			datearrive : datearrive,
		  			latDepart : departMarkerlatlng.lat(),
  					longDepart : departMarkerlatlng.lng(),
  					latArrive : arriveMarkerlatlng.lat(),
  					longArrive : arriveMarkerlatlng.lng()
				  		},
				  dataType: "text",
				    "success": function (data, textStatus, jqXHR) {
				        console.log("L'appel Ajax est une réussite.");
// 				        alert("longArrive " + longArrive);
				        $("#resultat").html("<p>L ajout a ete effectuer avec succes ! </p><br><p>Vous allez etre rediriger sur la liste des activite");
				        setTimeout(function() {$('#resultat').fadeOut(2000,traitement_callback("hello world"));document.location.href = 'indexdate'}, 3000);
 
// 		     		    $('#resultat').fadeOut(2000,traitement_callback("hello world"));
				    },
				    "error": function (jqXHR, textStatus, errorThrown) {
				        console.log("L'appel Ajax est un échec.");
				        $("#resultat").html("<p>Erreur lors de la connexion...</p>");
				    }
				});

Et dans functions.php

Code:

1
2
3
4
5
 
include get_template_directory() . '/includes/enregistreritineraire.php';
 
add_action( 'wp_ajax_enregistreritineraire', 'enregistreritineraire' );
add_action('wp_ajax_nopriv_enregistreritineraire', 'enregistreritineraire');

Il n'y a aucune réponse. :D alors quand php normale l'enregistrement fonctionne :lol:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
wp_register_script('bootstrap','https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js');
    wp_register_script('bootstrap','https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js');
    wp_register_script('bootstrap','http://openlayers.org/api/OpenLayers.js');
    wp_register_script('bootstrap','https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js');
    wp_register_script('bootstrap','https://getbootstrap.com/docs/5.2/examples/sign-in/');
    wp_register_script('bootstrap','https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js');
    wp_register_script('bootstrap','http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    wp_register_script('bootstrap',get_template_directory_uri().'/i18n/datepicker-fr.js');
    wp_register_script('bootstrap',get_template_directory_uri().'/javascripts/jquery.simple-dtpicker.js');
    wp_register_script('bootstrap',get_template_directory_uri().'/javascripts/jquery.googlemap.js');
    wp_register_script('bootstrap',get_template_directory_uri().'/javascripts/jquery.js');
    wp_register_script('bootstrap',get_template_directory_uri().'/jquery.googlemap.js');
    wp_register_script('bootstrap',get_template_directory_uri().'/datepicker-fr.js');
    wp_register_script('bootstrap',get_template_directory_uri().'/jquery.simple-dtpicker.js');
 
    wp_register_script('bootstrap','https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js');
    wp_register_script('bootstrap','https://getbootstrap.com/docs/5.2/examples/sign-in/');
    wp_register_script('bootstrap','"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"');
    wp_register_script('bootstrap','https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js');
 
wp_enqueue_script('bootstrap');

Mes appels

Ton code me semble correct, mais j'essaierai celui-ci. Un point important si tu as des variables à passer est wp_localize_script...

dans functions.php appel de mes scripts:
Code:

1 2 3 4 5 6 function asaScripts() { wp_enqueue_script( 'asaScripts', get_stylesheet_directory_uri() . '/scripts/ASAscript.js', array( 'jquery' ), '1.0', true );// array( 'jquery' signale à WP la necessité de charger jQuery pour ce script!! // Envoyer une variable de PHP à JS proprement wp_localize_script( 'asaScripts', 'ajaxurl', admin_url( 'admin-ajax.php' ) ); } add_action( 'wp_enqueue_scripts', 'asaScripts' );
Le script lui même:
Code:

1 2 3 4 5 6 7 8 9 / initialisation des variables var username=""; ..... //fin initialisation des variables des parcelles jQuery(document).ready(function($) { if (document.getElementById(...... ...
Par la suite pour le débogage utiliser la console et le débogueur du navigateur, avec points d'arrêts.... comme d'habitude.
Espérant t'avoir été utile.

Merci
Mon code donne ça.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<meta charset="utf-8">
		<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/i18n/datepicker-fr.js"></script>		
		<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/javascripts/jquery.js"></script>		
		<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/javascripts/jquery.simple-dtpicker.js"></script>
		<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/javascripts/jquery.googlemap.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  		<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
		<script src="https://maps.googleapis.com/maps/api/js?key=&libraries=geometry&sensor=false"></script>
		<script src="http://openlayers.org/api/OpenLayers.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
		<!--Requirement jQuery-->
	    <!--Load Script and Stylesheet -->
	    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
		<link type="text/css" href="get_template_directory_uri()./javascripts/jquery.simple-dtpicker.css" rel="stylesheet" />

Je dois laiser les ces liens scr sinon la page de la carte ne fonctionne pas.
Le query

Code:

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
29
30
31
32
33
34
35
36
 
jQuery('#enregistreritineraire').click(function () {				  
$.ajax({
				  url: ajaxurl,				  
				  method: "POST",
				  cache : false,
				  data: {
					action: 'enregistreritineraire',
					depart: villedepart,
				  	arrive: villearrive,
				  	participation : participation,
				  	datedepart : datedepart,
		  			datearrive : datearrive,
		  			latDepart : departMarkerlatlng.lat(),
  					longDepart : departMarkerlatlng.lng(),
  					latArrive : arriveMarkerlatlng.lat(),
  					longArrive : arriveMarkerlatlng.lng()
				  		},
				  dataType: "text",
				    "success": function (data, textStatus, jqXHR) {
				        console.log("L'appel Ajax est une réussite.");
// 				        alert("longArrive " + longArrive);
				        $("#resultat").html("<p>L ajout a ete effectuer avec succes ! </p><br><p>Vous allez etre rediriger sur la liste des activite");
				        setTimeout(function() {$('#resultat').fadeOut(2000,traitement_callback("hello world"));document.location.href = 'indexdate'}, 3000);
 
// 		     		    $('#resultat').fadeOut(2000,traitement_callback("hello world"));
				    },
				    "error": function (jqXHR, textStatus, errorThrown) {
				        console.log("L'appel Ajax est un échec.");
				        $("#resultat").html("<p>Erreur lors de la connexion...</p>");
				    }
				});
 
 
 
		    }

functions

Code:

1
2
3
4
 
ect..
include get_template_directory() . '/includes/enregistreritineraire.php';
ect..

Il n'y a aucun message.
Une idée?

Hummmm

Bonjour, de prime abord, dans ce code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/i18n/datepicker-fr.js"></script> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/javascripts/jquery.js"></script> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/javascripts/jquery.simple-dtpicker.js"></script> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/javascripts/jquery.googlemap.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=&libraries=geometry&sensor=false"></script> <script src="http://openlayers.org/api/OpenLayers.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> <link type="text/css" href="get_template_directory_uri()./javascripts/jquery.simple-dtpicker.css" rel="stylesheet" />
l'indispensable pour afficher une carte me semble être:
<script src="http://openlayers.org/api/OpenLayers.js"></script> sans oublier de charger le css correspondant.
En ne regardant que cette partie du code tu as 2 appels à la même librairie:
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" et "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
Personnellement je commencerai par une carte simple à laquelle j'intégrerai progressivement tous les scripts, pour voir ce qui fonctionne et ce qui cloche.
Quand tu lances tes programmes utilise F12, pour voir ceux qui se chargent ou non.
Bon Courage.
C'est besogneux, mais je ne sais pas faire mieux...

Merci les imports css et Js sont bien faits.
Mais toujours le même problème avec l'AJAX.

Code:

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
29
30
31
 
jQuery.ajax({
				  url: ajaxurl,				  
				  method: "POST",
				  cache : false,
				  data: {
					action: 'enregistreritineraire',
					depart: villedepart,
				  	arrive: villearrive,
				  	participation : participation,
				  	datedepart : datedepart,
		  			datearrive : datearrive,
		  			latDepart : departMarkerlatlng.lat(),
  					longDepart : departMarkerlatlng.lng(),
  					latArrive : arriveMarkerlatlng.lat(),
  					longArrive : arriveMarkerlatlng.lng()
				  		},
				  dataType: "text",
				    "success": function (data, textStatus, jqXHR) {
				        console.log("L'appel Ajax est une réussite.");
// 				        alert("longArrive " + longArrive);
				        $("#resultat").html("<p>L ajout a ete effectuer avec succes ! </p><br><p>Vous allez etre rediriger sur la liste des activite");
				        setTimeout(function() {$('#resultat').fadeOut(2000,traitement_callback("hello world"));document.location.href = 'indexdate'}, 3000);
 
// 		     		    $('#resultat').fadeOut(2000,traitement_callback("hello world"));
				    },
				    "error": function (jqXHR, textStatus, errorThrown) {
				        console.log("L'appel Ajax est un échec.");
				        $("#resultat").html("<p>Erreur lors de la connexion...</p>");
				    }
				});

et enregistreritineraire.php

Code:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
<?php
/* 
 * Template Name: enregistreritineraire
 * */
 
function enregistreritineraire() {
 
if(isset($_POST["depart"], $_POST["arrive"],$_POST["participation"],$_POST["datedepart"], $_POST["datearrive"], $_POST["latDepart"], $_POST["longDepart"] , $_POST["latDepart"], $_POST["longArrive"]))
{ 
 
$lieuDepart = $_POST["depart"];
$lieuArrive = $_POST['arrive'];
$participation = $_POST['participation'];
//     $lieuDepart = "Paris";
//     $lieuArrive = "Bordeaux";
//     $participation = "50.0";
$datedepart = $_POST['datedepart'];
$datearrive = $_POST['datearrive'];
$latDepart = $_POST["latDepart"];
$longDepart = $_POST["longDepart"];
$latArrive = $_POST["latArrive"];
$longArrive = $_POST["longArrive"];
 
try {
 
    $PDO = new PDO()  ==> ect;
    $PDO->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_WARNING);
    $PDO->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE,PDO::FETCH_OBJ);
 
    $sql = "INSERT INTO trajet (depart, arrive, latDepart, longDepart, latArrive, longArrive) VALUES (:depart,:arrive,:latDepart, :longDepart, :latArrive, :longArrive)";
 
//     $sql = "INSERT INTO trajet (depart, arrive) VALUES (:depart,:arrive)";
 
 
    $req = $PDO->prepare($sql);
 
    $req->execute(array(
 
 
        "depart" => $lieuDepart,
 
        "arrive" => $lieuArrive,
 
         "latDepart" => $latDepart,
 
        "longDepart" => $longDepart,
 
        "latArrive" => $latArrive,
 
        "longArrive" => $longArrive
 
 
    ));
 
    $PDO = new PDO('mysql:host=localhost;dbname=philippe','root','');
    $PDO->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_WARNING);
    $PDO->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE,PDO::FETCH_OBJ);
 
$sql = "INSERT INTO orders (conducteur, lieudepart, lieuarrive, participation, datedepart, datearrive) VALUES (:conducteur,:lieudepart,:lieuarrive,:participation,:datedepart,:datearrive)";
 
// $sql = "INSERT INTO orders (conducteur, lieudepart, lieuarrive, participation) VALUES (:conducteur,:lieudepart,:lieuarrive,:participation)";
 
$req = $PDO->prepare($sql);
 
 
    $req->execute(array(
 
        "conducteur" => "anatta",
 
        "lieudepart" => $lieuDepart,
 
        "lieuarrive" => $lieuArrive,
 
        "participation" => $participation,
 
        "datedepart" => $datedepart,
 
        "datearrive" => $datearrive
 
    ));
 
}
catch(PDOException $e){
    die("Erreur d'insertion :".$e->getMessage());
}
}
}
// else {throw new Exception('Erreur ');
// echo "ERREUR";}

Fichier functions

Code:

1
2
3
4
5
6
 
iinclude get_template_directory() . 'enregistreritineraire.php';
wp_localize_script( 'bootstrap', 'ajaxurl', admin_url( 'admin-ajax.php' ) );
 
add_action( 'wp_ajax_enregistreritineraire', 'enregistreritineraire' );
add_action('wp_ajax_nopriv_enregistreritineraire', 'enregistreritineraire');

Les champs s'affichent (dates ect..) Mais il n'y a pas de réponse AJAX.

06/11/2022, 06h21
Toufik83
Bonjour,

Je vois pas mal de problèmes dans votre code PHP :
- Vous utilisez deux instances PDO, alors qu'une seule est largement suffisante.
- Si la ligne $PDO = new PDO() ==> ect; n'est pas une erreur de copier/coller, normalement une erreur de syntaxe se déclenche.
Vous pouvez aussi suivre l'appel Ajax dans l'outil de développement du navigateur sous l'onglet XHR pour voir s'il se déclenche correctement ou pas.
06/11/2022, 09h43
Philcmoi

merci

Citation:

$PDO = new PDO() ==> ect;

n'est pas une erreur mais un commentaire.
De plus le enregistreritineraire.php fonctionne en dehors de wordpress en php normale.
Là ce que je n'arrive pas à faire l'appel AJAX sous WORDPRESS.
merci:D

Piste?

Bonjour,
A priori ton code PHP /SQL fonctionne si les champs s'affichent(et s'initialisent).

Dans functions.php tu dis avoir
Code:

1 2 3 4 5 iinclude get_template_directory() . 'enregistreritineraire.php'; wp_localize_script( 'bootstrap', 'ajaxurl', admin_url( 'admin-ajax.php' ) ); add_action( 'wp_ajax_enregistreritineraire', 'enregistreritineraire' ); add_action('wp_ajax_nopriv_enregistreritineraire', 'enregistreritineraire');
Code:

iinclude

doit être une coquille de couper/coller

Tu annonces wp_localize_script pour 'bootstrap', pourrais-tu montrer ce fichier de fonction / scripts?

J'ai eu le même genre de problèmes que toi " code qui fonctionne en HTML classique" et "rien dans Wordpress" en général les 2 obstacles sont :

les chemins des fichiers WP ayant "sa gestion personnelle", surtout avec un thème enfant.
l'utilisation du $ pour les fonctions jquery.

Par ailleurs Toufik83 te redit de suivre tes appels via "F12",

Citation:

Vous pouvez aussi suivre l'appel Ajax dans l'outil de développement du navigateur sous l'onglet XHR pour voir si elle se déclenche correctement ou pas.

, ce qui je pense devrait te donner le niveau du blocage.

De même tu dis

Citation:

$PDO = new PDO() ==> ect; n'est pas une erreur mais un commentaire.

mais ton code
Code:

1 2 3 try { $PDO = new PDO() ==> ect; $PDO->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_WARNING);
ne ressemble pas à un commentaire.

Bon Courage.

Merci voici functions.php

Code:

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
 
function register_assets() {
 
    wp_register_script('bootstrap','https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js');
    wp_register_script('bootstrap','https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js');
    wp_register_script('bootstrap','http://openlayers.org/api/OpenLayers.js');
    wp_register_script('bootstrap','https://getbootstrap.com/docs/5.2/examples/sign-in/');
    wp_register_script('bootstrap','https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js');
    wp_register_script('bootstrap','http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    wp_register_script('bootstrap',get_template_directory_uri().'/i18n/datepicker-fr.js');
    wp_register_script('bootstrap',get_template_directory_uri().'/javascripts/jquery.simple-dtpicker.js');
    wp_register_script('bootstrap',get_template_directory_uri().'/javascripts/jquery.googlemap.js');
    wp_register_script('bootstrap',get_template_directory_uri().'/javascripts/jquery.js');
    wp_register_script('bootstrap',get_template_directory_uri().'/jquery.googlemap.js');
    wp_register_script('bootstrap',get_template_directory_uri().'/datepicker-fr.js');
    wp_register_script('bootstrap',get_template_directory_uri().'/jquery.simple-dtpicker.js');
 
    wp_register_script('bootstrap','https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js');
    wp_register_script('bootstrap','https://getbootstrap.com/docs/5.2/examples/sign-in/');
    wp_register_script('bootstrap','https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js');
   }
add_action('wp_enqueue_scripts', 'register_assets');
 
include get_template_directory() . '/enregistreritineraire.php';
wp_localize_script( 'bootstrap', 'ajaxurl', admin_url( 'admin-ajax.php' ) );
 
add_action( 'wp_ajax_enregistreritineraire', 'enregistreritineraire' );
add_action('wp_ajax_nopriv_enregistreritineraire', 'enregistreritineraire');

Voici la console il y a une erreur là

Citation:

datepicker-fr.js:13 Uncaught ReferenceError: jQuery is not defined
at datepicker-fr.js:13:12
at datepicker-fr.js:15:2

06/11/2022, 13h16
Philcmoi

Merci C'est réglé.
En regardant la console j'obtenais

Citation:

Uncaught ReferenceError: ajaxurl is not defined

j'ai mis tout simplement

Citation:

ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ) ?>';

Et ça marche.
Merci beaucoup à tous.

Code:

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
29
30
31
32
33
34
35
36
37
 
ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ) ?>';
 
				jQuery.ajax({
				  url: ajaxurl,				  
				  method: "POST",
				  cache : false,
				  data: {
					action: 'enregistreritineraire',
					depart: villedepart,
				  	arrive: villearrive,
				  	participation : participation,
				  	datedepart : datedepart,
		  			datearrive : datearrive,
		  			latDepart : departMarkerlatlng.lat(),
  					longDepart : departMarkerlatlng.lng(),
  					latArrive : arriveMarkerlatlng.lat(),
  					longArrive : arriveMarkerlatlng.lng()
				  		},
				  dataType: "text",
				    "success": function (data, textStatus, jqXHR) {
				        console.log("L'appel Ajax est une réussite.");
// 				        alert("longArrive " + longArrive);
				        $("#resultat").html("<p>L ajout a ete effectuer avec succes ! </p><br><p>Vous allez etre rediriger sur la liste des activite");
				        setTimeout(function() {$('#resultat').fadeOut(2000,traitement_callback("hello world"));document.location.href = 'indexdate'}, 3000);
 
// 		     		    $('#resultat').fadeOut(2000,traitement_callback("hello world"));
				    },
				    "error": function (jqXHR, textStatus, errorThrown) {
				        console.log("L'appel Ajax est un échec.");
				        $("#resultat").html("<p>Erreur lors de la connexion...</p>");
				    }
				});
 
 
 
		    }

06/11/2022, 14h53
Toufik83

Juste une remarque de plus, dataType: "text" n'est pas nécessaire, parce que le type de retour par défaut d'ajax est text ou html.

vous pouvez donc supprimer cette ligne.

Les callback "success" et "error" seront supprimés des version récentes de jQuery, il faudrait les remplacer par done et fail, voir la documentation.
08/11/2022, 06h47
Philcmoi

Hello je suis coincer, j'ai tellement l'habitude de coller en dur mes fichiers template wordpress que je n'utilisse pas les outils cms graphique.
QUESTION qu'en pensez vous ?
Peut on ajouter aux pages crées par élémentor par include nos template fait en dur en php ?
09/11/2022, 08h25
NJNDEV

Un exemple

Bonjour, mon site
https://canaldeventavonsttropez.fr/ réalisé avec WORDPRESS + ELEMENTOR, comprend quelques pages avec un template "classique" appelé dans le thème enfant:
exemple:
https://canaldeventavonsttropez.fr/r...lan-du-reseau/
Le modèle de la page est un template "classique", appelé par l'éditeur WP intégré.
La cohabitation est sans problèmes autre qu'esthétiques....
09/11/2022, 17h16
Philcmoi
Merci comment connectez vous les templates PHP avec elementor.
Par un appel d'include ?
Code:

1 2 include fichierTemplate.php
???
09/11/2022, 20h54
NJNDEV

4 pièce(s) jointe(s)

Pas d'Include- Modèle de Page

Tu crées ton modèle de page : code HTML classique mais inclus dans un fichier PHP, avec un en-tête spécifique: Image 1.Mis dans le dossier de ton thème enfant.
Ce fichier détermine le nom de ton modèle: ici ASA. Image 2
Dans wordpress, tu ajoutes une nouvelle page. Le modèle par défaut est "défaut" Image 3.
Dans la liste déroulante tu sélectionnes ton template : ici ASA Image 4.
C'est fini.
Tu peux la visualiser en ligne, la modifier via Elementor, enfin ajouter des éléments avant ou après ta page modèle.
Désolé pour la mise en page des images, mais ça me semble assez clair.
Bon courage.
PS:
Une fois ton site fonctionnel, tu peux compacter, minifier ton fichier template, afin d'optimiser la vitesse de ton site.

J'ai le template suivant.

Code:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
<?php
/* 
 * Template Name: index
 * 
 * */
 
session_start();
get_header();
 
 
if (!empty($_COOKIE["token"]) AND !empty($_COOKIE["email"])) {
 
    $mysqli = new mysqli('127.0.0.1', 'root', '', 'philippe');
 
    $token = htmlspecialchars($_COOKIE["token"]);
 
    $email = htmlspecialchars($_COOKIE["email"]);
 
    $sql = "SELECT email, password, token FROM membre WHERE email = '".$email."' and token = '".$token."' ";
 
    if (!$result = $mysqli->query($sql)) {
 
 
    }
 
    if ($result->num_rows === 0) {
 
 
    }
 
    if ($data = mysqli_fetch_array($result))
    { $pass = $data['password'];
 
    //     $_SESSION['logged']='bienvenue';
 
    mysqli_close($mysqli);
 
    $result->close();
 
    }
}
 
?>
 
 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.101.0">
    <title>Signin Template · Bootstrap v5.2</title>
 
    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/sign-in/">
 
 
 
 
 
<link href="<?php echo get_template_directory_uri(); ?>/javascripts/bootstrap.min.css" rel="stylesheet">
 
    <style>
 
    </style>
 
 
    <!-- Custom styles for this template -->
    <link href="<?php echo get_template_directory_uri(); ?>/signin.css" rel="stylesheet">
  </head>
  <body class="text-center">
    <?php echo get_permalink();?>
<main class="form-signin w-100 m-auto">
  <form class="form-signin" action="<?php get_permalink()?>/wordpress/traitement" method="post" >
    <img class="mb-4" src="design/bootstrap-logo.svg" alt="logo" width="72" height="57">
    <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
 
    <div class="form-floating">
  <input type="email" name="email" id="floatingInput" class="form-control" placeholder="Entrer votre email" autofocus>
<!--       <label for="floatingInput">Email address</label> -->
    </div>
    <div class="form-floating">
  <input type="password" name="password" id="floatingPassword" class="form-control" placeholder="Password" >
<!--       <label for="floatingPassword">Password</label> -->
    </div>
</br>
<?php 
 
  if (isset($_GET['error'])) {
  $error=htmlspecialchars($_GET['error']);
 
switch ($error) {
    case 1:
 
        echo " Donnees incorrectes ";
        break;
 
    case 2:
 
        echo " Donnees incorrectes";
        break;
 
    case 3:
        echo "vous avez ete deconnecte";
        break;
 
    case 4:
        echo "New record created successfully";
        break;
              }
 
  ;}
?>
 
 
    <button class="w-100 btn btn-lg btn-primary" type="submit">S'identifier</button>
    </br>
    <div class="checkbox mb-3">
      <label>
        <input type="checkbox" name="rememberme" > Se souvenir de moi
      </label>
      </br> 
    </div>  
    <?php echo get_the_permalink()?>
    <a href="<?php get_the_permalink()?>enregistrement" title="S enregistrer"  rel="noopener noreferrer">S enregistrer</a>
	<?php echo get_the_permalink()?>
        <p class="mt-5 mb-3 text-muted">&copy; 2017–2022</p>
 
 
  </form>
</main>
<?php 
get_footer();
?>

Puis je utiliser elementor avec ce template.
A priori non, la page ne peut pas être prés visualiser.
Merci

10/11/2022, 20h07
NJNDEV

1 pièce(s) jointe(s)

Pb avec ELEMENTOR

Bonjour,
Je réponds ici, mais je pense qu'il vaudrait mieux créer une nouvelle discussion.
Quand tu appelles ta page dans ELEMENTOR, tu dois avoir un message disant:

Pièce jointe 628750

Il te suffit alors de faire ce qui est demandé, à savoir
rajouter dans ton code php.

Citation:

</head>
<?php the_content(); ?>

J'ai testé, ça fonctionne.
A une différence quand même appeler ton template

Citation:

index.php

, risque d'être une source de problèmes

Code:

index

, faisant possiblement partie des mots réservés.

Mais tout cela fait partie des "joies de la programmation", à toi de creuser et chercher un peu.
Cordialement.