Ne pas fermer une fenêtre DIV

**BRUNO71** · 19/10/2012, 15h58

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 19/10/2012, 16h21

un click sur un bouton submit => on lance la page action du form =>chargement de page ...

**Mahefasoa** · 20/10/2012, 19h30

Bonsoir,

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

L'attribut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

action = "#"

appel la page contenant le formulaire. En le modifiant en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

action = "javascript:void(0);"

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

Cordialement,
Mahefasoa

**BRUNO71** · 24/10/2012, 20h17

Bonjour,

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..

**Mahefasoa** · 24/10/2012, 20h38

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

**SpaceFrog** · 25/10/2012, 08h24

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onsubmit ="return false"

**BRUNO71** · 25/10/2012, 18h36

Bonjour,

Merci de votre aide...

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

J'ouvre à nouveau la fenêtre, le résultat de la recherche apparaît...

Donc, la recherche avec php : pas de soucis.....

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

Merci

**Mahefasoa** · 25/10/2012, 18h51

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

**BRUNO71** · 25/10/2012, 20h03

Bonsoir Mahefasoa,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Comment rajouter la ligne en supplément ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

javascript:void(0);

Merci...

**SpaceFrog** · 25/10/2012, 20h12

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

onsubmit c'est dans la balise form !!!

dans la balise input type submit il faut mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="return false;"

**BRUNO71** · 26/10/2012, 10h09

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..

**Mahefasoa** · 27/10/2012, 16h21

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

**BRUNO71** · 27/10/2012, 21h46

Bonsoir,

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

**Mahefasoa** · 28/10/2012, 04h36

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**BRUNO71** · 28/10/2012, 10h25

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…

Bon dimanche à toi aussi…

Cordialement
Bruno.

Ne pas fermer une fenêtre DIV

JavaScript

Discussions similaires

Partager

Partager