2010-08-30 85 views
1

我有选择一些信息的ajax脚本。 如果用户选择一个选项,则会弹出一个请求允许用户覆盖地址组件字段的弹出窗口。如果字段为空,则应显示该消息。 我想知道如何做这个确认弹出?弹出覆盖字段

HTML:

<html> 
    [..] 
    <div style="width:54.5%;float:right;"> 
     <h2 class="basic"><fmt:message key="fiscalite.administration.listeRejets.label.proprietaire"/></h2> 
     <table border="1"> 
      <tr style="height:20px;width:250px;border:0"> 
       <td class="labelChamp" style="border:0"> 
        <fmt:message key="fiscalite.administration.listeRejets.label.nomProprietaire"/> 
        <span class="champsObligatoire">*</span> 
       </td> 
       <td style="border:0"> 
        <html:text property="rejet.immeuble.SCIProprietaire" size="40" maxlength="40" styleId="nomProprietaire" styleClass="champsBleu02" onkeyup="couleur(this)"/> 
       </td> 
      </tr> 
      <tr style="height:20px;border:0"> 
       <td class="labelChamp" style="border:0"> 
        <fmt:message key="fiscalite.administration.listeRejets.label.SIRENProprietaire"/> 
        <span class="champsObligatoire">*</span> 
       </td> 
       <td style="border:0"> 
        <html:text property="rejet.SIRENProprietaire" styleId="siren" size="9" maxlength="9" styleClass="champsBleu03" tabindex="8" onkeyup="initFlagSelectionSiren();couleur(this);" /> 
        <div id="autoCompletionListeProprietaireImmeuble" class="autocomplete" style="display:none;"></div> 
       </td> 
      </tr> 
      <tr style="border:0"> 
       <td style="border:0"></td> 
       <td style="border:0"> 
        <div style="display:none;" id="imageAttente" align="center" class="autocomplete"><img src="media/ajax/indicator_waitanim.gif" width="65"/></div> 
       </td> 
      </tr> 
      <tr style="height:20px;border:0"> 
       <td class="labelChamp" style="border:0"> 
        <fmt:message key="fiscalite.administration.listeRejets.label.numEtNomVoie"/> 
        <span class="champsObligatoire">*</span> 
       </td> 
       <td style="border:0"> 
        <html:text property="rejet.voieProprietaire" styleId="adresse" size="32" maxlength="32" styleClass="champsBleu02" onkeyup="couleur(this)"/> 
       </td> 
      </tr> 
      <tr style="height:20px;border:0"> 
       <td class="labelChamp" style="border:0"> 
        <fmt:message key="fiscalite.administration.listeRejets.label.cPostalEtVille"/> 
        <span class="champsObligatoire">*</span> 
       </td> 
       <td style="border:0"> 
        <html:text property="rejet.communeProprietaire" styleId="ville" size="32" maxlength="32" styleClass="champsBleu02" onkeyup="couleur(this)"/> 
       </td> 
      </tr> 
     </table> 
    </div> 
</html> 

我的脚本

<script type="text/javascript"> 
    var sirenSelectionne = false; 
    var objProprietaireAutoComp = null; 
    if(document.getElementById('siren') != null) 
    { 
     function majChampsSiren(el) 
     {  
      if(el.getElementsByTagName('span')[0] == null){ 
      var siren = document.getElementById('siren'); 
      if(el.getElementsByTagName('div')[0].id != "erreurSiren") 
      { 
      siren.value = el.getElementsByTagName('div')[0].firstChild.nodeValue; 
      var nomProprietaire = document.getElementById('nomProprietaire'); 
      nomProprietaire.value = el.getElementsByTagName('div')[1].firstChild.nodeValue; 
      var adresse = document.getElementById('adresse'); 
      adresse.value = el.getElementsByTagName('div')[2].firstChild.nodeValue; 
      var ville = document.getElementById('ville'); 
      ville.value = el.getElementsByTagName('div')[3].firstChild.nodeValue; 
      sirenSelectionne = true; 
      } 
      else 
      { 
      sirenSelectionne = false; 
      fermerPopupProprietaire(); 
      } 
      } 
     } 
     objProprietaireAutoComp = new Ajax.Autocompleter ('siren', 
     { 
      method: 'post', 
      paramName: 'autoCompletion', 
      indicator : 'imageAttente', 
      minChars: 4, 
      updateElement: majChampsSiren 
     }); 
    } 

