load image in iframe using jquery

Question

I need to display an image in an iframe from a dynamically generated string. The iframe's id is upload_target.

This is the code I'm using

// assign esrc and upath
$.ajax 
({  type: "POST", 
    url: "editImage.php", 
    data:  {esrc: editsource, upath: upath } ,  
    success: function(esource) 
    {   //load into iframe 
        s = esource;
        console.log(s);
        $('#upload_target').contents().find('body').html(s);
    } 
});

The file editImage.php simply returns the right file name. The console shows up the right filename, so I know there's no problem there. But nothing happens to the iframe, it just stays as blank as ever. I was able to populate the same iframe with another event, namely the submission of a form whose target was this iframe. But why isn't it working here?

I also tried $('#upload_target').attr('src',s), but I got a 406 error.

alexb · Accepted Answer · 2013-01-15 17:36:21Z

3

try

...find("body").append($("<img/>").attr("src", s).attr("title", "sometitle"));

I didn't debug this code but should work.

Edit

This code works fine for me

<iframe id="upload_target"><html><body></body></html></iframe>

<script type="text/javascript">
    $(function () {
        $('#upload_target').contents().find('body').append($("<img/>").attr("src", "http://www.bing.com/az/hprichbg/rb/NYBirds_ROW10420117938_1366x768.jpg").attr("title", "sometitle"));
    });
</script>

edited Jan 15, 2013 at 17:36

answered Jan 15, 2013 at 15:53

alexb

9816 silver badges12 bronze badges

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

Comments

user961627 · Accepted Answer · 2013-01-15 16:12:40Z

0

In the end, I just hacked a crazy fix. I don't know if it's reasonable but it works. Instead of using ajax, I just created a form with hidden inputs holding the values I needed to pass on to editImage.php and submitted that form. The iframe loaded the image fine then.

$('#imgdialog').append("<form id='imageeditform' method='post' action='editImage.php' target='upload_target'><input type='hidden' name='esrc' value='"+editsource+"' /><input type='hidden' name='upath' value='"+$('#upath').val()+"' /></form>");
$('#imageeditform').submit();

answered Jan 15, 2013 at 16:12

user961627

12.9k44 gold badges150 silver badges212 bronze badges

Collectives™ on Stack Overflow

load image in iframe using jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related