Converting jquery function from form submit to php array result

Question

I'm attempting to take the ImageResolver plugin and adapt it to work with a php array.

Stripping the code to this returns the image without a form:

$(function(){

    var url = $('#url').val();
    ImageResolver.resolve(url, function(image){
        if (image) {
            $('#result').html('<img src="' + image + '" alt="">');
        } else {
            $('#result').html('<h2>No image found</h2>');
        }

});
});

I want to adapt it to work within a php foreach loop. results would be replaced on the next class='result' div. IE: after the page has loaded the urls from the query, the function will parse the url and return image link if one is found. I'm guessing I need to use (each) or this(), but I can't figure it out.

can someone point me in the right direction?

you can write the js with php echo ... but im not really sure what you are asking — user557846
– user557846, Commented Apr 15, 2013 at 20:46
You're not supplying a lot of info here, but what you need to do is to combine your php code with javascript somehow. For example, you may dynamically create a javascript array in your php foreach loop. — Robin Manoli
– Robin Manoli, Commented Apr 15, 2013 at 20:50

Community · Accepted Answer · 2017-05-23 11:50:15Z

        <script src="ImageResolver/URI.min.js"></script>
        <script src="ImageResolver/ImageResolver.js"></script>



    <?
        $javascriptarray = 'var urls = [';
        $counter=0;
        foreach (array('http://www.apple.com/','http://github.com/','http://www.test.com/') as $url) 
        {
            if ($counter++ > 0) $javascriptarray .= ',';
            $javascriptarray .= '"'.$url.'"';
        }
        $javascriptarray .= '];';   
    ?>
<script>    
<?=$javascriptarray?>

//The ImageResolver will try all the resolvers one after the other
//in the order of their registration

//Resolvers that guess the image URL
ImageResolver.register(new FileExtensionResolver());
ImageResolver.register(new ImgurPageResolver());
ImageResolver.register(new NineGagResolver());
ImageResolver.register(new InstagramResolver());

//Resolvers that need extra ajax requests
ImageResolver.register(new ImgurAlbumResolver());
ImageResolver.register(new OpengraphResolver());
ImageResolver.register(new WebpageResolver());

//Some jQuery code to make the demo work
//Use a crossdomain proxy (required by some plugins)
$.ajaxPrefilter('text', function(options) {
    options.url = "http://furious-stream-4406.herokuapp.com?src=" + encodeURIComponent(options.url);
});

$(function(){


var length = urls.length,
url = null;
    for (var i = 0; i < length; i++) {
            url = urls[i];
            ImageResolver.resolve(url, function(image){
            if (image) {
                $('#result').append('<img src="' + image + '" alt=""><br>');
            } else {
                $('#result').append('<h2>No image</h2>');
                //$('#result').append('<h2>No image found for ' + url + '</h2>');
            }
        }); 
    }
}); 

</script>

Watch out cause ImageResolver.resolve() works asynchrone you can get unexpected results. Call ImageResolver.resolve() again before the previous call has finished will change url in $('#result').append('<h2>No image found for ' + url + '</h2>'); to the url of your last call by example. To prevent this you need to initialize a new Resolver in the for-loop. see: Javascript prototypes and instance creation

Collectives™ on Stack Overflow

Converting jquery function from form submit to php array result

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related