--RESOLVED--最终结果

<script type="text/javascript"> 
    ////////////////////////////////////// 
    // Gestion de l'auto-complétion avec traitement en retour sur siren 
    var sirenSelectionne = false; 
    var objProprietaireAutoComp = null; 
    if(document.getElementById('siren') != null) { 

     function majChampsSiren(el) {  
      var siren = document.getElementById('siren'); 
      var nomProprietaire = document.getElementById('nomProprietaire'); 
      var adresse = document.getElementById('adresse'); 
      var ville = document.getElementById('ville'); 
      var message = 'Les champs:\n-Nom du propriétaire\n-Numéro et nom de voie\n-Code postal et Commune\nvont être remplacé par ceux du propriétaire sélectionné.\nConfirmez vous ce remplacemnt ?';        
      if(nomProprietaire.value !="" || adresse.value !="" || ville.value != "") 
      { 
       top.Dialog.confirm("<p class='corps12 coulBleu02'>" + message + "</p><br/>", { 
       id:'idPopupSIREN', 
       className: "bloquant", 
       width:200, 
       height:150, 
       buttonClass: "boutonbleu", 
       closable: true, 
       maximizable: false, 
       minimizable: false, 
       showEffectOptions: {duration:0.2}, 
       hideEffectOptions: {duration:0.2}, 
       destroyOnClose: true, 
       cancel:function(win) {}, 
       ok:function(win) 
       { 
        if(el.getElementsByTagName('span')[0] == null) 
        { 
         if(el.getElementsByTagName('div')[0].id != "erreurSiren") 
         { 
          siren.value = el.getElementsByTagName('div')[0].firstChild.nodeValue; 
          nomProprietaire.value = el.getElementsByTagName('div')[1].firstChild.nodeValue; 
          adresse.value = el.getElementsByTagName('div')[2].firstChild.nodeValue; 
          ville.value = el.getElementsByTagName('div')[3].firstChild.nodeValue; 
          sirenSelectionne = true; 
          top.Windows.close('idPopupSIREN'); 
         } 
         else 
         { 
          sirenSelectionne = false; 
          fermerPopupProprietaire(); 
         } 
        } 
       }, 
       zindex: 2000 
       });    
      } 
      else 
      { 
       if(el.getElementsByTagName('span')[0] == null) 
       { 
        if(el.getElementsByTagName('div')[0].id != "erreurSiren") 
        { 
         siren.value = el.getElementsByTagName('div')[0].firstChild.nodeValue; 
         nomProprietaire.value = el.getElementsByTagName('div')[1].firstChild.nodeValue; 
         adresse.value = el.getElementsByTagName('div')[2].firstChild.nodeValue; 
         ville.value = el.getElementsByTagName('div')[3].firstChild.nodeValue; 
         sirenSelectionne = true; 

        } 
        else 
        { 
         sirenSelectionne = false; 
         fermerPopupProprietaire(); 
        } 
       } 
      } 

     } 

     objProprietaireAutoComp = new Ajax.Autocompleter ('siren', 
           'autoCompletionListeProprietaireImmeuble', 
           'ajax/ajaxAutocompleterProprietaireImmeuble.do', 
           { 
            method: 'post', 
            paramName: 'autoCompletion', 
            indicator : 'imageAttente', 
            minChars: 4, 
            updateElement: majChampsSiren 
           }); 
     } 

    </script> 

回答

0

使用confirm()函数。

if (confirm('Are you sure?')) { 
    // User has clicked OK, do your business thing. 
} else { 
    // User has clicked Cancel, take your alternative path, if any. 
} 
+0

好的,但我怎样才能使用确认与我的CSS设计。 – Mercer 2010-08-30 11:41:57

+0

那么,只需使用绝对定位的div,而不是切换显示块/无。 – BalusC 2010-08-30 11:50:46