Ne pas fermer une fenêtre DIV

Version imprimable

J’étudie l’ouverture d’une fenêtre à partir d’une balise (div)… L’exemple étant en pièce jointe.
Je l’ai obtenu à partir de cette adresse : Prototype Window.
Dans le code de l’exemple ci-dessous, j’aimerais installer un formulaire.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <body> <script>Application.addTitle('', 'search')</script> <div class="listing" style="display:none" id="search_codediv"> <xmp id="search" class="listing" > var win = new Window({className: "dialog", width:300, height:350, zIndex:10, resizable: true, title: "Texte du haut", showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff, draggable:true, wiredDrag: true}) win.getContent().innerHTML= "<div style='padding:10px'><form name='form' id='form' method='post' action='#'><input id='result' value='0' name='result' type='text'/><input type='submit' value='Envoyer'></form></div>" win.setStatusBar("Texte du bas"); win.showCenter(); </xmp> </div> </body>
Je n’arrive pas à comprendre que le fait d’appuyer sur le bouton (Envoyer) ça ferme la fenêtre !
Comment puis-je faire pour que la fenêtre ne se ferme pas ? (Je préfère la fermer indépendamment…)

Besoin d’un expert pour résoudre cette difficulté…
Comment empêcher la fermeture de la fenêtre, après avoir valider le bouton submit ?
Bien cordialement

19/10/2012, 16h21
SpaceFrog

un click sur un bouton submit => on lance la page action du form =>chargement de page ...
20/10/2012, 19h30
Mahefasoa

Bonsoir,

En effet, c'est un rechargement de la page et non pas un div qui se referme.

L'attribut

Code:

action = "#"

appel la page contenant le formulaire. En le modifiant en

Code:

action = "javascript:void(0);"

le submit ne lance pas l'envoi du formulaire mais est-ce l'objectif?

Cordialement,
Mahefasoa
24/10/2012, 20h17
BRUNO71

Bonjour,

Citation:

Mahefasoa :
le submit ne lance pas l'envoi du formulaire mais est-ce l'objectif?

L'objectif..!
Je voudrais réaliser un moteur de recherche dans cette fenêtre qui s'ouvre par dessus la page.
Etant réalisé à partir d'une balise (div) le but c'est que tant la recherche n'est pas terminée et bien la fenêtre reste ouverte...
Je voudrais (imiter) laura sur le site d'edf bleu ciel
Le fait de valider le formulaire la recherche fonctionne la fenêtre ne se feme pas...

Merci..
24/10/2012, 20h38
Mahefasoa

Bonsoir,

Au fait, ce que nous tentons de t'expliquer, c'est que ce n'est pas ton Div qui s'est "fermé" mais c'était la page qui s'est rechargée à cause du paramètre action de ton formulaire qui est #.
Et pour "empêcher" que la page ne se recharge pas, une des solutions est d'utiliser "javascript:void(0);" à la place de "#".

Je ne sais pas si tu as compris.

