By haggins on

Hello,
I have a curious problem:

When sending an #ahah callback drupal embedds the returned code into an additional div-container in the wrapper. This is very annoying since the "new" div has not the same dimensions as the old one (new ones parent). I use it as a frame for dragging other containers with some javascript but it doesn't work with the new div which hasn't got fixed dimensions.

For better understanding here the important code and some output:

/**
 *  #uc_order_tag_style_frame is my wrapper and contains some divs which are draggable via javascript in the parents area.
 */
function theme_edit_tag_style($image_url, $nid, $placeholder, $data = array()) {
  // snip...

  $output .= '<div id="uc_order_tag_style_frame" style="position: relative; background: url('.$image_url.') no-repeat center; width: 400px; height: 200px;">';
  $output .= theme('style_frame_content', $data, $placeholder);
  $output .= '</div>';

  // snap...

  return $output;
}

/**
 *  This is the form which contains the 'evil' #ahah callback
 */
function uc_order_tag_edit_product_tag_style_form($form_state, $data, $placeholder) {
  // snip
  $form['apply'] = array(
    '#type' => 'submit',
    '#value' => t('apply changes'),
    '#ahah' => array(
      'path' => 'admin/uc_order_tag/font/apply',
      'wrapper' => 'uc_order_tag_style_frame',
      'effect' => 'fade',
      'event' => 'click',
    ),
  );
  return $form;
}

/**
 *  This is the #ahah callback function
 */
function uc_order_tag_font_apply_js() {
  // snip ...

  $output = theme_style_frame_content($data, $placeholder);

  dpm($output); // <div id="element1" style="....">&nbsp;</div><div id="element2" .....>&nbsp;</div>

  drupal_json(array('status' => TRUE, 'data' => $output));
  exit;
}

As you can see $output only contains a few arranged div-containers. So the HTML should look similar to the following after fireing the #ahah callback:

<div id="uc_order_tag_style_frame" style="position: relative; background: url(background.png) no-repeat center; width: 400px; height: 200px;">
  <div id="element1" ...>&nbsp;</div>
  <div id="element2" ...>&nbsp;</div>
</div>

But this is what I get:

<div id="uc_order_tag_style_frame" style="position: relative; background: url(background.png) no-repeat center; width: 400px; height: 200px;">
  <div style="display: block;">
    <div id="element1" ...>&nbsp;</div>
    <div id="element2" ...>&nbsp;</div>
  </div>
</div>

Any ideas what's happening here and how I could fix this?

Thanks for reading,
haggins

⋅ Categories: Drupal 6.x

Comments

peterpoe’s picture

peterpoe commented

Encountered the same problem when trying to replace table rows with ahah. Nasty.
Found a general workaround by adding a new behavior to my module that includes this code:

$(".ahah-processed").ajaxStop(function(){
  var wrapper = '#'+ Drupal.settings.ahah[$(this).attr('id')].wrapper;
  var contents = $(wrapper +' > div').contents();     
  $(wrapper+' > div').replaceWith(contents);
});

(For some reason I couldn't understand, the event is fired twice on my form. But for me is ok.)

mpruitt’s picture

mpruitt commented

Peter, where did you insert this code?

I'm having a similar problem to what haggins described. I'm using AHAH to replace a piece of a composite image, and the new image appears slightly above and to the right of the original.

I've tried using your example with drupal_add_js, but my editor (Komodo) throws syntax errors.

bclinton’s picture

bclinton commented

I had the same question Mark, I found my answer by searching "drupal behaviors": http://drupal.org/node/205296

I just put peterpoe's code at the top of my module's .js file like this:

Drupal.behaviors.myModuleBehavior = function (context) {
    $(".ahah-processed").ajaxStop(function(){
        var wrapper = '#'+ Drupal.settings.ahah[$(this).attr('id')].wrapper;
        var contents = $(wrapper +' > div').contents();
        $(wrapper+' > div').replaceWith(contents);
    });
};

and it's working great for me.

oranges13’s picture

oranges13
she/her
Location Michigan
commented

Thank you - this solved my problem.

lars toomre’s picture

lars toomre commented

I am having problems in Drupal 6 with the extra

that the ahah.js wraps around the new row of HTML-formatted text that I am trying to add an existing table. I tried using the code above in my module's js file, but see no results of it firing.

I have tried to see what is going on with Firebug. I can confirm that that the module's js file is loaded, but a break-point set on the example function above is never hit. Is there something that I need to do to attach behaviors to the new DOM elements in order to have this behavior fire? Other thoughts of what might be wrong?

Until I get this fixed, I have the odd behavior using Drupal 6 AHAH's functionality that the new row of the table is inserted entirely into the first column of the existing table format. Any help would be much appreciated.

Lars Toomre
Managing Director
Toomre Capital Markets LLC

http://lars.toomre.com/

texas-bronius’s picture

texas-bronius commented

Worked like a charm-- thank you :)

