tabs: Change Ajax data loaded before append

tabs: Change Ajax data loaded before append

Hello all.

I've some tabs loaded dinamically with AJAX. BUT, my datasource have it's own images repository and it uses relative paths. So, I'm receiving from AJAX calls something like this <img src="/apps/images/XXXX.png" />

I'm trying to change these src attributes, but I can't wonder what is the correct place to do this.

I tried in beforeLoad event, change the images but, after that, I can't stop the default tabs load behavior and jQuery insert the original data content, overriding mine.

I also tried in load event, but the browser try to load images at the moment in which they are inserted (or transformed in html by a $(data) statement), so the browser gets some load errors I'd like to avoid.

How can I deal with this? What can I do to stop default insertion in beforeLoad event?

My code in beforeLoad event in tabs widget:

  1. beforeLoad: function(event, ui){
  2.             if ($(">a", ui.tab).hasClass("with-images")){
  3.                 ui.jqXHR.done(function(data, textStatus, jqXHR) {
  4.                     data = data.replace(/<img /g, "<photo ");
  5.                     $data = $(data);
  6.                     $data.appendTo(ui.panel);
  7.        
  8.                     $(data).find("photo").each(function () {
  9.                         $(this).replaceWith("<img src='" + $("#help").data("helpImages") + "?relativePath=" + $(this).attr("src") + "' /> ");
  10.                     });
  11.                 });
  12.             }
  13.         }

Thanks all in advance.

Regards.