refresh div content with json result from js function

Question

First to describe my scenario. On my page I have div with id showImage. Bellow that div there are few thumb. images which I want to display in larger in showImage div, without refresh page ofcourse. So here's what I have up to this moment. Generated html for every image is

<a href="/Property/GetImage/7">
  <img id="7" class="details" width="100" height="100" src="/Property/GetImage/7" alt="">
</a>

I'm fetching image id and pass it to my controller which will return me an image (maybe I dont need this, cause I already have this image on same page, but I dont know how to use it) to continue, controller will return me an image which I need to show with larger dimensions in showImage div placeholder. Here's my code

function ShowLargeImage(imageId) {
        $.ajax({
            url: ('/Home/GetImage'),
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ id: imageId }),

            success: function (result) { 
                //need to pass result(image)to my div
            },
        });
    }

    function onPopUp() {
        $(".details").click(function (event) {
            var imageId = (this.id);
            ShowLargeImage(imageId);
        });
    }

Question is: How can I call from js my showImage div, for example. showImage.Show(result); Is this possible?

not sure what you mean by File, could you paste the result string? — Andreas Wong
– Andreas Wong, Commented Mar 21, 2012 at 9:49
Instead of passing the larger image back in the AJAX call, why not just retrieve the path and set the src property of the image tag? — Chris Gessler
– Chris Gessler, Commented Mar 21, 2012 at 9:50

Nicola Peluchetti · Accepted Answer · 2012-03-21 10:10:29Z

2

If you already have the image and want to show that in another div you could do

    $(".details").click(function (event) {
        //clone the clicked image
        var clone = $(this).clone();
        //change the dimensions
        clone.height("150px").width("150px");
        //place it in the placeholder           
        $('div#placeholder').html(clone);
    });

edited Mar 21, 2012 at 10:10

answered Mar 21, 2012 at 9:50

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BobRock Over a year ago

is it possible to get cloned image in resulted div with different dimensions ?

Nicola Peluchetti Over a year ago

@user313378 yes of course, i've updated my answer, just modify the clone :)

BobRock Over a year ago

one last thing, now when I'm have all thumb images how can on page load set first image to be cloned and show automatically on targer div. Thank you

vzwick · Accepted Answer · 2012-03-21 09:58:59Z

You're looking for jQuery's html() function.

But then again, simply returning the image file's source won't help you.

What you'd want to do (if you absolutely must return the source as such, which is a bad idea for too many reasons to list them all here) is to base64-encode the image along these lines:

function base64_encode_image ($imagefile) {
    $imgtype = array('jpg', 'gif', 'png');
    $filename = file_exists($imagefile) ? htmlentities($imagefile) : die('Image file name does not exist');
    $filetype = pathinfo($filename, PATHINFO_EXTENSION);
    if (in_array($filetype, $imgtype)){
        $imgbinary = fread(fopen($filename, "r"), filesize($filename));
    } else {
        die ('Invalid image type, jpg, gif, and png is only allowed');
    }
    return 'data:image/' . $filetype . ';base64,' . base64_encode($imgbinary);
}

Your AJAX success callback then would look like this:

success: function (large_img_src) { 
    $('#showImage').html('<img src="' + large_img_src + '"/>');
}

A much cleaner version, as mentioned by Chris Gessler, would be to fetch the large image's URL only:

function ShowLargeImage(imageId) {
    $.ajax({
        url: ('/Home/GetImage'),
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ id: imageId }),

        success: function (large_img_url) { 
            $('#showImage').html('<img src="' + large_img_url + '"/>');
        }, 
    });
}

Collectives™ on Stack Overflow

refresh div content with json result from js function

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related