preventDefault() avec Firefox :(

Marsh Posté le 29-05-2014 à 01:27:30

J'ai un code très simple via du javascript mais je n'obtient pas ce que je veux avec Firefox
Je suis assez débutant en Javascript donc je ne pense pas que cela soit bien méchant mais comme j'ai un peu tout essayé... Je viens demander de l'aide.

En fait, je veux simplement que le lien appelle via ajax une page php qui execute une requête en arrière plan mais que la page sur laquelle se trouve le visiteur ne change pas.
Sous IE et Safari ca fonctionne exactement comme je veux déjà mais pas sous Firefox. Sous Firefox, la navigateur va sur la page indiquée en href du lien.

Côté HTML généré par du PHP

Code :

include('../functions.js');
echo '<a id="fv-'.$row['id'].'" href="index.php?account=0&un='.$row['id'].'" onClick="fv2un('.$row['id'].')"><span class="blue fa fa-heart"></span></a>';

Et dans le fichier functions.js

Code :

function fv2un(id)
{
preventDefault();
var link = document.getElementById('fv-'+id).href;
$.ajax({ //Make the ajax request
url: link,
cache: false
}).done(function( html ) { //On complete run tooltip code
//Display tooltip code goes here, returned text is variable html
});

Merci pour votre temps

Message cité 1 fois
Message édité par clockover le 29-05-2014 à 01:27:58

Reply

Marsh Posté le 29-05-2014 à 01:27:30

Reply

Marsh Posté le 29-05-2014 à 20:28:49

clockover a écrit :

Code :

function fv2un(id)
{
preventDefault();
var link = document.getElementById('fv-'+id).href;
$.ajax({ //Make the ajax request
url: link,
cache: false
}).done(function( html ) { //On complete run tooltip code
//Display tooltip code goes here, returned text is variable html
});

Si tu veux annuler l'action de clic sur le lien, il faut renvoyer "false" dans l'attribut onclick, du genre:

Code :

include('../functions.js');
echo '<a id="fv-'.$row['id'].'"  href="index.php?account=0&un='.$row['id'].'" onClick="fv2un('.$row['id'].'); return false">
<span class="blue fa fa-heart"></span></a>';

Et vire le preventDefault() dans le code javascript, ça ne sert à rien.

Reply

Marsh Posté le 29-05-2014 à 21:28:17

Merci pour ce retour.
J'avais déjà essayé le return false.
Mais Firefox ne change pas de comportement, il continue d'aller sur la page en Href

Je viens de réessayer comme tu me l'a indiqué parce que moi je mettais avec un ; à la fin.

Code :

echo '<a id="fv-'.$row['id'].'" href="index.php?account=0&un='.$row['id'].'" onClick="fv2un('.$row['id'].'); return false;"><span class="blue fa fa-heart"></span></a>';

Mais pareil

Message édité par clockover le 29-05-2014 à 21:29:46

Reply

Marsh Posté le 29-05-2014 à 21:39:08

Arf non cool
En enlevant le preventDefault(); ca semble marcher.
Je vais tester avec d'autres naviguateurs!

Merci beaucoup tpierron

Reply

Marsh Posté le 30-05-2014 à 12:24:06

preventDefault c'est une méthode de l'objet event.

"preventDefault();" tout seul, ça fait planter le code au milieu de l'exécution et donc le "return false" n'est jamais atteint.

Pour être certain que le "return false;" se fasse quelque soit les erreurs d'exécution du code situé avant, on utilise des try-catch : try { monCodeVaPeutEtrePlanter(); } catch (err) {}; return false;

Reply

Marsh Posté le 02-06-2014 à 07:56:41

mais preventDefault est une méthode de Event
Donc normalement dans ton eventhandler (ta fonction quoi) tu dois recevoir en paramètre l'objet Event :

Code :

function fv2un(id,e)
{
e.preventDefault();
var link = document.getElementById('fv-'+id).href;
$.ajax({ //Make the ajax request
url: link,
cache: false
}).done(function( html ) { //On complete run tooltip code
//Display tooltip code goes here, returned text is variable html
});

Et le HTML :

Code :

onClick="fv2un('.$row['id'].', event);"

---------------
Blablaté par Harko

Reply

Marsh Posté le 08-07-2014 à 03:16:25

Merci Je suis pas encore super à l'aise avec Javascript. Je trouve ça plutôt un peu indigeste.

Reply

Marsh Posté le 08-07-2014 à 06:36:11

en même temps tu l'utilises un peu n'importe comment et dans ton code HTML aussi.

Essaye de bien séparer les choses et de ne laisser aucun code JS dans ton HTML (ie: les onclicks et autres biduleries, doivent être initiées dans le JS)

---------------
Blablaté par Harko

Reply

Marsh Posté le 08-07-2014 à 10:52:37

+1 pour le code javascript non intrusif dans le html. Il faut le mettre dans un fichier js appelé dans le <head>

Et sur l'événement onload du <body>, tu appelles la fonction d'initialisation du ou de tes scripts js.

Si y'a des événements à ajouter sur des balises (dans ton cas, des <a> ), tu fais un truc du genre :

Code :

if (window.attachEvent) { 
    // IE 
    MaBaliseAvecUnID.attachEvent("onclick", MonEventClick); 
} else { 
    // FF 
    MaBaliseAvecUnID.addEventListener("click", MonEventClick, false); 
}

Voilà l'idée. Ainsi, ta le html d'un côté pour la structure du document, le css d'un autre côté pour la mise en page/forme et le js de l'autre, pour améliorer l'ergonomie