views:

24

answers:

1

hello, i have ajax script for select some infomrations. If the user selects a choice, a popup requesting permission for the user to overwrite the address component fields. The message should appear if the fields were empty. I want to know how to do this confirmation popup?

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>

My script

<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-- THE FINAL RESULT

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

Use confirm() function.

if (confirm('Are you sure?')) {
    // User has clicked OK, do your business thing.
} else {
    // User has clicked Cancel, take your alternative path, if any.
}
BalusC
ok, but how can i use confirm with my css design .?
Mercer
Well, then just use an absolutely positioned div instead which you toggle display block/none.
BalusC