For me, I slipped it into my #after_build as 'inline' javascript:

  $ahah_undo_div = "
    Drupal.behaviors.myModuleBehavior = function (context) {
      $('.ahah-processed').ajaxStop(function(){
          var wrapper = '#'+ Drupal.settings.ahah[$(this).attr('id')].wrapper;
      var contents = $(wrapper + ' > div') . contents();
      $(wrapper + ' > div') . replaceWith(contents);
      });
    };
  ";
  drupal_add_js($ahah_undo_div, 'inline');

Using this technique, I can directly massage my #ahah output to produce to my liking and insert directly in my CCK
list, clientside. I don't know how hackish this is, but it works.

--
http://drupaltees.com
80s themed Drupal T-Shirts

xenophyle’s picture

xenophyle commented

I think what you are seeing is addressed by this line

unset($choice_form['#prefix'], $choice_form['#suffix']);

from the function poll_choice_js() code sample on http://drupal.org/node/331941. You can see another example in the code sample for function quicktabs_ahah() on the same page.

mpruitt’s picture

mpruitt commented

I was able to figure a lot out from studying the examples.

I've emulated the second example on the referenced link (for quick tabs), and while it has improved functionality in a few areas, my image is still jumping up and to the right, but I think I know why now.

Using Firefox and FireBug, I found that prior to making the AHAH call to change the image, my css for the division looked like this:

<?php
<div id="image_1">
  <div class="form-item">
    <img src="my_image.png>
</div>
 </div>
?>

After the AHAH call, it looks like this:

<?php
<div id="image_1">
  <div style="display: block;">
    <img src="my_new_image.png>
</div>
 </div>
?>

This is the same addition as in the original post by Haggins. What I'm not clear on is how to apply the behavior code in the response. Anyone have experience with this? Any additional info greatly appreciated.

mpruitt’s picture

mpruitt commented

I looked more closely at Haggins original code, and noticed he was putting css

info in $output.

So.....I added the following to my $output:

<?php
//inside of ahah callback

........................
$output = '<div class="form-item">';
$output .= 'my_real_output';
$output .= '</div>;
?>

Turns out the <?php <div style="display: block;>?> isn't what was moving the image, the missing css

in the code snippet was.

I expect that soon after I post this, someone will reply and tell me the "right way" to do this, but that's ok.

vikingjs’s picture

vikingjs commented

I am also getting an extra div tag. I can look at the response coming back from the server and the div is not in the response. Then I looked at the javascript and on line 153 of ahah.js, there is var new_content = $('<div></div>').html(response.data);

Pretty much the first thing the code does when it gets the info back from the server is put an extra div around it.

haggins’s picture

haggins commented

It's a long time ago but I will share my solution:

I ended up in creating my custom $.ajax call within my javascript file which gives me a lot more flexibility.

bachbach’s picture

bachbach commented

@haggins how ?

@vikingjs i made that :

// Manually insert HTML into the jQuery object, using $() directly crashes
// Safari with long string lengths. http://dev.jquery.com/ticket/1152
var temp_new_content = $('<div></div>').html(response.data);
var new_content = temp_new_content.html();

figureslibres.cc