如何在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表单

回答

相关问题