jQuery Forum

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.

Hello all.

I have some problems with an ajax call that should be quite simple and now I'm completely lost, so any help would be great.

Ok, let's go:

I have a web page working at this moment, ok, and I use $.get() to load a table into it (html format), this is working ok too. When user clicks in <tr> tags, I use $.get() another time to get some more html data, including an image as an <img src=". . .">.

the server send me the image only if a user loaded it previously from an external 'admin site', or HTTP 204 code if requested image doesn't exist.

I have two problems: First all, I'm unable to bind a load event to my image, no matter how I do it.
I tried $("img").on(), $("img").live() and both with $("img", data). I tried also with an Image object. All this code is in $(function(){ . . . }).

And the second one, How can I take the return code for an image from the load event? HTTP 204 will fire a load success event, as far as I read.

Does exist another way to proceed? If does, please, put me on the way.

1. $(function(){
2.  . . .
3.  /*Works-result is my table, when I click in a tr.header, a tr.tab-content expands with new data*/
    $("#works-result").on("click", "#table-works tr.tab-header", function (event) {
        var $content = $(this).next("tr.tab-content");
4.      /*If clicked tr has not loaded yet, load data into it.*/
        if ($content.find("td div.detail").length == 0) {
5.   /*Calling my server to get html data for this tr*/
     $.when($.get($content.attr("codwork"))).then(function (data) {
6.       /*I'm unable to make it work in any way!*/
         $("img", data).live("load", function () { . . . });
         //$("img", data).on("load", function () { . . . });
         //$("img").live("load", function () { . . . });
         //$("img").on("load", function () { . . . });
7.       //I tried it binding events out here, directly under $(function(){});
8.       $content.find("td").append(data);
9.   }, function () { alert("error") });
10.      }
        
     });
     
     . . .
11. });

Thanks a lot in advance.
Regards.

Hello all.

I have some jQuery.ajax() calls. It'is all the same but success function and I'd like get less code by taking all ajax calls in the same function.

But I need one additional parameter I am using later in the success function, for instance.

My actual code is like this:

1. jQuery.ajax(myParam){
2. ...
3. success: function(responseData){
4.                  //do some stuff with responseData
   
5.                  //do some stuff with myParam
6.               }
7. ...
8. }

and I'd like this:

1. jQuery.ajax(myParam, customFunction){
2. ...
3. success: customFunction  //customFunction will be myFunctionX...
   
4. ...
5. }
6.  
7. function myFunction1 (XMLHttpRequest, status, responseData, myParam){
8.                  //do some stuff with responseData
   
9.                  //do some stuff with myParam
10. }
11.  
12. function myFunction2 (XMLHttpRequest, status, responseData, myParam){
13.                  //do some stuff with responseData
    
14.                  //do some stuff with myParam
15. }
16.  
17. ...
    

But I can't manage to archieve that.

Can you help me? Any tips, web references or whatever info will be very appreciate.


Thanks a lot in advance.

Regards.


Tistklehoff

Hello all.

I'm working with images this time and I have this problem:

I'm using the special.event.load plugin as is in https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js and I'm binding a load event for image resize.

I take image data 'inline', I mean, image data base64 coded received from server.

Here is my code:

1. //first all, include the special event load plugin:
2. (function (jQuery) {
3.     jQuery.event.special.load = {
4.             add: function (hollaback) {
5.         if ( this.nodeType === 1 && this.tagName.toLowerCase() === 'img' && this.src !== '' ) {
6.             // Image is already complete, fire the hollaback (fixes browser issues were cached
7.             // images isn't triggering the load event)
8.             if ( this.complete || this.readyState === 4 ) {
9.                 hollaback.handler.apply(this);
10.             }
11.             // Check if data URI images is supported, fire 'error' event if not
12.             else if ( this.readyState === 'uninitialized' && this.src.indexOf('data:') === 0 ) {
13.                 jQuery(this).trigger('error');
14.             }
15.             else {
16.                 //Here!!! Throws 'too much recursion' exception, but not all times
17.                 jQuery(this).bind('load', hollaback.handler);
18.             }
19.         }
20.     }
21.     };
22. }(jQuery));

1. //my load binding
2. jQuery("#my_image").bind("load", function(e){
3.       //resize new image loaded
4.   });     

1. //Processing data in the succesfull ajax call for image
2. //Substitute src attrib content, I'm not removing the 'old' <img> tag
   
3. jQuery("#my_image").attr("src", imagen);

Is this correct?
What is happening?


Thanks all in advance.

Regards.

Hello all.

I have some problems when I try to manipulate a piece of HTML loaded by jQuery.load() function.

Here is my code:

1.     var $popupCorreo= jQuery("<div id='mypopup'></div>");
2.     //loading html code into mypopup
       $popupCorreo.load("mypopup_code.html");
3.     //setting mypopup display:none
       $popupCorreo.hide();
      
   
4.     //appending to body (mypopup has position:absolute and max z-index)
       jQuery("body").append($popupCorreo);
      
   
5.     //this button is in loaded code
       jQuery("#button_1").bind("click", function(){
6.             //blah blah blah
       });
7. 
   
8.       //want to change the text for button
   
9.     jQuery("#button_1").text("new text for button");

Ok, I append the loaded code and then, bind the event and change some text in a loaded button, but it does not work.

If I change my code, live instead of bind, events work correctly. I tried to debug with firebug on Firefox 3.5 and all works fine only if I set a breakpoint between load and bind lines.
It seems to be any type of delay while loading. Or am I wrong?

How can I manage with that delay?

I was trying to find any information at this forum, but I did not manage to find anything. if I missed any post with relevant information, please, tell me.


Thanks all in advance.

Regards.