Question

我有一张表格，我已成功加载到灯箱中。灯箱出现时没有任何CSS或JavaScript。像Date Popup这样的模块在灯箱中不起作用。

我添加到提交按钮的ajax处理程序在灯箱内也不起作用。相反，表单正常提交，将用户从其初始页面转移到我为灯箱指定的URL（$ items ['entry / lightbox']）。表单验证也不能仅保留在灯箱内。我可能需要调查一个javascript解决方案。

但是，如果在灯箱外调用表单，则ajax处理程序在提交按钮上正常工作。我觉得所有这些问题都是由js / css没有加载到灯箱中而联系在一起的。

我的问题：Ajax提交按钮无法在灯箱中执行，并阻止用户离开页面。

我的问题：假设缺少JS（添加CSS）与问题相关，我该如何加载JS＆amp;我的表单在灯箱内需要CSS吗？

我的目标：从他们的主页（例如工作/ #### / home），允许用户打开表单，插入值，验证＆amp;在灯箱内向DB提交值而不离开其页面。

理想情况下，如果没有关闭，我希望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代替灯箱，假设灯箱你的意思是'模态'。

以下是我的朋友罗杰的a good writeup

例如，请查看the examples module。

有一个使用ajax的具体示例。

对于一个真实世界的例子，我可以在我的github中看一下modified an add-to-cart button for Drupal Commerce with dialog

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

1 个答案: