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

Javascript 如何使用Ajax在Lightbox中提交Drupal表单,javascript,jquery,ajax,drupal-7,lightbox,Javascript,Jquery,Ajax,Drupal 7,Lightbox,我有一个表单,我已经成功地加载到一个灯箱中。lightbox显示时没有任何css或javascript。模块(如日期弹出窗口)在lightbox中不起作用 我添加到submit按钮的ajax处理程序在lightbox中也不起作用。相反,表单按正常方式提交,将用户从初始页面转移到我为lightbox分配的URL($items['entry/lightbox'])。表单验证也无法仅保存在灯箱中。我可能需要研究一个javascript解决方案 但是,如果在lightbox外部调用表单,那么ajax处理

我有一个表单,我已经成功地加载到一个灯箱中。lightbox显示时没有任何css或javascript。模块(如日期弹出窗口)在lightbox中不起作用

我添加到submit按钮的ajax处理程序在lightbox中也不起作用。相反,表单按正常方式提交,将用户从初始页面转移到我为lightbox分配的URL($items['entry/lightbox'])。表单验证也无法仅保存在灯箱中。我可能需要研究一个javascript解决方案

但是,如果在lightbox外部调用表单,那么ajax处理程序在submit按钮上可以正常工作。我感觉所有这些问题都是由一个事实联系在一起的,即js/css没有加载到lightbox中

我的问题是:Ajax提交按钮无法在lightbox中执行,并阻止用户离开页面

我的问题:假设缺少的JS(addcss)与问题相关,我如何在lightbox中加载表单所需的JS&CSS

我的目标是:从他们的主页(例如,work/########################

理想情况下,在不关闭的情况下,我希望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();
}
$items['work/%/home']=数组(
“标题”=>“管理员主页”,
“页面回调”=>“fsa\u work\u page”,//下面未显示回调
“页面参数”=>数组(0),
“访问回调”=>TRUE,
“键入”=>菜单\u回调,
);
$items['entry/lightbox']=数组(
'标题'=>'灯箱覆盖',
“页面回调”=>“fsa_lightbox”,
“页面参数”=>数组(0),
“访问回调”=>TRUE,
“键入”=>菜单\u回调,
);
函数fsa_lightbox(){
$output='';
$output.=drupal_render(drupal_get_表单('fsa_daycare_花名册_表单');
打印$输出;
}
功能fsa_日托_花名册_表(/*args*/){
$form['wrapper']=数组(
“#标记”=>“包装器Div”
);//我读到这篇文章可以用来在lightbox中捕获drupal味精?
$form['fname']=数组(
“#键入”=>“文本字段”,
“#title”=>t(“名字”),
“#前缀”=>”
);
$form['dob']=数组(
“#键入”=>“日期”,
“#title”=>t(“出生日期”),
“#日期_格式”=>$format,
“#日期标签位置”=>“无”,
“#日期(年份)范围”=>“-25:+0”,
“#必需”=>正确,
“#后缀”=>”,
);
$form['submit']=数组(
“#键入”=>“提交”,
“#值”=>t(‘保存条目’),
“#ajax”=>数组(
“回拨”=>“fsa\u日托机构\u名册\u表格\u提交”,
“包装器”=>“fsa\U日托\U名册\U表格”,
'方法'=>'替换',
“效果”=>“褪色”,
),
);
返回$表格;
功能fsa_日托_花名册_表格_验证($form_id,&$form_数据){
$fname=$form_数据['values']['fname'];
如果(!is_string($fname)|空($fname)){
表单设置错误('fname',t(“请输入有效的名字”);
}
/*更多*/
}
}//结束形式函数
功能fsa_托儿所_名册_表格_提交($form_id,&$form_数据){
$insertDaycare=db\u insert($dcc\u表)
->字段(数组)(
'child_fname'=>$form_data['values']['fname'],
'dob'=>$form_data['values']['child_dob'],
/*更多*/
))
->执行();
}
任何智慧之言和示例代码都将不胜感激。如果根据您的经验,您认为我的方法有些无效或低效,请让我知道并提供一个替代方案。我会欢迎的


谢谢。

我建议使用对话框API而不是lightbox,假设lightbox的意思是“模态”

这是我的朋友罗杰写的

例如,退房

这里有一个使用ajax的具体示例


对于一个真实的例子,我建议您可以在我的github中查看一下,我建议使用dialog API而不是lightbox,假设lightbox的意思是“模态”

这是我的朋友罗杰写的

例如,退房

这里有一个使用ajax的具体示例


对于一个真实世界的例子,我希望您可以在我的github中查看一下

,感谢您提供了出色的例子!在与其他人交谈之后,似乎我应该转向对话api或ctools api来满足我的模态需求。两者都有更好的api支持,以实现我的目标。作为lightbox的粉丝,我本希望能找到解决问题的方法,但你引导我选择了另一种方法,并提供了很好的资源来帮助我。再次感谢!谢谢你的优秀例子!在与其他人交谈之后,似乎我应该转向对话api或ctools api来满足我的模态需求。两者都有更好的api支持,以实现我的目标。作为lightbox的粉丝,我本希望能找到解决问题的方法,但你引导我选择了另一种方法,并提供了很好的资源来帮助我。再次感谢!