如何使用Ajax在Lightbox中提交Drupal表單

Question

我有一個表格，我已成功裝入燈箱。 燈箱出現時沒有任何CSS或JavaScript。 像Date Popup這樣的模塊在燈箱中不起作用。

我添加到提交按鈕的ajax處理程序也不能在燈箱內工作。 相反，表單正常提交，將用戶從其初始頁面轉移到我為燈箱指定的URL（$ items ['entry / lightbox']）。 表單驗證也不能僅保留在燈箱內。 我可能要調查一個JavaScript解決方案。

但是，如果在燈箱外調用表單，則ajax處理程序在提交按鈕上正常工作。 我覺得所有這些問題都是由js / css沒有加載到燈箱中而聯系在一起的。

我的問題：Ajax提交按鈕無法在燈箱中執行，並阻止用戶離開頁面。

我的問題：假設缺少JS（添加CSS）與問題相關，如何在燈箱中加載我的表單所需的JS和CSS？

我的目標：從他們的主頁（例如work / #### / home），使用戶能夠打開表單，插入值，驗證並向燈箱內的數據庫提交值，而無需離開他們的頁面。

理想情況下，如果沒有關閉，我希望drupal消息（如表單驗證錯誤）出現在燈箱內，以便用戶有機會用輸入的值更正錯誤。 我更喜歡php驗證，但我仍然對jQuery持開放態度。

我的代碼：

$items['work/%/home'] = array(
    'title' => 'Admin Home',
    'page callback' => 'fsa_work_page',//Callback not shown below
    'page arguments' => array(0),
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
);
$items['entry/lightbox'] = array( 
    'title' => 'Lightbox Overlay',
    'page callback' => 'fsa_lightbox',
    'page arguments' => array(0),
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
);
function fsa_lightbox(){
    $output = '';       
    $output .= drupal_render(drupal_get_form('fsa_daycare_roster_form'));
    print $output;
}
function fsa_daycare_roster_form(/*args*/){
$form['wrapper'] = array(
    '#markup' => '<div id="fsa_daycare_roster_form">Wrapper Div</div>'
);//I read this could somehow be used to capture drupal msg within the lightbox?
$form['fname'] = array(
    '#type' => 'textfield',
    '#title' => t('First Name'),
    '#prefix' => '<div id="form-left">'
);
$form['dob'] = array(
    '#type' => 'date_popup',
    '#title' => t('Date of Birth'),
    '#date_format' => $format,
    '#date_label_position' => 'none',
    '#date_year_range' => '-25:+0',
    '#required' => TRUE,
    '#suffix' => '</div>',
);
$form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Save Entry'),
    '#ajax' => array(
        'callback' => 'fsa_daycare_roster_form_submit',
        'wrapper' => 'fsa_daycare_roster_form',
        'method' => 'replace',
        'effect' => 'fade',
  ),
);
return $form;

function fsa_daycare_roster_form_validate($form_id, &$form_data){
    $fname = $form_data['values']['fname'];

    if(!is_string($fname) || empty($fname)){
    form_set_error('fname', t("Please Enter a valid First Name"));  
    }
        /*more*/
}
}//end form func

function fsa_daycare_roster_form_submit($form_id, &$form_data){
     $insertDaycare = db_insert($dcc_table)
    ->fields(array(
        'child_fname' => $form_data['values']['fname'],
        'dob' => $form_data['values']['child_dob'],
          /*more*/
    ))
    ->execute();
}

任何智慧和示例代碼的話都會非常感激。 如果根據您的經驗，您認為我的方法有些無效或效率低，請告訴我並提供替代方案。 我很歡迎。

謝謝。

Answer 1

我建議使用對話框API而不是lightbox，假設lightbox你的意思是“模態”。

這是我的朋友羅傑寫的一篇很好的文章

例如，查看示例模塊 。

有一個使用ajax的具體示例。

對於一個真實世界的例子，我修改了Drupal Commerce的添加到購物車按鈕的對話框 ，您可以在我的github中查看