11488 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
voila mon problème, je n'arrive pas à rafraichir le contenu de ma fancybox quand je la ferme. J'arrive à rafraichir toute la page parent, mais je voudrais seulement rafraichir le contenu de la fancybox (formulaire avec validation et message "succés" aprés envoi).

Voici mon code:

<a id="open-form" href="#contact-form">Click here to open form in fancybox</a>

    <script type="text/javascript>
    $(document).ready(function() {
    $("#open-form").fancybox({
    'titlePosition'		: 'inside',
    'speedIn'		:	350, 
    'speedOut'		:	200, 
    'overlayShow'	:	true,
    'type' : 'inline',
    'overlayOpacity' : 0.8,
    'onClosed': function() { /*Quelquechose pour rafraichir le contenu de la Fancybox*/ } 
            			});
            		});
        </script>
            
                <div style="display: none;">
                <div id="contact-form" style="width: 550px; height: 520px; overflow: auto;">
            <form name="contactForm"> <!-- Ici le formulaire --> </form>
            </div>
    </div>


Merci
Hello Jay,

Comment veux tu rafraichir ta fancybox, si tu l'as ferme?
Je ne comprends pas trop ton problème.
Salut,

en fait lorsque je ferme la fancybox, j'aimerais que le formulaire revienne à son état initial, aprés que l'utilisateur ait envoyé son message (ou bien qu'il a renoncé d'envoyer aprés les message d'erreurs de la validation d'envoi du formulaire).

Pour l'instant lorsque je la ferme aprés envoi ou sans envoi, et que je la réouvre, les messages d'erreurs ou bien le message "message envoyé avec succés", sont toujours affichés.

Je suis sur magento 1.4.1, c'est la raison des lignes de code comme:
<?php echo Mage::helper('contacts')->__('Email') ?>


Voici mon formulaire:

<?php

?>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>

<div class="page-title">
    <h1><?php echo Mage::helper('contacts')->__('Product request') ?></h1>
</div>

<!-- messages succés et envoi du formulaire -->
<div id="thankyou" style="display:none; font-size:22px; color:green;"><strong>Thank you</strong> for you request.<br/> We will send you a reply as soon as possible.</div>

<div id="loader" style="display:none; font-size:12px; color:36459B;"><img src="skin/frontend/default/brit-prod/images/loader.gif"/><br/><strong>Sending request...</strong></div>
<!-- fin messages -->

<!-- début du formulaire -->
<form name="contactForm" id="contactForm"> 
	<div class="fieldset">
        <h2 class="legend"><?php echo Mage::helper('contacts')->__('Contact Information') ?></h2>
        <ul class="form-list">
            <li class="fields">
                <div class="field">
                    <label for="name" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Name') ?></label>
                    <div class="input-box">
                        <input name="name" id="name" title="<?php echo Mage::helper('contacts')->__('Name') ?>" value="<?php echo $this->htmlEscape($this->helper('contacts')->getUserName()) ?>" class="input-text required-entry" type="text" />
                    </div>
                </div>
                <div class="field">
                    <label for="email" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Email') ?></label>
                    <div class="input-box">
                        <input name="email" id="email" title="<?php echo Mage::helper('contacts')->__('Email') ?>" value="<?php echo $this->htmlEscape($this->helper('contacts')->getUserEmail()) ?>" class="input-text required-entry validate-email" type="text" />
                    </div>
                </div>
            </li>
            <li>
                <label for="telephone"><?php echo Mage::helper('contacts')->__('Telephone') ?></label>
                <div class="input-box">
                    <input name="telephone" id="telephone" title="<?php echo Mage::helper('contacts')->__('Telephone') ?>" value="" class="input-text" type="text" />
                </div>
            </li>
            <li class="wide">
                <label for="comment" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Comment') ?></label>
                <div class="input-box">
                    <textarea name="comment" id="comment" title="<?php echo Mage::helper('contacts')->__('Comment') ?>" class="required-entry input-text" cols="5" rows="3"></textarea>
                </div>
            </li>
        </ul>
    </div>
    <div class="buttons-set">
        <p class="required"><?php echo Mage::helper('contacts')->__('* Required Fields') ?></p>
        <input type="text" name="hideit" id="hideit" value="" style="display:none !important;" />
        <button type="button" onclick="fsubm()" title="<?php echo Mage::helper('contacts')->__('Submit') ?>" class="button"><span><span><?php echo Mage::helper('contacts')->__('Submit') ?></span></span></button>
    </div>
</form>
<!-- Fin du formulaire -->

<!-- script de traitement -->
<script type="text/javascript">
//<![CDATA[
    var contactForm = new VarienForm('contactForm', true);
    function fsubm(){ 
            if (contactForm.validator.validate()) {
             new Ajax.Updater({success:'contactForm'},
	     '<?php echo $this->getUrl('contacts/index/post') ?>',
	     {method:'post',
	     action:"/contacts/index/post",
	     asynchronous:true,
	     evalScripts:false,
	     onComplete:function(request, json){['contactForm', 'loader'].each(Element.hide); Element.show('thankyou');},
	     onLoading:function(request, json){Element.show('loader')}, 
             parameters:Form.serialize($('contactForm'))
	     }
	     );
             }
	}
//]]>
</script>
<!-- fin du script -->