Drupal load form with ajax callback in Bootstrap modal

Question

I need to load a form into a 'bootstrap modal dialog' which will submit data via ajax callback to callback function.

The form display properly when the modal dialog is launched:

<a data-toggle='modal' href='?q=document/share' data-target='#Modalshare' class='ModalTrigger'>
 <div class='' style='float:right;'><span class=''><span title='' class='glyphicon glyphicon-share-alt'></span></span></div>
<a/>

The menu 'document/share call the function 'modal_share()' that display the modal content

<div>...
content
...<div>

Within this function modal_share(), a form is called for render:

function modal_share($fid) {

$f = drupal_get_form('modal_share_form',$fid);
....
....
echo <div> .... ".drupal_render($f) .".....</div>

}

So far so good and the modal is correctly output with the form 'modal_share_form' as per below structure:

function modal_share_form($form,&$form_state,$fid) {
form['share_list'] = array(
  '#type' => 'select',
  '#multiple' => TRUE,
  '#options' => $option ,
  '#title' => t(""),
  '#description' => "",
  '#required' => false,
  '#default_value' => $default

);

$form['share'] = array (
        '#type' => 'button',
        '#value' => "<span class='glyphicon glyphicon-share-alt'></span><span id=''> ".t('record')."</span>",
        '#ajax' => array(
          'callback' => "modal_share_form_submit", 
          'wrapper' => 'shareMessage',
          'effect' => 'fade',
          'method'=>'html'
        ),

        '#id' => 'modalsharebutton',
);
return $form;
}

Now the problem is the the #ajax function in the button is not rendered by drupal as it should.

the html rendering is:

<button id="modalsharebutton" class="btn btn-primary form-submit" type="button" value="<span class='glyphicon glyphicon-share-alt'></span><span id=''>record</span>" name="op">

without the "ajax-processed" class attached

The thing is that if I load the form on a main page ajax function is rendered properly.

So my conclusion is that when building the form for modal, it is not going through the proper ajax build process...

But I can't see the solution.

Thanks for help.

Answer 1

I solved this issue differently by adding '#attribute' with event...

$form['share'] = array(
        '#type' => 'button',
        '#value' => "<span class='glyphicon glyphicon-share-alt'></span><span id=''> " . t('Record') . "</span>",
        '#ajax' => array(
          'callback' => "modal_share_form_submit", 
          'wrapper' => 'shareMessage',
          'effect' => 'fade',
          'method' => 'html'
        ),

        '#id' => 'modalsharebutton',
        '#attributes' => array('onclick' => "share_submit($fid);"),

);

Thank you.

Answer 2

For me seems like parsed html is quite broken.

Button markup should be something similar to record Drupal input type button will not work as expected. You could try markup. Maybe it will work out. I would use input type submit and then style it as needed.