jQuery - Load image into div from dynamic URL

Question

I am trying to use jQuery to load an image into a div once a URL has been populated into an input box.

So far I have managed to get an alert to display once the input div has been populated..

<script type="text/javascript">
jQuery( document ).ready(function() {
    jQuery( ".mediafield-url" ).change(function() {
        alert( "Handler for .change() called." );
    });
}); 
</script>

Now I want to replace this alert and instead have the image display in a div pulled from the URL.

Anyone point me in the direction of an example or some reading on the jquery function I need to be looking at to achieve it?

UPDATE

Following on from the update by Newt I now have this..

function custom_admin_js() {
    echo '<script type="text/javascript">
    jQuery(\'.mediafield-url\').change(function(){
    var a = $(this).val();
    var new_img = \'<img src=\'+a+\'>\';
    jQuery(\'.your-div\').html(new_img);
});
    </script>';
}
add_action('admin_footer', 'custom_admin_js');

This is triggering in the admin section of WordPress, although it works fine in the JSFiddle, when run in the WP admin section it gives me the error...

Uncaught TypeError: undefined is not a function post-new.php?post_type=image:716
(anonymous function) post-new.php?post_type=image:716

n.event.dispatch load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:3
r.handle load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:3
n.event.trigger load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:3
e.event.trigger load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:8
(anonymous function) load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:3
n.extend.each load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:2
n.fn.n.each load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:2
n.fn.extend.trigger load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:3
send_to_editor post-new.php?post_type=image:754
(anonymous function) media-upload.php?type=file&tab=library&post_id=93:4

Any idea where I'm going wrong?

Is .mediafield-url the input box?

Newtt
– Newtt

2014-08-31 20:02:17 +00:00
Commented Aug 31, 2014 at 20:02 — Newtt
– Newtt, Commented Aug 31, 2014 at 20:02

Newtt · Accepted Answer · 2014-08-31 20:17:09Z

2

This should solve the problem:

$('.mediafield-url').change(function(){
    var a = $(this).val();
    var new_img = '<img src='+a+'>';
    $('.your-div').html(new_img);
});

Fiddle here: http://jsfiddle.net/Newtt/v0ycp7a6/2/

answered Aug 31, 2014 at 20:17

Newtt

6,21015 gold badges71 silver badges110 bronze badges

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

4 Comments

fightstarr20 Over a year ago

Thanks for this, works great in the fiddle but not when implemented on site. I have updated the original post...

Newtt Over a year ago

Which line of the added code is the error being displayed in?

fightstarr20 Over a year ago

I am struggling to work out exactly where it is finding the problem. I have added the full error from the console above

fightstarr20 Over a year ago

Ignore me, solved it! WordPress didn't like the $ being used. Changed it to jQuery and all is now working. Thanks!

ynnus · Accepted Answer · 2014-08-31 20:04:40Z

1

If you know the url of the image then just add a css attribute "background-url" to your div, for example like this:

$('yourDiv').css('background-image', 'url(http://yourUrl.de/image.jpg)').

Your browser should be able to load the image and place it as background image.

answered Aug 31, 2014 at 20:04

ynnus

2412 silver badges6 bronze badges

3 Comments

Newtt Over a year ago

This doesn't solve the problem as the url is unknown.

ynnus Over a year ago

If the user inserts the url in the input he DOES know it by reading the value of the input. Didn't wrote how to get the inputs value because I guess that should be already known.

Newtt Over a year ago

Ok, fair enough. But using background-image will need OP to specify a height and width to the div which is not possible based on the random dimensions of any URL that might be entered. To make it clearer, here's your solution: jsfiddle.net/Newtt/8w7k4ffk

Collectives™ on Stack Overflow

jQuery - Load image into div from dynamic URL

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related