如何在Ajax中提交燈箱中的Drupal表單

我有一個我已經成功加載到燈箱的表單。燈箱出現沒有任何CSS或JavaScript。模塊，如日期彈出窗口，不起作用的燈箱。如何在Ajax中提交燈箱中的Drupal表單

我已添加到提交按鈕的ajax處理程序在lightbox內也不起作用。相反，表單提交正常，使用戶離開他們的初始頁面到我爲燈箱分配的URL（$ items ['entry/lightbox']）。表單驗證也不能保存在lightbox中。我可能需要調查一個javascript解決方案。

但是，如果在窗體外部調用窗體，則ajax處理程序在提交按鈕上正常工作。我有一種感覺，所有這些問題通過js/css沒有被加載到燈箱中的事實被鏈接在一起。

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

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

我的目標：從他們的主頁（例如work/####/home）啓用用戶打開表單，插入值，驗證&在不離開頁面的情況下向燈箱中的數據提交值。

理想情況下，如果沒有關閉，我想要drupal消息，比如表單驗證錯誤出現在lightbox中，以便用戶有機會使用他們輸入的值更正錯誤。我更喜歡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(); 
}

的智慧和示例代碼的任何話，將不勝感激。如果根據您的經驗，您認爲我的方法效果不佳或效率低下，請告訴我並提供替代方案。我會歡迎它。

謝謝。

來源

2012-07-18 SFox

我會建議使用對話框API而不是燈箱，假設燈箱你的意思是'模態'。

這裏是a good writeup我的朋友羅傑

例如，退房the examples module。

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

對於現實世界的例子，我modified an add-to-cart button for Drupal Commerce with dialog，你可以在我的github上看看

來源

2012-07-19 21:09:32 fmitchell

感謝您的很好的例子！在與他人交談之後，似乎我應該轉向對話api或ctools api以滿足我的模式需求。對於我正在努力完成的任務，兩者都有更好的api支持。作爲一名燈箱愛好者，我寧願選擇解決問題的辦法，但是您已經引導我採用另類方法，並以良好的資源幫助我。再次感謝！ – SFox 2012-07-20 14:42:18

如何在Ajax中提交燈箱中的Drupal表單

回答

相關問題