Effect to show information retrieved on innerHTML element

Question

I have an ajax call() to load some specific information about a product:

function fnShowDetProd(code, size) {    
    mod.open("GET", "control/_showdetailproduct.asp?cod="+code+"&size="+size, true);    
    mod.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");    
    mod.onreadystatechange = function() {
        if (mod.readyState == 4) {          
            document.getElementById("showDetails").innerHTML = mod.responseText;            
        }
    };
    mod.send(null)  
}

I call this function in my row onClick event:

 fnMostDetProd(selectedRow[0], selectedRow[1]);

Where selectedRow[0] and [1] are parameters of the clicked line.

I'm wondering if it's that possible to add a jQuery effect like fadeIn() to show the information retrieved on showDetails element.

Using jQuery 1.8.3 and jQuery ui 1.10.1.

Why do you set the `Content-Type` Request header of a GET call? — Bergi, Jan 22 '14 at 23:42
Yes it is possible. Have you tried it? Just right after setting the innerHTML… Btw, you should use jQuery if it's available — Bergi, Jan 22 '14 at 23:43
[Impossible](http://stackoverflow.com/q/5661596/1048572). Maybe you need a response header (set on the server side)? — Bergi, Jan 22 '14 at 23:45
@Bergi. I don't know exactly why, but if I cut it off the content loaded shows weird chars. — A. Cristian Nogueira, Jan 22 '14 at 23:49
Maybe your server is configured weirdly to reflect the request header in the response or to use it for some internal setup. Still, that's not how it *should* work. — Bergi, Jan 22 '14 at 23:54
Could be that. Also, this piece of code is for beta tests only. I may have to collect some garbage on my code later. — A. Cristian Nogueira, Jan 23 '14 at 00:12

score 1 · Accepted Answer · answered Jan 22 '14 at 23:44

1

How about this:

function fnShowDetProd(code, size) {    
    mod.open("GET", "control/_showdetailproduct.asp?cod="+code+"&size="+size, true);    
    mod.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");    
    mod.onreadystatechange = function() {
    if (mod.readyState == 4) {          
        $("#showDetails").hide();
        $("#showDetails").html(mod.responseText);
        $("#showDetails").fadeIn();
    }
};
mod.send(null)
}

answered Jan 22 '14 at 23:44

HaukurHaf

13,522
5
44
59

I don't know why, but seems jQuery doesn't work inside this ajax function. I've tried almost everything to make it work, without success. Thanks anyway. – A. Cristian Nogueira Jan 23 '14 at 00:10
I found out what was wrong and your answer worked fine. Thank you for your time. – A. Cristian Nogueira Jan 23 '14 at 00:27

score 0 · Answer 2 · answered Jan 22 '14 at 23:44

0

Here you go: http://jsfiddle.net/X5jUC/

Make your div hidden...

<div id="showDetails" style="display:none;"></div>

Then all you have to do is this...

$("#showDetails").html('replace this with your mod.responseText').fadeIn( 3000, function() {
    // Animation complete
});

3000 means it takes 3 seconds to fade in, nice and slow. Increase it or decrease it to your liking.

answered Jan 22 '14 at 23:44

gfrobenius

3,987
8
34
66

Sure it does. This is basic jQuery, the fiddle show it works. We can figure it out. Show me your `div` code. – gfrobenius Jan 23 '14 at 00:15

Effect to show information retrieved on innerHTML element

2 Answers2