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.

1 Answer 1


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'])) {
  // ...
  • 2
    This is exactly correct. Most users get confused by this, and return the wrong value from the AJAX callback.
    – apaderno
    May 17, 2013 at 13:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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