1

ライトボックスに正常にロードされたフォームがあります。ライトボックスは CSS や JavaScript なしで表示されます。日付ポップアップなどのモジュールは、ライトボックスでは機能しません。

送信ボタンに追加した ajax ハンドラーも、ライトボックス内では機能しません。代わりに、フォームは通常どおり送信され、ユーザーは最初のページからライトボックス ( $items['entry/lightbox'] ) に割り当てた URL に移動します。フォームの検証も、ライトボックス内のみに保持できません。JavaScript ソリューションを調査する必要があるかもしれません。

ただし、フォームがライトボックスの外部で呼び出された場合、送信ボタンで ajax ハンドラーが正しく機能します。js/css がライトボックスにロードされていないという事実によって、これらすべての問題が関連しているように感じます。

私の問題: Ajax 送信ボタンがライトボックスでの実行に失敗し、ユーザーがページを離れることができなくなります。

私の質問:欠落している JS (CSS の追加) が問題に関連していると仮定すると、ライトボックス内のフォームに必要な JS と CSS をどのようにロードすればよいですか?

私の目標: ホームページ (例: work/####/home) から、ユーザーがページを離れることなく、ライトボックス内でフォームを開き、値を挿入し、値を検証して 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();
}

知恵とサンプルコードの言葉は大歓迎です。あなたの経験上、私のアプローチがやや効果的または非効率的であると思われる場合は、私に知らせて代替案を提供してください. 私はそれを歓迎します。

ありがとうございました。

4

1 に答える 1

4

ライトボックスが「モーダル」を意味すると仮定して、ライトボックスの代わりにダイアログ API を使用することをお勧めします。

これは私の友人のロジャーによる良い記事です

たとえば、例のモジュールを確認してください。

ajaxの使用に関する具体的な例があります。

実際の例として、Drupal Commerce のカートに追加するボタンを、私の github で確認できるダイアログ付きで変更しました。

于 2012-07-19T21:09:32.780 に答える