Maintenant, concernant l'objectif qui "imite" Laura, le DIV contenant Laura contient un formulaire et lorsqu'on "valide" (en cliquant sur un lien), cela lance un AJAX qui récupère les données et restitue les informations (sans rechargement, sans fermeture du DIV. Et d'ailleurs pour fermer, il faut cliquer sur ... fermer (X).

Une solution possible pour toi est la suivante:
1. l'attribut "action" de ton formulaire = "javascript:void(0);";
2. à l'événement on submit de ton formulaire, tu vas exécuter un script PHP en AJAX;
3. le résultat de cet AJAX sera affiché dans le DIV (ou pas, selon ton choix).

Cordialement,
Mahefasoa
25/10/2012, 08h24
SpaceFrog

Code:

onsubmit ="return false"

Bonjour,

Merci de votre aide...:lol:
Dans mon premier message, dans le script à la ligne 8 et dans la pièce jointe c'est un exemple.
Voici ma ligne complète et vos annotations.
Code:

1 2 3 "win.setStatusBar("<?php echo'<fieldset class=\"search\"><form style=\"margin-left:10px\" id=\"form1\" action=\"'; ?><?php echo htmlentities($_SERVER['PHP_SELF']); ?><?php echo'\" method=\"post\" enctype=\"application/x-www-form-urlencoded\"><fieldset class=\"search\"><input style=\"float:right\" name=\"requete\" type=\"text\" class=\"search_submit\" value=\"Recherche rapide\" onfocus=\"if (this.value==\'Recherche rapide\') this.value=\'\';\" onblur=\"if(this.value==\'\') this.value=\'Recherche rapide\';\" size=\"24\"><input style=\"float:left\" class=\"search_ok\" type=\"submit\" id=\"submit\" name=\"submit\" value=\"ok\" onclick=\"javascript:void(0)\" onsubmit=\"return false\"></form></fieldset>'; ?>");
Lorsque je valide (ok), la fenêtre se ferme.... hélas ! :cry:
J'ouvre à nouveau la fenêtre, le résultat de la recherche apparaît...:lol:
Donc, la recherche avec php : pas de soucis.....

Par contre je souhaiterais que la fenêtre reste apparente… :oops:

Merci

25/10/2012, 18h51
Mahefasoa

Bonsoir,

Ce n'est pas la fenêtre qui se ferme mais c'est ta page qui se recharge car tu as spécifié un truc dans l'attribut action de ton formulaire, un truc autre que "javascript:void(0);" ou sinon, il te manque l'événement onsubmit proposé par Spacefrog.

Cordialement,
Mahefasoa
25/10/2012, 20h03
BRUNO71

Bonsoir Mahefasoa,:oops:

Effectivement je viens de tester ave ce bout de code et ça fonctionne ....:ccool:

Code:

<div style='padding:10px'><form name='form' id='form' method='post' action='javascript:void(0);'><input id='result' value='0' name='result' type='text'/><input type='submit' value='Envoyer' onsubmit='return false'></form></div>

Sachant que j'utilise du php comme action :

Code:

<?php echo htmlentities($_SERVER['PHP_SELF']); ?>

Comment rajouter la ligne en supplément ?

Code:

javascript:void(0);

Merci...
25/10/2012, 20h12
SpaceFrog

Code:

<input type='submit' value='Envoyer' onsubmit='return false'>

:nono:
onsubmit c'est dans la balise form !!!

dans la balise input type submit il faut mettre

Code:

onclick="return false;"
26/10/2012, 10h09
BRUNO71

Bonjour SpaceFrog,

Je viens de rectifier ce que tu me dis...
Merci..

La page ne se recharge plus, effectivement, mais plus rien ne se passe..
Le moteur de recherche ne cherche plus...
Puisque (onsubmit="return false") alors il ne retourne rien...
Enfin je pense..
Je ne sait plus comment faire..

De plus, dans (action ="") je ne peux pas ajouter javascript:void(0) puisque j'ai du php et qui plus est avec (htmlentities)....

Que faire..
27/10/2012, 16h21
Mahefasoa

Bonjour,

Plusieurs alternatives existent:
1. garder ce qu'il y a dans action et en plus de celui qui est contenu dans onsubmit (donc avant return false), appeler une fonction JS qui va utiliser AJAX via lequel on traite le formulaire;
2. modifier le contenu de action, on met javascript:void(0); et dans l'événement submit, on appelle une fonction JS qui va traiter le formulaire et en fonction du résultat, on ajoute un return false ou on ferme la fenêtre ou on affiche le résultat...

etc.

Cordialement,
Mahefasoa
27/10/2012, 21h46
BRUNO71

Bonsoir,:ccool:

Merci beaucoup à vous pour votre aide…

Je viens de me procurer un livre (Ajax, jQuery et PHP) et je pense me tourner vers Ajax.
Je vais de ce pas lire le livre…

Cette affaire est résolu pour l'instant.... à suivre.

Bien cordialement

Bonjour,

C'est super alors, mais voici un petit coup de pouce dans ce cas.

1. Côté formulaire:
a. attribut action = "javascript:void(0);";
b. pas de onsubmit visible dans la balise formulaire.

Code:

<form style="margin-left:10px" id="form1" action="javascript:void(0);" method="post" enctype="application/x-www-form-urlencoded">

2. Côté JS:
a. mettre en place un contrôleur d'événement après la création du formulaire;
b. collecter les données et les passer à Ajax pour les traiter puis afficher un résultat ou faire une action via jQuery
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $("form#form1).submit(function(){ //quand on submit le formulaire dont l'ID est form1 var donnees = $(this).serialize(); //on collecte tous les champs du formulaire en associant nom de champ et valeur de champ sous la forme champ1=valeur1&champ2=valeur2 $.ajax({ url: "le fichier PHP qui va traiter les données", data: donnees, type: "POST", success: function(resultat){ //si l'ajax a bien réussi //faire une action selon le résultat //resultat est ce que le fichier PHP afficher en echo ou print }, error: function(){ //si erreur rencontrée alert('Erreur!'); } }); });
3. Côté PHP:
a. le fichier va recevoir les données envoyées par POST par l'Ajax;
b. il va faire le traitement nécessaire;
c. il doit afficher des echo ou print pour que cela puisse être "recueillis" par resultat de success: function(resultat){}

En espérant d'avoir pu te donner un modeste coup de pouce dans ta quête.

Bon dimanche!
Mahefasoa

28/10/2012, 10h25
BRUNO71

Bonjour,

Merci beaucoup, maintenant je suis sur la bonne voie…
A ce que je vois le décalage horaire a eu une influence sur toi… 4h36 humm…:D
Bon dimanche à toi aussi…

Cordialement
Bruno.