CODEWITHSUNDEEP
jqueryjson
BobRock
BobRock

Reputation: 3467

refresh div content with json result from js function

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?

Upvotes: 2

Views: 1668

Answers (2)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

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);
    });

Upvotes: 2

vzwick
vzwick

Reputation: 11044

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 + '"/>');
        }, 
    });
}

Upvotes: 0

Related Questions