Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.

I am trying to create a form that allows a user to type in an address and click submit. In return the button makes an AJAX callback that builds the javascript link for a user to copy and paste into their site. Once a user inserts the javascript into their site it will display a map from my site. The problem I am having is when the user creates their custom map using my form I want to return a sample map of what it should look like. I need this javascript to be printed to the browser.

<script type="text/javascript" src="http://widget.pickerspal.com/search/get?lat=41.6005448&lng=-93.6091064&height=500"></script>

But when it is returned nothing is displayed. Here is my form & callback function.

function d3vo_widget_builder_form($form, &$form_state) {
    $form['city'] = array(
      '#title' =>   t('City'),
      '#type' =>    'textfield',
      '#required' => TRUE,
      '#description' => t('Find your city'),
    );

    $form['height'] = array(
      '#title' =>   t('Widget Height'),
      '#type' =>    'textfield',
      '#size' => 5,
      '#description' => t('Set the widget height'),
      '#element_validate' => array('_validate_field_is_numeric'),
    );

    $form['map-area'] = array(
      '#type' => 'markup',
      '#prefix' => '<div id="mapsample-div">',
      '#suffix' => '</div>',
      );

    $form['submit'] = array(
      '#type' =>    'button',
      '#value' =>   'Get Widget',
      '#ajax' => array(
        'callback' => 'd3vo_widget_map_ajax_callback',
        'wrapper' => 'mapsample-div',
        'method' => 'html',
        'effect' => 'fade',
        //'progress' => array('type' => 'none'),
    ),
    );

    return $form;   

function d3vo_widget_map_ajax_callback($form, $form_state){
       $point = geocoder('google',$form_state['values']['city']);
       $lng = $point->coords[0];
       $lat = $point->coords[1];
       if($form_state['values']['height'] == NULL){
           $height = 500;
       } else {
       $height = $form_state['values']['height'];
       }
       $widgetScript = '<script type="text/javascript" src="http://widget.pickerspal.com/search/get?lat='. $lat .'&lng='. $lng . '&height='.$height.'"></script>';

        $form['script'] = array(
         '#value' => $widgetScript,
         '#type' => 'textfield',
         '#attributes' => array('readonly' => 'readonly'),
         );

        $form['map'] = array(
          '#type' => 'markup',
          '#markup' => $widgetScript,
        );

        return array($form['script'], $form['map']);
    }

Im not very familiar with using Javascript in Drupal. I have searched and tried many different ways but I can not get the map area to show. Any help would be greatly appreciated.

share|improve this question
add comment

1 Answer

The AJAX callback is only used to tell Drupal's AJAX engine what part of form to update. All actual work of building the form elements is supposed to happen in form's hook, in code wrapped in a control statement like the following.

if (!empty($form_state['values'])) {
  // ...
}
share|improve this answer
2  
This is exactly correct. Most users get confused by this, and return the wrong value from the AJAX callback. –  kiamlaluno May 17 '13 at 13:43
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.