CODEWITHSUNDEEP
jquery
fightstarr20
fightstarr20

Reputation: 12568

jQuery - Load image into div from dynamic URL

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?

Upvotes: 0

Views: 1941

Answers (2)

Newtt
Newtt

Reputation: 6190

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/

Upvotes: 2

ynnus
ynnus

Reputation: 241

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.

Upvotes: 1

Related Questions