Colorbox не работает должным образом с формой ajax

Я не так хорош в кодировании. Я пытаюсь использовать Colorbox, чтобы показать одну из моих страниц. На этой странице есть контактная форма. К сожалению, если я открою эту страницу в Colorbox и нажму кнопку отправки, к сожалению, Colorbox закроется. (Я действительно не понимаю, но, может быть, Colorbox делает простой HTTP-запрос, а не ajax-запрос?)

Таким образом, я хочу использовать colorbox, чтобы показать мою контактную форму, и у меня возникли проблемы с ее работой.

Моя контактная форма php:

   <div class="text">
                                                    <div class="contacter_head" style="border-bottom:1px dotted #ccc; color:#124C7A">Contact form!</div>
                                                <form id="contactform" name="contactform" method="post" action="submit_contact.php">
    
    <div class="my_left_box">
                                                <p>name *   </p>
                                                <input type="text" name="name" value="<?php echo $_SESSION['post']['name']?>" id="name" class="validate[required,custom[onlyLetter]]" />
                                                <p>Email* </p>
                                                <input type="text" name="email" value="<?php echo $_SESSION['post']['email']?>" id="email" class="validate[required,custom[email]]" />
                                                <p>subject </p>
                                                <input type="text" name="subject" value="<?php echo $_GET['sbject'];?>" />
                                                <p>Phone</p>
                                                <input type="text" name="phone" value="<?php echo $_SESSION['post']['phone']; unset($_SESSION['post']['phone']);?>" id="phone" class="validate[onlyNumber]" />
                                                <p>Captcha</p>
                                                    <label for="captcha_contact"><?=$_SESSION['n1']?> + <?=$_SESSION['n2']?> =</label><input type="text" class="validate[required,custom[onlyNumber]] captcha_aj" name="captcha" id="captcha" />
                                                
                                                    </div>                                          
                                                <div class="my_right_box">
                                                <p>Message</p>
                                                <textarea name="message" id="message_aj" rows="6" cols="5" class="validate[required]"><?=$_SESSION['post']['message']?></textarea>
                                                
                                                <input type="submit" name="button" value="Submit" id="button" class="button medium"/>
                                                     <?=$str?>          <img id="loading" src="images/ajax-load.gif" width="16" height="16" alt="loading" />
                                                        </form>
                                            <?=$success?>               
        
                                            <div id="errOffset">&nbsp;</div>
    </div>
        
    
                                            
                                            
                                                
                            
                                            </div>

Это мой фрагмент ajax, который хорошо работает, если я открываю контактную форму php напрямую:

var use_ajax=true;
$.validationEngine.settings={};


 $("#contactform").validationEngine({
    inlineValidation: false,
    promptPosition: "centerRight",
    success :  function(){use_ajax=true},
    failure : function(){use_ajax=false;}
 })

 $("#contactform").submit(function(e){
     alert("itt");
        if(use_ajax)
        {
            $('#loading').css('visibility','visible');
            $.post('submit_contact.php',$(this).serialize()+'&ajax=1',
            
                function(data){
                    if(parseInt(data)==-1)
                        $.validationEngine.buildPrompt("#captcha","* Captcha error","error");
                        
                    else
                    {
                        $("#ajanlat-form").hide('slow').after('<h1>Thank you,.</h1>');
                    }
                    
                    $('#loading').css('visibility','hidden');
                }
            
            );
        }
        e.preventDefault();
})

person holian    schedule 24.11.2012    source источник


Ответы (1)


Как вы открываете всплывающее окно через ColorBox? Я бы предложил рассмотреть возможность использования опции ColorBox iFrame, так как это откроет всплывающее окно в собственной «песочнице HTML». Кроме того, если собственное событие Submit по-прежнему вызывает у вас проблемы, рассмотрите возможность его перехвата с помощью Jquery, предотвращения поведения по умолчанию и самостоятельной инициации действия формы.

PS. Ссылка на ваш проект поможет сообществу помочь вам.

person CSSian    schedule 26.11.2012