superfish 菜单冲突联系页面 - silverstripe

Question

我正在为我的网站使用 superfish 菜单（使用 Silverstripe），请参阅 superfish menu example here。

网站一切正常，但联系页面，似乎每次我输入 $contactUsForm 时，联系页面都会先尝试加载联系表格，超级鱼菜单中的向下箭头消失几秒钟，然后菜单向左移动。然后出现箭头，表单加载后菜单再次移动到正常位置。

其他页面都很好。谁能给我一些提示，为什么会发生这种情况，我该如何解决？谢谢。

这是我的 ContactPage.php，如果需要，我可以在此处添加更多代码。

static $db = array(

    "Phone"     => "Varchar",

    "Email"     => "Varchar",

    "Address"   => "Text",

    "Thanks"    => "Text",

    "Long"      => "Int",

    "Lat"       => "Int",

    //added for google map 04012012

     "EmbedCode" => "HTMLText" 

);



static $has_one = array(

);



function getCMSFields() {

    $fields = parent::getCMSFields();



    $fields->addFieldToTab('Root.Content.ContactDetails', new TextField('Phone'));

    $fields->addFieldToTab('Root.Content.ContactDetails', new TextField('Email'));

    $fields->addFieldToTab('Root.Content.ContactDetails', new TextareaField('Address','Address',8,3));

    $fields->addFieldToTab('Root.Content.ContactDetails', new TextareaField('Thanks','Thank You Message',8,3));     

    #$fields->addFieldToTab('Root.Content.Main', new TextField('Long'));

    #$fields->addFieldToTab('Root.Content.Main', new TextField('Lat'));

    //added for google map 04012012

     $fields->addFieldToTab('Root.Content.ContactDetails', new TextareaField('EmbedCode', 'Embed Code')); 





    return $fields;

     }

     function HasSentContact() {

        return (isset( $_GET['sent'] ) ) ? true : false;

     }

   function onBeforeWrite() {

$this->EmbedCode = str_replace("></iframe>", "> </iframe>", $this->EmbedCode);

 parent::onBeforeWrite();

}

}


 class ContactPage_Controller extends Page_Controller {


public function init() {

    parent::init();

    Requirements::themedCSS('Contact'); 

}



function contactUsForm() {

            $recaptchaField = new RecaptchaField('MyCaptcha');
    $recaptchaField->jsOptions = array('theme' => 'white'); // optional it changes the look added 07122011


    // Create fields

    $fields = new FieldSet(

    new TextField('Name'),

    new TextField('Surname'),

    new TextField('Email', 'Email Address'),

    new TextField('Phone', 'Phone Number'),

    new TextareaField('Message', 'Enquiry'),

    new LabelField('MyCaptcha', 'Please enter the characters below'),
    $recaptchaField

    //new PhpCaptchaField(),

    //new HeaderField ("Please Enter What You See Here, it's not case sensitive", "6")

    );



    // Create actions

    $actions = new FieldSet(

    new FormAction('doContactUs', 'Submit')

    );



    //valididate fields

    $validator = new RequiredFields('Name', 'Email', 'Message');



    return new Form($this, 'contactUsForm', $fields, $actions, $validator);



}


function doContactUs($data, $form) {



    $from = $data['Email'];

    $to = $this->Email;

    $subject = 'Contact Us Form';

    $body = $data['Name'].' '.$data['Surname'].'\n'.$data['Email'].'\n'.$data['Phone'].'\n\n'.$data['Message'];


    $email = new Email($from, $to, $subject, $body);

    $email->sendPlain();

    //Director::redirectBack();

    Director::redirect($this->Link().'?sent=1');

}

}
?>

ContactPage.ss：

    <div id="intro">

                    <h1 id="h1_home">$Title</h1>

<% if HasSentContact %>
    <div id="Form">
    <h2>$Thanks</h2>
    </div>
<% else %>
    $Content
    <div id="Form">
    $contactUsForm
    </div>    
<% end_if %>

    <div id="Details">
        <h3>GOOGLE MAP</h3>
        <!--added 05012011, added divs-->
        <div id="googlemap">    {$EmbedCode} </div>

        <div id="contactinfo">
        <h3>Contact Info</h3>
        <table class="alignRight">
            <tr>
                <td class="width200 alignLeft">Phone</td>
                <td>{$Phone}</td>
            </tr>
            <tr>
                <td class="alignLeft">Email</td>
                <td><a href="mailto:{$Email}">{$Email}</a></td>
            </tr>
            <tr>
                <td class="alignLeft">Address</td>
                <td>{$Address}</td>
            </tr>
        </table>
        </div><!-- contactinfo -->
    </div><!--Details-->


     $Form 
     </div><!--intro-->

Answer 1

听起来像是一个 JavaScript 冲突问题。 SilverStripe 2.4 包括一些 Prototype JS 以及一些 jQuery，用于在前端呈现表单。他们在一起玩得不好。

尝试将您的 Superfish JS（您的代码，而不是您从他们的网站下载的文件）包装在一个闭包中，如下所示：

(function($) {
    $(document).ready(function(){
        // your code here.
    })
})(jQuery);

在 SS 文档中了解更多信息 - http://doc.silverstripe.org/framework/en/topics/javascript/

另一个提示 - 使用 JS 调试器。在 Chrome 中捆绑了很棒的开发工具，而 FireFox 有 FireBug 插件。使用任一中的 JS 控制台查看是否有任何 JavaScript 错误。